HTMLの仕様：
基づき、W3C、アップルの開発者や他の公式文書、HTMLページは、コードをよりセマンティックにします。
DOCTYPE宣言：
HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
ページ言語LANG：
- プロパティ値の使用をお勧めします
cmn-Hans-CN（簡体中国本土の）が、ブラウザとオペレーティングシステムの互換性を考慮すると、まだ使用してzh-CNプロパティ値を
その他のエリア言語リファレンス：
- ZH-SG中国語（簡体字、シンガポール）対応CMN-ハンス-SGマンダリン（英語、シンガポール）
- ZH-HK中国語（繁体字、香港）対応CMN-ハント-HK中国語（繁体字、香港）
- ZH-MO中国語（繁体マカオ）に対応CMN-ハント-MOマンダリン（繁体マカオ）
- ZH-TW中国語（繁体字、台湾）に対応CMN-ハント-TW中国語（繁体字、台湾）
文字の文字コードセット：
- 通常の状況下では一貫して使用「UTF-8」エンコーディング。
- 代わりに、「UTF8」または「UTF8」または「UTF8」を書き込むと、統一規格「UTF8」を書き込むようにしてください。UTF8のIETF定義標準文言「UTF8」にコーディングされ、;及び文言UTF8のUTF8またはだけようSystem.Text.Encoding .NET Frameworkのクラスとして、特定のプログラミングシステムで発生します属性名は、UTF8と呼ばれています。
スタイルを書く、HTMLコードは大文字と小文字が区別されます：
HTML标签名、类名、标签属性和大部分属性值统一用小写。
推荐
<link rel="stylesheet" href="" >
<script src=""></script>
不推荐
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
要素の属性：
元素属性值使用双引号语法
元素属性值可以写上的都写上
推荐
<input type="text">
<input type="radio" name="name" checked="checked" >
不推荐
<input type=text>
<input type='text'>
<input type="radio" name="name" checked >
特殊文字参照：
-
テキストを混合し、文字参照を表示することができます。この方法は、合法的にテキストで表示することはできません文字をエスケープするために使用することができます。
-
あなたは少ない記号より使い「<」と大なり記号「>」HTMLの特殊文字で、ブラウザがHTMLソースコードで使用される正しい文字エンティティを表示するには、ラベルとして、それらを解析することができません
推荐： <a href="#">more>></a> 不推荐： <a href="#">more>></a>
インデントコード：
- 統一コードは同じ動作を各エディタ（各エディタは、構成を有する）ように、4つのスペースを使用して、インデント
<div class="jdc"> <a href="#"></a> </div>
ネストされたコード：
- 要素のネストされた仕様、別の行の各ブロック要素、オプションのインライン要素
推荐： <div> <h1></h1> <p></p> </div> <p><span></span><span></span></p> 不推荐： <div> <h1></h1> <p></p> </div> <p> <span></span> <span></span> </p> 段落元素与标题元素只能嵌套内联元素 推荐： <h1><span></span></h1> <p><span></span><span></span></p> 不推荐： <h1><div></div></h1> <p><div></div><div></div></p>
画像仕様：
コンテンツマップ
-
図主に写真画像画像と存在の他の形態のコンテンツ、色がより豊かで、より大きなファイルサイズ
-
JPEG形式は、条件が許せば、好ましい、優先WEBPフォーマット
-
PNG形式は、可能な限り使用されていない、PNG8の色レベルが低すぎる、PNG24の圧縮率、ファイルサイズ大
-
単一PCプラットフォームのサイズ画像は200キロバイトを超えないようにしてください。
背景
-
絵の修正から背景色のアイコン、主に比較的単純な、小さなファイルサイズ、
-
PNGやGIF形式は、PNG形式に優先し、PNG形式は、より多くの色、より良い圧縮比を可能にします
-
PNG8形式の使用を優先して、このような純粋な色のアイコンのラインとして、比較的単純な画像の色は、JPEG形式の使用を避けます
-
画像豊富な色と画像ファイル（40キロバイト以下）大きすぎないか、または半透明の優先順位PNG24フォーマット
-
豊富な色と画像ファイルが比較的大きい（40キロバイト - 200キロバイト）JPEGフォーマットに与えるプライオリティ
-
条件は、代わりに、PNGやJPEG形式の優先順位を許可WEBP
CSSの書き込み順
** 1.場所属性（位置、上、右、Zインデックス、ディスプレイ、フロート、等）
- 大小（幅、高さ、パディング、マージン）
- 一連のテキスト（フォント、行の高さ、文字間隔、色 - テキスト整列、等）
- 背景（バックグラウンド、ボーダー、など）
- 他の（アニメーション、トランジション、等）**
仕様を書きます：
使用CSSの短縮形のプロパティ：
- CSSは、ユーザーの読書体験を向上させながらそのコードを合理化する、などのパディング、マージン、フォント、など、いくつかのプロパティの略語です。
小数点の前に「0」を削除
- 色値
rgb()rgba()hsl()hsla()rect()スペースなしで、不要な0を有していない値
短縮形名：
- 多くのユーザーは、短いクラス名を好むが、前提は、人々がああにあなたの速記名を理解することです！
ヘックスカラーコード略称：
- いくつかのカラーコードが省略され、それの略で、我々はベースのユーザーエクスペリエンスを改善しよう。
命名規則ハイフンCSSセレクタ：
-
命名の選択に使用される単一の行に長い名前やフレーズ。
-
不建议使用“_”下划线来命名CSS选择器，为什么呢？
-
输入的时候少按一个shift键；
-
浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
能良好区分JavaScript变量命名（JS变量命名是用“_”）
这里有一篇破折号与下划线的详细讨论，英文： 点击查看 中文篇： 点击查看
不要随意使用Id:
- id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
为选择器添加状态前缀:
- 有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了
.is-前缀。
常用命名推荐
- 注意：ad、banner、gg、guanggao 等有机会和广告挂勾的不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此
<div class="ad"></div>
这种广告的英文或拼音类名不应该出现
另外，敏感不和谐字眼也不应该出现，如：
<div class="fuck"></div>
<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div>
<div class="ass"></div>
<div class="KMT"></div>
...
ClassName含义：
about 关于
<div class="fuck"></div>
<div class="jer"></div>
<div class="sm"></div>
<div class="gcd"></div>
<div class="ass"></div>
<div class="KMT"></div>
...
- about 关于
- account 账户
- arrow 箭头图标
- article 文章
- aside 边栏
- audio 音频
- avatar 头像
- bg,background 背景
- bar 栏（工具类）
- branding 品牌化
- crumb,breadcrumbs 面包屑
- btn,button 按钮
- caption 标题，说明
- category 分类
- chart 图表
- clearfix 清除浮动
- close 关闭
- col,column 列
- comment 评论
- community 社区
- コンテナ船
- コンテンツ内容
- 現在の現在の状態は、状態を選択します
- 著作権著作権
- デフォルトデフォルト
- 説明説明
- 詳細詳細
- 利用できない無効
- entry 文章，博文
- エラーエラー
- でもでも、一般的に複数行のリストやテーブルで使用されます
- 少ない障害（ヒント）
- テーマ別分野
- フィギュア折りたたみ
- 入力フィルタ領域を形成します
- 特徴マップ
- 最初のスクリーニング
- 一般的に、リストで使用される第一の特徴、
- フッターフッター
- フォーラムフォーラム
- グループギャラリー
- 機能モジュール、透明フロート
- ヘッダヘッダ
- ヘルプヘルプ
- 隠す隠します
- homeホーム
- ロゴロゴ
- アイコンアイコン
- 情報、情報情報
- ログインログイン
...
以下からの引用の一部：デザインタレント
