HTML知識概況
1、什麼是 HTML？
HTML 是用來描述網頁的一種語言。
HTML 指的是超文字標記語言 (Hyper Text Markup Language)
HTML 不是一種程式語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
Web瀏覽器的作用是讀取HTML文件，並以網頁的形式顯示出它們，瀏覽器並不會顯示HTML標記，而只是使用標記來解釋頁面的內容。
HTML的語言特點包含：
可以設定文字的格式，比如標題、字號、文字顏色、段落等
可以建立列表
可以插入影象和媒體
可以建立表格
超連結。
Web 瀏覽器的作用是讀取 HTML 文件，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容：
2、HTML的結構
看一個案例結構：
HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
HTML 標籤通常是成對出現的，比如 <b> 和 </b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤，開始和結束標籤也被稱為開放標籤和閉合標籤。
標籤有兩種，自閉合標籤（比如：<meta charset="UTF-8"/>），其他正常的標籤（比如<html> </html> ）
HTML的結構：
1） Doctype
Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文件。該屬性會被瀏覽器識別並使用：
如果頁面沒有Doctype宣告，則compatmode預設時backcompat，瀏覽器將按照自己的方式解析，那麼不同的瀏覽器將會解析成不同的樣式；
如果聲明瞭Doctype，則開啟了標準模式，瀏覽器會按照W3C標準解析渲染頁面，則頁面在所有的瀏覽器顯示的都一樣。
備註：W3C標準為全球資訊網聯盟。
2） HTML的開始標記：<html> 內容 </html>
HTML文件是由<html> </html> 包裹，也是HTML的開始標記，<html>在最前端，表示開始， </html>在最後端，表示網頁的結束。html包含兩個主要部分，head、body。
3）<head> 內容 </head>，HTML檔案頭標記
也稱為HTML頭資訊開始標記，用來包含檔案的基本資訊，比如網頁的標題、關鍵字。包含以下部分：
其中：
<meta>內容</meta>，為頁面的元資訊（meta-information），比如針對搜尋引擎和重新整理頻率的描述和關鍵詞。
<title>內容</title>，為網頁頭部資訊，在網頁框上顯示
link 可設定連結，設定css格式、icon
style，在頁面中寫css格式
script，引進檔案，寫js程式碼
案例1：
效果：
4）網頁的主題部分：<body> 內容 </body>
<body> 內容 </body>是網頁的主體部分，中間可以存放<h1>標題</h1> 、<p>段落</p> 等標記，正是這些內容組成了我們所看見的網頁。
4-1 塊級標籤、行內標籤：
在htlm中經常能看到的標籤一般分為兩種：塊級標籤和行內標籤。對應於
塊級標籤block-level elements，被視為獨立的一塊，會單獨換一行，即“塊框”。比如DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL
行內標籤 inline elements，前後不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。比如SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR
案例2：塊級和行內標籤的區別
結果：
4-2 常用格式標記：
<br />：強制換行標記。讓後面的文字、圖片、表格等等，顯示在下一行。
<p></p>：段落符號，預設兩個段落之間有間距。
<center>：居中對齊標記。讓段落或者是文字相對於父標記居中顯示。
<pre>：預格式化標記。保留預先編排好的格式，常用來定義計算機原始碼
<li>：列表專案標記。每個列表使用一個<li>標記，可用在有序列表(<ol>)和無序列表（<ul>）中
<ul>：無序列表標記。<ul>宣告這個列表沒有序號。專案符號
<ol>：有序列表標記。專案符號可以顯示特定的一些順序。比如type屬性值"A"表示大寫字母A、B、C，type屬性值“1”表示阿拉伯數字1、2、3等。
<dl><dt><dd>：定義型列表，對列表條目進行簡短說明。
<hr>：水平分割線標記，可以用作段落之間的分割線
<div>：分割槽顯示標記，也稱層標記，常用來編排一大段的HTML段落，也可以用於將表格式化，和<p>很相似，可以多層巢狀使用。
案例3：常用格式
效果：
4-3 各種特殊符號編碼：
需要htlm程式碼中加入以&開頭的字母組合以&#開頭的數字。
比如：
具體其他的標籤可參考：
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
4-4 a標籤（超連結的使用）：
爬蟲中經常需要抽取連結，連結的引用使用的是<a>標記。
基本語法：
<a href="連結地址" target="開啟方式"name="頁面錨定點名稱">連結文字或者圖片</a>。
主要包括以下屬性：
href屬性值是連結的地址，連結的地址可以是一個網頁，也可以是一個視訊、圖片、音樂等
target屬性用來定義超連結的開啟方式。當屬性值為_blank時，作用是在一個新的視窗中開啟連結；當屬性值為_self（屬性值）時，作用是在當前視窗中開啟連結，當屬性值為_parent時，作用是在父視窗中開啟頁面，當屬性值為_top時，在頂層視窗中開啟檔案。
name屬性用來指定頁面的錨定名稱，錨定類似於查字典時候的目錄。
案例4：a標籤應用
效果：
案例5：a標籤中id的應用:
效果：
4-5 文字標籤：
<hn>：標題標記。共有6個級別，n的範圍為1~6，不同級別對應不同顯示大小的標題，h1最大，h6最小。
<font>：字型設定標記。用來設定字型的格式，一般有三個常用屬性：size（字型大小），<font size="14px">；color（顏色），<font color="red">;face(字型)，<font face="微軟雅黑">。
<b>：粗字型標籤；
<i>：斜字型標籤；
<sub>：文字下標字型標籤；
<sup>：文字上標字型標籤；
<tt>：印表機字型標籤；
<cite>：引用方式的字型標籤，通常是斜體；
<em>：表示強調，通常顯示為斜體字；
<strong>：表示強調，通常顯示為粗體字；
<samll>：小型字型標籤；
<big>：大型字型標籤；
<u>：下劃線字型標籤；
案例6：字型大小
效果：
4-6 input標籤：
input標籤的的type包含：
text：文字框
password：密碼框，裡面未***
email：郵箱，會檢測是否符合郵箱格式。
radio：單選框
checkbox：複選框
file：檔案上傳
button：普通的按鈕
submit：提交
reset：重置
textarea：多行文字
案例7：文字框
<!--文字框-->
<p>使用者名稱：<input type="text"/></p>
<p>密碼：<input type="password"/></p>
<p>郵箱：<input type="email"/></p>
結果：
案例8：單選框
<!--單選框-->
<p>性別：
<!--name的值可以隨便設定，只需要一致即可識別-->
<br/>男<input type="radio" name="sex"/>
<br/>女<input type="radio" name="sex"/>
</p>
結果：
案例9：複選框
<!--複選框-->
<p>愛好：
<br/>游泳<input type="checkbox" name="ee"/>
<br/>打球<input type="checkbox" name="ee"/>
<br/>旅遊<input type="checkbox" name="ee"/>
</p>
結果：
案例10：上傳檔案
<p>檔案：<input type="file"/></p>
案例11：備註，按鈕
<p>備註：<textarea></textarea></p>
<input type="submit" value="submit">
<input type="button" value="button">
<input type="reset" value="reset">
4-6 select標籤：
案例12：select、下拉框
<!--下拉框-->
<p>城市：
<select>
<option>上海</option>
<option>北京</option>
<option>廣州</option>
</select>
<!--多級下拉框就多寫幾個select-->
<!--mutiple最多展示幾個，剩餘的可以下滑-->
<select mutiple size="1">
<option>市區</option>
<option>郊區</option>
</select>
<!--optgroup多級標籤-->
<select>
<optgroup label="AA">
<option>A1</option>
<option>A2</option>
</optgroup>
<optgroup label="BB">
<option>B1</option>
<option>B2</option>
</optgroup>
</select>
</p>
效果：
4-7 form標籤，向後臺傳送資料
案例13：form標籤
4-8 表格標籤：
表格的基本結構包括<table>、<caption>、<tr>、<td>和<th>等標記。
基本格式：
<table 屬性1="屬性1"屬性2="屬性2"...>表格內容</table>
案例14：表格
常見屬性：
width：寬度，可以設定成畫素，比如px
heigh：寬度；
border：外邊框寬度；
align：表格的顯示位置（left居左顯示，center居中顯示，right居右顯示）；
cellspacing：單元格之間的間距；
cellpadding：單元格與單元格變的顯示距離；
frame：表格邊框最外層的四條線框（void無邊框，above頂部有邊框，below僅有底部邊框，hsides頂部邊框和底部邊框，lhs表示僅有左側邊框，rhs僅有右側邊框，vsides左右側邊框，border包含全部4個邊框）
rules控制是否顯示以及如何顯示單元格之間的分割線（none無分割線；all所有分割線；rows僅有分割線；clos僅有列分割線；groups航組和列祖之間有分割線）
bgcolor：設定背景色，格式為bgcolor=“顏色值”
align用來設定垂直方向對齊方式（align=“值”，值為bottom表示靠頂端對齊，值為top表示底部對齊，值為middle表示居中對齊）
valign用於設定水平方向對齊方式，valign=“值”，值為left靠左對齊，值為right靠右對齊，值為center時，表示居中對齊
rowspan設定單元格所佔行數，用於合併單元格
colspan設定單元格所佔列數，用於合併單元格
4-9 fieldset標籤：
案例15：有登入框的標籤：
4-10 iframe標籤：巢狀其他的網頁
連結全部網頁；比如連結到搜狐網全部網頁：
案例16：iframe標籤
結果：
4-10 img標籤：
格式：<img src="路徑/檔名.圖片格式"width=“屬性值”height="屬性值"border="屬性值"alt="屬性值"/>
src用來指定要載入的圖片路徑、圖片的名稱以及圖片格式
width圖片寬度，單位可以是px、em、cm、mm
heigh圖片高度
border圖片的邊框寬度
alt屬性，1）當網頁圖片被載入完成後，滑鼠移動到上面，會顯示這個圖片的指定屬性文字；2）如果影象沒有下載或者載入失敗，會用文字來代替影象顯示；3）搜尋引擎可以通過這個屬性的文字來抓取圖片
案例連結：https://pan.baidu.com/s/1sk8QS8X 密碼：gmxb
學習網址參考：http://www.w3school.com.cn/html/index.asp