1.フロントエンド開発仕様の目的
チームワークの効率を向上させるために、バックエンド担当者が機能を追加してフロントエンドのメンテナンスを最適化し、高品質のドキュメントを出力し、より良いフロントエンドアーキテクチャとWebサイトの開発と将来を実現するためのWebサイトの強固な基盤を築くことが便利です。
2.基本的な基準
Web標準、セマンティックHTML、構造、パフォーマンス、動作の分離、および優れた互換性に準拠しています。ページパフォーマンスに関しては、コード要件が簡潔かつ明確であり、サーバーの負荷が可能な限り削減されて、最速の解決速度が保証されます。
3、ドキュメントの仕様
1. html、css、js、p_w_picpathファイルは、合意されたディレクトリにアーカイブされます。
2. htmlファイルの命名：英語で名前を付け、.htmlをサフィックスし、対応するインターフェースドラフトを同時に同じディレクトリに配置します。インターフェースドラフトに中国語で名前を付ける場合は、バックエンドに関数を追加するときに対応するページを検索しやすくするために、htmlファイルと同じ名前に名前を変更してください。
3. CSSファイルの命名：英語の命名、接尾辞.css。共通のbase.css、その他はモジュールまたはページのコンテンツに従って命名されます
4. Jsファイルの命名：英語名、接尾辞.js。Common.jsは共有され、その他は実際のモジュール要件に従って命名されます。
4、html書き込み標準
1.ドキュメントタイプの宣言とエンコード：html5がサポートされている場合、html5宣言タイプとして統合<！DOCTYPE html> ; html5がサポートされていない場合、html4.01移行宣言タイプとして統合< ！DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 Transitional // EN " >; http：//www.w3.org/TR/html4/loose.dtd" >; メイト属性は<metahttp-equiv = "Content-Type" content = "text / html; charset =として統合されますutf-8 "> 、コーディングはutf-8に統合され、IDEを使用して、dreamweaveのコードフォーマットコマンドなどの書き込み時に階層インデントを実現します。コードインデントにはTABキーを使用し、スペースを使用しないようにします
2. cssファイルとjsファイルは...にリンクされています。cssファイルはjsファイルに配置する必要があり、必要に応じてjsを最後に配置できます。
3.スタイルファイルまたはJavaScriptファイル（html5のルール）をインポートする場合、デフォルトの型宣言を省略して、次のように記述する必要があります。
<link rel = "stylesheet" href = "…" /> <style>…</ style> <scriptsrc = "…"> </ script>
4. JSライブラリファイルを導入します。ファイル名には、ライブラリ名とバージョン番号、およびjquery-1.4.1.min.jsなどの圧縮バージョンかどうかを含める必要があります。プラグインを導入します。ファイル名の形式は、ライブラリ名+プラグイン名（jQuery.cookieなど）です。 .js;
5.すべてのコードはxhtml標準に従い、タグと属性は小文字であり、br（<br />）、hr（<hr />）などを含むすべてのタグを閉じる必要があります 。 属性値は二重引用符で囲む必要があります。 、height = 80、height =” 80”と書く必要があります
6. <！— content-> <！— left sidebar->など、<body>のモジュールにコメントを付ける必要があります。
7.コメントの指定。htmlコメントの使用<！-内容は次のとおりです（「-」の表示は許可されていません）->
8.たとえば、セマンティックhtmlでは、タイトルは重要度に応じてhシリーズのタイトルタグを使用します。h1-h6の定義は、ドキュメントの構造を反映し、検索エンジンのクエリにも役立つ大から小の原則に従う必要があります（同じページに1つしか含めることができません）。 h1、LOGOはサイトのロゴであり、ページ内で最も重要な場所であるため、LOGOに割り当てられます）、hタグはセグメント化できません。段落マークはpを使用し、リストはul、olなどを使用し、インライン要素はブロックをネストできません。レベル要素;
パフォーマンスと構造の分離の原則に従い、<center> <font>タグなどのパフォーマンス要素はコードに含まれません。
9.背景の形で提示できる写真は、cssスタイルで書いてみてください。重要な写真には、alt属性を追加する必要があります。重要な要素と切り捨てられた要素には、タイトルを追加してください。
10. divの入れ子を可能な限り最小限に抑えます。原則として、divの入れ子は次のような2つのレベルを超えません。
<div class = "box"> <div class = "welcome"> XXXへようこそ。ユーザー名は<divclass = "name">ユーザー名</ div> </ div> </ div>で、完全に使用できます。次のコードに置き換えます。<divclass = "box"> <p> XXXへようこそ。ユーザー名は<span>ユーザー名</ span> </ p> </ div>です。
11.特別な記号は、<（＆lt;）＆>（＆gt;）＆スペース（＆nbsp;）などのエスケープ文字を使用する必要があります。
12.次のような説明的なフォーム要素（input、textarea）にラベルを追加する必要があります。
<p>姓名：<input type =” text” id =” name” name =” name” /> </ p>
须写成：<p> <label for =” name”>姓名：</ label> <input type =” text” id =” name” /> </ p>
13.ラベルセマンティクスに焦点を当てる
5、cssコーディング標準
1.基本的な書き込み基準：
1）コーディングはutf-8に統合されています
2）単語が一目でわかる場合を除いて、できるだけ省略しないようにしてください
3）英語とマイナス記号の組み合わせを使用してクラスに名前を付け（solution - titleなど）、アンダースコアまたはキャメルケースを使用してIDに名前を付けます（例：mian_menu_nav mainMenuNav個人的には便宜上アンダースコアを書くことを好みます）Pinyinは許可されていませんそして番号;命名はモジュールの内容に基づいている必要があります
4）cssはすべて小文字で、各定義は1行に記述され、属性のコロンの後にスペースを追加し、各定義の後にセミコロンを追加する必要があります。
。ボックス{
幅：150px;
}
5）すべての装飾的な背景画像はcssで記述する必要があり、背景画像はcssスプライトを使用します
6）position：absolute || floatなどのパフォーマンスに影響するプロパティの使用を減らします。cssではフィルター式は許可されていません。特にボディでは、画像の繰り返しはできるだけ使用しないでください。繰り返しを使用する必要がある場合は、レンダリングのパフォーマンスが非常に低くなります。 、画像の幅または高さは8px以上にする必要があります
7）cssの省略形を使用して、コードのサイズを小さくし、ダウンロード速度を上げ、コードを簡潔で読みやすくすることに注意してください。
。ボックス{
ボーダーカラー：#fff;
border-width：1px;
ボーダースタイル：ソリッド;
}
それは一文として書くことができます：
。ボックス{
ボーダー：1px実線#fff;
}
8）css属性の書き込み順序。次の順序に従うことをお勧めします。
ドキュメントフローに影響を与える属性->独自のボックスモデル属性->タイプ設定属性->装飾属性->生成されたコンテンツ属性。
位置属性->サイズ->テキストシリーズ->背景->その他。
この記事はあなた自身の習慣に従って書くことができますが、同じ属性が一緒に書かれるようにしてください。
プロパティの列挙：
1. 影响文档流的属性（比如：display, position, float, clear, visibility, table-layout等）
2. 自身盒模型的属性（比如：width, height, margin, padding, border等）
3. 排版相关属性（比如：font, line-height, text-align, text-indent, vertical-align等）
4. 装饰性属性（比如：color, background, opacity, cursor等）
5. 生成内容的属性（比如：content, list-style, quotes等）
以上所列出的这些属性只是最常用到的, 并不代表全部
9) 充分利用html自身属性及样式继承原理减少代码量, 比如:
<ul class=”list”>
<li>这儿是标题列表<span>2010-09-15</span></li>
</ul>
css定义
ul.list li{
position: relative;
}
ul.list li span{
position: absolute;
right: 0
}
10)注意权值:标签权值：0.0.0.1;类权值：0.0.1.0;属性权值：0.0.1.1;ID权值：0.1.0.0;important权值:1.0.0.0
11) 必须为大区块样式添加注释, 小区块适量注释; 注释使用 /*注释内容*/
12)书写代码前, 考虑并提高样式重复使用率
2. 命名规则:
命名应以体现结构或内容为原则.css命名以小写英文字母和减号组合,避免使用数字,要以字母开头. 以下列出常见的基本命名，这个可以根据个人习惯，但是请保证命名符合内容
[ 模块前缀 ] - 类型 - ( 作用 | 状态 ) n - [ 位置 n ]
图例说明：
// ( 必选 )：必需存在。
// [ 可选 ]：可根据需要选择。
// |：多选一。
// n：可有多个。
名词说明：
模块前缀 模块定义时使用的前缀。
类型 定义类的内容类型。如输入框、文本、段落等等。
作用 定义类的作用，用于对类型的补充。
状态 定义类的状态，用于对类型的补充。
位置 定义类所使用的位置，如首页、导航等等，不排除使用左、右这样的词，但应尽量避免。
* 每项都可有自己的一个缩写表，同一名称的缩写尽量统一。
* 所选用的单词应选择不过于具体表示某一状态（如颜色、大小等）的单词，以避免当状态改变时名称失去意义。
* 由不以数字开头的小写字母（a-z）、数字（0-9）组成。
* 确保类(.class)的重用性与对象(#id)的唯一性，id避免使用保留字。
页面布局：
-页面头部：header
-图标：logo
-右上快捷区域：quick-links
-页面中部：main
-侧栏：side
-主栏：content
-区块：section
-区块顶部：box-top
-区块中部：container
-区块底部：box-bottom
-页面底部：foot
-版权说明：copyright
模块前缀：
* 弹出 pop
* 公共 global,gb
* 标题 title,tit
* 提示 hint
* 菜单 menu
* 信息 info
* 预览 pvw
* Tips tips
* 导航 nav
类型：
* 按钮 bt
* 文本 tx
* 段落 p
* 图标 icon
* input input
* 颜色 color,c
* 背景 bg
* 边框 bor
作用：
* 设置 set
* 添加 add
* 删除 del
* 操作 op
* 密码 pw
状态：
* 成功 suc
* 失败 lost
* 透明 tran
位置：
* 公共 gb
* 边框 bor
* 段落 p
* 弹出 pop
* 标题 title,tit
* 菜单 menu
* 内容 cont
* 导航 nav
六、图片规范
1. 图片格式仅限于gif || png || jpg
背景图尽量使用png-8的格式(IE6下支持其图片透明度),对于图片质量要求高的背景图片,使用png-24(IE6下不支持其透明度). 基本原则就是在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
2. 图片命名根据图片用途使用小写字母和下划线组合, 如send_btn.png等,方便其它成员理解.
3. 运用css sprite技术集中小的背景图或图标,减小页面http请求(注意图片大小最好能不超过200K).
<link 前端学习、视频教程、学习路线，添加威信 kaixin666haoyun ></script>