HTMLタグと基本要素について...ログイン

HTMLタグと基本要素についての学習のまとめ

1. HTML の要素とタグ
要素は、1 つまたは 2 つのタグによって定義される包括的な範囲です。ラベルは、左側と右側にそれぞれ小なり記号 (<) と大なり記号 (>) が付いている文字列です。開始タグは、スラッシュ (/) で始まらず、許可される属性と値のペアのリストを含むタグを指します。終了タグは、スラッシュ (/) で始まるタグです。例:
<body><!—開始タグ-->
<font color=”read”>Connection</font> ここで、color=”read”は属性と値のペアです。 。 「接続」はコンテンツです ->
</body><!—終了タグ -->

空要素 <br> ;hr color=”blue”> コンテンツを含む要素<title>接続</title> コンテンツと属性を含む要素<font color=”read”>接続<



<html>//開始シンボル。ブラウザがない場合でも解析できます


<head>//ドキュメントのヘッダーを開始します

<title> My name is cauthy!//ドキュメントのタイトルを開始します </title> ;//ドキュメントタイトルの終了 </head>//ドキュメントのヘッド終了
<body color="red">//ドキュメント本文の開始
Hello World!//ブラウザによって表示されるコンテンツ

</body>//ドキュメント本文の終了

</html>//HTML ドキュメントの終了



3. 段落コントロールに関連するタグ


<palign=”#”>機能は段落を作成することです。 align 属性はセグメントの配置を示し、左右揃えにすることができます

は改行を示します 関数: 改行を示します
関数: 水平線を挿入し、属性は色を示します緑色で読むこともできます。または #ffoooo などの 16 進数を使用してください

<html> 
<head>
<title>静夜思</title>
</head> 
<body> 
<p align="center">静夜思</p>
<hr color="#ffoooo"> 
<p align="center">床前明月光,疑是地上霜。举头望明月,低头思故乡。</p> 
</body> 
</html>

4. テキスト表示に関連するタグ
<center>…</center>: テキストを中央に配置します
<hn align=””>…<hn>: 文書を示すために使用しますtitle、n は 1 ~ 6 の整数です。1 は最大のタイトルを表し、属性 align はタイトルの配置を示します。タイトルの配置は中央、左、右
… </ font>: フォントの設定に使用されます。size はフォント サイズを表します。n は 1 ~ 7 の整数で、数値が大きいほど、表示されるフォントも大きくなります。
<b>…</b>: テキストを太字に設定します
<i>…</i>: テキストを斜体に設定します

5. 特殊文字の入力方法
HTML ドキュメントでは、非改行スペース、キャリッジ リターン、HTML 予約語、キーボードに存在しない一部の文字などの記号はすべて引用符で囲んで入力する必要があります。 HTML には 2 種類の参照があります。参照とエンティティ参照。
文字参照と実体参照は両方とも & で始まりセミコロン (;) で終わります。文字参照を使用している場合は、& の後に # を追加し、その後に必要な文字の 10 進コードまたは 16 進コード (ISO 10646 文字セットの文字エンコーディング) を追加する必要があります。実体参照を使用している場合は、& の後に文字ニーモニックを記述します。
HTMLでは全角スペースでスペースを入力できます。

6. HTML 内のコメント <!--これはコメントの内容です-->


7. 番号付きリストを作成します <li> タグは番号付きリストを作成します。 type 属性を使用して、番号付けシステムのタイプ、A (A、B、C)、a (a、b、c)、I (III III)、i (i ii iii) 1 (1、2、 3) デフォルト
開始シーケンス番号を設定するには、<ol> タグの start 属性を使用します。
リスト内の番号順を変更するには、<li> タグの value 属性を使用します。
<ul> タグと <li> を使用して箇条書きリストを作成します。 Ul の type 属性は、disc (実線の円)、square (実線の四角形)、circle (空の円) です。 署名なしのリストを作成するには、<dd> タグを使用します。 <dt> インデントされたリストを作成します。
<dl> 要素で <dt> タグと <dd> タグの両方を使用して、用語のリストを作成します。用語リストのリスト項目は、用語とその説明の 2 つの部分で構成されます。用語は <dt> タグで指定され、説明は <dd> タグで指定されます。

<ol start="10"type="I">
<li>数学
<livalue="20">中国語
<li>物理
</ol> Type = "Circle"&lt; li&gt; lt; li&lt; li&gt;
/table>、ここで border はテーブルの幅で、デフォルトは 0 で、テーブルの幅が表示されないことを意味します。
<caption>…</caption>: テーブルのタイトルを定義するために使用されます
<tralign=”” valign=”” >…</br>: 属性 align は、この行の水平方向の配置を指定します, leftcenter right .valign には、top、middle、bottom の垂直方向の配置を指定できます
<th>…</th>: テーブルヘッダーの設定に使用されます
<td>…</td> : セルを定義するために使用されます

