1.HTML簡介
HTML文檔分為三個部分：文檔聲明，文檔頭部，文檔主體
文檔聲明：<!DOCTYPE html> HTML5的文檔聲明，首行，頂格。文檔聲明并不是HTML的一部分，它的主要作用是告訴瀏覽器要用哪個標準來解析這份文檔。
文檔頭部：描述了文檔的一些基本屬性和信息。
文檔主體：用戶在頁面上可以看到的內(nèi)容。
文檔頭部的標簽:
1.title：文檔的標題
可在瀏覽器標簽頁還有搜索引擎的搜索結果中看到標題。
2.meta標簽
<meta charset="utf-8"> 必須寫在第一行。定義了文本的字符編碼，和保存文檔的值要一致，一般都用 utf-8 字符編碼。?
<meta name="keywords" ?content="音樂"> 為搜索引擎定義關鍵詞
<meta name="description" ?content="網(wǎng)易"> ? 為網(wǎng)頁定義描述內(nèi)容。
描述文檔的信息。
<meta name="viewport" ?content="width=device-width">
對移動端瀏覽器才有效果，通過viewport可設定移動端瀏覽器的視口寬高、縮放等。
3.link標簽
<link rel="shortcut icon" ?href="favicon.ico">
作用1：可引入favicon，可在瀏覽器標簽頁看到的icon，只要在href屬性中寫上icon的url地址即可。rel必須寫上，定義當前文檔與被鏈接文檔之間的關系。默認情況下不需要手動引入favicon，瀏覽器會默認讀取根目錄下圖標進行展示。如果有些頁面中圖標和整站的圖標不一樣，需要用這種方式引入。
<link rel="stylesheet" ?href=".../css/style.css">
作用2：引入CSS樣式，只要在href屬性里寫上CSS的url地址。樣式還可以用標簽引入，可直接把樣式寫在style標簽引入，可直接把樣式寫在style標簽里面。<style> ?p{color:#999;} </style>
文檔頭部的內(nèi)容除了title和icon，其他的數(shù)據(jù)都不會作為真正的內(nèi)容呈現(xiàn)給用戶
2.標簽——語法
語法：標簽放在一對尖括號<>里。標簽是閉合的，有開始標簽和結束標簽，自閉合方式無結束標簽。可以帶一個或多個屬性。標簽可嵌套。HTML注釋<!-- ?-->
書寫規(guī)范：HTML標簽和屬性名建議小寫，屬性值用雙引號引起來。如果標簽有嵌套的話建議進行統(tǒng)一的縮進，使得代碼清晰，維護方便。
常用屬性
對所有標簽都有效的屬性（全局屬性）
1.id <div id="nav"></div>
規(guī)定了元素在頁面中唯一的標識，js 和 CSS 可以通過這個標識獲取元素。
2.class <span class="time"></span>
規(guī)定了元素的類名，在頁面中具有統(tǒng)一的功能或者樣式的元素可以給一個統(tǒng)一的class名稱，js 和 CSS 可以通過class名稱獲取這一類的元素。
class 和 id 的區(qū)別：同一個 id 名在頁面中只能出現(xiàn)一次，同一個class名在頁面中可以多次出現(xiàn)。
3.style <div style="display:none"></div>
規(guī)定了元素的樣式，可以直接在標簽的style屬性里寫CSS樣式，可以控制標簽的顯示。
這種方式使得表現(xiàn)和結構混雜在一起，不利于后期的維護，不推薦在style標簽里寫樣式。
4.title <a title="收藏"></a>
規(guī)定了元素額外的一些信息，當用戶鼠標移到元素上，會顯示這些信息。
當文字沒有完全顯示時，我們可以把完整的內(nèi)容放在標簽的title屬性中。另外，頁面中圖標擔心用戶不理解含義，可把含義寫在title屬性里。
3.標簽——章節(jié)標簽
在沒有HTML5之前，用div標簽分隔主體部分區(qū)域，現(xiàn)在可用更加語義化的標簽來代替。（head，nav，aside，article，section，footer）
body：用戶看到的頁面內(nèi)容的容器標簽，想給用戶看到的內(nèi)容放在body標簽里。
header：表示章節(jié)的頭部，里面可以包含標題，LOGO，搜索表單等。一些獨立章節(jié)的頭部也可用header標簽表示。
footer：表示一個章節(jié)的尾部，包含版權信息、相關文檔鏈接等。一些獨立內(nèi)容的尾部也可以用到footer標簽。
nav：表示導航，任何有導航性質(zhì)的內(nèi)容可以放到nav標簽，頁面中可有多個導航（整站導航，頁面內(nèi)部導航）。
aside：表示和主要內(nèi)容不相關的區(qū)域，側邊欄可用aside標簽表示，插入的廣告、工具性的內(nèi)容都可以放到aside標簽中。
article：表示獨立的、可重復的結構，論壇帖子、博客評論、新聞文章，可能會包含header和footer標簽?？汕短妆硎緝蓚€內(nèi)容相關。如博客評論article標簽會嵌入到博客文章article中。
section：表示文檔中一個區(qū)域或一節(jié)，如內(nèi)容的專題組。一般來說section會帶一個標題，相鄰的section之間的內(nèi)容是有相關性的。
hX：h1-h6標題，重要性差別。h1最重要，重要性依次遞減。
4.標簽——文本標簽
超鏈接 <a></a>
作用：創(chuàng)建指向另一個文檔的鏈接；創(chuàng)建一個文檔內(nèi)部的錨點；鏈接到 Email 地址。
1.創(chuàng)建指向另一個文檔的鏈接
在頁面中有一些文字點擊時會跳轉(zhuǎn)到另一個頁面。
跳轉(zhuǎn)方式可通過target屬性控制，target=“_self” 在當前窗口顯示，target=“_self”在新的窗口顯示。默認在當前窗口顯示。target=“_inner” 頁面會在名稱對應的目標中打開，需要用到iframe標簽。iframe中name屬性名稱要與target一致。點擊時在iframe中顯示頁面（頁面小窗口）。
2.創(chuàng)建一個文檔內(nèi)部的錨點
當我們點擊頁面某個地方時，跳轉(zhuǎn)到頁面中另外一個地方。
#html 錨點標簽，對應要跳轉(zhuǎn)的地方有 id 屬性。值與#后的值一致。跳轉(zhuǎn)后地址欄中變成#html，可以通過地址欄直接讓文檔跳轉(zhuǎn)到某個地方。
3.鏈接到 Email 地址
當點擊頁面中的文字，比如聯(lián)系我們或者郵箱時，會打開郵箱的客戶端。可以把抄送、主題寫上。
強調(diào)：em主要是語義上強調(diào)，strong是重要性的強調(diào)。strong比em更強烈的強調(diào)。
span：在頁面中有一些內(nèi)容不想強調(diào)，但是想要一個不一樣的樣式，可以把內(nèi)容放在span標簽中。span標簽本身沒有任何語義，它可以通過結合class等屬性用來編組一些標簽。
br：在頁面中想要換行，用br標簽。
引用：cite用來表示引用的出處，比如作品名稱、人物（斜體）。q就是簡短的一段文字，作品中的一段文字、某人說的話。（引號）
代碼：計算機相關文章中需要用到代碼，放到code標簽中。換行空格格式若要保留，嵌套在pre標簽中保留格式。
格式化：平常用粗體，但并不想用來強調(diào)的內(nèi)容，用 b 標簽表示，比如摘要中的關鍵字，產(chǎn)品名稱等。平常用斜體表示的內(nèi)容，用 i 標簽表示，如技術術語。
5.標簽——組標簽
div：本身沒有任何含義，主要用來分區(qū)。HTML5之前用div做功能的分區(qū)，也可以認為div是其他標簽的容器。
p：一大段文字放在 p 標簽里面。
組合內(nèi)容：如果你的內(nèi)容已經(jīng)經(jīng)過格式化，放在 pre 標簽里，保留換行符和空格。blockquote?塊級引用，大塊的引用，有cite屬性，里面是這段引用文字的出處。
列表
1.無序列表
2.有序列表
序號可用type屬性改變，<ol type="a" start="2"> 序號從 b 開始。列表可嵌套。
3，自定義列表
一系列name-value對的列表。dt列表項，每一項dt只能有一個。dd列表項描述，可有多個。
6.標簽——資源標簽
img：img為自閉合標簽，在 src 屬性中寫上URL地址，可把圖片放到頁面中。alt?屬性用來描述圖片的含義，如果src地址寫錯了，或者當前網(wǎng)絡狀態(tài)不好時，無法加載圖片，alt中的內(nèi)容會顯示到頁面上代替圖片，一般情況下要求寫上alt屬性。
iframe：<iframe src="http://www.163.com"></iframe> 嵌入頁面。要注意的是，當前的頁面和嵌入頁面在不同的瀏覽上下文中。當前頁面的 js ,CSS 和嵌入頁面是隔離的，在嵌入頁面中的操作不影響當前頁面。
object，embed：嵌入外部資源
type 為插件類型 ，param為插件參數(shù)， value為播放地址，也可寫在object 的 date 屬性中，IE8 以及以下不兼容。
<embed src="application/x-shockwave-flash" type="http://pdfReader.swf" width="640" height="480">
video：頁面中視頻，之前通過flash插件完成。不同瀏覽器對視頻格式支持度不同，需要準備多個視頻文件。放在source標簽中。瀏覽器會選一個支持的視頻類型播放。
controls 控制播放器控制條顯示；poster 插入視頻封面，沒有封面的話顯示視頻第一幀。src 為資源的URL地址，type 為資源類型。track 引入視頻字幕。當瀏覽器不支持 video 標簽時顯示文字。
如果視頻文件只有一個，可以把視頻文件地址放到 video 標簽的 src 屬性里。如果希望一進頁面視頻播放，在 video 標簽加上 autoplay 屬性。如果希望循環(huán)播放加入 loop 屬性。
video 支持三種視頻格式，mp4 webm ogg
這三種格式的 type 為 video/mp4 video/webm video/ogg
audio：與 video 標簽類似，在頁面中加入音頻。
audio 支持三種音頻格式：mp3 wav ogg
這三種格式的 type 為 audio/mp3 ?audio/wav ? audio/ogg
canvas,svg:嵌入圖形圖像。canvas 是基于像素的，提供了一些繪制函數(shù)，我們可利用腳本來繪制圖形圖像。svg 是矢量的，提供了一系列圖形如線形、圓形、矩形。如果對于一些高保真的靜態(tài)圖形圖像用 svg。對性能要求較高，場景較復雜的如實時數(shù)據(jù)展示、游戲等用 canvas 實現(xiàn)。
map，area：定義熱點區(qū)域。點圖像的不同區(qū)域跳轉(zhuǎn)到不同頁面。
通過 map 的 name 屬性和 img 的 usemap 屬性使得 map 和 img 關聯(lián)。
通過 area 標簽定義熱點，形狀通過 shape 屬性，熱點區(qū)域范圍通過 coords 屬性定義。
7.標簽——表格標簽
caption：表格標題 ? ? ? thead：表格頭部 ? ? ? ?tr：表格每一行 ? ? ? th：表頭單元格 ? ? ?
tbody：表格主要內(nèi)容 ? ? ?td：普通單元格 ? ? ? tfoot：表格尾部 ? ? colspan,rowspan：跨列跨行效果
8.標簽——表單標簽
和服務端進行數(shù)據(jù)交互，如登錄效果，需要把用戶名和密碼提交到后臺，這時需要用到表單標簽。
action：提交的表單的后臺地址 ? ?method：表單提交的方式 ? ? ? fieldset：分區(qū)，legend為分區(qū)標題?
label：為 input 元素定義標注，表示功能提示信息。for 屬性應當與相關元素的 id 屬性相同。
input：輸入標簽，輸入類型（文件上傳類型）由 type 定義。
name為數(shù)據(jù)名稱，value為名稱的值。提交給后端的數(shù)據(jù)用名稱表示。
同一類單選框多選框的 name 值相同。type 為 checkbox 時為多選框，radio 為單選框，text 為單行文本框，默認為 text 類型。選中需要在 input 中加 checked 屬性，禁止用戶操作多選框用 disabled 屬性。
頁面中的按鈕也可以用 button 表示，<input type="button"> 為了更好語義化，用 bottom 表示。
表單中的下拉選擇框 select 標簽。option 為選擇項，selected 屬性表示默認選擇這一項。選項 option 可分組，用 optgroup 標簽分組。
textarea 為多行文本框。文本框有 placeholder 屬性，用來顯示提示信息。若用戶未輸入顯示 placeholder 內(nèi)容。只有高級瀏覽器中才有實現(xiàn)。IE9 及更早 IE版本不支持。若有默認值寫在 value 屬性中，若不讓用戶輸入屬性加上 readonly。如果要向后端傳入隱藏數(shù)據(jù)而非用戶輸入的數(shù)據(jù)，屬性加上 hidden。
在HTML5中，input 中的 type 有了新的值：
email url number tel 結構化的數(shù)據(jù)，有的瀏覽器會對他進行數(shù)據(jù)的檢驗，出錯時會進行提醒。
search(搜索域) range(一定范圍內(nèi)的數(shù)據(jù)) color(拾色器)?
date picker( date,month,week,time,datetime,datetiome-local )
9.標簽——語義化
明白每個標簽的用途，用正確的標簽描述頁面。HTML標簽只是用來描述頁面內(nèi)容，用 div 標簽也可以達到相同的效果。
語義化的作用：
1.SEO（Search Engine Optimization）有利于搜索引擎優(yōu)化
搜索引擎的爬蟲會根據(jù)語義化標簽確定關鍵字的權重，使得頁面和關鍵字更好的匹配。搜索引擎也會對語義化頁面給更高的權重，頁面會更早出現(xiàn)在搜索結果中。
2.可訪問性 ?提高可訪問性
盲人通過屏幕閱讀器訪問頁面，屏幕閱讀器對不同的標簽發(fā)出不同的聲音，使用更語義化標簽能夠傳達不同信息的重要性，使讀者更好理解頁面內(nèi)容。
3.可讀性 ?提高代碼可讀性
便于多人修改維護，提高開發(fā)效率。
10.實體字符
實體字符表示：&+實體名稱+分號 ? ? &# + 實體編碼 + 分號
空格： ?  
引號：" ? ?"
大于號 >：> ? ?>
小于號 < ：< ? ?<
版權符號?：© ?©
&：& ?&
