Htmlで一般的に使用されるタグと属性（Html5を含む）

共通のタグと属性

基本ラベル

<title></title>タグは、ドキュメントのタイトルを定義するために使用され、すべてのHTMLドキュメントで必要です。内部のタイトルコンテンツはブラウザのタブページに表示されます。これは検索エンジンのランキングに影響を与える重要なコンテンツです。
<style></style>HTMLドキュメントのスタイルを定義するタグです。ページの内部スタイルシートを作成するために使用されます。ドキュメントには複数のスタイルタグを含めることができ、任意の位置に書き込むことができます（通常はheadタグに書き込まれます）。
<script></script> タグには、JavaScriptステートメントを直接含めることも、src属性を介して外部jsファイルを指すこともできますが、それらを混在させることはできません（src属性を使用するスクリプトタグは空である必要があります）。スクリプトタグは、htmlファイルのどこにでも配置できます。
<link />タグは外部スタイルシートをリンクするために使用され、ヘッドタグ内でのみ使用できます。href属性は、cssスタイルファイルの場所を指定するために使用されます。

<h1>~<h6>タイトルタグは、検索エンジンでのページのランキングに影響します。使用するときは、特定のレベルをスキップしないでください。たとえば、h3からh5に直接ジャンプします。ただし、より高いレベルにジャンプすることは許可されています。
<p></p> タグは段落を定義するために使用されます。
<a />ラベルは、ハイパーリンクを定義するために使用されます。最も重要な属性は、リンクターゲットを指定するために使用されるhref属性（必須属性）です。ターゲット属性は、新しいページを開く位置の属性値が_blank、_parent、_self、_top、framenameであることを指定するために使用されます。
<img />タグは、htmlページの画像を定義するために使用されます。src属性は表示される画像のURLを指定し、alt属性は画像の置換テキスト（画像が正しくロードされていないときに表示されるテキスト）を指定します。
<em></em>ラベルは強調されたテキストを定義し、斜体で表示されます。
<strong></strong>また、太字で表示される、より強調されたテキストを定義するためにも使用されます。
<del></del> 削除されたテキストを定義します。
<ins></ins> ドキュメントに挿入するテキストを定義します。
<span></span>タグは、ドキュメント内のインライン要素をグループ化するために使用されます。
<div></div>ドキュメント内のセクションまたはセクションを定義するために使用できます。これは、セマンティクスのないブロックレベルの要素です。
<ul></ul>順序付けされていないリストを定義すると、リスト項目はli要素に含まれます。
<ol></ol>順序付きリストを定義すると、リスト項目はli要素に含まれます。
<dl></dl>カスタムリストを定義し、<dt></dt>（リストアイテムの定義）および<dd></dd>（リストアイテムの説明）と組み合わせて使用します。

フォームラベル

<table></table> ラベルはテーブルを定義するために使用されます。
<tr></tr>ラベルはテーブルの行を定義するために使用され、<table></table>ラベルにネストする必要があります。
<td></td>テーブル内のセルを定義するために使用され、<tr></tr>ラベルにネストする必要があります。
htmlフォームヘッダー部分（略称テーブルヘッド）で表されるタグヘッダーセルは、通常、テーブルの最初の行または最初の列にあり、違いに関するタグ内のテキストは太字の中央に表示されます。 <th></th>
ラベルのテーブル構造：テーブルが非常に長い場合、テーブルのセマンティクスをより適切に表すために、テーブルは2つの部分に分割され、タグテーブルを使用してそれぞれヘッドフォームの本体を形成します。タグテーブルヘッド領域を示し、ラベルはテーブルのメインエリアを表します。 <thead> <tbody>

テーブルの共通属性

border：テーブルのセルに境界線があるかどうかを指定します。デフォルトではありません。
cellspacing：セル間のスペースを設定します。デフォルトは2pxです。
cellpadding：セルの端とそのコンテンツの間のスペースを指定します。デフォルトは1pxです。
rowspan：行間でセルを結合します（セルを上下に結合します）。
colspan：列間でセルを結合します（セルを左右に結合します）。

<table border="5px" cellpadding="10px" cellspacing="20px" >
	<tr>
		<td rowspan="2">上下合并</td>
		<td colspan="2">左右合并</td>
		<!--左右单元格合并后需要将(1,3)这个单元格去掉 --> 
	</tr>
	<tr>
	<!--上下单元格合并后需要将(2,1)这个单元格去掉 --> 
		<td>（2，2）</td>
		<td>（2，3）</td>		
	</tr>
</table>

フォームラベル

フォームフィールド

完全なフォームは通常、フォームフィールド、フォームコントロール（つまり、さまざまなフォーム要素）、およびプロンプト情報の3つの部分で構成されます。html<form></form>タグでは、ユーザー情報の収集と送信を可能にするフォームフィールドを定義し、そのスコープ内のタグ情報のフォーム要素がサーバーに送信されます。フォームフィールドでは、さまざまなフォーム要素を定義できます。これらのフォーム要素は、ユーザーがフォームのコンテンツを入力または選択できるようにするコントロールです。

<form></form> ラベルの属性：

アクション：フォームデータを受信して処理するサーバープログラムのURLアドレスを指定するために使用されます（必須属性）。
method：フォームデータの送信方法を設定するために使用されます。その値はgetまたはpostです（必須属性）。
name：同じページ上の複数のフォームフィールドを区別するためにフォームの名前を指定するために使用されます。

フォームコントロール

<input></input>タグは、ユーザー情報を収集するために使用されます。type属性の値に応じて、入力フィールドには多くの形式があります。入力フィールドには、テキストフィールド、チェックボックス、マスク後のテキストコントロール、ラジオボタン、ボタンなどがあります。

タイプの属性値	説明
ボタン	クリック可能なボタンを定義します（ほとんどの場合、JavaScriptを介してスクリプトを起動するために使用されます）
チェックボックス	チェックボックスを定義する
パスワード	パスワードフィールドを定義します。このフィールドの文字はマスクされます
無線	ラジオボタンを定義する
リセット	リセットボタンを定義します。リセットボタンはフォーム内のすべてのデータをクリアします
参加する	送信ボタンを定義します。送信ボタンはフォームデータをサーバーに送信します
画像	画像の形で送信ボタンを定義します
ファイル	ファイルアップロード用の入力フィールドと「参照」ボタンを定義します。
テキスト	単一行の入力フィールドを定義します。ユーザーはそのフィールドにテキストを入力できます。デフォルトの幅は20文字です。

<select></select>ページ内で、ユーザーが選択できるオプションが複数ある場合、およびページスペースを節約するために<select>、ドロップダウンリストコントロールを定義するタグを使用できます。
```
 <select>
 	<option value="city1" name="option1">选项1</option>
 	<option value="city2" name="option2">选项2</option>
 	...
 </select>
```
<lable></lable>タグはフォーム要素をバインドするために使用され<lable>、タグ内のテキストをクリックすると、ブラウザは自動的にカーソルを移動して、ユーザーエクスペリエンスを向上させるために対応する要素を選択または形成します。
```
<lable for="man">男</lable>

<input type="radio" name="sex" id="man" value="man"/>
<lable for="woman">女</lable>
<input type="radio" name="sex" id="woman" value="woman"/>
```

4.ラベルは、複数行のテキスト入力コントロールを定義するために使用されます。 <textarea></textarea>

フォーム要素の属性
1. name属性はフォーム要素の名前を表し、ラジオボタンとチェックボックスは同じ名前値である必要があります。
2. value属性は、入力要素の値を指定します。
3. checked属性は、この入力要素が最初にロードされたときにチェックする必要があることを指定します（チェックボックス、ラジオボタン）。
4. selected属性は、ドロップダウン無線メニューがロードされたときにデフォルトで選択されるオプションを指定します。

Naneとvalueは、すべてのフォーム要素に必要な属性値であり、主にバックエンド担当者によって使用されます。

3つの一般に使用されるグローバル属性
       1. id属性：指定するために使用される独特のID HTML要素を、id属性が変更にJSやCSSを通じて、リンクのアンカーのために使用されるか、または指定されたIDを持つ要素のスタイルを追加することができます。
       2.クラス属性：要素のクラス名を定義するために使用されます。1つの要素に複数のクラス名を設定することも（スペースで区切る）、複数の要素に同じクラス名を設定することもできます。
       3. title属性：要素のツールチップテキストを指定するために使用されます（マウスを移動すると表示されます）。

H5の新しい一般的に使用されるタグ

ビデオタグ：開始タグと終了タグの間にテキストコンテンツを配置して、古いブラウザがタグをサポートしていない情報を表示できるようにすることができます。 <video></video>

共通の属性
- ポスター= "imgurl"：読み込みを待機している画面の画像。
- src = "url"：ビデオアドレス。
- loop = "loop"：ループ再生属性。
- muted = "muted"：再生属性をミュートします。
- Controls = "controls"：コントロール属性を再生します。
- autoplay = "autoplay"：自動再生属性。

オーディオタグ：開始タグと終了タグの間にテキストコンテンツを配置して、古いブラウザがこのタグをサポートしていない情報を表示できるようにすることができます。 <audio></audio>

