HTML5相比較以前的HTML的文法變化：

一、标簽不再區分大小寫。例如：<p>标題</P> 是合法的

二、元素可以省略結束标簽。

1、空元素文法的元素：area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr。空元素标簽不允許将開始标簽和結束标簽分開寫，例如<img.../>不能寫成<img src="a.gif" alt="a"></img>的形式，但是HTML5不要求遵循XML規範，是以<img.../>标簽可以寫成<img src="a.gif" alt="a">.

2、可以省略結束标簽的元素：colgroup、dt、dd、li、optgroup、option、p、rt、rp、thread、tbody、tffot、tr、td、th。

3、可以省略全部标簽的元素：html、head、body、tbody。

三、允許省略屬性值的屬性：checked、readonly、disabled、selected、defer、ismap、nohref、noshade、nowrap、multiple、noresize。

四、允許屬性值不引用引号（但是容易引起浏覽器誤會的屬性值，還是需要使用引号）。

HTML5的常用元素與屬性：

一、保留的基本元素：

是HTML5注釋；

<html>是HTML5文檔的根元素，允許完全省略；

<head>是用于定義HTML5文檔的頁面頭部分，允許完全省略；

<title>用于定義HTML5文檔的頁面标題；

<body>用于定義HTML5文檔的頁面主題部分，該标簽可以指定id、class、style等核心屬性，還可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件屬性，這些屬性用于指定JavaScript腳本；

<style>用于引入樣式定義，會用到CSS；

<h1>到<h6>用于定義标題一到标題六；

<p>定義段落，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性。

<br>表示插入一個換行，該标簽可以指定id、class、style等核心屬性；

<hr>定義水準線，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性，html5中<hr/>還代表了主題結束的語義；

<div>定義文檔中的節，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性；

<span>與<div>基本相似，差別是該定義的節預設不會換行，屬性和<div>一樣；

其中<span.../>元素和<p.../>元素隻能包含文本、圖像、超連結、文本格式化元素和表單控件元素等内容，<p.../>元素可以包含<span.../>元素，但是反過來不可以；<div.../>元素出來可以包含上面這些内容之外（包括<p.../>和<span.../>），還可以包含<h1.../>到<h6.../>、<form.../>、<table.../>、清單元素和<div.../>；

二、文本格式化元素：

<b>定義粗體文本，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性；

<i>定義斜體文本，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性；

<em>定義強調文本，實際效果與斜體文本差不多，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性；

<strong>定義粗體文本，與<b>标簽的作用和用法基本相同；

<small>定義小号字型文本，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性；

<sup>定義上标文本，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性；

<sub>定義下标文本，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性；

<bdo>定義文本的相識方向，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性，還可以指定dir屬性值，該屬性值隻能是ltr或者rtl；

三、超連結和錨點

<a.../>元素是定義超連結的元素，該标簽可以指定id、class、style等核心屬性，還可以指定onclick等各種事件屬性，還可以以下三個重要屬性：

href：指定超連結所關聯的另一個資源（網址）；

target：指定使用架構集中的哪一個架構來裝載另一個資源，該屬性的屬性值可以是_self、_blank、_top、_parent四個值，分别代表使用自身、新視窗、頂層架構、父架構來裝載新資源；

media：指定目标URL所引用的媒體類型。預設值為all，隻有當指定了href屬性時該屬性才有效。

<a.../>标簽還可以用于生成一個命名錨點，命名錨點用于在HTML頁面中生成一個定位點，這樣允許超連結直接連結到指定頁面的該定位點。插入定位錨點需要指定name屬性，name屬性值就算是該命名錨點的名稱。

例如：<a name="test"></a>，即生成一個命名錨點，該命名錨點在浏覽器中不會顯示任何内容，可以使用超連結定位到該錨點。

例如：<a href="anchor.html#test" target="_blank" rel="external nofollow" >定位到test錨點</a>，錨點名和URL資源之間用#隔開。

四、清單相關元素

<ul>定義無序清單，該元素可以指定id、style、class等屬性，還可以指定onclick等事件屬性，該元素隻能包含<li.../>子元素；

<ol>定義有序清單，該元素可以指定id、style、class等屬性，還可以指定onclick等事件屬性，該元素隻能包含<li.../>子元素；

<li>定義清單項目，該元素可以指定id、style、class等屬性，還可以指定onclick等事件屬性，該元素能包含與<div.../>完全類似的内容，是以可以包含較多類型的子元素；

<dl>也用于定義清單，該元素隻能包含<dt.../>和<dd.../>兩種子元素，該元素可以指定is、style、class等屬性，還可以指定onclick等事件屬性，該元素隻能包含<li.../>子元素；

