開發(fā)步驟
初入這行的時(shí)候很多人僅僅以為H5開發(fā)只是做些頁(yè)面而已，而實(shí)際上要將工作做得盡善盡美，這些要點(diǎn)是需要牢牢記住的。
1 書寫基本的需求分析報(bào)告
1.1 哪些“任務(wù)”是基于需求分析報(bào)告的？
1.1.1 reset文件的基本調(diào)整
1.1.2 標(biāo)簽的基本選用
1.1.3 典型的布局選用和基本的布局操作
1.1.4 切圖工作
1.2 因此我們能夠想到，在進(jìn)行需求分析的時(shí)候
1.2.1 美工圖大小和具體內(nèi)容區(qū)域大小的區(qū)別（提示：一定要考慮內(nèi)容區(qū)域外的樣式如何處理）
1.2.2 會(huì)不會(huì)有fixed定位
1.2.3 有沒(méi)有返回頂部的功能需求
1.2.4 哪些地方需要注意超出隱藏
1.2.5 哪些地方需要內(nèi)容撐開高度
1.2.6 哪些地方需要有鏈接跳轉(zhuǎn)
1.2.7 hover（提示：有些美工圖會(huì)提供三態(tài)，初始、移入和按下）效果是什么樣子
1.2.8 哪些地方需要加鼠標(biāo)的小手狀態(tài)
1.2.9 哪些有JS特效，需要考慮效果~
1.2.10 基本字體字號(hào)、顏色和背景顏色的選用
1.2.11 分清楚背景圖和數(shù)據(jù)圖
1.2.12 公共模塊拆分出來(lái)
1.2.13 哪些地方是需要提交數(shù)據(jù)的 form
2 基本的前期準(zhǔn)備
2.1 文件夾結(jié)構(gòu)搭建
2.2 準(zhǔn)備reset重置文件以及基本的幾個(gè)JS文件，根據(jù)情況引入
2.3 合理修改reset文件[基于網(wǎng)站分析結(jié)果] 需要修改的內(nèi)容如下：
2.3.1 基本的背景顏色和文字顏色
2.3.2 a標(biāo)簽的兩種狀態(tài)
2.3.3 基本的字體大小和樣式設(shè)置
2.3.4 刪除掉沒(méi)有使用到的樣式設(shè)置
2.3.5 保證after偽元素清浮動(dòng)的方法在reset當(dāng)中
3 移動(dòng)端與PC端的特殊性
3.1 移動(dòng)端
3.1.1 全新的選擇器以及大部分的CSS3屬性都得到了很好的支持
3.1.2 視口的設(shè)置
3.1.3 基本rem的處理
3.1.4 user-select；tap-highlight-color；-webkit-transform-style等樣式的處理
3.1.5 需要額外注意“指觸區(qū)”
3.1.6 模擬測(cè)試之外，需要進(jìn)行真機(jī)調(diào)試
3.1.7 320屏幕像素下，字體大小最小為12px
3.1.8 a標(biāo)簽的title和img標(biāo)簽的title可以刪除 嵌套原則可以適當(dāng)?shù)恼{(diào)整
3.1.9 最大最小寬的考慮
3.1.10 針對(duì)背景圖進(jìn)行background-size的處理
歡迎溝通交流~HTML5學(xué)堂
3.2 PC端
3.2.1 使用新標(biāo)簽后，對(duì)新標(biāo)簽的兼容處理
3.2.2 需要測(cè)試各個(gè)瀏覽器（HTML5學(xué)堂提示：保證在IE6~7的低端瀏覽器中，布局與功能正常）
3.2.3 對(duì)于子代選擇器、CSS3新增選擇器等能否使用取決于具體開發(fā)兼容要求
3.2.4 IE下的測(cè)試，需要啟動(dòng)服務(wù)器，即在wamp下運(yùn)行
4 整體開發(fā)的基本順序提醒
4.1 注意模塊的最小寬度或者最大寬度
4.2 先完成一級(jí)布局與二級(jí)布局
4.3 針對(duì)公共模塊進(jìn)行開發(fā)
4.4 制作具體的模塊
5 具體開發(fā)規(guī)范
5.1 文件名禁止使用中文命名
5.2 編寫代碼的時(shí)候，需要合理的縮進(jìn)（不要出現(xiàn)空格與Tab格混用）與注釋
5.3 遵循基本的嵌套規(guī)則
5.4 不要忘記a標(biāo)簽的href和title、img標(biāo)簽的alt、title、src，a標(biāo)簽的target（從何處打開鏈接）
5.5 CSS后代選擇器，盡量不要超過(guò)3層，不要超過(guò)4層
5.6 類名采用單詞（語(yǔ)義）命名，多個(gè)單詞采用中劃線連接
5.7 不設(shè)置不必要的屬性和屬性值，如針對(duì)占滿父級(jí)整行的塊元素設(shè)置width:100%
5.8 CSS樣式按照順序書寫：顯示屬性——>自身屬性——>文本——>其他——>CSS3屬性
5.9 HTML與CSS中的引號(hào)需要保持一致，禁止出現(xiàn)單引號(hào)與雙引號(hào)混用
5.10 類名和id名通常不重復(fù)的
5.11 每段語(yǔ)句結(jié)束后的分號(hào)（英文）必不可少
6 開發(fā)細(xì)節(jié)
6.1 注意保持盒模型大小的一致性（如：增加左右padding，原有width需要變?。?/p>
6.2 及時(shí)清除浮動(dòng)，并采用合理的清除方式
6.3 針對(duì)定位元素，處理z-index值
6.4 數(shù)據(jù)圖需要限制寬高
6.5 背景圖需要進(jìn)行合并
6.6 對(duì)于需要超出隱藏的需求，單行文本隱藏或顯示為省略號(hào)（……），比如在模塊標(biāo)題需要進(jìn)行設(shè)置，多行文本如果顯示區(qū)域高度固定，需要設(shè)置超出隱藏。
6.7 img標(biāo)簽需要浮動(dòng)或設(shè)置display:block，以防止img元素下的3像素空隙
6.8 a標(biāo)簽的指觸區(qū)需要注意
6.9 合理使用群組和后代選擇器
7 最后不可缺少的相關(guān)工作
7.1 CSS壓縮
7.2 JS壓縮
7.3 圖片壓縮
7.4 ico文件的制作
7.5 404頁(yè)面
8 other but so important
最后：書寫代碼的時(shí)候，需要綜合考慮SEO、擴(kuò)展性、代碼量以及代碼可讀性，盡可能尋找最佳解決辦法。
