Html 複習
Web網頁標準：
HTML 結構標準 Css 表現標準 JS 行爲標準
各個瀏覽器內核
Safari：webkit IE:trident 火狐：gecko 谷歌/歐朋：blink
HTML 超文本標記語言
<hr/> 水平線標籤
圖片標籤： img
Alt 屬性 替換文本 title 提示文本
特殊字符 空格 < < > >
Meta 關鍵詞：網頁描述 網絡重定向
標籤語義化：
好的語義化的網站標準就是去掉樣式表文件之後，結構依然很清晰。
標籤語義化概念：根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）
-標籤語義化意義：
1:網頁結構合理
2:有利於seo:和搜索引擎建立良好溝通，有了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取；
3:方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）
4:便於團隊開發和維護
1：儘可能少的使用無語義的標籤div和span；
2：在語義不明顯時，既可以使用div或者p時，儘量用p, 因爲p在默認情況下有上下間距，對兼容特殊終端有利；
3：不要使用純樣式標籤，如：b、font、u等，改用css設置。
4：需要強調的文本，可以包含在strong或者em標籤中strong默認樣式是加粗（不要用b），em是斜體（不用i）；
WEB前端開發規範文檔
規範目的
爲提高團隊協作效率, 便於後臺人員添加功能及前端後期優化維護, 輸出高質量的文檔, 特制訂此文檔. 本規範文檔一經確認, 前端開發人員必須按本文檔規範進行前臺頁面開發. 本文檔如有不對或者不合適的地方請及時提出, 經討論決定後方可更改.
基本準則
符合web標準, 語義化html, 結構表現行爲分離, 兼容性優良. 頁面性能方面, 代碼要求簡潔明瞭有序, 儘可能的減小服務器負載, 保證最快的解析速度.
文件規範
1. html, css, js, images文件均歸檔至<系統開發規範>約定的目錄中;
2. html文件命名: 英文命名, 後綴.htm. 同時將對應界面稿放於同目錄中, 若界面稿命名爲中文, 請重命名與html文件同名, 以方便後端添加功能時查找對應頁面;
3. css文件命名: 英文命名, 後綴.css. 共用base.css, 首頁index.css, 其他頁面依實際模塊需求命名.;
4. Js文件命名: 英文命名, 後綴.js. 共用common.js, 其他依實際模塊需求命名.
html書寫規範
1. 文檔類型聲明及編碼: 統一爲html5聲明類型<!DOCTYPE html>; 編碼統一爲<meta charset=”utf-8″ />, 書寫時利用IDE實現層次分明的縮進;
2. 非特殊情況下樣式文件必須外鏈至<head>…</head>之間;非特殊情況下JavaScript文件必須外鏈至頁面底部;
3. 引入樣式文件或JavaScript文件時, 須略去默認類型聲明, 寫法如下:
<link rel=”stylesheet” href=”…” />
<style>…</style>
<script src=”…”></script>
4. 引入JS庫文件, 文件名須包含庫名稱及版本號及是否爲壓縮版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式爲庫名稱+插件名稱, 比如jQuery.cookie.js;
5. 所有編碼均遵循xhtml標準, 標籤 & 屬性 & 屬性命名 必須由小寫字母及下劃線數字組成, 且所有標籤必須閉合, 包括br (<br />), hr(<hr />)等; 屬性值必須用雙引號包括;
6. 充分利用無兼容性問題的html自身標籤, 比如span, em, strong, optgroup, label,等等; 需要爲html元素添加自定義屬性的時候, 首先要考慮下有沒有默認的已有的合適標籤去設置, 如果沒有, 可以使用須以”data-”爲前綴來添加自定義屬性，避免使用”data:”等其他命名方式;
7. 語義化html, 如 標題根據重要性用h*(同一頁面只能有一個h1), 段落標記用p, 列表用ul, 內聯元素中不可嵌套塊級元素;
8. 儘可能減少div嵌套, 如<div class=”box”><div class=”welcome”>歡迎訪問XXX, 您的用戶名是<div class=”name”>用戶名</div></div></div>完全可以用以下代碼替代: <div class=”box”><p>歡迎訪問XXX, 您的用戶名是<span>用戶名</span></p></div>;
9. 書寫鏈接地址時, 必須避免重定向，例如：href=”http://itaolun.com/”, 即須在URL地址後面加上“/”；
10. 在頁面中儘量避免使用style屬性,即style=”…”;
11. 必須爲含有描述性表單元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>須寫成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>
12. 能以背景形式呈現的圖片, 儘量寫入css樣式中;
13. 重要圖片必須加上alt屬性; 給重要的元素和截斷的元素加上title;
14. 給區塊代碼及重要功能(比如循環)加上註釋, 方便後臺添加功能;
15. 特殊符號使用: 儘可能使用代碼替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;
16. 書寫頁面過程中, 請考慮向後擴展性;
着重看瀏覽器內核問題
Firefox：gecko內核
Safari:webkit內核
Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome:Blink(基於webkit，Google與Opera Software共同開發)。
HTML文件開頭的Doctype：<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）
div+css的佈局較table佈局：改版的時候更方便 只要改css文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。zd
表現與結構相分離。
易於優化（seo）搜索引擎更友好，排名更容易靠前。
網頁標準：
網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’，開發者遵循統一的標準，降低開發難度，開發成本，SEO也會更好做，也不會因爲濫用代碼導致各種BUG、安全問題，最終提高網站易用性。