共通の属性
- src = "url"：オーディオアドレス
- loop = "loop"：ループ再生属性
- muted = "muted"：ミュートされた再生属性
- コントロール= "コントロール"：再生コントロールのプロパティ
- autoplay = "autoplay"：自動再生属性

<header></header>：Webページの特定の部分のヘッダーを定義します（ページには複数のヘッダータグが存在する場合があります）。
<section></section>：ドキュメントの特定の領域を定義します。section要素は、ドキュメントまたはアプリケーションの一般的なセクションを表します。これは通常、同様のテーマを持つコンテンツのグループであり、通常はテーマが含まれています。
<nav></nav>：ナビゲーションタブ。ドキュメント内の重要なリンクグループに使用されます。ページに一連のリンクを挿入することは、それらがnavタグに含まれている必要があることを意味するわけではありません。一連のリンクにnavタグを追加するかどうかは、コンテンツの構成によって異なります。少なくとも、Webサイトのグローバルナビゲーション（ユーザーがWebサイトの主要部分にジャンプできるナビゲーション）は、navとしてマークする必要があります。
<article></article>：コンテンツタグ;独立したコンテナ内の記事要素テーブルデザインドキュメント、ページ、アプリケーション、またはWebサイト、原則として、独立して配布または再利用できます。フォーラムの投稿、雑誌の記事、ユーザーが送信したコメント、ブログエントリ、インタラクティブなウィジェットやガジェット、その他の独立したコンテンツアイテムにすることができます。
<footer></footer>：Webページの一部の終わりを定義します（ページに複数のフッタータグが存在する場合があります）。
<asider></asider>：サイドバータグを使用して、メインコンテンツとの関連性が低く、独立して存在できるコンテンツの一部をマークできます（サイドバー、広告、ブログの友情リンク、重要な引用、またはニュースサイトの関連記事へのリンクのセット、など）。
<main></main>：ページのメインエリアを定義します。ページのメインコンテンツを表すコンテンツをメインタグに含めると、ページは1回しか表示できません。
<figure></figure>：独立したストリームコンテンツ（画像、アイコン、写真、コードなど）を指定するために使用されます。要素内のコンテンツはメインコンテンツに関連している必要があり、要素の位置はメインコンテンツから独立しています。削除しても、ドキュメントフローに影響はありません。
<figcaption></figcaption>：figure要素のタイトルを定義するために使用されます。これは、最初または最後の子要素の位置に配置する必要があります。たとえば、質問シートのタイトル。

<address></address>：ドキュメントの作成者/所有者の連絡先情報を定義するために使用されます。bodyタグにある場合は、ドキュメントの作成者/所有者の連絡先情報を意味します。articleタグにある場合は、記事の著者/所有者の連絡先情報。
たとえば、htmlを使用すると、ページ全体を次のようにレイアウトできます。

	<body>
			<header>
				<nav>&lt;nav&gt;</nav>
				&lt;header&gt;	
			</header>		<!--头部标签一般都有整个页面的主导航栏-->
			<article>
				&lt;article&gt;
				<section>
					&lt;section&gt;
				</section>
			</article>
			<aside>
				&lt;aside&gt;
			</aside>
			<footer>
				&lt;footer&gt;
				<address>
					&lt;address&gt;
				</address>
			</footer>
		</body>

ここに画像の説明を挿入

注：これらの新しいセマンティックタググループが検索エンジン用に設計されている場合。セマンティック値がないため、最後のバックアップコンテナとしてDivを使用する必要があります。ほとんどの場合、divの代わりにheader、footer、main（1回のみ使用）、article、section、aside、navを使用する方が適切です。ただし、意味的に適切でない場合は、divの使用を回避するために上記の要素を使用する必要はありません。

H5の新しい入力フォームアイテムのタイプと新しい属性

タイプ属性値	説明
Eメール	ユーザーの入力は電子メール形式である必要があります。
tel	ユーザー入力は携帯電話番号である必要があります。
探す	検索文字列を入力するためのテキストフィールドを定義します。
数	数値を入力するためのフィールドを定義します。
日付	日付管理を定義します（年、月、日を含み、時間を除く）。

共通属性を追加	説明
required = "必須"	定義されたフォームアイテムのコンテンツを空にすることはできません。
placeholder = "プロンプトテキスト"	デフォルト値がある場合、フォームのプロンプト情報は表示されません。
オートフォーカス= 'オートフォーカス "	オートフォーカスのプロパティ。
オートコンプリート=「オフ/オン」	履歴タイプレコードはデフォルトで開かれます。フォームフィールドに配置する必要があり、同時にname属性が追加されます。
複数=「複数」	複数のファイルを送信することを選択できます。

＃扬尘/ 2020/12/18 /