HTMLとは何ですか？HTMLはハイパーテキストは画像、テキスト、リンク、ビデオ、オーディオなど、数字はラベルを参照する、いわゆるHTMLが含まれている、HTMLです。
ハイパーテキストメタ情報
メタ情報タグ：いわゆるメタ情報自体を記述した情報で、メタ情報のカテゴリラベルがHTML文書自体を記述するために使用されるラベルのようなものです。
彼らは通常、一般的にブラウザへのメタ情報は、ほとんどの場合、あるページ（一方、そのような意味カテゴリラベル、サービスの説明など他のラベル）に表示されません、headタグに表示され、検索エンジンや他のマシンが読むには時々この情報は、ユーザーにページ外に表示されます、そして時にはません。
ヘッド：メタ情報コンテナ
メタ：一般的なメタタグ情報（名前とHTTP-当量2つのリンケージ）
ベース：ページのベースURL（エラーが発生しやすいが、推奨されません、それは通常は使用しません）
タイトル：ドキュメントのタイトル
メタ共通言葉遣い：
<メタ文字セット=「UTF-8」/>：定義されているドキュメントフォーマットを解析し、最初の行を置くことをお勧めします
<メタHTTP-当量= "コンテンツタイプ" コンテンツ= "text / htmlの;のcharset = UTF-8" />：同時にContent-Type HTTPヘッダーを追加すること、およびHTTPコードフォーマットを指定します。
<Metaname =「ビューポート」コンテンツ=「幅=デバイス幅、初期スケール= 1、最小スケール= 1、masimumスケール= 1、ユーザscalab = NO」/>：ビューポートの移動のために適合標準エンドメタメタ情報
説明：ページ記述は、検索エンジンや他の機会のために使用することができます
キーワード：ページのキーワード、重要なシーンのためのSEO
セマンティックタグ
セマンティックタグの間違った使用は、マシンが混乱を読み取り、CSSの負担を書くために、入れ子に増加しました。
だから、意味タグのために、私の態度は次のとおりです。「のための」よりも「ない」良い「ではない」良い「間違っている」割合。もちろん、私はそこに理想的なフロントエンドエンジニアがあるか、我々は彼らを「使用する」の後に行くべきだと思います。
実際、HTML言語では、厳格なプログラミング言語として、いずれかのラインがありません。
あなたが唯一の彼らの身近な意味タグを使用しようとすることができ、かつ安全なシーンにおけるセマンティックタグの唯一の導入：私のアドバイスがあるので、実際には、使用の意味論のいくつかは、論争をもたらすでしょう。このように、我々はより多くの問題を引き起こし、セマンティックタグが虐待を受けていないことを確認することができます。
2.4。ラベルの使用の合理化、意味構造を
1）適切にネストされたタグ
DIV、UL、OL、DL、P：、スパン、強い、EM、pは、H1〜H6のような要素が含まれていません
2）非DIV病、マルチスパン病、複数のテーブル疾患、ラベルDOM構造の性能の適切な使用、ドキュメントは、任意のコースと可読性の構造を有する、CSS除去される場合には、以下の仕様は、使用されるHTMLタグです。
P：テキストの一部。
DL：定義リスト、リストは、プロファイルのタイトルやコンテンツを含んでいてもよいです。
UL：順不同リスト。
オール：順序付きリスト。
H1〜H6：記事のタイトル、タイトルブロック、一度だけ表示される違い、H1ページを降順重要度に応じて、
強い/ EM：テキストを強調。
IMG：画像のalt属性は、画像が表示できない場合に、画像情報を表すことができ、およびバックグラウンド処理img要素を使用せずに、CSSのボタンを使用して追加されなければなりません。
表：グリッド、列レイアウトルール、一定の幅および高としてドミナント。
3）形式の構造合理化
A）同じカテゴリフィールドのフィールドセット素子パッケージを使用しました。
b）は、カテゴリ名を示す凡例要素フィールドを使用して、
C）ラベルテキストフィールドを使用して表し、クリックされた場合、テキストフィールドに必要なプロパティを追加するため、テキストボックスがフォーカスを受け取ることができます。
d）のテキストボックスを使用すると、幅のサイズ属性、width属性を使用CSSを定義していません。
E）MAXLENGTHが入力された文字の長さを制限する属性の追加。
ハイパーリンクのラベル
リンク：
A：
エリア：エリアは、クリック地元のジャンプを達成することができます
要素型と要素タイプのリンクを交換してください
リンク型要素：外部タグファイルタイプを使用して参照HREFは、リンク要素（例えば、リンクタグが組み込まれたCSS）です。
交換可能な要素：SRCタグは、IMGなどのエレメント交換型であり、使用して外部ファイルを導入する工程と、ピクチャ、ビデオ、オーディオ、IFRAME。
スクリプトタグ：このタグを導入することができるJSは、jsのは、スクリプトがリンク型タグであるので、タイプのタグが交換され、直接書き込むことができます。
ラベルのプロパティ
通常、キーと値のペアの形式でラベルのプロパティ、属性はほんの始まりと終了からラベルやタグで発生する可能性があります。
すべて小文字の属性名は、属性値は、二重引用符または一重引用符に包まれ、もし属性値とまったく同じ属性名をしなければならない、あなたは直接属性名を書くことができます
要素タイプ
ブロックレベル要素：
行内元素：
インラインブロック要素：
命名規則
グッド統一命名規則は、コードが団結以上の開発と保守を容易にすることであるとき、セマンティックコードを高め、コミュニケーションやプロジェクトハンドオーバのコストを削減します。
こぶ命名法によるIDは、下線付きのクラスで、名前によってハンプ命名法
終了する必要があり、すべてのタグは、すべてのタグは小文字でなければならない
すべてのタグ属性を引用符で囲む必要があります
名前空間
思考をコードしている、我々は、ページの異なるレベル（レイアウト、モジュール、要素）に分割することができます。
CSS名前空間とは何ですか？
統一された命名規則は、名前付き範囲を定義を通じて、CSSクラス＆IDの名前空間となりました。
レイアウト：レイアウトなど-mainという名前のメインバーのレイアウトとして名前空間、などの単語レイアウトの意味、唯一の名前空間レイアウト - 名前の変更の後ろには、レイアウトは常に保持します。レイアウト-xxxのための名前空間のレイアウト。
モジュール：ページは、1つまたは複数のモジュールで構成され、英語の単語モジュールのモジュールは、そのようなニュースモジュールとして、MODと略記標準化されmod-news、写真の表示モジュールmod-photo-show。名前空間モジュールがありますmod-xxx 。
要素：内部モジュールに属する要素、モジュール、要素、独自の内部構成によって素子であってもよいです。ユーザーの写真情報要素cell-user-photo。名前空間の要素がありますcell-xxx 。
-
スタイルクラス名はすべて小文字で、最初の文字は、英字、数字またはその他の禁止の特殊文字でなければなりません。手紙小文字で始まる
（a-z）、数字（0-9）、通る線組成物。（-） -
単一の単語であってもよいし、単語を組み合わせたものであってもよいセマンティックを有するように、それは明らかに、請求意味モジュール及び要素に記述することができます。使用避けるようなそのような（等色、フォントサイズ、など）を指定ベクトル、 状態は無意味な名前を避けるために変更されます。単一の単語でそれ簡単な説明のクラス名を保管してください。
123456…,red,blue,left,rightclass="left-news"、class="2" -
ダブル単語または単語の組み合わせ：形容詞 - 名詞、名前空間 - ランキング、名前空間 - 形容詞 - 名詞。例えば：
news-list、mod-feeds、mod-my-feeds、cell-title
主容器： main
ヘッダ：ヘッダ
フッター：フッター
コンテンツ分野：コンテンツ
ロゴ：ロゴ
メイン・ナビゲーション：メイン-NAV
セカンダリナビゲーション：サブナビゲーション
汎用命名CSS
（1）ページフレーム推奨名IDを持つ、一般的にユニークな命名
| ID名 |
名前 |
ID名 |
名前 |
| ヘッド |
ヘッダ |
主題 |
メイン |
| 足 |
フッター |
容器 |
ラッパー |
| サイドバー |
side_bar |
セクション |
行 |
| レイアウト |
レイアウト |
|
|
（2 ）モジュール構造は、名前
| クラス名 |
名前 |
クラス名 |
名前 |
| モジュール（例：ニュースモジュール） |
V（mod_news） |
タイトルバー |
タイトル |
| コンテンツ |
コンテンツ |
セカンダリコンテンツ |
sub_content |
（2 ）ナビゲーション構造は、命名します
| クラス名 |
名前 |
クラス名 |
名前 |
| ナビゲーション |
ではありません |
プライマリナビゲーション |
main_nav |
| サブナビゲーション |
sub_nav |
トップナビゲーション |
top_nav |
| メニュー |
メニュー |
サブメニュー |
sub_menu |
（3 ）一般的な要素名
| クラス名 |
名前 |
クラス名 |
名前 |
| 二つ |
サブ |
パン粉 |
パン粉 |
| マーク |
ロゴ |
広告 |
bner （または、バナー広告を無効にします） |
| 着陸 |
ログインする |
登録 |
regsiter / REG |
| 検索 |
調べる |
加わります |
加わります |
| 状態 |
状態 |
プッシュボタン |
BTN |
| スクロール |
スクロール |
タブ |
タブ |
| 記事一覧 |
リスト |
ショートメッセージ |
MSG /メッセージ |
| 現在 |
現在 |
ヒントのヒント |
ヒント |
| アイコン |
アイコン |
注記 |
注意 |
| ガイド |
ガイド |
サービス |
サービス |
| ホットスポット |
ホット |
ニュース |
ニュース |
| ダウンロード |
ダウンロード |
投票 |
投票 |
| パートナー |
partner |
友情链接 |
link |
| 版权 |
copyright |
演示 |
demo |
| 下拉框 |
select |
摘要 |
summary |
| 翻页 |
pages |
主题风格 |
themes |
| 设置 |
set |
成功 |
suc |
| 按钮 |
btn |
文本 |
txt |
| 颜色 |
color/c |
背景 |
bg |
| 边框 |
border/bor |
居中 |
center |
| 上 |
top/t |
下 |
bottom/b |
| 左 |
left/l |
右 |
right/r |
| 添加 |
add |
删除 |
del |
| 间隔 |
sp |
段落 |
p |
| 弹出层 |
pop |
公共 |
global/gb |
| 操作 |
op |
密码 |
pwd |
| 透明 |
tran |
信息 |
info |
| 重点 |
hit |
预览 |
pvw |
| 单行输入框 |
input |
首页 |
index |
| 日志 |
blog |
相册 |
photo |
| 留言板 |
guestbook |
用户 |
user |
| 确认 |
confirm |
取消 |
cancel |
| 报错 |
error |
轮播（走马灯） |
carousel |
| 插件（项目外和js.css等平级的文件夹） |
plugIn |
工具 | tool |
1.5 通用命名
(1)页面框架命名，一般具有唯一性，推荐用ID命名
| ID名称 | 命名 | ID名称 | 命名 |
|---|---|---|---|
| 头部 | header | 主体 | main |
| 脚部 | footer | 容器 | wrapper |
| 侧栏 | sideBar | 栏目 | column |
| 布局 | layout |
(2)模块结构命名
| Class名称 | 命名 | Class名称 | 命名 |
|---|---|---|---|
| 模块(如：新闻模块) | mod (mod-news) | 标题栏 | title |
| 内容 | content | 次级内容 | sub-content |
(3)导航结构命名
| Class名称 | 命名 | Class名称 | 命名 |
|---|---|---|---|
| 导航 | nav | 主导航 | main-nav |
| 子导航 | sub-nav | 顶部导航 | top-nav |
| 菜单 | menu | 子菜单 | sub-menu |
(4)一般元素命名
| Class名称 | 命名 | Class名称 | 命名 |
|---|---|---|---|
| 二级 | sub | 面包屑 | breadcrumb |
| 标志 | logo | 广告 | bner(禁用banner或ad) |
| 登陆 | login | 注册 | register/reg |
| 搜索 | search | 加入 | join |
| 状态 | status | 按钮 | btn |
| 滚动 | scroll | 标签页 | tab |
| 文章列表 | list | 短消息 | msg/message |
| 当前的 | current | 提示小技巧 | tips |
| 图标 | icon | 注释 | note |
| 指南 | guide | 服务 | service |
| 热点 | hot | 新闻 | news |
| 下载 | download | 投票 | vote |
| 合作伙伴 | partner | 友情链接 | link |
| 版权 | copyright | 演示 | demo |
| 下拉框 | select | 摘要 | summary |
| 翻页 | pages | 主题风格 | themes |
| 设置 | set | 成功 | suc |
| 按钮 | btn | 文本 | txt |
| 颜色 | color/c | 背景 | bg |
| 边框 | border/bor | 居中 | center |
| 上 | top/t | 下 | bottom/b |
| 左 | left/l | 右 | right/r |
| 添加 | add | 删除 | del |
| 间隔 | sp | 段落 | p |
| 弹出层 | pop | 公共 | global/gb |
| 操作 | op | 密码 | pwd |
| 透明 | tran | 信息 | info |
| 重点 | hit | 预览 | pvw |
| 单行输入框 | input | 首页 | index |
| 日志 | blog | 相册 | photo |
| 留言板 | guestbook | 用户 | user |
| 确认 | confirm | 取消 | cancel |
| 报错 | error | |
3.1. Css 命名规则
1) 样式类名全部用小写，首字符必须是字母，禁止数字或其他特殊字符。由以字母开头的小写字母（a-z）、数字（0-9）、下划线（_）组成。
2) 可以是单个单词，也可以是组合单词，要求能够描述清楚模块和元素的含义，使其具有语义化。避免使用 123456…red,blue,left,right之类的（如颜色、字号大小等）矢量命名，如class=”left_news”、class=”2” ，以避免当状态改变时名称失去意义。
3) 尽量用单个单词简单描述class名称。
4) 双单词或多单词组合方式：形容词_名词、命名空间_名次、命名空间_形容词_名词。例如：news_list、mod_feeds、mod_my_feeds、cell_title
3.2. Class和ID的使用方法
把id留给后台开发和JS使用，除此之外页面的page id(如首页的外层需要一个ID id=”page_index”)，页面结构（header main footer）允许用id命名。其他禁止id使用在样式表CSS命名中，一律使用class命名
3.3. 命名空间
在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。
什么是CSS命名空间？
通过统一的命名规范定义命名的范围，成为CSS class & id命名空间。
布局: 以语义化的单词layout作为命名空间，例如主栏布局命名 layout_main，
只改变layout_命名空间后面的命名，layout始终保留。布局的命名空间为layout_xxx。
模块：页面是由一个或多个模块组成，模块的英文单词是module，规范简写成mod，如新闻模块mod_news，照片展示模块mod_photo_show。模块的命名空间为mod_xxx 。
元件：元件是属于模块内部的，也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell_user_photo。元件的命名空间为cell_xxx 。
- 图片命名
1) 背景图片：bg001,bg002,bg003……
2) 一般图片：img001,img002,img003……
3) 特定图片：如banner,logo按照具体情况命名
4) 按钮图片：btn_submit,btn_cancel…….
(5)全局皮肤样式
文字颜色(命名空间text-xxx)
text-c1, text-c2,text-c3……
背景颜色(命名空间bg -xxx)
bg-c1,bg-c2,bg-c3……
边框颜色(命名空间border-xxx)
border-c1,border-c2,border-c3……