<dt>定義标題清單項，該元素可以指定id、style、class等屬性，還可以指定onclick等事件屬性，該元素隻能包含<li.../>子元素，該元素隻能包含文本、圖像、超連結、文本格式化元素和表單控件元素等；

<dd>定義普通清單項，該元素可以指定id、style、class等屬性，還可以指定onclick等事件屬性，該元素裡可以包含與<div.../>完全類似的内容，英雌可以包含較多類型的子元素；

五、圖像相關元素

<img.../>元素在頁面中定義圖像，這個元素隻能是一個空元素，他不可以包含任何内容，該元素可以指定id、style、class等屬性，還可以指定onclick等事件屬性，不僅如此，使用該元素必須指定如下兩個屬性：

src：指定圖檔檔案所在的位置，可以是相對路徑，也可以是絕對路徑；

alt：指定一段文本，改文本将作為該圖檔的提示資訊；

除此以外，該元素還可以指定如下兩個可選屬性：

height：指定圖檔的高度，可以是百分比，也可以是像素值；

width：指定圖檔的寬度，可以是百分比，也可以是像素值；

除此以外，與圖檔相關的還有如下兩個标簽：

<map>：用于定義圖檔映射，該元素主要可以包含一個或多個<area.../>子元素，每個<area.../>子元素定義一個區域，不同區域可連結到不同的URL；

<area.../>：用于定義圖檔映射的内部區域，該元素隻能是一個空元素，該元素除了可以指定id、style、class等屬性外，還可以指定onclick等事件屬性，還可以指定onfocus、onblur等焦點相關屬性。還可以指定shape（形狀，有rect、circle、ploy）、coords（指定坐标值，确定區域的位置）、href（指定區域所連接配接的資源）、alt（指定一段文本，作為該圖檔的提示資訊）、targer、media等屬性；

HTML5學習筆記第一天HTML5相比較以前的HTML的文法變化：HTML5的常用元素與屬性： <figcaption.../>通常放在<figure.../>内部，用于定義“圖檔區域”的标題；HTML5的繪圖支援HTML5的多媒體支援級聯樣式與CSS選擇器

六、表格相關元素

<table>用于定義表格，<table.../>隻能包含0或1個<caption.../>子元素（定義表格标題），0或1個<thead.../>子元素（定義表格頭），0或1個<tfoot.../>子元素（定義表格腳），多個<tr.../>子元素（定義表格行），多個<tbody>子元素（定義表格體），指定id、style、class等屬性外，還可以指定onclick等事件屬性，除此以外，還可以指定以下幾個屬性：

cellpadding：指定單元格内容和單元格邊框之間的間距，可以是像素，也可以是百分比；

cellspacing：指定單元格之間的間距，可以是像素，也可以是百分比；

width：指定表格的寬度可以是像素，也可以是百分比；

<caption>：用于定義表格标題，該元素隻能包含文本、圖檔、超連結、文本格式化元素和表單控件元素；

<tr>：定義表格行，該元素隻能包含<td.../>或者<th.../>兩種元素，該元素可以指定id、style、class等屬性，還可以指定onclick等事件屬性；

<td>定義單元格，該元素和<div.../>元素一樣，可以包含各種類型的子元素，包括在<td.../>元素裡包含<table.../>子元素（再插入一個表格），可以指定id、style、class等屬性外，還可以指定onclick等事件屬性，除此以外，還有如下幾個屬性：

colspan：指定該單元格跨多少列，該屬性值就是一個簡單地數字；

rowsapn：指定該單元格可以橫跨的行數；

height：指定該單元格的高度，可以是像素值，也可以是百分比；

width：指定該單元格的寬度，可以是像素值，也可以是百分比；

<th>：定義表格頁眉的單元格，和<td>标簽的用法幾乎完全一樣；

<tbody>：定義表格的主體，該元素隻能包含<tr.../>元素，可以指定id、style、class等屬性，還可以指定onclick等事件屬性；

<thead>：定義表格頭，用法與<tbody.../>基本相似；

<tfoot>：定義表格腳，用法與<tbody.../>基本相似；

七、架構相關元素

HTML5不再推薦在頁面中使用架構集，保留了一個與架構相關的元素<iframe.../>,它可以在普通HTML頁面中使用，該元素用于在普通HTML頁面中生成一個内聯架構，可以直接在HTML頁面的任何位置，它除了可以指定id、style、class等核心屬性之外，還可以指定屬性src，該屬性指定一個URL，指定該iframe将裝載哪個頁面；八、文檔結構元素

