我們還是圍繞這幾個問題來學習：
1.什么是H5？
2.為什么要用H5?
3.怎么用H5?
1.什么是H5？
♦HTML是指超文本標記語言（Hyper Text Markup Language）。
♦HTML是一種用來編寫網頁的語言，使用瀏覽器將他翻譯成相應的頁面。
♦HTML並不是編程語言，他是一種標記語言。
2.為什么要用H5?
因為他編輯起來特別酷炫，是HTML的升級版
3.怎么用H5?
♦首先看一行HTML中必定要有的東西：
<!DOCTYPE html>//文檔類型聲明
<html lang="en"> //<!-- 這是一個W3C的標准；lang代表語言，en是英語；改成zh-cn指簡體中文,xml:lang就是xml的語言，這兒的xml是一種html擴展語言，功能很強大-->
<head>// <!-- 用於描述網頁的一些關鍵信息。比如網頁的配置，設置，關鍵字等等……這些信息，大多在瀏覽器看不到，但是對網頁的解析至關重要！-->
<meta charset="UTF-8">// 其中<mete chaset="utf-8"/> '''<!--設置網頁的編碼格式為UTF-8。
【設置網頁的字符集編碼格式：】 GB2312：簡體中文的編碼格式。 GBK：擴展的國標碼。比國標碼多了更多的編碼格式。 utf-8：萬國碼。可以兼容絕大多數國家的語言。-->''' <title>我的第一個網頁</title>//<!--title:網頁的標題，顯示在瀏覽器選項卡上面的文字-->
</head>
<body>//<!--主體部分。（網頁的內容都在這）-->
</body>
</html>
1.TML文檔主要包括三大部分：
♦文檔聲明部分（文檔開頭第一行，表明文檔版本）
♦<head>頭部部分（給瀏覽器的配置及給搜索引擎的信息）
♦<body>主體部分。（網頁的內容都在這）
2.<head>部分常用標簽（必不可少）
（用於表述網頁的元數據，及網頁的基本信息）
2.1.<title>標簽:
網頁的標題，即網頁選項卡上的文字
2.2.<link>標簽:
使用Link標簽鏈接網頁標簽
常用屬性：
♦rel屬性：聲明鏈接文件的類型
♦type屬性：可以省略
♦href屬性：表示圖片的路徑地址
2.3.<meta>標簽
描述文件類型和編碼，搜索關鍵字和描述。
♦1.charseat：設置文檔字符集編碼格式。
♦2.HTTP-EQUIV：（將我們的信息寫給瀏覽器看，讓瀏覽器按里邊的要求執行）
♦屬性值：Content-type（文檔類型）Refresh（網頁定時刷新）set-cookie（設置緩存）
♦需配合content使用（http-equiv屬性只表明設置哪部分，具體的設置內容放在content屬性中）
♦3.name屬性（寫給搜索引擎）：使用方法同上，需掌握的屬性值author（作者）keywords（關鍵字）description（網頁描述）
♦4.content屬性配合其他使用。
<!DOCTYPE html>
<html>
<head>
<title>HTML基本標簽</title>
<link rel = "icon" href = "img/icon.png" />
<meta charset="UTF-8" />
<meta name="author"content="huxuepeng" />
<meta name ="keywords"content="HTML5,網頁，Web前端開發"/>
<!--多個關鍵字用逗號隔開-->
<meta name="description"content="這是我開發的第一個網頁" />
<!--網頁描述，搜索網站時，title下面的解釋文字，至關重要-->
<title></title>
</head>
<body>
<!---->
</body>
</html>
3.<body>部分常用標簽（重點，最主要部分）
3.1..塊級標簽
!--h標簽：標題標簽，自動加粗，h1最大，h6最小-->
<h1>h1標題標簽</h1>
<a name="h1"></a>
<h2>h2標題標簽</h2>
<h3>h3標題標簽</h3>
<h4>h4標題標簽</h4>
<h5>h5標題標簽</h5>
<h6>h6標題標簽</h6>
//<!--水平線標簽hr-->
<hr/>
//<!--<p></p>標簽：段落標簽--> //<!--<br/>標簽：換行標簽，回車和空格默認顯示一個空格-->
<p>p標簽是段落標簽，這里是第一段文字</p>
<p>p標簽是段落標簽，<br>這里是第二段文字</p>
//<!--<blockquote></blockquote>:引用標簽,cite屬性，表明引用來源，一般表明引用網址，瀏覽器默認顯示為首行縮進-->
<blockquote cite= "http://www.jredu100">橫眉冷對千夫指，俯首甘為孺子牛。 </blockquote>
//<!--<pre></pre>預格式標簽
瀏覽器默認顯示樣式：1.顯示為等寬樣式。 2.代碼中的換行空格可在瀏覽器中直接顯示。 -->
<pre>這是預格式標簽 這是換行 這是空格</pre>
3.2.基於布局的模塊級標簽
<!--有序列表：<ol></ol> 列表項：<li></li>:可以有多個列表項 -->
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
<!--無序列表：<ul></ul> 列表項：<li></li>:可以有多個列表項 -->
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
<!--定義描述列表：<dl></dl> 列表標題：<dt>一般只有一項</dt>標題頂格顯示 列表描述項：<dd>可以有多項</dd>描述項相對於標題縮進顯示 -->
<dl>
<dt>這是定義列表的標題</dt>
<dd>第一項</dd>
<dd>第二項</dd>
<dd>第三項</dd>
</dl>
<!--組合標簽：<figure></figure>用於顯示圖片及圖片標題 兩個子標簽： <img /> 圖片 <figcaption></figcaption>圖片的標題 顯示效果：與圖片一起縮進 -->
<figure>
<img src="../img/icon.png" <figcaption>這是圖片</figcaption>
</figure>
<!--分區標簽：<div></div>-->
<div style = "width: 100px;height: 100px;background-color: red;">這是一個分區標簽</div>
3.3.常見的行級標簽
1.<span>（文本）：<span></span>(文本):無實際意義，用來包裹某部分文字，修改特定樣式。
2.<q>（短引用）<q></q>（短引用）顯示文字為“”引起來。
3.<small>（縮小字體）<small></small>（縮小字體）表示縮小字體，可以多層嵌套，直到字號最小。
4. <em>（強調） <strong>（強調）
<i>（傾斜） <b>（加粗）
Strong，em,b,i標簽的區別】
4.1.Strong和em都表示強調，但是Strong是加粗，em是傾斜。
4.2.Strong和b都是加粗，em和i都能傾斜，但是Strong和em有強調含義。HTML5要求標簽盡可能的實現語義化。
5.<a></a>（超鏈接）
<a href = "http://www.baidu.com"target="_blank">這是一個超鏈接</a><br />
<a href = "http://www.baidu.com"target="_self"rel="prev">
<img src = https://www.baidu.com/img/bd_logo1.png /></a>
<a href="02.常見的塊級標簽.html#h1" target="_blank">跳轉到h1標簽</a>
<a href="file:///F:/HBuilder/workspace/HTML5/img/icon.png" target="_blank">打開圖片</a>
<a href="tencent://message/?uin=452014986" target="_blank">qq</a>
♦a.屬性：
1）.href:可以是網絡連接，也可以是本地文件。（路徑確定同img ）
2）.target：超鏈接打開的位置，_self自身頁面（默認）_blank 新頁面1.href:可以是網絡連接，也可以是本地文件。（路徑確定同img ）
3）.title：鼠標之上后顯示的文字。
4）.rel:指定當前文檔與被連接文檔的關系。"prev":被連接文檔是前一篇，"next"：被連接文檔是后一篇,（了解）"icon"圖標"stylesheet"樣式表，"prefetch"預加載。
♦b.錨鏈接
1.本頁面錨鏈接：
a.設置錨點。<a name="top"></a>
b.在超鏈接的href屬性中，使用#name跳轉到對應錨點
2.頁面間錨鏈接：
a.在即將跳轉的頁面指定位置設置錨點。
b.在超鏈接的href屬性中，使用頁面地址.html#name跳到對應位置。
c.功能性連接：
1.mailto://763066931@qq.com 給指定郵箱發郵件
2.file:///f/ 打開指定文件。
3.tencent://message/?uin=763066931 給指定qq發消息
6.<img />(圖片)
<img src ="../img/icon.png"height="100px"width="100px"title="鼠標指上的文字"alt="圖片沒有加載出來" align="center"/>ceshi<br />
1).src:表示引用圖片地址
2).height="100px"width="100px"圖片的寬度高度，可以用css樣式（style=""）代替。
3).title:圖片的標題，鼠標指上后顯示的文字。
4).alt:當圖片無法加載時顯示的文字。
5).align:設置圖片周圍文字相對於圖片的位置，top center botton。
3.4.表格
表格：<table>
表格的行：<tr></tr>
表格的列：<td></td>
表頭：<th></th>:默認加粗，單元格居中。
♦常用屬性：
1.border：給表格增加邊框，當border屬性增大時，只有外圍框線增粗，中間框線不變
2.cellspacing：單元格與單元格之間的距離（默認一個像素），當cellspacing="0"，的時候，
只會是單元格間隙為0，但不會合並邊線。(不常用)
【表格邊框合並】使用style="border-collapse: collapse;無需再寫cellspacing="0""
3.cellpadding:每個單元格內文字與邊緣之間的距離
4.width height：表格的寬高（不常用）
5.align:表格的對齊方式。left center right調整表格在瀏覽器的位置，
相當於讓表格浮動，會影響表格后邊文字的排列方式（不常用）
6.bgcolor:背景色，等於style="backgroundcolor:"
7.background:背景圖片 等同於 style = "background-image"且背景圖會覆蓋背景色
8.bordercolor:邊框顏色。
-->
♦<!--<tr><td>相關的屬性
1.width/height單元格的寬高，文字過多時，為顯示文字，會失效。
2.bgcolor: 單元格的背景顏色。
3.align： left center right 單元格中的文字水平對齊方式。
4.valign：top center bottom 單元格中的文字垂直對齊方式。
5.nowrap: nowrap 單元格中文字不換行。
注意，當表格屬性與行列屬性沖突時，以行列屬性為准。
-->
<!--跨列跨行
colspan 跨N列，當某個單元格跨N列時，其右邊N-1個單元格需要刪除。
rowspan 跨N行，當某個單元格跨N行時，其下方N-1個單元格需要刪除。
!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" cellspacing="5" style="border-collapse: collapse;" cellpadding="10"align="center"bordercolor="red">
<caption>我是表格的標題</caption>
<tr>
<th>表頭一</th>
<th colspan="3">表頭二</th>
</tr>
<tr>
<td rowspan="3">2-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-3</td>
</tr>
<tr>
<td>2-2</td>
<td>2-3</td>
<td>2-3</td>
</tr>
<tr>
<td>2-2</td>
<td>2-3</td>
<td>2-3</td>
</tr>
</table>
<!--【表格的結構化】 完整表格結構：caption thead tbody tfoot 無論各部分在表格的什么位置， caption thead tbody tfoot 會依次排列。 【表格的直列化】 <col>一列 <colgroup>列組 -->
</body>
</html>
3.5表單
<input form="1" type="color" name="name1" />
♦1.【兩個重要屬性】
1.表單提交地址:提交給動態文件，html為靜態文件，空時提交給自身
2.提交方法： post:Transfers data using an http post transaction
get:Appends data to the URL specified by the action attribute
♦2.【get和poet的區別:】
1.get傳參使用URL：http://服務器地址?name1=value1&name2=value2。
（?表示傳遞參數，后邊用name=value的方式傳遞，多個參數之間用&鏈接。）
URL傳參不安全，所有信息可在地址欄看到，並且可以通過地址欄隨意傳遞數據。（URL注入攻擊）
URL傳參數據量有限，只能傳遞少量數據。get傳參比post快。
2.post使用HTTP請求傳輸協議，地址欄不可見，比較安全，且傳遞數據無限制。
綜上所述，一般使用post。
♦3.【input標簽及屬性】
1.常用屬性：
1.type：表示輸入框的類型。
2.name：輸入框的別名，一般情況下必填。因為：傳遞數據的時候使用name=value 的方式傳遞。
3.value：輸入框的默認值。
4.placeholder:提示內容，不能指定默認值，當提示框有內容時，提示內容消失。
5.tabindex:控制輸入框點擊tab的跳轉順序從小往大開始。（了解即可，一般不用）
2.input特殊屬性值：
1.checked="checked"默認被選中。
2.disabled="disabled"設置控件不能使用，按鍵不能選中，文本框不能被修改。
而且如果輸入框disable，則輸入框信息不能傳遞。
3.hidden="hidden"等同於type="hidden"隱藏域傳值。常用語配合disabled，隱藏域傳值。
♦4.【type屬性詳解：】
1.text：文本輸入框
2.password：密碼輸入框，瀏覽器顯示為點。
3.submit:提交按鈕：提交表單數據。
4.radio:單選按鈕
5.checkbox：復選按鈕
name和value屬性值必須全部存在，提交時，提交的是value中的屬性。
radio憑借name中的屬性區別是否為同一組，name相同為同一組，同組中只能選一個。
6.reset：將表單數據重置為初始狀態。
7.file:文件上傳按鈕。
8.image:圖形提交按鈕。
9.bottom:普通按鈕。
♦5.【select標簽：下拉框】
1.name屬性應該寫在<select></select>上，所有選項只有一個name。
2.multiple="multiple":設置成多選，一般不用，可在界面使用ctrl多選。
3..option常用屬性：
1.value：當option沒有value屬性時，往后台傳遞的是option中間的文字，
當有value屬性時，往后台傳遞的是value的屬性值
2.title:鼠標之上后顯示的文字。
3.selected="selected":默認選中。
4.optgroup標簽：用於將option標簽分組，label屬性表示分組名。
♦6.【<textarea></textarea>文本域】
1.cols ros 多少行列 看字符（一般不用），使用style="heigth:100px;width:100px"
2.readonly="readonly":設置為只讀模式，不可編輯。
3.style="resize:none"設置為不允許修改。
4.style="overflow"設置當文字超出區域的時候怎么處理。
1常用屬性：
1.hidden：超出區域的文字，隱藏無法顯示。
2.scroll：無論文字多少，始終出現滾動條。
3.auto：自動，根據文字的多少自動決定是否顯示滾動條。（默認樣式）
2.也可以通過overflow-x,overflow-y分別設置水平垂直的顯示方式。
♦7.【表單的邊框與標題】
<fieldset></fieldset>
<legend></legend>
如果想要讓標簽嵌入到邊框中，需將標題標簽寫到邊框標簽里邊
♦8.【智能表單】
1.H5新增input的form屬性，用於指向特定form表單的id，
實現input無需放在form標簽之中，即可通過表單提交。
2.type新增屬性詳見表格。
3.input元素的新增屬性：
1.Autocomplete：自動完成功能，記錄用戶以前輸入的值，並在下次輸入時自動完成輸入。
屬性值：on，off。
可以在form表單上使用，整張所有控件進行自動完成，也可以在input使用，絕大多數瀏覽器默認開啟。
Autofocus：自動獲得焦點，只能設置一個input控件獲得焦點。
Form：所屬表單
Required：必填，否則阻止提交。
Pattern：驗證input的模式，使用正則表達式驗證。以后詳解。
Placeholder：提示