<html> 
<head><title>表格</title></head> 
<body> 
<table border="5"align="center" bgcolor="bule"> 
<caption>考试成绩</caption> 
<tr align="center"valign="middle"> 
<th>语文</th> 
<th>数学</th> 
<th>英语</th> 
</tr> 
<tr align="center"valign="middle" > 
<td>80</td> 
<td>70</td> 
<td>60</td> 
<tr align="center"valign="middle" > 
<td>60</td> 
<td>70</td> 
<td>80</td> 
</table> 
</body> 
</html>

9. フォームの作成
<form method=”get or post ”action=”URL”>: 属性メソッドは、サーバーにデータを送信するときに使用される HTTP メソッドを指定します。投稿方法。 Get はデフォルトのメソッドです。get メソッドを使用してフォームが送信されると、送信されたデータは URL (属性アクションで指定) の末尾に追加され、URL の一部としてサーバーに送信されます。 reg.asp としてのアクション。フォームが送信されると、ブラウザーのアドレスに http://localhost:8080/reg.asp?user=zhangsan&pwd=1234 が表示されます。
Post メソッドは、メニューをデータ ブロックとしてサーバーに送信します。どのメソッドが使用されても、データのエンコーディングは同じです。形式は次のとおりです: name1=value1&name2=value2
属性 action は、フォームを処理するスクリプトのアドレスを指定します。フォームがサーバーに送信された後、誰がそれを処理するか、アクションでプロセッサの URL を指定します。 : type は、作成するコントロールのタイプを指定します。 name 属性は、コントロールの名前を指定するために使用されます。フォームを処理するサーバー側スクリプトは、名前と値のペアで表されるフォーム データを取得し、対応する値を取得できます。 Name プロパティはフォームには表示されません。size プロパティは、フォーム内のコントロールの初期幅を設定するために使用されます。 value 属性は、コントロールの初期値を指定します。
単一行テキスト入力コントロール (type="text")
送信ボタン (type="submit")
リセットボタン (type="rest") パスワード入力コントロール (type="password")
ラジオボタン (type=" radio”) チェックボックス (type="checkbox") 隠しコントロール (type="hidden")
複数行のテキスト入力を作成<textarea name=”” rows=””cols=”” >…</textarea> ;次の例では、フォーム

<html> 
<head>
<meta charset="utf-8"> 
<title>表单</title>
</head> 
<body> 
<form method="get"action=""> 
<table border="0"> 
<tr valign="middle"></tr> 
<td>用户名:</td> 
<td><input type="text" size="20" name ="user"></td> 
<tr align="left" valign="middle"></tr> 
<td>密码:</td> 
<td><input type="password"></td> 
<tr align="left" valign="middle"> </tr> 
<td>兴趣</td> 
<td><input type="checkbox" name="interest" value="football">足球 
<input type="checkbox" name="interest"value="basketball">篮球 
</td> 
<tr align="left"valign="middle"></tr> 
<td>性别</td> 
<td><input type="radio" name="sex" checked value="1">男 
<input type="radio" name="sex" value="0">女 
</td> 
</select></td> 
<tr align="left" valign="middle"></tr> 
<tdvalign="top">个人简介:</td> 
<td><textarea name="personal" rols="5" cols="20">个人简介</textarea>
</td> 
<tr align="left"valign="middle"></tr> 
<td></td> 
<td><input type="hidden" value="001" name="id"></td> 
<tr align="left" valign="middle"></tr> 
<td></td> 
<td><input type="reset" value="重置"><input type="submit" value="提交"></td> 
</table> 
</form> 
</body> 
</html>

10 を制御します。 form .html”>現在のディレクトリ</a> <ahref=../”form.html”>現在のディレクトリの上位ディレクトリ</a> <ahref=”E:/ /form. html”>絶対パス</a> <ahref=”http://www.baidu.com”>ワールドワイドウェブアドレス</a> 画像を埋め込む


<img src="URL" alt="置換テキスト" height="42" width="42">


次のセクション

<html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <form method="get"> <table border="0"> <tr valign="middle"></tr> <td>用户名:</td> <td><input type="text" size="20" name ="user"></td> <tr align="left" valign="middle"></tr> <td>密码:</td> <td><input type="password"></td> <tr align="left" valign="middle"> </tr> <td>兴趣</td> <td><input type="checkbox" name="interest" value="football">足球 <input type="checkbox" name="interest" value="basketball">篮球 </td> <tr align="left" valign="middle"></tr> <td>性别</td> <td><input type="radio" name="sex" checked value="1">男 <input type="radio" name="sex" value="0">女 </td> </select></td> <tr align="left" valign="middle"></tr> <tdvalign="top">个人简介:</td> <td><textarea name="personal" rols="5" cols="20">个人简介</textarea> </td> <tr align="left" valign="middle"></tr> <td></td> <td><input type="hidden" value="001" name="id"></td> <tr align="left" valign="middle"></tr> <td></td> <td><input type="reset" value="重置"><input type="submit" value="提交"></td> </table> </form> </body> </html>
コースウェア