<article>：該元素用于代表頁面上獨立、完整的一篇“文章”；

<header.../>定義文章“标題”部分；

<footer.../>定義文章“腳注”部分；

<section.../>把文章内容分成幾個“段落”；

<article還可以内部嵌套多個<article.../>作為它的附屬文章；

<section>：該元素用于對頁面内容進行分塊，通常也可由标題和内容組成，它的一些規則如下：

建議包含一個标題（也就是<h1.../>到<h6.../>元素定義的标題）；

可以包含多個<article.../>元素，表示該“分塊”内部包含多篇文章；

可以嵌套<section.../>元素，用于表示該“分塊”包含多個“子分塊”；

<nav>用于定義頁面上的“導覽列”，包括頁面上方的“主導覽列”、側邊的“邊導覽列”、頁面内部的“頁面導航”、頁面下方的“底部導航”等。HTML5推薦将這些導覽列連結分别放在相應的<nav.../>元素中進行管理；

<aside>：用于定義目前頁面或目前文章的附屬資訊，推薦<aside.../>元素使用CSS渲染成側邊欄；

<header>：用于為<article.../>元素定義文章“頭部”資訊，它的内部既可以包含多個<h1>~<h6>這樣的标題元素，也可以包含<hgroup.../>元素，還可以包含普通的<p.../>、<span.../>等元素；

<hgroup>：該元素用于組織多個<h1>~<h6>這樣的标題元素，當<header.../>需要包含多個标題元素時，可以考慮使用<hgroup.../>把它們組成一組；

<footer>：用于為<article.../>元素定義“腳注”部分，包括文章的版權資訊、作者授權等；

<figure.../>：用于表示一塊獨立的“圖檔區域”，可以包含多個<img.../>元素所代表的圖檔，除此之外，該元素内部還可以包含一個<figcaption.../>元素，用于定義該“圖檔區域”的标題；

<figcaption.../>通常放在<figure.../>内部，用于定義“圖檔區域”的标題；

九、語義相關元素

<mark>：用于顯示重點“關注”的内容，可以指定id、style、class和hidden等通用屬性，浏覽器通常會用黃色顯示<mark>标注的内容；

<time>：用來顯示被标注内容是日期、時間或者日期時間；

隻有Chrome支援<details.../>與<summary.../>元素。<deails.../>元素用于顯示一段詳細資訊或某個主題的細節，通常會與<summary.../>元素結合使用，當把<summary.../>元素放在<details.../>内部時，<summary.../>元素表示用于為<details.../>定義摘要資訊。

十、特殊功能元素

<meter>：用于表示一個已知最大值和最小值的計數儀表，可以指定id、style、class、hidden等通用屬性。還可以指定value（儀表目前值）、min（儀表最小值）、max（儀表最大值）、low（儀表指定範圍最小值，必須大于等于min屬性值）、high（儀表指定範圍最大值，必須小于max屬性值）、optimum（儀表有效範圍最佳值，如果大于high屬性值，則意味着越大越好，如果小于low屬性值，則意味着越小越好）；

<progress>：用于表示一個進度條，可以指定id、style、class、hidden、max、value；

十一、HTML5頭部和元資訊

<head.../>元素用于定義HTML文檔頭，他可以包含如下子元素：

<script>：用于包含JavaScript腳本；

<style>：用于定義内部CSS樣式；

<link>：用于連結外部CSS樣式等資源；

<title>：用于定義文檔标題；

<base>：用于指定該頁面中所有連結的基準連結，必須是空元素，可以指定id、href（指定所有連結的基準連結）、target（指定超連結預設在哪個視窗打開連結，屬性值有_blank、_parent、_self和_top）；

<meta>：用于定義頁面的中繼資料，屬性有http-equiv（指定元資訊的名稱，具有特殊意義）、name（指定元資訊的名稱，可以随意指定，沒有特殊意義）、content（指定元資訊的值）；

十二、表單元素

<form.../>元素用于生成表單，該元素不會生成可視化部分，其他表單控件，如單行文本框、多行文本域、單選按鈕、複選框等都必須放在<form.../>元素之内。該元素可以指定id、style、class等屬性，還可以指定onclick等事件屬性，除此之外還可以指定如下幾個屬性：

action：指定當單機表單内的“确認”按鈕時，該表單的内容将被送出到那個位址，該屬性可以是絕對位址，也可以是相對位址，必填；

method：指定送出表單時發送何種類型的請求，可以是get或post，通常建議發送POST請求，屬性必填；

