概述
HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種制作萬維網頁面標准語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器負責將標簽翻譯成用戶“看得懂”的格式，呈現給用戶！(例：djangomoan模版引擎)
HTML文檔
文檔樹Doctype
Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔
有和無的區別
- BackCompat：標准兼容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式）
- CSS1Compat：標准兼容模式已開啟（或叫嚴格模式[Standards mode/Strict mode]）
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣式。如果你的頁面添加了那么，那么就等同於開啟了標准模式，那么瀏覽器就得老老實實的按照W3C的標准解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
有，用什么？
Doctype告訴瀏覽器使用什么樣的html或xhtml規范來解析html文檔, dtd文件則包含了標記、attributes 、properties、約束規則。
更多
Meta(metadata information)
提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞
- 頁面編碼（告訴瀏覽器是什么編碼）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
- 刷新和跳轉
< meta http-equiv=“Refresh” Content=“30″>
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
- 關鍵詞
< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >
- 描述
例如：cnblogs
- X-UA-Compatible
微軟的IE6是通過XP、Win2003等操作系統發布出來，作為占統治地位的桌面操作系統，也使得IE占據了通知地位，許多的網站開發的時候，就按照IE6的標准去開發，而IE6自身的標准也是微軟公司內部定義的。到了IE7出來的時候，采用了微軟公司內部標准以及部分W3C的標准，這個時候許多網站升級到IE7的時候，就比較痛苦，很多代碼必須調整后，才能夠正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部自己定義的標准拋棄了，而全面的支持W3C的標准，由於基於對標准徹底的變化了，使得原先在早期IE8版本上能夠訪問的網站，在IE8中無法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各種兼容性錯誤。
與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標准提供了更加緊密的支持。 因此，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。 為了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而允許您指定站點所支持的 Internet Explorer 版本。 文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。 如果您的站點在 Internet Explorer 8 中無法正確顯示，則可以更新該站點以支持最新的 Web 標准（首選方式），也可以強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。 通過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，可以實現這一點。
當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 指令來確定如何顯示該網頁。 如果該指令丟失或未指定基於標准的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。更多
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Title
網頁頭部信息
Link
- css
< link rel="stylesheet" type="text/css" href="css/common.css" >
- icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
在頁面中寫樣式
例如：< style type="text/css" >
.bb{
background-color: red;
}
< /style>
Script
- 引進文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
- 寫js代碼
< script type="text/javascript" > ... </script >
body標簽
標簽一般分為兩種：行內標簽和塊級標簽；
塊級標簽： div（白板），H系列（加大加粗），p標簽（段落和段落之間有間距）
行內標簽： span（白板）
- 標簽之間可以嵌套
- 標簽存在的意義，css操作，js操作
P和br標簽
<p>段落</p> <!--p表示段落，默認段落之間是有間隔的！-->
<br/> <!--br是換行-->
<a href="http://www.baidu.com" target="_blank">點我</a>
<!--href表示跳轉的地址，target="_blank"表示新窗口打開，默認為當前頁-->
<body>
<a href="#1">第一章</a><br/>
<a href="#2">第二章</a><br/>
<a href="#3">第三章</a><br/>
<a href="#4">第四章</a><br/>
<div id="1" style="height: 600px;">第一章的內容</div>
<div id="2" style="height: 600px;">第二章的內容</div>
<div id="3" style="height: 600px;">第三章的內容</div>
<div id="4" style="height: 600px;">第四章的內容</div>
</body>
div標簽
塊級標簽-白板，可以設置屬性；
span標簽
行內標簽-白板
input系列
- text
1
<inputtype="text"name="user"/> - password
1
<inputtype="password"name="passwd"/> - submit
1
<inputtype="submit"value="登錄"/> - button
1
<inputtype="button"value="登錄"/> - radio 單選框
123
<p>請選擇性別:</p>男:<inputtype="radio"name="sex"value="1"checked="checked"/>女:<inputtype="radio"name="sex"value="2"/>
頁面效果如下：
- checkbox 多選框
12345
<p>愛好</p>籃球:<inputtype="checkbox"name="favor"value="1"checked="checked"/>足球:<inputtype="checkbox"name="favor"value="2"/>台球:<inputtype="checkbox"name="favor"value="3"/><!--checked="checked"表示默認選擇-->
頁面效果如下：
- file 上傳文件
1
<inputtype="file"name="fname"/>
頁面效果如下：
- reset 重置
|
1
|
<
input
type
=
"reset"
value
=
"重置"
/
>
|
頁面效果如下：
一、基礎標簽
| <i>、<em> |
文字傾斜 |
<i>傾斜</i>或<em>傾斜</em> |
| <b>、<strong> |
文字加粗 |
<b>加粗字體</b> |
| <sup>、<sub> |
上標和下標 |
4<sup>2</sup>，O<sup>2</sup> |
| <del> |
刪除字 |
<del>刪除字</del> |
二、特殊符號
| 編號 |
標簽名 |
含義 |
示例 |
| 01 |
|
一個空格 |
你 好！ |
| 02 |
> |
大於號 |
5>3 |
| 03 |
< |
小於號 |
5<8 |
| 04 |
© |
版權符號 |
© 海文國際 |
| 05 |
" |
雙引號 |
" 中國 " |