這篇博客寫給所有HTML的初學者，希望這篇博客可以對初學者有所幫助，同時也希望大家在學習HTML的道路上不怕艱險，不畏困難。
HTML是HyperText Markup Language的縮寫，翻譯成中文是超文本標記語言，用於網頁的創建。
二、HTML的基本結構主要包括<！DOCTYPE html>文檔類型、<head>頭部和<body>主體三部分。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
1、meta標簽
1.1charset 設置文檔的字符集編碼格式
<meta charset="UTF-8">
常見的幾種字符集編碼格式：
a.UTF-8 ：萬國碼（最常用）。
b.GB-2312 ：國標碼。
c.GBK ：擴展的國標碼。
1.2name 將該網頁的信息寫給搜索引擎看
<meta name="keywords" content="這是搜索網頁的關鍵字"/>
<meta name="description" content="這是網頁的介紹"/>
第一行是網頁的關鍵字，用於搜索該網頁。第二行是網頁的介紹。
常用的name屬性值有：author（作者）keywords（關鍵字）description（網頁描述）。
2、title標簽——網頁的標題
<title>這是網頁的標題</title>
1、標簽的分類：塊級標簽和行級標簽
1.1塊級標簽：顯示為塊狀，前后隔一行（自動換行）
a.標題標簽 <h1>到<h6>，h1最大，h6最小。
<h1>111111111111</h1> <h2>111111111111</h2> <h3>111111111111</h3> <hr /> <!--水平線--> <h4>111111111111</h4> <h5>111111111111</h5> <h6>111111111111</h6> <hr />
<pre>這是預格式標簽 可以換行</pre> <!--預格式標簽，可以保留代碼的排版格式-->
f.<blockquote></blockquote>引用標簽
g.有序列表ol和無序列表ul
<ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol>
<ul> <li>無序列表</li> <li>無序列表</li> <li>無序列表</li> </ul>
h.定義描述列表dl
<dl> <dt>定義列表標題</dt> <dd>描述項第一項</dd> <dd>描述項第二項</dd> </dl>
i.分區標簽
<div></div> 可以包裹任何標簽，也可以被包裹進任何標簽。
<span style="color: red;font-size: 33px;background-color: blue;">姜浩是我大哥</span> <!--color 字體顏色 font-size 字體大小 background-color 背景顏色 font-weight 加粗--> <em>表示為強調，字體傾斜</em> <strong>表示強調，字體加粗</strong> <i>表示切斜，沒有強調效果</i> <b>表示加粗，沒有強調效果</b> <q>表示短引用，自帶雙引號</q> <small>字體比正常字體小一號，可以多重嵌套</small> <big>字體大一號</big> <s>表為傾斜</cite> <code>表示計算機代碼，但不會保留格式，需要配合示有誤文本，刪除線</s> <cite>表示引用，瀏覽器表示pre標簽使用</code> <bdo dir="ltr">表示文本方向，ltr：從左往右 rtl:從右往左</bdo> X<sup>2</sup> <!--sup：上標文本 sub：下標文本--> <!--版權符號 空格--> © © 空格 <u>這是下划線標簽</u> <mark>高亮或標記文本 瀏覽器顯示為黃色背景</mark>
b.超鏈接 <a href="" target=""></a>
<a href="https://www.baidu.com/" target="_blank" title="打開百度">表示超鏈接</a> <!--href表示跳轉的地址； target表示頁面打開的位置：self自身頁面打開（默認），blank新頁面打開； title表示超鏈接的標題，也就是鼠標指上去顯示的東西--> <a href="練習.html#bottom">打開超鏈接</a> <!--相對路徑的三種情況： 如果在同一文件夾，直接寫“文件名.后綴” 如果在下一層文件夾，寫“文件夾名/文件名.后綴” 如果在上層文件夾，寫“../文件夾名/文件名.后綴” ..的意思是上一層文件夾，類似后退-->
c.錨鏈接
自身頁面錨鏈接：先定義錨點<a name=name1>、設置超鏈接跳轉到錨點<a href="#name1">
頁面間錨鏈接：先在另一個頁面設置錨點<a name=name2></a>，然后在本頁面跳轉鏈接，<a href="鏈接地址#name2">
d.功能性連接：mailto 用於給指定郵箱發送郵件 http file ftp
<a href="mailto：j.com" target="_self">點擊就送</a>
2、table表格
2.1表格的結構
用tr表示行，td表示列；th表示表頭，字體加粗居中；caption表示標題
<table border="2" cellspacing="1" cellpadding="10" bordercolor="blue" style="border-collapse: collapse;"> <caption>表格的標題</caption> <tr> <td rowspan="2">1-1</td> <td>1-2</td> <td>1-3</td> </tr> <tr> <td>2-2</td> <td>2-3</td> </tr> <tr> <td colspan="2">3-1</td> <td>3-2</td> </tr> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> </tr> </table>
2.2表格的各種屬性
a.border=1 表示邊框，1是寬度 當border屬性增大時，只有外圍邊框增大；
b.cellspacing：單元格之間的間隔；
c.cellpadding：單元格中的文字與邊框的距離
d.style=“border-collapse：collapse；”，合並邊框
e.width、height表示寬度和高度
f.bgcolor：背景顏色 可以用style=“background-color：”代替；bordercolor：邊框顏色 background：背景圖片
g.colspan=“2”表示該內容跨兩列，rowspan=“2”表示該內容跨兩行
h.align：表格在頁面中的位置 left center right
2.3tr和td的相關屬性
a.width、height 單元格的寬和高 bgcolor單元格的背景顏色
b.align：left center right 單元格中的文字，水平對齊方式
c.valign：top center bottom 單元格中的文字，垂直對齊方式
d.nowrap=“nowrap”單元格中的文字不換行
注意：當表格屬性與行列屬性沖突時，行列屬性為准。（作用范圍越小，優先級越高）
2.4表格的結構化 caption thead tbody tfoot
無論各部分寫在表格的什么位置 caption會在表格外最上方， thead會在表格內最上方，tfoot會在最下方
3、form表單
<fieldset> <legend>用戶注冊</legend> <form action="" method="get" autocomplete="on"> <table> <tr> <td>用戶名：</td> <td><input type="text" name="username" id="username" value="111" /></td> </tr> <tr> <td>密碼：</td> <td><input type="password" name="mima" placeholder="請輸入密碼" autofocus="autofocus"/></td> <!--placeholder：提示屬性--> </tr> <tr> <td>性別：</td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td> 喜歡的城市： </td> <td> <select name="city"> <optgroup label="山東"> <option selected="selected">煙台</option> <option>青島</option> <option>濟南</option> <option>濟寧</option> </optgroup> <optgroup label="北京"> <option>海淀</option> <option>朝陽</option> </optgroup> </select> </td> </tr> <tr> <td>愛好：</td> <td> <input type="checkbox" name="hobby" value="玩" checked="checked"/>玩 <input type="checkbox" name="hobby" value="吃"/>吃 </td> </tr> <tr> <td>頭像：</td> <td><input type="file" name="head"/></td> </tr> <tr> <td> <input type="image" src="img/捕獲.PNG" value="提交" /> </td> <td> <input type="reset" value="重置" /> <input type="button" value="點我" /> </td> </tr> <tr> <td>服務條款：</td> </tr> <tr> <td colspan="2"> <textarea readonly="readonly" style="width: 200px; height: 120px;">這是服務條款；這是服務條款； 這是服務條款；這是服務條款；這是服務條款；這是服務條款。</textarea> </td> </tr> </table> </form> </fieldset>
3.1 兩個重要屬性action和method
action 表單提交的地址，不填的話默認為自身頁面。
method 表單提交的方式：有get和post。
a.get通過URL地址欄傳參、不安全、所有信息可在地址欄看到、傳遞數據量有限。
http：//服務器地址？name1=value1&name2=value2；(?表示傳遞參數，？后面采用name=value的形式傳遞，多個參數之間用&隔開)
b.post通過后台傳參、安全、傳遞數據量沒有限制。
使用http請求傳遞數據，URL地址欄不可見。多使用post傳遞數據。
3.2 input標簽及屬性
a.type：表示input輸入框的類型，可選值有：
text 文本； password 密碼，輸入內容時顯示小黑點；
radio 單選框（同一組name必須相同，value不能省，憑借name屬性區分是否為同一組，同組只能選一個）； checkbox 復選框；
file 文件上傳； bottom 按鈕，沒有功能；image 圖片提交按鈕，功能同submit，可以提交數據；
submit 提交表單數據；reset 重置按鈕，將表單數據重置為初始狀態。
b.name：input輸入框的別名，一般情況下必填。因為傳遞數據時使用name=value的形式傳遞。
c.value：input輸入框的默認值。
d.placeholder：input的提示內容，當輸入框有value時，提示內容消失。
3.3 input特殊屬性值
a.checked="checked" 默認選中（radio只能選一個，checkbox可以選多個。）
b.disabled=“disabled” 不能被選中，用在按鈕上不能點擊，用在輸入框上不能修改
c.hidden=“hidden” 隱藏，等同於<input type="hidden"/>，常用於配合disabled，使用隱藏域傳遞數據。
3.4下拉選擇控件select：
a.寫法：<select>
<option></option> (可以有多個)
</select>
b.屬性：name屬性寫在<select>上。
multiple="multiple"：設置select為多選，一般不用
c.option常用屬性：
value：有value時，name=value；沒有時，name=option里邊包含的值。
title：鼠標指上后顯示的文字。
selected="selected"，默認選中。
d.doptgroup lable=“”：用於對option標簽進行分組，lable為分組名
3.5文本域textarea
a.寫法：<tr>
<td colspan="2">
<textarea></textarea>
</td>
</tr>
b.屬性：style=“resize：none；” 設置為寬高不允許修改。
readonly=“readonly” 設置為只讀模式，不允許編輯。
style="width: 180px; height: 250px；”設置寬高。
style=“overflow：；”設置當文字超出區域時，如何處理：
hidden：超出區域的文字，隱藏無法顯示
scroll：無論多少文字，均會顯示滾動
auto：自動，根據文字多少自動決定是否顯示滾動。
3.6邊框和標題
<fieldset> 這是表單邊框
<legend>聯系方式</legend> 這是表單標題
</fieldset>
3.7 HTML5智能表單
作用：用於指向特定的form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交。
<form id=foo>
......
</form>
<input...form="foo">
3.8 input元素的新增屬性：
Autocomplete：自動完成功能 記錄用戶之前輸入的內容，並在下次輸入時自動提示完成輸入,
屬性值只有on和off兩種，可以在form上使用完成對整張表單的操作，也可以在input上使用。
Autofocus：自動獲得焦點 只能設置input元素自動獲得焦點。
Form：所屬表單 通過form表單的id，確定此input輸入哪張表單。
Required：必填
Pattern：驗證input的模式
Placeholder：提示
H5的基本結構和基本標簽的內容就寫到這里，更加深層次的問題請大家繼續關注我的博客，接下來的時間里我會繼續發出。謝謝大家的閱讀。
tips：我所用的軟件均是HBuilder。