enctype：指定對表單内容進行編碼使用的字元集，通常有application/x-www-form-urlencoded（預設編碼方式，它隻處理表單控件裡的value屬性值，采用這種編碼方式的表單會将表單控件裡的值處理成URL編碼方式）、multipart/form-data（以二進制流的方式處理表單資料，會把檔案域指定檔案的内容也封裝到請求參數裡，建議當需要通過表單上傳問件事使用該屬性值）、text/plain（當表單的action屬性值為mailto:URL的形式時，使用這種編碼比較友善，主要适用于直接通過表單發送郵件的方式）。<form.../>元素隻是代表一種表單格式，不能生成任何可視化的内容，必須和其他表單控件結合使用。

當在<form.../>元素裡定義一個或者多個表單控件時，一旦送出該表單，該表單控件将會轉換成請求參數。關于表單控件的轉換請求參數的規則如下：

每個有name屬性的表單控件對應一個請求參數，沒有name屬性的表單控件不會生成請求參數；

如果多個表單控件有相同的name屬性，則多個表單控件隻會生成一個請求參數，隻是該參數有多個值；

表單控件的name屬性指定請求參數名，value屬性指定請求參數值；

如果某個表單控件設定了disabled或disabled="disabled"屬性，則該表單控件不再生成請求參數；

大部分表單控件都可以獲得滑鼠焦點，響應滑鼠事件，是以它們可以指定onfocus、onblur屬性，分别用于設定得到焦點、失去焦點的事件響應。這些表單控件都可以指定tabIndex屬性，通過設定tabIndex的屬性值為1,2,3,4等值，使得使用者按Tab鍵實作焦點切換（切換順序為1,2,3,4的順序）。

十三、input元素

<input.../>元素是表單控件中功能最豐富的，如下：

單行文本框：指定<input.../>元素的type屬性為text即可；

密碼輸入框：指定<input.../>元素的type屬性為password即可；

隐藏域：指定<input.../>元素的type屬性為hidden即可；

單選框：指定<input.../>元素的type屬性為radio即可；

複選框：指定<input.../>元素的type屬性為checkbox即可；

圖像域：指定<input.../>元素的type屬性為image即可，還可指定width和height屬性；

檔案上傳域：指定<input.../>元素的type屬性為file即可；

送出、重設、無動作按鈕：分别指定<input.../>元素的type屬性為submit、reset或button即可；

十四、label定義标簽

label标簽用于對其他可生成請求參數的表單控件進行說明，<label.../>元素不需要生成請求參數，是以不需要為它設定value屬性值。

使用<label.../>标簽可以通過點選标簽自動将焦點轉移到和标簽相關的表單控件元素上，有如下兩種關聯表單控件的方式：

@1隐式使用for屬性：指定<label.../>标簽的for屬性值，屬性值為所關聯的表單控件的id屬性值；

@2顯示關聯：将普通文本、表單控件一起放在<label.../>元素内部即可，建議盡量少用顯示關聯；

十五、button定義按鈕：内部可以包含普通文本框、文本格式化标簽、圖像等内容。

十六、清單框和下拉菜單：

<select.../>元素用于建立清單框或下拉菜單，該元素必須和<option.../>元素結合使用，每個<option.../>元素代表一個清單項或菜單項。<select.../>不能指定value屬性，清單框或下拉菜單控件對應的參數值有<option.../>元素來生成，這些清單項或菜單項的value的值将作為該<select.../>元素所對應的請求參數值。可以指定id、style、class、onchange、disable、multiple、size(指定該清單框可同時顯示多少個清單項，一旦指定該屬性，<select.../>元素就會自動生成清單框)；

<option.../>：用于定義清單框選項或菜單項，該元素裡隻能包含文本内容作為該選項的文本；

<optgroup.../>：用于定義清單項或菜單項組，該元素裡隻能包含<option.../>元素，處于<optgroup.../>裡的<option.../>就屬于該組；

<option.../>的屬性有：disable、selected、value；

<optgroup.../>的屬性有：label（指定該選項組的标簽，必填）、disable；

十七、textarea定義文本域

<textarea.../>元素用于生成多行文本域，可以指定的屬性有：id、style、class、onclick、onselect（響應文本被選中）、onchange（響應文本被修改）、cols（文本域寬度，必填）、rows（文本域高度，必填）、disable（禁用文本域）、readonly（指定文本域隻讀）；

十八、HTML5為表單控件新增的屬性

form屬性：用于定義該表單控件所屬的表單，該屬性值應該是它所屬表單的id，通過form屬性，可以使得表單控件可以定義在<form.../>元素之外，進而提高代碼的靈活性。

