HTML的全程是Hyper Text Markup Language，中文名叫超文本標記語言，是一種用于創(chuàng)建網頁的標準標記語言。HTML不是一種編程語言，而是一種標記語言，用來描述網頁。
一、最基本的HTML文檔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>First Page</title>
</head>
<body>
<h1>這是標題</h1>
<p>這是段落</p>
</body>
</html>
其中
- <!DOCTYPE html>：聲明該文檔是HTML5文檔，加上這個聲明有助于瀏覽器正確的顯示網頁內容。
- <html>：HTML文檔的根元素。
- <head>：包含HTML文檔的頭信息，包括文檔標題和文檔的元數(shù)據(jù)。
- <title>：文檔標題。
- <meta>：文檔元數(shù)據(jù)，其中的charset="utf-8"屬性表示文檔采用utf-8編碼，如果沒有這個聲明，可能會出現(xiàn)中文亂碼。
- <body>：可見的頁面內容。
- <h1>：標題。
- <p>：段落。
HTML內容
HTML在顯示時瀏覽器會移除多余的的空格和空行，所有的空行和空格都會顯示成一個空格。
HTML標簽
- HTML標簽不區(qū)分大小寫，但是推薦使用小寫，未來版本中會強制使用小寫。
- HTML標簽最好全都開始標簽和結束標簽成對出現(xiàn)，沒有內容的標簽可以在開始標簽最后添加"/"關閉標簽，表示空標簽。
- 在開始標簽中設置屬性可以給元素增加附件信息。
HTML屬性
- 屬性使用鍵值對表示。
- 其中屬性值始終包含在引號內，一般使用雙引號，也可以使用單引號。
- 屬性也使用小寫。
二、基本標簽
標題
使用<h1> - <h6>來表示，字體越來越小。
<h1>這是標題</h1>
段落
使用<p>表示。
<p>這是段落</p>
鏈接
使用<a>表示。
<a >這是指向百度的鏈接</a>
在元素中添加標簽ID，可以在href中添加#id來跳轉到頁面特定部分，還可以把文字換成圖片標簽來顯示圖片鏈接。
圖像
使用<img>表示。
<img src="./imges/logo.png" width="255" height="255" />
注釋
<!-- 這是注釋 -->
分割線
<hr>
段落內換行
<br>
格式化文本
可以使用<b><i>設置粗體、斜體等，還有很多別的格式化文本的標簽。
三、常用屬性
幾乎所有HTML標簽都有的屬性：
- class： 定義元素的一個或多個類名。
- id：定義元素的唯一ID。
- style：定義元素的行內樣式。
- title：定義元素的額外信息（作為工具條使用）。
四、HTML頭部
頭部標簽用<head>括起來，可以包含到這個標簽里的標簽有：<title><style><meta><link><script><noscript><base>。
- <title>
定義標題。 - <base>
定義本 文檔中所有的鏈接標簽的默認鏈接地址。 - <link>
定義本文檔和外部資源的關系，通常用于鏈接到樣式表。 - <style>
定義了文檔的樣式文件引用地址，也可以直接添加樣式信息。 - <meta>
定義了網頁元數(shù)據(jù)，可以包含網頁的描述、關鍵詞、文件的最后修改時間、作者。 - <script>
用于加載腳本。
五、HTML樣式
可以通過3種方式把樣式表添加到HTML文檔中：
- 內聯(lián)樣式：在標簽中使用style屬性。
- 內部樣式表：在<head>中的<style>中包含樣式信息。
- 外部引用：使用外部CSS文件。
最好的方式是通過外部引用CSS文件
六、布局顯示
大多數(shù)HTML的標簽都可以定義為塊級元素和內聯(lián)元素，塊級元素以新行來顯示，內聯(lián)元素不會以新行開始。
表格
表格由<table>定義，每個表格有若干行，由<tr>定義，每行被分割為若干個單元格，由<td>定義，意思是表格數(shù)據(jù)，單元格里可以嵌套其他的標簽。另外還可以定義表頭，用<th>表示。
需要注意表格現(xiàn)在一般不用于布局。
列表
列表支持有序列表、無序列表和自定義列表。
- 有序列表：使用<ol>定義，列表項用<li>定義。
- 無序列表：使用<ul>定義，列表項用<li>定義。
- 自定義列表：使用<dl>定義，一個列表使用<dt>定義，列表項用<dd>定義。
列表項內部可以嵌套各種標簽。
區(qū)塊
區(qū)塊用<div>定義，一般用于其他標簽的容器作文檔布局和對大的內容塊設置樣式屬性。另外還有一個<span>標簽，用于部分文本設置樣式屬性。
七、表單
表單用于收集不同類型的用戶輸入，用<form>來定義，。一般里面都是嵌套輸入標簽<input>，通過不同的類型屬性定義不同輸入類型。輸入類型常用以下幾種：
- 文本域：type="text"，用來輸入文本。
- 密碼：type="password"，用來輸入密碼。
- 單選按鈕：type="radio"，用來定義單選選項。
- 復選框：type="checkbox"，用來定義復選選項。
- 提交按鈕：type="submit"，用來定義提交按鈕。
另外還可以定義下拉列表、按鈕等。
表單標簽中還可以定義其他很多和用戶輸入相關的標簽。
八、框架
使用框架，可以在一個瀏覽器窗口中顯示不止一個頁面，例如左邊是目錄，右邊是內容的頁面。
框架是通過<iframe>來定義的。
<iframe src=""></iframe>
可以通過屬性定義框架的尺寸、是否顯示邊框等。
九、顏色
顏色值使用一個十六進制符號定義：#0000ff。另外還有一部分的常用顏色可以使用顏色名來定義：blue。
十、腳本
腳本使用<script>定義，該標簽可以嵌在<head>中或<body>中，腳本代碼就包含在這個標簽中。通過腳本可以和用戶進行交互，對內容進行動態(tài)更新等。
十一、字符實體
如果在文檔內容中包含HTML的保留字符，必須替換為字符實體才能顯示?？梢杂米址麑嶓w顯示的還有特殊字符和空格，使用字符實體可以顯示連續(xù)的多個空格。
十二、URL
在網絡上使用統(tǒng)一資源定位符URL來定位萬維網上的文檔，URL的格式如下
scheme://host.domain:port/path/filename
- scheme：定義因特網服務的類型，最常見的類型是http。
- host：定義域主機(http的默認主機是www)。
- domain：定義域名。
- :port：定義端口號。
- path：定義服務器上的路徑，相對于網站根目錄。
- filename：定義文檔或資源名稱。
URL中只能使用ASCII字符集，如果有非ASCII字符需要轉為URL編碼表示。URL編碼使用“%”后跟兩位十六進制數(shù)來表示。URL中不能包含空格，一般使用+來替換空格。
十三、HTML5
HTML5的設計目的是在移動設備上支持多媒體。HTML5中增加了很多新特性：
- 增加了一些新元素和新屬性，例如畫布元素、多媒體元素等，也去除了一些原來的標準中不規(guī)范或沒什么用的元素。
- 支持本地離線存儲。
- 全面支持CSS3。
1.畫布canvas
<canvas>標簽定義畫布，實際就是一個矩形框，在js中獲取到這個畫布對象進行繪圖。
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0, 100, 100);
</script>
2.SVG矢量圖
SVG是一種使用XML描述2d圖形的語言，可以在HTML頁面中直接嵌入SVG數(shù)據(jù)顯示矢量圖。SVG中的每個繪制的圖形都被視為對象，可以使用js操作也可以添加事件處理。適合帶有大型渲染區(qū)域的應用，如谷歌地圖，不適合游戲應用。
<svg xmln="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180" />
</svg>
3.MathML
MathML是一種基于XML的用于在web上書寫數(shù)學符號和公式的標記語言，在HTML中可以通<math>標準嵌入在頁面中。
<math xmln="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
4.拖放
在HTML5中，任何元素都可以拖放。
<script>
function drag(ev)
{
ev.dataTransfer.setData("Text", ev.target.id);
}
function allowDrop(ev)
{
ev.preventDefault();
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<img draggable="true" ondragstart="draw(event)">
<div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
5.音頻視頻
音頻使用標簽<audio>，視頻使用標簽<video>。
6.表單
HTML5中新增了很多新的input類型，類型增加了日期、時間、顏色、電子郵件等，提供了更好的輸入控制和驗證。另外還新增了幾種表單標簽：
-
<datalist>：選項列表。 -
<keygen>：密鑰生成器。 -
<output>：輸出。
另外每種標簽增加了很多新的屬性，用于對標簽進行更好的控制。
7.Web存儲
HTML5的Web存儲是一種比cookie更好的本地存儲方式。用于存儲對象的兩上對象是localStorage和sessionStorage：
- localStorage：用于長久保存一個網站的數(shù)據(jù)，沒有過期時間，直到手動刪除。
- sessionStorage：用于臨時保存同一窗口或標簽頁的數(shù)據(jù)，在關閉窗口或標簽頁之后會刪除。
使用之前先檢查瀏覽器是否支持Web存儲：
if (typeof(Storage)!=="undefined")
{
//支持
}
localStorage
常用的API：
- localStorage.setItem(key, value)：保存數(shù)據(jù)
- localStorage.getItem(key, value)：讀取數(shù)據(jù)
- localStorage.removeItem(key)：刪除單個數(shù)據(jù)
- localStorage.clear()：刪除所有數(shù)據(jù)
- localStorage.key(index)：獲取某個索引的key
一般在使用時的方式：
localStorage.key = value； //保存數(shù)據(jù)
localStorage.key； //讀取數(shù)據(jù)
當然，如果key是一個變量，就只能使用上面展示的API中的方式了。
sessionStorage
API、用法和localStorage是一樣的，只是其數(shù)據(jù)在網頁關閉后會清除。
8.Web SQL
Web SQL并不是HTML5標準的一部分，它是一個獨立的規(guī)范，引入了一組使用SQL操作客戶端數(shù)據(jù)庫的API。這個規(guī)范中有3個核心方法：
openDatabase：使用現(xiàn)有的數(shù)據(jù)庫或新建的數(shù)據(jù)庫創(chuàng)建一個數(shù)據(jù)庫對象。
transaction：控制一個事務，以及基于這種事務的提交或回滾。
-
executeSql：執(zhí)行實際的SQL語句。
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024)
參數(shù)分別是數(shù)據(jù)庫名稱、版本號、描述文本、數(shù)據(jù)庫大小，回調，最后一個參數(shù)可有可無。
db.transaction(function (tx){
tx.executeSql('Sql語句');
});
executeSql中還可以增加其他參數(shù)來對結果進行控制。
9.應用程序緩存
HTML5引入了應用程序緩存，這樣Web應用可進行緩存，緩存了之后不聯(lián)網也可以使用。
10.Web Worker
Web worker是運行在后臺的JavaScript，不會影響頁面的性能。
11.服務器發(fā)送事件Server-Sent Events
通過SSE可以讓網頁自動獲取來自服務器的更新，這除了在頁面中添加對應的處理，在服務器端也要支持發(fā)送事件。服務器的新消息就是通過這種方式發(fā)送的？
12.WebSocket
WebSocket是HTML5開始提供的一種在單個TCP連接上進行全雙工通訊的協(xié)議。在WebSocket API中，瀏覽器和服務器只需要做一個握手的動作，瀏覽器和服務器之間就形成了一條快速通道，兩者之間就可以進行數(shù)據(jù)交換了。
