|
1
2
3
4
5
6
7
8
9
10
11 12
13
14
15
16
|
NEC: より優れた CSS ソリューション< /title></p>
<p><meta name="キーワード" content=""/></p>
<p><meta name="説明" content=""/></p>
<p><meta name="ビューポート" content=" width=device-width"/></p>
<p><link rel="stylesheet" href="css/style.css"/></p>
<p><link rel="ショートカットアイコン" href="img/ favicon.ico "/></p>
<p><link rel="apple-touch-icon" href="img/touchicon.png"/></p>
<p></head></p>
<p><body></p>
<p> </p>
<p> </本文></p>
<p></html></p>
</td> </tr> </table>
<p>構造的な順序と視覚的な順序は基本的に一貫しています</p> <li>視覚的な順序で HTML 構造を上から下、左から右に記述します。 </li> <li>検索エンジンのクロールを容易にするために、重要なコンテンツを HTML 構造の順序で進めることもあります。 </li> <li>テーブル レイアウトの代わりに div を使用すると、HTML がより柔軟になり、CSS 制御が容易になります。 </li> <li>table はレイアウトには推奨されませんが、明らかな表形式でデータを表現するには、依然として table が第一の選択肢です。 </li> <p>インライン化を避けるために構造、パフォーマンス、動作を分離する</p> <li> CSS ファイルを導入し、head に配置するにはリンクを使用します。 </li> <li>スクリプトを使用してjsファイルをインポートし、本文の下部に配置します。 </li> <p>適切で簡潔なツリー構造を維持します</p> <li>各ブロックレベル要素は新しい行で始まり、各行はタブインデントを使用して整列されます (head と body の子要素はインデントする必要はありません)。余分な末尾のスペースを削除します。 </li> <li> 1 つのタブの代わりに 4 つのスペースを使用します (ほとんどのエディターで設定できます)。 </li> <li> 比較的単純な内容のテーブルの場合は、tr を 1 行で記述することをお勧めします。 </li> <li>モジュールをわかりやすくするために、大きなモジュールを空白行で区切ることもできます。 </li>
<table><tr>
<td>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p> <p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p> 16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
</td> <td>
<p><body></p>
<p><!-- サイドバーコンテンツエリア --></p>
<p><div class="m-side " ＆gt;</p><p>sideblk "＆gt;</p><p>＆lt;/div＆gt; fc02 f-fr">詳細»</a></div></p>
<p> ;/div></p>
<p> </p> <p></p>
<p>その他、以下の点を実施してください</p> <li>構造的に並べて記述できる場合は、ネストしないでください。構造がすでに視覚的および意味論的な要件を満たしている場合、追加の冗長な構造は必要ありません。 </li> <p>たとえば、<div><h2></h2></div> は、<div><div><h2></ と書かないでください。 h2>< /div></div></p> <li> <li> 1 つのタグであまりにも多くの className を参照しないでください。少ないほど良いです。 </li> <p>たとえば、次のような状況は避けてください: <div class="class1 class2 class3 class4"></div></p> <li> <li> セマンティック内部タグの場合は、className の使用を避けるようにしてください。 </li> <p>たとえば、このようなリストでは、li タグ内の itm を削除する必要があります: <ul class="m-help"><li class="itm"></li><li class=" itm"></li></ul></p> <li>HTML仕様 - コード形式 </li> <li>記述のコメント方法 copy</li> <p>タグクロージャと同様の記述方法を用い、HTMLの両箇所にスペースを入れた統一形式。コメントコピーの末尾は CSS コメントの統一形式と一致します。 </p> <h2>コメントの開始: <!-- コメントのコピー --> (コピーの両端にスペース)。 </h2> <p>コメント終了: <!-- /Comment copy --> (ラベルを閉じるのと同様に、コピーの前に「/」記号を追加します)。 </p> <p>コメントの開始のみを許可します! </p>
<li>
<li>1<li>2<table><tr>3<td>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p> <p>12</p>
<p>13</p>
<p>14</p>
<p></p>
<p>< ;!-- ヘッド --></p>
<p><div class="g-hd"></p>
</td> <!-- ロゴ --><td><p> <h1 class="m-logo"< ;a href="#">ロゴ</a></h1><p> <!-- /LOGO --></p>
<p> <!-- ナビゲーション --></p>
<p> <ul クラス="m-nav"></p><p> <li></a> ; & lt;/li & gt; </p>
<p> & lt;!-その他のナビゲーション項目-& gt; & lt;/ul & gt; </p>
<p> & lt;!-/navigation-& gt; /div></p>
<p><-/head --></p><p> </p> <p>のコメント方法コード自体</p> <p>単一行コードのコメントも、両端にスペースを入れて同じ行に残ります。複数行コードのコメントは開始と終了します。新しい行で開始し、左にインデントします。 </p> <p> </p> <p></p>1<p></p>2</td></tr>3</table><p>4</p><p>5</p><table>6<tr><td>7<p></p> <p></p><!-- <h1 class="m-logo">< = "#">ロゴ</a></h1> --></p>
<p></p><!--<p></p><ul class="m-nav"><p></p> <li><a href ="#">NAV1</a></li><p></p> <li><a href="#">NAV2</a></li><p></p></ul> <td>--><p></p>
<p></p> <p>HTML注释在IE6中的BUG</p> <li>如果两个浮动元素之间存在注释，那么可能导致布局错位或文字的BUG。</li> <li>所以，这种情况下，我们通常将注释去掉，或者索性采用模板语言（ftl、vm）的注释。</li> <p>严格的嵌套</p> <li>尽可能以最严格的xhtml strict标准来嵌套，比如内联元素不能包含块级元素等等。</li> <li>正确闭合标签且必须闭合。</li> <p>严格的属性</p> <li>属性和值全部小写，每个属性都必须有一个值，每个值必须加双引号。</li> <li>没有值的属性必须使用自己的名称做为值（checked、disabled、readonly、selected等等）。</li> <li>可以省略style标签和script标签的type属性。</li> <p>常用的标签</p> <table> <tr> <td colspan="4"><p>常见标签表</p></td> </tr> <tr> <td><p>标签</p></td> <td><p>语义</p></td> <td><p>嵌套常见错误</p></td> <td><p>常用属性（加粗的为不可缺少的或建议的）</p></td> </tr> <tr> <td><p><a></a></p></td> <td><p>超链接/锚</p></td> <td><p>a不可嵌套a</p></td> <td><p>href,name,title,rel,target</p></td> </tr> <tr> <td><p><br /></p></td> <td><p>换行</p></td> <td><p> </p></td> <td><p> </p></td> </tr> <tr> <td><p><button></button></p></td> <td><p>按钮</p></td> <td><p>不可嵌套表单元素</p></td> <td><p>type,disabled</p></td> </tr> <tr> <td><p><dd></dd></p></td> <td><p>定义列表中的定义（描述内容）</p></td> <td><p>只能以dl为父容器，对应一个dt</p></td> <td><p> </p></td> </tr> <tr> <td><p><del></del></p></td> <td><p>文本删除</p></td> <td><p> </p></td> <td><p> </p></td> </tr> <tr> <td><p><div></div></p></td> <td><p>ブロックレベルコンテナ</p></td> <td><p> </p></td> <td><p> </p></td> </tr> <tr> <td><p><dl></dl></p></td> <td><p>定義list </p></td> <td><p>ネストできるのはdtとddのみです</p></td> <td><p> </p></td> </tr> <tr> <td><p><dt></dt></p></td> <td><p>定義リスト内の定義用語</p></td> <td><p>は、複数のddに対応する親コンテナとしてdlのみを使用できます</p></td> <td><p></p></td> </tr> <tr> <td><p> < ;/form></p></td> <td><p>form</p></td> <td><p> </p></td> <td>
<p>アクション、ターゲット、メソッド、名前</p> </td> </tr>
<tr>< ;h1><td><p> </p></td>タイトル<td><p> </p></td> h1 から h6 まで、ブロック レベルの要素をネストすることはできません <td><p> </p></td> <td>
<p> </p> </td> </tr>
<tr><iframe></iframe><td><p> </p></td> Web ページを埋め込みました<td><p></p></td>
<td><p></p></td> Frameborder,width,height,src,scrolling,name <td>
<p> </p> </td> </tr>
<tr>< img /> <td><p>各種フォームコントロール</p></td> <td><p> </p></td> <td><p>type,name,value,checked,disabled,maxlength,readonly,accesskey </p></td> <td> <p> </p></td><label></label></tr>
<tr> <td><p>ラベルは入力要素のラベルを定義します</p></td> <td>
<p> </p> </td> <td><p> for</p></td> <td> <p> </p>
</td><li></ li></tr>
<tr> <td><p>リスト項目</p></td> <td><p>親コンテナとして使用できるのはulまたはolのみです</p></td> <td><p> </p></td> <td> <p> </p>
</td><link /> ;</tr><tr> <td> <p>引用スタイルまたはアイコン</p></td> <td><p>要素はネストできません</p></td> <td><p>type,rel,href</p></td> <td> <p> </p></td><meta /></tr>
<tr> <td><p> ドキュメント情報 </p></td> <td><p> head のみに使用</p></td> <td> <p>コンテンツ、http 相当、 name</p>
</td> <td> <p> </p>
</td><ol></ol></tr>
<tr> <td><p>順序付きリスト</p></td> <td><p> は li のみをネストできます</p></td> <td> <p> </p> </td>
<td><オプション></オプション><p> </p> </td>
</tr>select のオプション<tr>
<td> <p></p>select のみ</td>
<td> <p></p>value,selected,disabled</td>
<td> <p> </p> </td>
<td><p> </p><p></p> </td> </tr>段落<tr>
<td> <p></p>ブロックをネストできません-level 要素</td>
<td> <p></p> </td>
<td> <p> </p> </td>
<td><script></script><p></p> </td>
</tr>引用スクリプト<tr>
<td> <p></p>要素をネストすることはできません</td>
<td> <p> </p>タイプ、ソース</td>
<td> <p> </p> </td>
<td> <select></select><p></p> </td>
</tr>リストボックスまたはドロップダウンボックス<tr>
<td> <p></p>はオプションまたはoptgroupのみをネストできます</td>
<td> <p></p> name,disabled,multiple</td>
<td> <p> </p> </td>
<td>< ;スパン><p></p> </td>
</tr>インラインコンテナ<tr>
<td> <p></p> </td>
<td> <p></p> </td>
<td> <p> </p> </td>
<td><strong></strong> <p>強調テキスト</p>
</td> </tr>
<tr> <td><p> </p></td> <td>
<p> </p> </td> <td><p><style></style></p></td> <td>
<p>引用スタイル</p> </td> </tr>
<tr>要素をネストすることはできません<td><p> </p></td>タイプして、<td><sup></sup>を押してください。 <p></p> </td>
<td>マークアップ<p></p> </td>
<td> <p></p> </td>
</tr> <tr>
<td> <p> </p> </td>
<td><table></table><p></p> </td>
<td>Table<p></p> </td>
<td>テーブル要素のみネスト可能ed <p></p> </td>
</tr>幅、整列、背景、セルパディング、セル間隔、概要、境界線<tr>
<td> <p> </p> </td>
<td><tbody></tbody><p></p> </td>
<td>テーブル本体<p></p> </td>
<td>テーブルのみ<p></p> </td>
</tr> <tr> <td> <p> </p> </td>
<td><td>< ;/ td><p></p> </td>
<td>テーブル内のセル<p></p> </td>
<td>tr<p></p>のみ</td>
</tr>colspan,rowspan<tr>
<td> <p> </p> </td>
<td><textarea></textarea> <p></p> </td>
<td>複数行のテキスト入力コントロール <p> </p>
</td>
<td><p></p></td> <td><p>name,accesskey,disabled,readonly,rows,cols</p></td> </tr> <tr>
<td><tfoot></tfoot><p></p> </td>
<td>テーブルフッター<p></p> </td>
<td>テーブルのみ<p> </p>
</td>
<td><p></p></td>
</tr> <tr>
<td><th></th><p></p> </td>
<td>テーブル内のタイトルセル<p></p> </td>
<td>tr<p></p>のみ </td>
<td>colspan,rowspan<p></p> </td> </tr> <tr>
<td><ヘッド>ヘッド><p></p> </td>
<td>テーブルヘッダー<p></p> </td>
<td>テーブルにのみ使用<p></p> </td>
<td> <p></p> </td> </tr> <tr>
<td><title> | ドキュメントタイトル |
頭のみ |
|
- コンテンツのセマンティクス コンテンツ タイプによって、セマンティック タグの使用が決定されます
| Web ページ内の特定の種類のコンテンツは、特定の特定の HTML タグによって保持される必要があります。これは、コンテンツに基づくセマンティック HTML 構造とよく呼ばれるものです。 「リソースベース」コンテンツのアクセシビリティと使いやすさを強化します | img への alt 属性の追加、オーディオへのコピーとリンクの追加など、リソースベースのコンテンツに説明的なコピーを追加します。 「非表示」コンテンツのアクセシビリティを強化します | 背景画像のテキストは同時に HTML で記述し、CSS を使用して非表示にします。これは、検索エンジンがコンテンツをクロールするのに有益であり、また、 CSS が失敗した場合に使用されます。内容を参照してください。 エンティティを適切に使用します |
ブラウジング解析エラーを避けるために、HTML と同じ構文の文字をエンティティに置き換えます。 
