## 基本規范
1. 使用<!Doctype html> 文檔類型聲明,h5的最新聲明方式
`<!DOCTYPE html> `
2. 設置網頁的編碼以及文檔類型
`<meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />`
3. 設置網頁的渲染模式,按照最新的模式渲染
`<meta http-equiv ="X-UA-Compatible" content ="IE=edge,chrome=1">`
4. 如果是移動頁面或者使用boot框架,設置meta的讀取情況。
`<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>`
5. 網站的相關meta屬性需要設置的設置,比如網站關鍵字,作者,描述,網站圖標,請本站搜索meta關鍵字
6. js以及css相關文檔在head中引入,其中type屬性可以省略,默認正確的,link標簽的rel屬性不可省略。
~~~
<script src = "js/jquery-1.11.1.min.js" ></script>
<link rel = "stylesheet" href = "css/bootstrap.min.css" >
~~~
7. 針對ie引入的文件寫入注釋語句中,注釋條件語法如下,現在只針對ie8以上版本適配,需要的適配文件見有關資源。目前已經收集的兼容文件有兼容h5,媒體查詢響應,css3選擇器,css3部分屬性,詳見下面代碼部分。(備注:css3樣式生效的前提是樣式寫在外鏈的樣式文件中,寫在style中是無效的)。
~~~ html
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<script src="../js/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<script src="../js/PIE.js"></script>
<![endif]-->
# pie 的需要追加綁定腳本
$(function() {
if (window.PIE) {
$( '.container-fluid' ).each(function () {
PIE.attach(this);
});
}
});
~~~
8\. 針對jquery框架,特殊說明,pc網站的統一使用jq1.12.1版本,以便可以兼容ie678,手機端使用zepto最新版本即可(1.2.0),并且在其他js引入順序之前。
9\. 設置head內title標簽屬性,設置正確的網頁標題。
10\. 頁面標簽內不寫腳本以及樣式文件,實現網頁的結構、樣式、行為三層分離,也避免寫style標簽樣式,避免focu現象。
11\. 與dom有關的腳本綁定事件,寫在domready之后,即可以加快頁面的載入速度,也能避免事件綁定失敗。特別注意的是,如果是自定義非綁定事件,寫在
domready外面。
12\. 頁面文件,img,css等文件的命名使用英文語義化,使用駝峰式命名,對于特殊含義的使用中劃線分割,對于格式以及訪問層級的使用.,禁止使用中文,不建議使用拼音。備注:文件名稱不宜過長控制在4個單詞以內。
13\. 待補充...
## 語法規范
* 以下規范不分先后
1. 標簽以及標簽屬性小寫
2. 可省略的閉合標簽不省略,自閉合的標簽可不寫結束斜線。eg:`<br>`
3. 嵌套的標簽必須被正確的嵌套,嵌套的子元素有一格的縮進
4. 使用語義化的標簽,例如`header,footer,nav,article,fieldset,section`等,避免全頁使用div布局。
5. 針對img標簽,寫有合適的`alt`以及`title`屬性,用于描述圖片信息。避免出現src="" 問題
6. 對于標題項或者圖片等,如果有需要顯示的交互內容,建議寫title屬性,用于提示內容,在新浪以及淘寶等網站的圖片以及標題中都有title屬性,用于增加頁面友好度,需要注意的是如果頁面元素本身有交互效果或者彈框,可以省去。
7. 頁面有完整的html結構,包括html,head,body標簽。
8. 盡可能精簡頁面結構,標簽最大可能性的是用于存放內容的,如果需要特殊樣式用css實現,減少無意義的空標簽。這個稱作頁面重構。
9. 格式化規則:每一個塊級元素,新增空白行,行級元素寫在同一行,同時子元素有兩個空格的縮進。需要注意的是,行級元素換行會引起不必要的空白外間距,避免方式有兩種,一種就是行級元素寫在同一行,另外一種就是父元素設置`font-size:0`,當然也可以取巧,只把行級元素的開始標簽頭部寫在上一行即可。
10. html屬性值一律建議使用雙引號,格式化html的同時,也便于js編寫dom結構。(js為單引號)
11. 屬性的使用順序` class id name data- src for type href title alt aria role`
12. 布爾型屬性 不用賦值,有就是true,沒有就是false
13. 有良好的注釋規范,針對頁面模塊有簡要的注釋,便于維護。
~~~
<!-- 單行注釋-->
<!--
@name: 多行注釋(模塊名稱)
@description: add annotation doc(模塊描述)
@author:yuji(模塊作者)
-->
~~~
14\. 待補充...
## 更多
### 友情鏈接
* [w3school官網-html](http://www.w3school.com.cn/html5/index.asp)
* [w3chtml教程](http://www.w3chtml.com/html5/course/)
* [極客學院html視頻教程](http://search.jikexueyuan.com/course/?q=HTML5)
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi