H5教程（一）
相信點進來看這篇文章的應該都是剛剛接觸H5的新手，那么你真的是找到了一篇合適的文章。
1.學習前准備
既然想學習好H5，只是這樣看是不夠的，還需要動手練習，以及及時復習，所以我推薦幾款軟件來配合我們的學習。
1.1.Hbuilder
必備軟件，學習H5的關鍵，你要學習一切一切的H5代碼都需要他，當然你如果熟悉別的軟件也可以。本小編比較熟悉的是這款軟件，所以也就推薦你們使用，個人認為還是比較適合新手入門的。
1.2.有道雲筆記
這里不是打廣告，而是學習需要一款整理筆記的文件，因為以后要學的東西很多，所以我也希望你們和我一樣使用軟件去整理自己所學的知識，畢竟好記性不如爛筆頭。其實我比較推薦你們使用印象筆記，那款軟件會更好一點，但畢竟那款軟件需要收費，所以我在這推薦了有單雲筆記。
2.HTML基礎
好了，做好之前的准備，那么我們就來正式了解一下HTML吧
2.1.什么是HTML
HTML是指超文本標記語言（Hyper Text Markup Language）。
HTML是一種用來編寫網頁的語言，使用瀏覽器將他翻譯成相應的頁面。
HTML並不是編程語言，他是一種標記語言。
3.HTML基礎結構
HTML文檔主要包括三大部分：
文檔聲明部分（文檔開頭第一行，表明文檔版本）
<head>頭部部分（給瀏覽器的配置及給搜索引擎的信息）
<body>主體部分。（網頁的內容都在這）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一個網頁</title> </head> <body> </body> </html>
4.<head>部分常用標簽（必不可少）
（用於表述網頁的元數據，及網頁的基本信息）
4.1.<title>標簽:
網頁的標題，即網頁選項卡上的文字
4.2.<link>標簽:
使用Link標簽鏈接網頁標簽
常用屬性：
rel屬性：聲明鏈接文件的類型
type屬性：可以省略
href屬性：表示圖片的路徑地址
4.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>
5.<body>部分常用標簽（重點，最主要部分）
5.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>
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>
5.3.常見的行級標簽
1.<span>（文本）：<span></span>(文本):無實際意義，用來包裹某部分文字，修改特定樣式。
2.<q>（短引用）<q></q>（短引用）顯示文字為“”引起來。
3.<small>（縮小字體）<small></small>（縮小字體）表示縮小字體，可以多層嵌套，直到字號最小。
4. <em>（強調） <strong>（強調）
<i>（傾斜） <b>（加粗）
【Strong，em,b,i標簽的區別】
1.Strong和em都表示強調，但是Strong是加粗，em是傾斜。
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。
5.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>
5.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：提示