1.HTML5頭部結構
【DOCTYPE html】
聲明文檔類型為HTML5文件。
文檔聲明在HTML5文檔必不可少，且必須放在文檔的第一行。
【meta標簽】
1-charset屬性：單獨使用，設置文檔字符及編碼格式。
寫法：<meta charset="UTF-8">
常見的中文編碼格式：
B-2312:國標碼，簡體中文
GBK：擴展的國標編碼，簡體中文
UTF-8:萬國碼 Unicode碼，基本兼容各國語言
2-http-equiv屬性：需配合content屬性使用。主要聲明瀏覽器如何解釋編譯文件。
寫法：<meta http-equiv="屬性值" content="屬性值詳細內容"
常用屬性值：Content-Type HTML4.01之前的文檔內容編碼聲明。
refresh 網頁刷新
set-Cookie 設置瀏覽器cookie緩存
3-name屬性：需配合content屬性使用，主要用於給搜索引擎提供必要信息。
寫法：<meta name="屬性值" content="屬性值詳細內容"
重要屬性值：author 作者，聲明網站作者，常用公司網址表示
keywords 網站關鍵字，多個關鍵字，用英文逗號分隔
description 網頁描述，搜索引擎顯示在title下的描述內容
☆☆http-equiv和name屬性，必須與content屬性配合使用，前兩者只是用於
聲明即將修改哪些屬性值，而實際的屬性值內容，在content中描述。
<!--charset屬性-->
<meta charset="UTF-8">
<!--作者-->
<meta name="anthor" contet="http://www.yt4561761.com" />
<!--網頁關鍵字-->
<meta name="keywords" content="HTML5,網頁，第一個"
<!--網頁描述-->
<meta name="description" content=我的第一個網頁 />
<!--聲明文檔的編碼格式-->
<meta charset="UTF-8" />
【link標簽】
1-作用：用於為網頁鏈接各種文件。
2-常用屬性：
rel：用於表明被鏈接文件與當前文件關系。icon表明被鏈接圖片是當前網頁的icon圖標。
type：表明被鏈接文件是什么類型，可省略。
href：表明鏈接文件的地址。
<link rel="icon" href="img/icon.png" />
【title標簽】
網頁的標題，即網頁選項卡上的文字。
<title>虞濤</title>
2.常見的塊級標簽
【常見的塊級標簽】
標題標簽<h1></h1>...<h6></h6>
水平線<hr/>
段落<p></p>
換行<br/>
引用<blockquote</blockquote>
預格式<pre></pre>
引用標簽<blockquote></blockquote>
表明標簽中的文字，為引用的內容，瀏覽器顯示為等寬字體，並縮進。
cite屬性，表明引用的來源，一般為引用的網址URL
<blockquote cite="http：//www.yt4561761.com">
hahahahahahah
</blockquote>
預格式標簽<pre></pre>
瀏覽器解析時，會按照等寬字體顯示，並保留標簽內的空格和回車。
常用於保留代碼格式。
<pre>yt4561761
yt4561761
yt4561761
</pre>
【有序列表ol order list】
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ol>
【無序列表ul unorder list】
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
【定義描述列表】
<dl>
<dt>標題</dt>
<dd>描述項</dd>
</dl>
一般情況下，標題dt只有一項。描述項dd可以有多項。
瀏覽器顯示時，標題頂格顯示，dd縮進顯示。
<dl>
<dt>這是dl列表的標題</dt>
<dd>描述項1</dd>
<dd>描述項2</dd>
<dd>描述項3</dd>
</dl>
【圖片組合標簽figure】
1-<figure></figure>標簽有兩個子標簽：
<img src="">:一幅圖片，src表示圖片的路徑。
<figcaption></figcaption>：圖片的標題
2-瀏覽器顯示為：圖片與標題上下排列，且整體向后縮進一個單位。
<figure>
<img src="img/icon.png" />
<figcaption>洪浩光伏
</figcaption>
</figure>
【分區標簽div】
常配合CSS使用，為網頁中最常用的分區標簽，常用於網頁布局使用
<div style="width：100%; height：100px; ">
這是div里面的文字
<h1>div里面的標題</h1>
</div>
3.常見的行級標簽
【常見的行級標簽】
span 文本
img 圖片
em 強調
strong 強調
q 短引用
a 超鏈接
i 傾斜
b 加粗
small 縮小字體
u 下划線
span（文本）：用於包裹一部分文字，進行特定樣式的修改。
虞濤真<span style="color:red; font-size:36px;">酷</span>！！
em（強調）：瀏覽器顯示為傾斜。
strong（強調）：瀏覽器顯示為加粗。
【strong/em/i/b 標簽的區別】
1-em和strong都表示強調，strong>em,strong和em標簽均可多層嵌套，表示強調程度的遞增。
2-em和i都能傾斜，Strong和b都能加粗。但是Strong和em多了一層強調的語義。可以幫助搜索 引擎快速抓取網站重點。且html5要求開發者盡可能實現代碼的語義化。
<em>我真踏馬帥！！</em><br />
<strong>我真籍八帥！！</strong><br />
<i>我被i標簽弄斜了</i><br />
<b>我被b標簽弄粗了</b><br />
【q(短引用)】常用於一句話的引用，cite屬性表示引用來源，瀏覽器解析時，會在內容的前后插入雙引號。
<q cite="www.yt4561761.com">那你很棒哦</q>
small（縮小字體）：small標簽可多層嵌套，表示比默認字體小一號，直到小到最小號為止。
big（放大字體）：亦可多層嵌套，直到最大。
但在最新規范中，small和big標簽不提倡使用。提倡使用style="font-size:11px;"CSS樣式替代。
<p>那你很<big><big><big><big><big>棒</big></big></big></big></big>哦！</p>
【img 圖片標簽】
1-src屬性：表示圖片引用路徑。
常見路徑的寫法：
①相對路徑：
Ⅰ -當圖片在當前文件下一層時：文件夾名/圖片名 例如：img/abc.jpg
Ⅱ-當圖片與當前文件在同一層時：圖片名 例如：src="abc.jpg"
Ⅲ-當圖片在當前文件上一層時：../圖片名 例如：src="../abc.jpg"
使用相對路徑時，圖片最外層只能放到網站根目錄（圖片必須要在項目文件夾中）
②絕對路徑：寫法file：///E:/aaa.png 但是，嚴禁使用
③網絡連接：直接使用圖片的網絡地址，但由於圖片在別的服務器，不可控，故不建議使用
2-title:圖片的標題。當鼠標指上時，顯示的提示文字。
3-alt：當圖片無法加載時顯示的文字。
4-width/height:圖片的尺寸，相當於CSS中的style="width:"
5-align:圖片周圍的文字，相對於圖片的排列方式。可選值：top/center/bottm
<img src="../img/285-1606240Z040347.jpg" title="漩渦鳴人"/>
<img src="[Liuyun&VCB-S]HanaSaku Iroha[01][Hi10p_1080p][BDRip][x264_flac_2ac3]_2015125173925.bmp"
title="松前緒花" alt="圖片無法顯示，請刷新"/>
<img src="pic/a947a8ec8a1363272535dd01938fa0ec09fac744.png" title="DEVIL MAY CRY"/>
4.表格標簽
【table】
<table></table>表格框
<tr></tr>表格行
<td></td>表格列
<th></th> 表格標題列（將tr中的td替換為th)，th默認加粗且在單元格居中顯示。
【table的常用屬性】
1-border：表格邊框屬性；當使用border="1"設置邊框時，會在所有td以及table上嵌套邊框，當border加大時，只有table框會加粗。
2-cellspacing：單元格與單元格之間的間隙。當cellspacing="0"時，單元格之間的間隙為0，但邊框線並不會合並。
☆☆合並邊框的寫法style="border-collapse:collapse;" 使用邊框合並時，無需設置cellspacing。
3-cellpadding:單元格內邊距，單元格中文字與單元格邊框之間的距離。
4-width/height:表格的寬高
5-align：設置表格在父容器中的對齊方式 ，left/居左 center/居中 right/居右
☆☆當表格使用align屬性時，相當於使表格浮動，可能會導致表格后面的元素受表格浮動影響，導致布局錯亂。
6-bgcolor：背景色
7-background：背景圖，后接相對路徑。背景圖和背景色同時生效時，圖會覆蓋背景色
8-bordercolor：設置邊框顏色
【<tr><td>標簽的屬性】
當表格屬性與行列屬性沖突時，以行列屬性為優先，屬性設置優先級td>tr>table。
1-width,height:給單個的行列設置寬高
2-bgcolor:背景色
3-align：設置單元格中的文字，在單元格中的水平對齊方式 left/center/right
4-valign:設置單元格中文字在格中的垂直對齊方式 top/center/bottom
5-nowrap:nowrap="nowrap"設置單元格文字行末不斷行
【表格的跨行與跨列】
1-跨列：colspan，某單元格跨N列，則該單元格右邊的N-1個td就不需要了。
2-跨行：rowspan，某單元格跨N行，則該單元格下邊的N-1個td就不需要了。
5.表單標簽
【form兩個重要屬性】
action：表單需要提交的服務器地址
method：表單提交數據使用的方法，get/post
>>>get和post的區別
① get傳參使用URL傳遞，所有參數在地址欄可見，不安全；get傳參數據量有限。
② post傳參使用http請求傳遞，比較安全；post可以傳遞大量數據。
但是，get請求的傳輸速率比post快。
>>>URL傳參的形式：鏈接URL地址?name1=value1&name2=value2
【input的常用屬性】
① type：設置input的輸入類型
② name：給input輸入框命名。一般情況下，name屬性必不可少。因為，傳遞數據時，使用name=value（輸入內容）的形式傳遞。
③ value：input輸入框的默認值
④ placeholder：輸入框的提示內容。當input有默認的value或輸入值時，placeholder消失
【input-type屬性的常用屬性值】
① text：文本輸入框
② password：密碼輸入框，輸入內容默認顯示小黑點
③ radio：單選框 checkbox：復選框
>>>使用radio/checkbox時，value屬性必填。提交時，提交的為value中的默認值；
>>>radio/checkbox憑借name屬性，確定是否屬於同一組，name相同為同組，只能選一個
>>>使用checked="checked"屬性，設置默認選中項
④ file：文件上傳
>>>使用accept="類型"，設置只能上傳的文件類型，如 accept=image/* 表示任意格式圖片
⑤ submit：提交按鈕，將所有表單數據提交至后台服務器
⑥ reset： 重置表單數據
⑦ image：圖形提交按鈕，跟submit一樣，具有表單提交功能
>>>使用src屬性確定圖片路徑
⑧ button：普通按鈕，沒有屌用
【屬性名=屬性值的情況】
① checked="checked" 設置radio
② multiple="multiple" 設置select控件為多選，可在界面使用Ctrl+鼠標，進行多選。一般不用。
③ selected="selected" 設置select控件，默認選中的option選項
④ readonly="readonly"
⑤ disabled="disabled"
當input被disabled時，該input的name和value數據將無法向后台傳送
⑥ hidden="hidden" 隱藏控件。等效於<input type="hiden" />
⑦ nowrap=nowrap
【下拉選擇控件 select】
① 寫法：<select>
<option></option> option可以有N多個
</select>
② name屬性，應該寫在<select>上，所有選項只有一個name
③ multiple="multiple" 設置select控件為多選，可在界面使用Ctrl+鼠標，進行多選。一般 不用。
④ option常用屬性：
value="":當option沒有value屬性時，往后台傳遞的是<option></option>標簽中的文字；
當option有value屬性時，往后台傳遞的是value屬性的值。
title="":鼠標指上后顯示的文字。
selected="selected":默認選中。
⑤ <optgroup label="山東省"></optgroup> :用於將option標簽進行分組，label屬性表示分組名。
【文本域 textarea】
① 寫法：<textarea></textarea>
② 設置寬高style="width: 200px; height: 150px;" 自身有cols="" rows=""兩個屬性，但不常用
③ readonly="readonly" 設置為只讀模式，不允許編輯。
④ style="resize: none;" 設置為寬高不允許修改。
⑤ style="overflow: ;" 設置當文字超出區域時，如何處理。
>>> 也可以通過overflow-x/overflow-y分別設置水平垂直方向的顯示方式。
>>> 常用屬性值:hidden 超出區域的文字，隱藏無法顯示
scroll 無論文字多少，均會顯示滾動
auto 自動，根據文字多少自動決定是否顯示滾動條（默認樣式）
【表格的邊框與標題】
<fieldset> 表格的邊框
<legend>邊框標題</legend>
...若干個表單元素
</fieldset>
【HTML5智能表單】
① H5新增input的form屬性，用於指定特定form表單的id，實現input無需放在form標簽之中，即可通過表單提交。
<form id=foo>
...
</form>
<input ... form="foo"/>
② 新增很多個type新屬性，詳見表格
③ 新增input的屬性：
autocomplete：自動完成功能
>>>記憶之前輸入過的內容，在下次輸入時，根據以前的內容提示，自動完成。
>>>絕大部分瀏覽器自動開啟
>>>有兩個屬性值：on/off
>>>可以在<form>標簽上設置autocomplete，控制整在表單的自動完成開關， 但可在個別input上單獨設置，覆蓋form的整體設置
autofocus： 自動獲得焦點
form：所屬表單，通過form表單的id，指向特定表單
required：必填。required="required"