HTML
HTML解釋：
HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種制作萬維網頁面標准語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器負責將標簽翻譯成用戶“看得懂”的格式，呈現給用戶！
#超級文本標記語言是標准通用標記語言下的一個應用，也是一種規范，一種標准，它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。
網頁的組成：
一個網頁一般由兩部分組成即：
- HTML（Hypertext Markup Language）
- 和CSS（Cascade Style Sheets）。
HTML負責描述網頁的結構和內容（如標題，導航欄等） CSS則負責網頁的表現（外觀）（如背景顏色，字體樣式等）。
<head>和</head>之間的內容，是元信息和網站的標題 元信息一般是不顯示出來的,但是記錄了你這個HTML文件的很多有用的信息
<body>和</body>之間的內容，是瀏覽器呈現出來的，用戶看到的頁面效果。也就是說這里是網頁的主體。也就是body的身體之意
<html></html>是說明這個是一個網頁。告訴瀏覽器這個網頁的開始和結束。他包含了之后的兩個元素。<head>和</head>|<body>和</body>
HTML文檔
實例如下代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
1、DOCTYPE
Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔
HTML語言需要一個標准，當我們在第一行指定了<!DOCTYPE html>的時候，當瀏覽器去訪問我們的代碼的時候就就按照HTML代碼里指定的標准去讀取和渲染給我們展現的頁面。
為什么要使用<!DOCTYPE html>這個去告訴瀏覽器呢？？？？？？？？：
DOCTYPE模式：
我們先了解一下DOCTYPE的模式
- BackCompat：標准兼容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式）
- CSS1Compat：標准兼容模式已開啟（或叫嚴格模式[Standards mode/Strict mode]）
問題產生：
當Netscape4（譯注：網景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現CSS機制時，並沒有遵循W3C提出的標准。Netscape4 提供了糟糕的支持，而IE4 雖然接近標准，但依舊未能完全正確的支持標准。盡管IE 5 修復了IE4 許多的問題（bugs），但是依然延續CSS實現中的其它故障（主要是盒模型（box model）問題）。
為了保證自己的網站在不同的瀏覽器中都能正確展現，網頁開發者不得不依據各個瀏覽器的自身的規范來使用CSS。因此大部分網站的CSS實現並未符合W3C的標准。
然而隨着標准一致性變得越來越重要，瀏覽器開發商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標准是前進的方向。但是改變現有CSS的實現，完整去遵循標准，會使許多網站或多或少受到破壞。如果瀏覽器突然以正確的方式解析現存的CSS，陳舊的網站顯示必然受到影響。
因此立即遵循標准會產生問題，然而忽略標准則又會維持瀏覽器大戰時（譯注：微軟和網景之間的一段競爭）所產生的混亂。
解決方案：
- 允許網站開發者能夠選擇他們所熟知的模式。
- 依然使用舊式規則顯示陳舊的網站。
換句話說，所有的瀏覽器需要提供兩種模式：怪異模式（即兼容模式）服務於舊式規則，嚴格模式服務於標准規則。Mac平台的IE瀏覽器最先實現這兩種模式，Mozilla， Safari、Opera和Windows平台的IE6也相繼實現了這兩種模式。WIndows平台的IE5和Netscape4則只提供了怪異模式。
選擇使用哪種模式需要一個觸發器，而 “DOCTYP切換” 則用於此目的。依照標准：任何一個(X)HTML文檔必須擁有一個DOCTYPE（譯注：DTD（文檔類型定義）是一組機器可讀的規則，它們指示 (X)HTML文檔中允許有什么，不允許有什么，DOCTYPE正是用來告訴瀏覽器使用哪種DTD,一般放在(X)HTML文檔開頭聲明）用以告訴其他人 這個文檔的類型風格
- 產生於標准化浪潮以前的網頁並沒有DOCTYPE聲明。因此'沒有DOCTYPE'意味着觸發怪異模式：既依據舊式的CSS規則渲染網頁。
- 相反，如果開發者明確知道包含DOCTYPE，他們應該明白他們想要怎么做。因此大部分的DOCTYPE聲明將觸發嚴格模式：即依據標准的CSS規則渲染網頁。
- 任何新的或未知的DOCTYPE將觸發嚴格模式。
- 一些頁面依據怪異模式而寫，但是卻包含DOCTYPE。這種情況下各個瀏覽器依據自己的DOCTYPE規則列表來觸發怪異模式，參照下面的瀏覽器比較圖表 。
head部分
1、Meta(metadata information)
提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞
1、頁面編碼
<meta charset="UTF-8"> #指定編碼類型為UTF-8
2、刷新和跳轉
<meta http-equiv="refresh" content="5"> #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之后跳轉頁面至另一個網頁
3、關鍵字
關鍵字的作用：一般是讓爬蟲之類的收錄程序，當他們在爬你的網站的時候，如果你有關鍵字，那么他們會優先把關鍵字收錄到他們的記錄中，比如百度：如果他們收錄之后，他們搜索你的關鍵字的時候，就能找到咱們的網站。
<meta name="keywords" content="博客,Mr、心弦,帥哥,羅天帥">
4、描述
例如cnblog里的就是一個描述：
<meta name="description" content="博客園是一個面向開發者的知識分享社區。自創建以來，博客園一直致力並專注於為開發者打造一個純凈的技術交流社區，推動並幫助開發者通過互聯網分享知識，從而讓更多開發者從中受益。博客園的使命是幫助開發者用代碼改變世界。">
5、X-UA-Compatible
X-UA-Compatible 這個是IE8特有的，知道即可，因為做前端的同學都很害怕IE因為他們問題比較多各個版本問題很詭異，當IE8的時候微軟想把各個版本的統一，那么這個參數就出現了，他為了向下兼容，如下的代碼如果使用IE8的時候他會以IE7的模式運行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
網頁頭部信息，如下圖所示：
3、Link
網頁頭部的圖標
<link rel="shortcut icon" href="favicon.ico">
效果圖如下：
導入CSS類似python中導入模塊類似
<link rel="stylesheet" href="css/css_model.css">
4、Style
1、在當前文件中寫Css樣式
2、在其他文件中寫Css樣式類似python的模塊導入的方式把Css樣式導入到當前文件中使用
5、Script
1、在當前文件中寫JS
2、在其他文件中寫JS類似python的模塊導入的方式把JS導入到當前文件中使用
body部分
基礎知識
1、body里面分為兩類標簽：塊級標簽和內聯標簽，塊級標簽占用的是整行，內聯標簽占用的他所使用的實際大小如下圖：
塊級別標簽&內聯標簽：
2、特殊符號特殊處理
舉例來說<h1>是標題標簽，如果我想輸出<h1>這個字符串，而不是想獲取<h1>的樣式怎么辦呢？
正常情況下如果直接在html文件里輸入<h1>當有瀏覽器在讀取的時候就會講<h1>解釋,頁面將無法顯示，所以特殊的標簽需要特殊處理
所以特殊符號有自己的定義更多請看連接：更多
常用標簽：
1、<p></p>標簽和<br/>標簽
<p></p>標簽：段落標簽，每一對p標簽為一段,代碼如下
<p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
顯示效果如下：
<br/>標簽：換行標簽；有一個<br/>為一個換行，看下面的代碼
<p>帥哥帥帥哥帥帥哥帥<br/>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
顯示效果如下，我加了一個<br/>標簽之后段落就被換行了：
2、<a></a>標簽
<a></a>標簽用來跳轉和錨
<a>標簽之：跳轉
默認如果在<a><a/>標簽中不設置那么他僅僅在瀏覽器中顯示文本，如下面代碼
<a>帥哥博客</a>
顯示效果：（這里僅僅顯示的文字沒有任何功能）
指定跳轉后，代碼如下
<a href="http://www.cnblogs.com/luotianshuai/">帥哥博客</a>
效果如下：
點擊后將跳轉到指定的連接地址~，在自身的頁面打開的！
如果讓他用一個新的標簽中打開連接地址代碼如下：
<a target="_blank" href="http://www.cnblogs.com/luotianshuai/">帥哥博客</a>
<a>標簽之：錨
錨的作用是類似於讀書時候的書簽，當你你點擊這個“錨”=“書簽”，的時候就跳轉到指定的位置
<a href="#a2"> 書簽 </a> <!--在標簽里，ID是這個標簽的唯一的值，我們在做錨的時候指定他的ID即可--> <!--<a href="#a2"> 上面的代碼href="#要跳轉的標簽"--> <div id="a1" style="height:700px;"> mark_1 </div> <div id="a2" style="height:700px;"> mark_2 </div>
上面的代碼中，如果點擊了書簽之后，那么就會跳轉到id=a2的書簽的位置！
3、H標簽
即標題標簽,代碼如下
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
顯示效果如下：
4、Select標簽
第一種select標簽
<select> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected="selected">廣州</option> <!--這里默認是廣州因為selected="selected" 這里設置了默認的！--> </select>
顯示效果如下圖：
第二種select標簽
<select size="2"> <option>上海</option> <option>北京</option> <option>廣州</option> <option>山東</option> </select>
顯示效果如下圖：
第三種select標簽,可以進行多選
<select multiple="multiple" size="2"> <option>上海</option> <option>北京</option> <option>廣州</option> <option>山東</option> </select>
第4中select標簽，可以進行分組
<select> <optgroup label="河北省"> <option>石家庄</option> <option>邯鄲</option> </optgroup> <optgroup label="山西省"> <option>太原</option> <option>平遙</option> </optgroup> </select>
效果圖如下：
5、input系列標簽
input:checkbox標簽-復選框
<input type="checkbox"/> <input type="checkbox"/> <input type="checkbox" checked="checked"/> <!--這里加一個標識checked="checked，為默認選擇"-->
效果如下圖：
input:radio標簽-單選框
<!--第一中情況不互斥 --> <input type="radio"/> <input type="radio"/> <input type="radio"/> <hr/> <!--對於input標簽來說只要，radio的name值相同，那么他們就會互斥--> <input type="radio" name="gender"/> <input type="radio" name="gender"/> <input type="radio" name="gender"/>
效果圖如下：
input:text & password 輸入框
<!--標准的輸入框--> <input type="text"/> <!--密碼的輸入框（輸入的內容是保密的）--> <input type="password"/>
效果圖如下：
input:button & submit 提交按鈕
<input type="button" value="提交"/> <input type="submit" value="提交"/>
效果圖如下：
file標簽-用來提交文件時使用
<input type="file"/>
效果圖如下:
6、多行文本框
<textarea style="height: 100px;width: 100px;"></textarea>
效果圖如下：
7、form表單
<form> <p>用戶名:<input type="text"/></p> <p>密碼:<input type="password"/></p> <input type="submit" value="提交"/> <input type="button" value="按鈕"/> <!--這里按提交才有反映，submit是用來提交當前的表單的，當然可以有多個表單--> <!--但是，這個submit需要寫入表單內，那么提交的時候是提交的當前表單--> </form>
效果圖如下：
<form action="www.baidu.com" method="get"> <!--這里action是告訴html提交到那里--> <!--method是通過什么方法去action指定的地址--> <p> 用戶名:<input type="text" name="username"/> <!--這里的name="username" 這里當咱們指定的action接收到的數據之后縣會找到是否有這個name標簽--> <!--然后把這里的用戶的輸入復制給name為一個字典key:value模式--> </p> <p> 密碼:<input type="password" name="password"/> <!--這里的name="username" 這里當咱們指定的action接收到的數據之后縣會找到是否有這個name標簽--> <!--然后把這里的用戶的輸入復制給name為一個字典key:value模式--> </p> <p> 部門:<select name="department"> <option value="1">CTO</option> <option value="2">DBA</option> <!--這里在選擇之后，會把選擇的value值賦予給name，當用戶點擊提交后就會提交到后台--> </select> </p> <input type="submit" value="提交"/> </form>
8、label標簽
有一種情況，看下圖，在不使用label標簽的時候，我們只能點進框體里去，否則就不能輸入或選擇，這樣用戶體驗不是很好：
代碼如下：
<div> <h1>Label標簽</h1> 姓名:<input type="text"/> 婚否:<input type="checkbox"/> </div>
使用label標簽，代碼如下：
<div> <label for="name_1"> 姓名: <input id="name_1" type="text"/> </label> <label for="name_2"> 婚否:<input id="name_2" type="checkbox"/> </label> </div>
顯示效果，這里我選擇文字的時候也會進入到相應的框體，他類似一個跳轉：
9、列表 ul/ol/dl
ul列表在前面自動加“點”，代碼如下：
<ul> <li>line1</li> <li>line2</li> <li>line3</li> </ul>
效果如下：
ol列表在前面自動加“數字”，代碼如下：
<ol> <li>line1</li> <li>line2</li> <li>line3</li> </ol>
效果如下：
dl列表自動分組，代碼如下：
<dl> <dt>河北省</dt> <!--dt是標簽，dd是標簽里的內容--> <dd>石家庄</dd> <dd>衡水市</dd> <dt>山東省</dt> <!--dt是標簽，dd是標簽里的內容--> <dd>濟南市</dd> <dd>煙台市</dd> </dl>
效果如下圖：
10、表格
<table border="1"> <!--border這里是加上邊框--> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <!--一個tr是1行，一個td是一列，一行里可能有很多列。--> <!--如果想加多個行就加多個tr即可--> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>
效果如下：
合並單元格
<table border="1"> <!--border這里是加上邊框--> <tr> <td colspan="3">1</td> <!--這里colspan，就告訴html解析的時候占3個格--> </tr> <!--一個tr是1行，一個td是一列，一行里可能有很多列。--> <!--如果想加多個行就加多個tr即可--> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>2</td> <td>3</td> </tr> </table>
效果如下圖：
以上的表格標簽其實還不是很標准，正常標准的標簽如下：
<table border="1"> <thead> <!--表頭--> <tr> <th>表1</th> <th>表2</th> <th>表3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table>
效果如下圖：
11、fieldset標簽
代碼如下：
<fieldset> <legend>協議</legend> 請仔細閱讀協議內容： </fieldset>
效果如下：
更多請看：http://www.cnblogs.com/wupeiqi
參考文檔：http://www.cnblogs.com/lxin/archive/2013/02/18/2915344.html