NEC html仕様書_html/css_WEB-ITnose-htmlチュートリアル-php.cn

HTML 仕様 - 全体構造

HTML インフラストラクチャ

ファイルは先頭行「」で始まる必要があります。「」を使用することをお勧めします。

ドキュメントのエンコード文字セットは宣言され、ファイル自体のエンコードと一致している必要があります。UTF-8 エンコードを使用することをお勧めします。

ページのコンテンツとニーズに応じて、適切なキーワードと説明を入力します。

ページタイトルは非常に重要かつ欠かせない項目です。

ブラウジング解析エラーを避けるために、HTML と同じ構文の文字をエンティティに置き換えます。

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>	ドキュメントタイトル	頭のみ

テーブル行	テーブルまたはヘッド、tbody、tfootにネストされています
- コンテンツのセマンティクスコンテンツタイプによって、セマンティックタグの使用が決定されます	Web ページ内の特定の種類のコンテンツは、特定の特定の HTML タグによって保持される必要があります。これは、コンテンツに基づくセマンティック HTML 構造とよく呼ばれるものです。「リソースベース」コンテンツのアクセシビリティと使いやすさを強化します	img への alt 属性の追加、オーディオへのコピーとリンクの追加など、リソースベースのコンテンツに説明的なコピーを追加します。「非表示」コンテンツのアクセシビリティを強化します	背景画像のテキストは同時に HTML で記述し、CSS を使用して非表示にします。これは、検索エンジンがコンテンツをクロールするのに有益であり、また、 CSS が失敗した場合に使用されます。内容を参照してください。エンティティを適切に使用します

HTML 仕様 - 電子メールのコンテンツ

電子メール環境

電子メールのコンテンツが配置されるコンテキストまたは外部コンテナ (以下、環境と呼びます) は電子メールサービスプロバイダーによって決定され、電子メールのコンテンツを表示する必要があります。正しく。

これらの環境は、次のいずれかの状況である可能性があります:

iframe であり、コンテンツが body に配置されている場合、単なる div であり、コンテンツがこの div に配置されている場合。

おそらくメールボックス自体に CSS 設定があり、それがあなたに未知の影響を与える可能性があります。

doctype がまったく宣言されていない可能性があります。たとえ宣言されていても、それは必要な doctype ではありません。

間違ったコンテナに入れ子にならないようにしてください

混乱: コンテナは body または div である可能性があるため、メールのコンテンツは完全な HTML であってはなりません。

解決策: したがって、電子メールのコンテンツは、ルートノードとして div を持つ HTML フラグメントである必要があります。

CSS の競合や上書きを避けてください

混乱: CSS は、一部のリセットや一部の .class などの環境で設定されている可能性があるためです。

解決策: したがって、効果を確実にするためにはインラインスタイルのみを使用し、コンテンツルートノードに基本スタイルを設定し、div、span、その他の非セマンティックタグの使用を試みることができます。

1011

< ;!-- ルートノード -->

コンテンツ領域

< ; div style="width:600px;margin:0 auto;text-align:left;color:#000;font:normal 12px/15px arial,simsun;background:#fff;">

コンテンツエリア

< ; /div>

ボックスモデルのエラーを避ける

混乱: doctype は不確実性があるため、スタイルを記述するときは、doctype が何であっても正常に表示できることを考慮する必要があります。doctype の最大の影響は、ボックスモデルの解析です。

解決策: したがって、ボックスモデルを分割して記述する必要があります。たとえば、特定の div に元々定義されていた高さとパディングを、それぞれ div とその親要素または子要素に書き込む必要があります。

content

その他の注意事項

インラインスタイルのみ使用できるため、フロートをクリアするには追加のタグが必要です。

絶対位置の使用は避けてください。フィルタされる可能性があります。

js の使用は避けてください。フィルタされる可能性があります。

変更や保守が容易ではないテーブルレイアウトの使用は避けてください。

背景画像またはコンテンツ画像のテキスト情報がコード内で表示される必要があります。

特別な要件がない場合、すべての a リンクは新しいウィンドウ、つまり target="_blank" で開く必要があり、a タグの内容を空にすることはできません。

すべてのリンクは、色を使用し、下線を付けるかどうか、つまり style="text-decoration:;color:;" を設定する必要があります。

ie のチェックに集中してください! ！！

;a href="http:///yuedu.163.com/" target="_blank" style="display:block;width:111px;height:28px;overflow:hidden;text- indent:-2000px;text-decoration:none;" title="NetEase Reading - いつでもどこでも高品質の読書">NetEase Reading - いつでもどこでも高品質の読書

0;オーバーフロー:非表示; text-indent:-2000px;">あなたの iPad は十分役に立ちますか? iPad は Angry Birds に匹敵しません!フルーツを切るのとは違います！ NetEase Reading をダウンロードし、iPad にコンテンツを追加して、独自の iPad を作成してください。 id421092396?mt=8" target="_blank" style="color:#f00;text-decoration:none;" title="NetEase Reading をダウンロード">NetEase Reading をダウンロード

解決策: 同じ幅のテーブルを外側に置くだけです。

& LT; テーブル幅 = "600" セルパディング = "0" セルスペース = "0" ボーダー = "0" & gt; & lt; tr & gt ;

…..

フレームを使用して作成することをお勧めします

メールの内容。