1.meta標簽
<meta> 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。 <meta> 標簽位于文檔的頭部，不包含任何內容。 <meta> 標簽的屬性定義了與文檔相關聯的名稱/值對。
meta常用于定義頁面的說明，關鍵字，最后修改日期，和其它的元數據。這些元數據將服務于瀏覽器（如何布局或重載頁面），搜索引擎和其它網絡服務。
常見的meta標簽
eg.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="前端 饑人谷">
<meta name="description" content="最有愛的前端學習社區">
<title>Document</title>
</head>
- 申明編碼
<meta charset='utf-8' /> - 優先使用 IE 最新版本和 Chrome (適用于雙內核瀏覽器)
<!-- 使用最新的ie內核和chrome內核 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 關于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
- 瀏覽器內核控制
<meta name="renderer" content="webkit|ie-comp|ie-stand"> - 移動設備顯示
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - 頁面關鍵詞
<meta name="keywords" content="前端 饑人谷"> - 頁面描述
<meta name="description" content="最有愛的前端學習社區"> - 內存控制
<meta http-equiv="cache-control" content="no-cache">
no-cache: 先發送請求，與服務器確認該資源是否被更改，如果未被更改，則使用緩存。
no-store: 不允許緩存，每次都要去服務器上，下載完整的響應。（安全措施）
public : 緩存所有響應，但并非必須。因為max-age也可以做到相同效果
private : 只為單個用戶緩存，因此不允許任何中繼進行緩存。（比如說CDN就不允許緩存private的響應）
maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器重新請求。例如：max-age=60表示響應可以再緩存和重用 60 秒。
>
#####組成
meta標簽共有四個屬性分別是content屬性、http-equiv屬性、name屬性和scheme屬性。
其中content屬于必須的屬性用于*定義與 http-equiv 或 name 屬性相關的元信息*
scheme 屬性設置或返回用于解釋 content 屬性的值的格式。```<meta name="revised" content="2006-11-03" scheme="YYYY-MM-DD" />```
所以meta屬性其實主要分為兩大類 name 與 http-equiv
name 屬性提供了名稱/值對中的名稱。HTML 和 XHTML 標簽都沒有指定任何預先定義的 <meta> 名稱。通常情況下，您可以自由使用對自己和源文檔的讀者來說富有意義的名稱。
http-equiv 屬性為名稱/值對提供了名稱。并指示服務器在發送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。
>>使用帶有 http-equiv 屬性的 <meta> 標簽時，服務器將把名稱/值對添加到發送給瀏覽器的內容頭部。例如，添加：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
這樣發送到瀏覽器的頭部就應該包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
當然，只有瀏覽器可以接受這些附加的頭部字段，并能以適當的方式使用它們時，這些字段才有意義。
>
</br>
有兩個鏈接講的比較詳細，以后想辦法總結到一起
[分類描述](https://segmentfault.com/a/1190000004279791)
[各種具體應用場景](https://tink.gitbooks.io/fe-collections/content/ch02-html/s03-meta.html)
###文檔聲明
>#####文檔聲明的作用
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前。
<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
>>
- 嚴格模式是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如<br/>。
- 混雜模式則是一種向后兼容的解析方法，說的透明點就是可以實現IE5.5以下版本瀏覽器的渲染模式。
>
>>- 觸發嚴格模式:觸發嚴格模式很簡單，就是正常的建立網頁，聲明正確的DTD，便是嚴格模式。
- 觸發混雜模式:而混雜模式的觸發可以通過在HTML文檔開始不聲明DTD，或者在DOCTYPE前加入XML聲明l<?xml version=”1.0〃 encoding=”utf-8〃?>來實現。
>
####常用的 DOCTYPE 聲明
>>- HTML 5
```<!DOCTYPE html>```
- HTML 4.01 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">```
- HTML 4.01 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">```
- HTML 4.01 Frameset
該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內容。
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">```
- XHTML 1.0 Strict
該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">```
- XHTML 1.0 Transitional
該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">```
- XHTML 1.0 Frameset
該 DTD 等同于 XHTML 1.0 Transitional，但允許框架集內容。
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">```
- XHTML 1.1
該 DTD 等同于 XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的 ruby 支持）。
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">```
###瀏覽器亂碼的原因是什么？
> 文件保存的格式與meta中指定的解析格式不一樣，解決方法，用meta指定正確的解析格式或者保存為meta制定的格式
ex:
>>1. 亂碼產生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的。
2. 亂碼一般是英文以外的字符才會出現。
---
###常見的瀏覽器有哪些，什么內核
></br>
全球排行榜，IE占第一位，老牌瀏覽器，不過市場占有率逐步下滑， 第二是Mozilla Firefox，非IE內核的它迅速占有著IE的市場份額，強大無比的擴展插件是它一大特色，這也是我選用它的一個原因。 第三是Google Chrome，包含普通版還有極速版等，窗口較為簡潔清爽，實際使用效果還是可以的。 還有像opera還是相當實用的 360，TT，搜狗，遨游，瑞影，hotbrowser，等等
</br>
>
瀏覽器內核
- Trident：IE瀏覽器使用的內核,該內核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎之上修改而來的，并沿用到目前的IE8。Trident實際上是一款開放的內核，其接口內核設計的相當成熟，因此才有許多采用IE內核而非IE的瀏覽器涌現（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。此外，為了方便也有很多人直接簡稱其為IE內核（當然也不排除有部分人是因為不知道內核名稱而只好如此說）。
- Gecko：Netscape6開始采用的內核，后來的Mozilla FireFox也采用了該內核，Gecko的特點是代碼完全公開，因此，其可開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。因為這是個開源內核，因此受到許多人的青睞，Gecko內核的瀏覽器也很多，這也是Geckos內核雖然年輕但市場占有率能夠迅速提高的重要原因。
- Presto： 目前Opera采用的內核，該內核在2003年的Opera7中首次被使用，該款引擎的特點就是渲染速度的優化達到了極致，也是目前公認網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的兼容性。
- Webkit：蘋果公司自己的內核，也是蘋果的Safari瀏覽器使用的內核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件，在GPL條約下授權，同時支持BSD系統的開發。所以Webkit也是自由軟件，同時開放源代碼。在安全方面不受IE、Firefox的制約，所以Safari瀏覽器在國內還是很安全的。
- KHTML：KHTML，是HTML網頁排版引擎之一，由KDE所開發。KDE系統自KDE2版起，在檔案及網頁瀏覽器使用了KHTML引擎。該引擎以C++編程語言所寫，并以LGPL授權，支援大多數網頁瀏覽標準。由于微軟的Internet Explorer的占有率相當高，不少以FrontPage制作的網頁均包含只有IE才能讀取的非標準語法，為了使KHTML引擎可呈現的網頁達到最多，部分IE專屬的語法也一并支援。KHTML擁有速度快捷的優點，但對錯誤語法的容忍度則比Mozilla產品所使用的Gecko引擎小。
>>多種內核
傲游瀏覽器3:傲游瀏覽器3.0是國內首先嘗試使用Webkit與Trident雙核心的瀏覽器。Webkit核心將使你打開網頁的速度更快，Trident核心則會帶給你更好的兼容性支持。除此之外，傲游3.0目前還包括智能填表、智能地址欄、彈窗過濾、在線收藏等功能。
QQ瀏覽器:使用極速（Webkit）和普通（Trident）雙瀏覽模式，設計了全新的界面交互及程序框架，目的是為用戶打造一款快速、穩定、安全、網絡化的優質瀏覽器。
搜狗高速瀏覽器:使用高速（webkit）和兼容（Trident）雙瀏覽模式，保證良好兼容性的同時極大提升網頁瀏覽速度。當采用高速模式訪問網頁出現問題時，可點擊地址欄旁邊的內核按鈕直接切換內核，使用兼容性更佳的兼容模式正常瀏覽網頁。
###HTML常見標簽
>#####標題
- h1->h6 標題，由大到小，由強到弱,根據具體需求選擇合適的標題標簽
- p 段落，表示大段文字 ，自動帶換行，盡量用p標簽而不是自己通過換行來表示段落
- a 鏈接 鏈到一個地址
<a target="_blank" title="饑人谷">饑人谷.com</a>
<a href="#">饑人谷.com</a>
<a href="#about">饑人谷.com</a>
<a href="/getCourse">饑人谷.com</a>
- img 展示一張圖片 只閉合標簽，最后不需要加 /
```  ```
- div 語義為“一大塊”，用于給頁面劃分區塊，讓結構更清晰
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
- ul li
>>ul: unsort list 無序列表
用于表示并列的內容
ul的直接子元素是li
可以嵌套
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">關于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>聯系</li>
<li>地址</li>
</ul>
</li>
</ul>
>
- ol li
>>ol: order list 有序序列表 用于表示帶步驟或者編號的并列內容 ol的直接子元素只能是li 可以嵌套
<h2>把大象關到冰箱的步驟</h2>
<ol>
<li>把大象變小</li>
<li>打開冰箱</li>
<li>把大象塞進去</li>
</ol>
- dl dt dd
用于展示一系列 “標題:內容... ”的場景
<dl>
<dt>商品名稱:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圓口</dd>
<dt>商品介紹</dt>
<dd>這是一個年代久遠的瓷器，很貴，易碎</dd>
</dl>
- button 按鈕
<button>點我</button>
- strong em span
>>- em 需要強調一下
>>- strong 很重要、強調性更強
>>- span 僅僅是一個標記
>
<p>優惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 歲了</p>
- iframe 用于嵌入一個頁面 注意跨域操作問題,target可以控制跳轉到新頁面還是打開一個新窗口，使用name 是id選擇器，跳到元素所在的位置
<iframe src="http://jirengu.com" name="myPage"></iframe>
<p><a target="myPage">W3Cschool.cc</a></p>
-table
>>用于展示表格，不要用來做布局 thead tbody tfoot可省略，瀏覽器會自動添加 border-collapse: collapse;用于合并邊框
<table> 標簽定義 HTML 表格。
>> - 簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。
>>- tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。
>>- 更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年紀</th>
</tr>
</thead>
<tbody>
<tr>
<th>姓名</th>
<th>年紀</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<table>
<tr>
<th>姓名</th>
<th>年紀</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>
#####注意點
>>標簽屬性全小寫
標簽要閉合、自閉合標簽可以省略 /
標題里不能有段落，段落里不能有標題
>
#####塊級元素vs 行內元素
塊級元素：大小只占自身所在區域
行內元素：大小占一行
