HTML コード作成ガイド

共通コンベンションタグ

自己終了タグ。閉じる必要はありません (例: img input br hr など)。
オプションの終了タグ。閉じる必要があります (例: </li> または </body>)。
タグの数を最小限に抑えます。

XML/HTML コードコンテンツをクリップボードにコピー

<画像 src = "画像/google.png" alt = "Google" >
<入力タイプ= "テキスト" 名前= "タイトル" >
< ul >
< li >スタイル</ li >
< li >ガイド</ li >
</ ul >
<スパンクラス= "アバター" >
<画像 src = "..." >
</スパン>
<画像クラス= "アバター" src = "..." >

クラスとID

クラスの名前は、プレゼンテーションではなく、機能やコンテンツに基づいて付ける必要があります。
class と id の文字は小文字です。複数の単語で構成される場合は、ハイフンで区切られます。
一意の ID を JavaScript フックとして使用し、スタイル情報のないクラスを作成しないようにしてください。

XML/HTML コードコンテンツをクリップボードにコピー

< div クラス= "j-hook 左 contentWrapper" > </ div >
< div id = "Jフック" class = "サイドバーコンテンツラッパー" > </ div >

属性順序

読みやすさを確保するために、HTML 属性は特定の順序で表示する必要があります。

id
クラス
名前
データ-xxx
src、for、type、href
タイトル、代替
aria-xxx、役割

XML/HTML コードコンテンツをクリップボードにコピー

< id = "..." クラス= "..." データモーダル= "トグル" href = "###" > </ a >
<入力クラス= "フォームコントロール" タイプ= "テキスト" >
<画像 src = "..." alt = "..." >

引用符

属性定義では二重引用符が一貫して使用されます。

XML/HTML コードコンテンツをクリップボードにコピー

<スパン id = 'Jフック' クラス=テキスト> Google </ span >
<スパン id = "Jフック" クラス= "text" > Google </ span >

bネスト

a は div をネストすることを許可しません。この制約はセマンティックネスト制約に属します。これと異なるのは厳密なネスト制約です。たとえば、a は a をネストすることを許可しません。

厳密なネスト制約はすべてのブラウザで許可されているわけではありません。一方、セマンティックなネスト制約は、ほとんどの場合、許容度の高いブラウザによって処理され、生成されるドキュメントツリーは互いに異なる場合があります。

セマンティックネスト制約

<li> は <ul> または <ol> の下で使用されます。
<dd>、<dt> は <dl> の下で使用されます。
<thead>、<tbody>、<tfoot>、<tr>、<td> は <table> の下で使用されます。

厳格なネスト制約

インラインレベル要素には、テキストまたは他のインラインレベル要素のみを含めることができます。
<a>、<button>、<select> などのインタラクティブ要素は <a> 内にネストできません。
<div>、<h1>～<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form> などのブロックレベル要素は、<p> 内にネストできません。

ブールプロパティ

HTML5 仕様では、disabled、checked、selected などの属性に値を設定する必要はありません。

XML/HTML コードコンテンツをクリップボードにコピー

<入力 type = "text"無効>
<入力タイプ= "チェックボックス" 値= "1"チェック済み>
<選択>
<オプション値= "1"選択済み> 1 </オプション>
</選択>

セマンティック
CSS のない HTML は、UI システムではなくセマンティックシステムです。

通常、各ラベルには意味があります。いわゆる意味とは、衣服がコート、パンツ、スカート、下着などに分けられ、それぞれに対応する機能と意味があることを意味します。だから下着を首に巻くことはできないのです。 -- 痕跡

さらに、セマンティック HTML 構造は機械 (検索エンジン) が理解するのに役立ち、複数の人が共同作業を行うときに開発者の意図をすぐに理解できます。

共通タグセマンティクス

ラベル	セマンティクス
<p>	段落
<h1><h2><h3>...	タイトル
<ul>	順序なしリスト
<オル>	順序付きリスト
<引用>	ブロック引用
<引用>	一般引用
<b>	大胆なスタイル
<強い>	強調するために太字にする
<i>	スタイルに合わせて傾ける
<em>	傾けてコンテンツを強調する
コード	コード識別
略語	略語

例

構築するページを、タグの機能と意味に対応するセマンティクスを持つ本として考えます。

書籍タイトル: <h1>
本の章タイトル: <h2>
セクション内の記事タイトル: <h3>
サブタイトル/字幕: <h4> <h5> <h6>
章の段落: <p>

頭
文書タイプ

すべての HTML ページの最初の行に標準モード宣言を追加すると、すべてのブラウザで一貫した動作が保証されます。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html >
言語属性
< html lang = "zh-Hans" >
< html lang = "zh-cmn-Hans" >
< html lang = "zh-cmn-Hant" >
< html lang = "ja" >

文字エンコーディング

ファイル形式として BOM なしの UTF-8 エンコードを使用します。
文字エンコーディングを指定する meta 要素は、 head 要素の最初の直接の子要素である必要があります。

XML/HTML コードコンテンツをクリップボードにコピー

<html>
<ヘッド>
<メタ文字セット= "utf-8" >
......
</ヘッド>
<本文>
......
</本文>
</html>

IE互換モード

最新バージョンの IE および Chrome カーネルの使用を優先します。

XML/HTML コードコンテンツをクリップボードにコピー

<メタ http-equiv = "X-UA 互換" コンテンツ= "IE=edge,chrome=1" >

SEO最適化

XML/HTML コードコンテンツをクリップボードにコピー

<ヘッド>
<メタ文字セット= "utf-8" >
<メタ http-equiv = "X-UA 互換" コンテンツ= "IE=edge,chrome=1" >
< title >スタイルガイド</ title >
<メタ name = "キーワード" content = "キーワード" >
<メタ名前= "説明" content = "あなたの説明" >
<メタ名前= "著者" content = "著者,メールアドレス" >
</ヘッド>

ビューポート

ビューポート: 一般的に、ツールバーやタブなどを除いたブラウザウィンドウのコンテンツ領域のサイズを指します。
幅: ブラウザの幅、出力デバイスでのページの表示領域の幅。
device-width: デバイスの解像度の幅、出力デバイス画面の表示幅。
initial-scale: 初期スケーリング比率。
最大スケール: 最大ズーム比。
モバイルデバイス向けに最適化し、表示領域の幅と初期ズーム比を設定します。

XML/HTML コードコンテンツをクリップボードにコピー

<メタ name = "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール=1.0" >

iOSアイコン

アップルタッチアイコンの画像は、角が丸くなり、ハイライトされて自動的に処理されます。
apple-touch-icon-precomposed は、システムによる効果の自動追加を無効にし、元のデザインを直接表示します。

XML/HTML コードコンテンツをクリップボードにコピー

<リンク rel = "アップルタッチアイコン事前合成" href = "/apple-touch-icon-57x57-precomposed.png" >
<リンク rel = "アップルタッチアイコン事前合成" href = "/apple-touch-icon-72x72-precomposed.png" サイズ= "72x72" >
<リンク rel = "アップルタッチアイコン事前合成" href = "/apple-touch-icon-114x114-precomposed.png" サイズ= "114x114" >
<リンク rel = "アップルタッチアイコン事前合成" href = "/apple-touch-icon-144x144-precomposed.png" サイズ= "144x144" >