formaction屬性：<input type="submit" .../>、<input type="image" .../>、<button type="submit" .../>都可以指定formaction，用于動态的讓表單送出到不同的URL。

formxxx屬性：<input type="submit" .../>、<input type="image" .../>、<button type="submit" .../>都可以指定formenctype（讓按鈕動态的改變表單的enctype屬性）、formmethod（讓按鈕動态的設定表單以POST或GET方式送出）、formtarget（讓按鈕動态的改變表單的target屬性）。

autofocus屬性：黨委某個表單增加該屬性後，浏覽器打開頁面時該元件就會自動獲得焦點。

placeholder屬性：用于設定單行文本框、多行文本框裡的對使用者的提示資訊；

list屬性：list的屬性值應該是一個<datalist.../>元件的id，list屬性必須和<datalist.../>元素結合使用；

<datalist.../>：相當于一個看不見的<select.../>元素，用于生成一個隐形的下拉菜單，<datalist.../>所能包含的子元素與<select.../>元素完全相同，該元素用于與指定了list屬性的<input.../>元素結合使用，當輕按兩下指定了list屬性的文本框時，該文本框将會顯示<datalist.../>生成的下拉菜單。

autocomplete屬性：通過該屬性設定使用者能否看到list屬性設定的下拉菜單，它的屬性有：on（打開autocomplete，文本框下方會顯示下拉菜單）、off（關閉autocomplete，文本框下方不會顯示下拉菜單）。

十九、HTML5為input新增的type屬性值

color：讓<input.../>元素生成一個顔色選擇器，該文本框的value為顔色的二進制值；

data：讓<input.../>元素生成一個日期選擇器；

time：讓<input.../>元素生成一個時間選擇器；

datatime：讓<input.../>元素生成一個UTC日期、時間選擇器；

datatime-loca：讓<input.../>元素生成一個本地日期、時間選擇器；

week：讓<input.../>元素生成一個供使用者選擇第幾周的文本框；

month：讓<input.../>元素生成一個月份選擇器；

email：讓<input.../>元素生成一個E-mail輸入框，浏覽器會自動檢查該文本框裡輸入的内容，如果不符合E-mail格式，浏覽器将會不允許送出表單，并自動生成提示資訊。當指定type="email"時，<input.../>元素可指定如下屬性：multiple（該屬性值可以是multiple或者省略，表示該文本框可以輸入多個E-mail位址）；

tel：讓<input.../>元素生成一個隻能輸入電話号碼的文本框，但是浏覽器不會檢查它的格式；

url：讓<input.../>元素生成一個URL輸入框，浏覽器會自動檢查，如果不符合URL格式，浏覽器将會不允許送出表單，并自動生成提示資訊。

number：讓<input.../>元素生成一個隻能輸入數字的文本框；

range：讓<input.../>元素生成一個拖動條，通過拖動條使得使用者隻能輸入指定範圍、指定步長的值。當指定文本框的type="range"時，該文本框還可以指定以下3個屬性：min（拖動條的最小值）、max（拖動條的最大值）、step（拖動條的步長）；

search：讓<input.../>元素生成一個專門用于輸入搜尋關鍵字的文本框，與type="text"的文本框并沒有多大差別；

二十、HTML5新增的表單控件

<output.../>：用于顯示輸出，必須屬于某個表單，即要麼定義在某個表單<form.../>内部，要麼為它指定form屬性。它的屬性有：id、style、class、form、for（指定該元素将會顯示哪個元素值，屬性值應該是其他元素的id）；

二十一、FileList對象與File對象

HTML5為<input.../>元素中type="file"的标簽增加了如下兩個屬性：

@1：accept：控制允許上傳的檔案類型，屬性值為一個或多個MIME類型字元串，多個MIME之間用逗号隔開；

@2：multiple：設定是否允許選擇多個檔案上傳；

JavaScript可以通過file屬性通路通路type="file"的<input.../>元素生成的檔案上傳域内的所有的檔案，該屬性傳回一個FIleList對象，FileList對象相當于一個數組，開發者可以使用類似于數組的方法來通路該數組内的每一個File對象。File對象時一個JavaScript對象，可通過該對象擷取使用者浏覽的所有檔案的資訊。FIle對象包含如下常用屬性：

name：傳回該File對象對應的檔案的檔案名，不包括檔案路徑部分；

type：傳回該File對象對應的檔案的MIME類型字元串；

size：傳回該File對象對應的檔案的大小；

HTML5的繪圖支援

暫且略過，有時間再補...................^o^~~

HTML5的多媒體支援