HTML的基本結構
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
<!-- 網頁內容 -->
</body>
</html>
- <!DOCTYPE html>：告訴瀏覽器需要一個doctype來觸發標準模式。
- <html lang="zh-cn">：指定語言種類為中文，html是根元素。
- <head></head>：頭部元素的容器，其中的內容絕大部分都不會直接顯示給讀者。
- <body></body>：內容載體，里面的標簽元素直接顯示給讀者。
Head包含的內容
在Head中可以引用腳本，樣式，標題，元信息等等，下面這些標簽可以用在head部分：
-
<meta>：元信息，一個輔助性標簽，提供搜索關鍵字、網頁內容描述、文檔字符集、使用語言、自動刷新和頁面重定向、頁面緩沖等等，它共有兩個屬性：
name、http-equiv，不同的屬性又有不同的參數，而content為參數對應的值。-
name：主要用于網頁描述，而它主要有以下幾種參數：
-
Keywords：該網頁的搜索關鍵字。
<meta name="keywords" content="關鍵字,關鍵字.."> -
description：網站內容描述，告訴搜索引擎你的網站主要內容。
<meta name="description" content="網頁描述....150words"> -
robots：搜索引擎索引方式。
<!-- all:文件被檢索，且頁面上的鏈接可以被查詢； none：文件將不被檢索，且頁面上的鏈接不可以被查詢； index：文件將被檢索； follow：頁面上的鏈接可以被查詢； noindex：文件將不被檢索； nofollow：頁面上的鏈接不可以被查詢。 --> <meta name="robots" content="index,follow"> -
viewport：優化移動瀏覽器的顯示。
<!-- width：寬度（數值 / device-width）（范圍從200 到10,000，默認為980 像素） height：高度（數值 / device-height）（范圍從223 到10,000） initial-scale：初始的縮放比例 （范圍從>0 到10） minimum-scale：允許用戶縮放到的最小比例 maximum-scale：允許用戶縮放到的最大比例 user-scalable：用戶是否可以手動縮 (no,yes) --> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> - author：標注網頁作者。
- COPYRIGHT：標注網也版權信息。
- generator：標注網頁制作軟件。
- revisit-after：代表網站重訪，7days表示7天，抓取過一次之后就要等7天再來。
-
Keywords：該網頁的搜索關鍵字。
-
http-equiv：頭文件作用，幫助顯示網頁內容，它主要有以下幾種參數:
-
content-Type：設定頁面使用的字符集。
<!-- UTF-8：世界通用的語言編碼，bg2312：簡體中文編碼 --> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> -
Content-Script-Type：設定頁面中腳本類型。
<Meta http-equiv="Content-Script-Type" content="text/javascript"> -
Expires：設置網頁過期時間，一旦過期就會重載，必須使用GMT格式，或者直接設置為0。
<meta http-equiv="expires" content="Fri, 12 Jan 2018 18:18:18 GMT"> <!-- 0：加載之后就過期 --> <meta http-equiv="Expires" content="0"> -
Refresh：自動刷新和頁面重定向。
<!-- 3秒之后自動刷新，如果填寫了URL則重定向到這個URL，反之則不會重定向 --> <meta http-equiv="Refresh" content="3;URL=http://www.lxweimin.com/u/03e9c9f9a30f"> -
Pragma：瀏覽器一般會緩存頁面內容，當我們設置為
no-cache就不會進行緩存。<meta http-equiv="Pragma" content="no-cache"> -
Cache-Control：指定請求和響應遵循緩存機制。
<meta http-equiv="Cache-Control" content="no-cache"> <!-- 用百度打開網頁可能會對其進行轉碼（比如貼廣告）,添加這兩種content可以避免轉碼 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <meta http-equiv="Cache-Control" content="no-transform" /> -
X-UA-Compatible：設定瀏覽器采取何種版本渲染當前頁面。
<!-- 指定IE和Chrome使用最新版本渲染當前頁面 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> -
Set-Cookie：設置cookie，如果網頁過期，那么網頁存在本地的cookies也會被自動刪除。
<meta http-equiv="Set-Cookie" content="User=Ddpz; path=/; expires=Fri, 12 Jan 2018 18:18:18 GMT">
-
content-Type：設定頁面使用的字符集。
-
name：主要用于網頁描述，而它主要有以下幾種參數：
-
<base>：作為所有鏈接規定默認地址與默認目標，必須位于head元素內部
<!-- _blank：新建目標，_self：自身目標 --> <base href="http://www.lxweimin.com/u/03e9c9f9a30f" target="_blank, _self"> -
<link>：定義文檔與外部資源的關系，最常見的用途是鏈接樣式表以及圖標，它有以下幾種屬性：
<!-- 鏈接外部css樣式表 --> <link rel="stylesheet" media="all" href="http://cdn2.jianshu.io/assets/web- 05add656961cebea70aa.css" /> <!-- 鏈接外部圖標 --> <link rel="icon" href="http://cdn2.jianshu.io/assets/apple-touch-icons/57- 47624b2e2161e8eb144462c85db0a5ff.png" sizes="57x57" />- href：指定需要加載的資源的地址URL。
- media：媒體類型，設定被鏈接文檔將顯示在什么設備上。
-
rel：定義當前文檔與被鏈接文檔之間的關系，
stylesheet代表css樣式表，icon表示圖標 -
sizes：設定被鏈接資源的尺寸，僅適用于
rel="icon"。 -
type：執行所鏈接文檔的MIME類型，css的type一般使用
"text/css"。
-
<title></title>：頁面標題。
<title>大大盆子 - 簡書</title> -
<style></style>：定義HTML文檔樣式信息，可以統一定制body中所用到的標簽樣式，type屬性是必須的，且唯一可能的值就是
"text/css"。<style type="text/css"> /*設置nav背景色，寬高，文字排版*/ nav{background: #E0FFFF;width: 100%;height: 40px;text-align: center} /*設置li標簽橫向排布*/ li{display: inline;} /*去除a標簽下滑線*/ a{text-decoration: none;font-size: 20px} </style> -
<script></script>：定義客戶端腳本，script元素既可以包含腳本語句，也可以通過src屬性指向外部腳本文件，常見于對圖像的操作、表單的驗證以及動態內容更新。
-
type：規定腳本的MIME類型，對于JavaScript，MIME類型就是
"text/javascript"，它是必須屬性。<script type="text/javascript"> alert("hello world!") </script> -
src：鏈接外部腳本，其中的URL可以是絕對URL（指向其他站點），也可以是相對URL（指向站點內的文件）。
<script type="text/javascript" src="myscripts.js"></script> -
async：規定異步執行腳本，僅適用于外部腳本（src鏈接）。
<script type="text/javascript" src="demo_async.js" async="async"></script> -
defer：規定是否對腳本執行進行延遲，直到頁面加載為止，比如優先加載文字，完成之后再去加載圖片。
<script type="text/javascript" src="demo_defer.js" defer="defer"></script>
-
type：規定腳本的MIME類型，對于JavaScript，MIME類型就是
Body包含的內容
body標簽中的內容直接展示給讀者，標簽相對較多，我對它進行了以下歸類：
-
布局標簽&語義化：
-
<div>：定義塊級元素，是一個通用的容器元素，可以把文檔分割為獨立、不同的的部分，會另起一行，通常使用
class或id給同一類的div統一添加額外的樣式與適當的語義，同時也可以設置title:當鼠標放上去的時候顯示這個title、dir:設定元素標簽內容文字方向。 -
<span>：定義行內元素，在行內定義一個區域，也就是一行可以被span劃分成好幾個區域，不會另起一行，也可以使用
class或id添加樣式和語義，當應用樣式時，它才會產生視覺上的變化。 -
<header>：定義頁面的頭部區域，一個語義化標簽，讓文檔結構層次更清晰，相當于
<div class="header"></div>。 -
<footer>：定義頁面的尾部區域，也是一個語義化標簽，相當于
<div class="footer"></div>。 - < section >：定義文章中的大綱或章節，通常帶有標題與段落內容，不是通用容器元素，相比于div更具語義化，它強調內容上的獨立性，div強調形式上的獨立性，如果僅僅是用于設置樣式或腳本處理則使用div。
- < article >：定義文章，語義化更強，表示是一篇文章，里面可以嵌套其他元素，它可以有自己的頭、尾、主體、等內容。
- < aside >：定義頁面內容之外的內容，通常用來設置側邊欄，同時也可以嵌套在article元素內部使用，作為主要內容的附屬信息，比如參考資料，名詞解析等。
- < nav >：定義導航欄、超鏈接。
- < hgroup >：標題分組，通常放在header里面。
-
<div>：定義塊級元素，是一個通用的容器元素，可以把文檔分割為獨立、不同的的部分，會另起一行，通常使用
-
表格標簽
- <table>:定義表格，主要有一下幾個屬性:
- border
- <caption>:定義表格標題。
- <thead>:定義表格頭部。
- <tbody>:定義表格主體。
- <tfoot>:定義表格尾部。
- <caption>:定義表格標題。
列表標簽
未完待續......
