html是什么：超文本標記語言
html的唯一作用就是：給指定的文本添加語義固歪。
html的標準格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>作用：由于HTML有很多個版本的規(guī)范, 每個版本的規(guī)范之間又有一定的差異. 所以為了讓瀏覽器能夠正確的編譯/解析/渲染我們的網(wǎng)頁, 我們需要在HTML文件的第一行告訴瀏覽器, 我們當(dāng)前這個網(wǎng)頁是用哪一個版本的HTML規(guī)范來編寫的.
<html lang="zh-CN">lang屬性作用：告訴各大搜索引擎，該頁面的語言是簡體中文
<head>作用：頁面中的控制信息（不需要顯示的信息）都寫在head標簽中
<meta charset="UTF-8">作用：告訴瀏覽器，body中的語言使用utf-8進行解碼
<title>作用：告訴瀏覽器該頁面的標題是什么
<body>作用：頁面中的內(nèi)容（需要瀏覽器顯示的信息）都寫在body標簽中
所有標簽都會用id屬性（標識唯一），class屬性（標識一類），他們的命名規(guī)則：
標簽介紹：
標簽特征：
容器級標簽（可以嵌套其他標簽）：div h ul ol dl li dt dd ...
文本級標簽（只能嵌套文字奇徒、圖片、超鏈接）：span p buis strong em ins del ...
塊級元素：p div h ul ol dl li dt dd
行內(nèi)元素：span buis strong em ins del
基礎(chǔ)標簽：
style標簽：css代碼的內(nèi)聯(lián)方法缨硝，使用方法在head中添加css代碼摩钙，一般企業(yè)開發(fā)中大多使用外聯(lián)的方法。
h1標簽：用于給文本添加標題語義查辩，h標簽一共有6個胖笛，h系列標簽是塊級元素（display:block网持，獨占一行）
格式：
<h1>xxxxxx</h1>
注意點：企業(yè)開發(fā)中，要慎用h系列標簽长踊，特別是h1標簽功舀，一個界面一般情況只能有1個h1標簽。
p標簽：告訴瀏覽器哪些文字是一個段落之斯，p標簽是塊級元素（display:block，獨占一行）
格式：
<p>xxxxxx</p>
hr標簽：在瀏覽器上顯示一條分割線（display:block遣铝，獨占一行）佑刷，不建議使用，修改樣式通常使用css酿炸。
格式：
<hr />
br標簽：讓內(nèi)容換行
格式：
<br />
img標簽：在網(wǎng)頁上插入一張圖片（瀏覽器通過識別url自動請求獲取圖片瘫絮，放到對應(yīng)位置上）
格式：
<img src="images/banner.jpg" alt="err" title="手機圖片">
屬性介紹：
src作用：瀏覽器獲取圖片的路徑（可以使用絕對路徑和相對路徑）
alt作用：規(guī)定替代圖片的文本，瀏覽器獲取圖片出錯的時候填硕，瀏覽器則顯示文本內(nèi)容
title作用：懸停文本麦萤，一般用于介紹圖片，只有鼠標移動到圖片上才會顯示
a標簽：用于從一個頁面鏈接到另一個頁面扁眯，也可以做同一個頁面不同位置的錨定跳轉(zhuǎn)
格式：
<a href="[http://www.baidu.com](http://www.baidu.com/)" target="_blank" title="跳轉(zhuǎn)百度">百度</a>
屬性介紹：
href作用：指定跳轉(zhuǎn)的目標地址target作用：告訴瀏覽器在源標簽中跳轉(zhuǎn)（_self）還是打開新標簽（_blank）壮莹，不寫默認為_self在源標簽跳轉(zhuǎn)
title作用：懸停文本，一般用于介紹圖片姻檀，只有鼠標移動到圖片上才會顯示
注意點：
a標簽之間命满，一定要有內(nèi)容（文本或者img圖片），否則沒辦法在瀏覽器上顯示這個標簽a標簽也叫做超鏈接
可以使用base標簽配置绣版，當(dāng)前環(huán)境中a標簽target屬性的默認值胶台，格式<base target="_blank" />，base標簽需要寫在head標簽里面
a標簽的錨定跳轉(zhuǎn)用法:
假鏈接（本質(zhì)是跳轉(zhuǎn)到當(dāng)前頁面）：
<a href="#">博客</a>
<a href="javascript:">博客</a>
跳轉(zhuǎn)到當(dāng)前頁面指定位置（錨點位置）：
給指定位置的任意標簽添加一個id屬性杂抽，例如：<p id="location">這個是目標</p>
跳轉(zhuǎn)到該錨點位置：<a href="#location">跳轉(zhuǎn)到指定位置</a>
跳轉(zhuǎn)到指定頁面指定位置：
<a href="錨點鏈接.html#location">跳轉(zhuǎn)到指定位置</a>
div標簽：一般用于配合css完成網(wǎng)頁的基本布局（display:block诈唬，獨占一行），在css布局時缩麸，通常使用class屬性進行選擇
格式：
<div class='xxx'>xxxxxx</div>
注意點：div是容器級標簽铸磅，容器級標簽的特點就是可以嵌套其他所有的標簽
span標簽：一般用于配合CSS修改網(wǎng)頁中的一些局部信息
格式：
<p>努力到<span class='span'>無能為力</span>, 拼搏到<span>感動自己</span></p>
注意點：span標簽是文本級標簽，文本級標簽只能嵌套文本杭朱、圖片愚屁、超鏈接
article標簽： 表示獨立的自包含內(nèi)容，如：一篇文章痕檬。文章中可包含頭部標題（header標簽）霎槐、內(nèi)容、腳注（footer）
section標簽：表示文檔中的節(jié)（區(qū)塊）梦谜，一般是具有標題的丘跌，語義比article標簽更弱一些袭景，表示一塊。
aside標簽：標簽定義其所處內(nèi)容之外的內(nèi)容闭树， aside 的內(nèi)容應(yīng)該與附近的內(nèi)容相關(guān)耸棒，可以做文章側(cè)欄。
header標簽：標簽定義文檔的頁眉（介紹信息）报辱，如：標題
footer標簽： 標簽定義 section 或 document 的頁腳与殃，在典型情況下，該元素會包含創(chuàng)作者的姓名碍现、文檔的創(chuàng)作日期以及/或者聯(lián)系信息幅疼。
nav標簽： 標簽定義導(dǎo)航鏈接的部分。
strong作用: 著重內(nèi)容昼接，文本樣式默認加粗
格式:
<strong>著重內(nèi)容</strong>
ins作用: 新插入的文本爽篷，文本樣式默認下劃線
格式:
<ins>新插入的文本</ins>
em作用:強調(diào)內(nèi)容，文本樣式默認斜體
格式:
<em>強調(diào)內(nèi)容</em>
del作用: 已刪除的文本慢睡，文本樣式默認刪除線
格式:
<del>已刪除的文本</del>
[圖片上傳失敗...(image-31e7f6-1532748685918)]
details標簽：詳情和概要標簽
格式：
<details>
<summary>概要信息</summary>
詳情信息
</details>
[圖片上傳失敗...(image-f30584-1532748685911)]
注意點：
利用summary標簽來描述概要信息, 利用details標簽來描述詳情信息
默認情況下是折疊展示, 想看見詳情必須點擊
列表標簽：
無序列表(unordered list)
ul標簽: 給一堆內(nèi)容添加無序列表語義(一個沒有先后順序整體), 列表中的條目是不分先后
li作用: li 英文是 list item, 翻譯為列表項逐工，li是在ul里面的子元素，一個ul中子元素的li不分先后
格式:
<ul>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
<li>鐵嶺</li>
</ul>
注意點：
1漂辐、瀏覽器會給無需列表自動添加先導(dǎo)符號但是一定一定千萬千萬要記住, ul的作用并不是給文字添加小圓點, 而是增加無序列表的語義
2泪喊、瀏覽器會給無需列表自動添加先導(dǎo)符號但是一定一定千萬千萬要記住, ul的作用并不是給文字添加小圓點, 而是增加無序列表的語義ul是一個組標簽, 一定是一坨一坨的出現(xiàn), 也就是說li標簽不能單獨存在, 必須包裹在ul里面
3、由于ul和li是一個整體, 所以ul里面不推薦包裹其它標簽, 永遠記住ul里面最好只寫li標簽
4髓涯、雖然ul中推薦只能寫li標簽, 但是li標簽是一個容器標簽, li標簽中可以添加任意標簽, 甚至可以添加ul標簽
定義列表(definition list)
dl標簽: 給一堆內(nèi)容添加列表語義, 通過dt羅列出列表的條目, 然后再通過dd給每個條目進行相應(yīng)的描述
格式:
dt英文definition title, 翻譯為定義標題
dd英文definition description, 翻譯為定義描述信息
<dl>
<dt>北京</dt>
<dd>國家的首都, 看升國旗的地方</dd>
<dt>上海</dt>
<dd>魔都, 遍地是黃金的地方</dd>
</dl>
dl應(yīng)用場景:
1窘俺、網(wǎng)站底部相關(guān)信息
2、但凡看到一堆內(nèi)容都是用于描述某一個內(nèi)容的時候就要想到dl
注意事項:
dl是一個組標簽, 一定是一坨一坨的出現(xiàn), 也就是說dt和dd標簽不能單獨存在, 必須包裹在dl里面
由于dl和dt复凳、dd是一個整體, 所以dl里面不推薦包裹其它標簽
dd和dt和li標簽一樣是容器標簽, 里面可以添加任意標簽
定義列表非常靈活, 可以給一個dt配置多個dd, 但是最好不要出現(xiàn)多個dt對應(yīng)一個dd, dd的語義是描述離它最近的上一個dt, 所以其它dt相當(dāng)于沒有描述, 而定義列表存在的意義就是既可以列出每一個條目又可以對每一個條目進行描述
定義列表非常靈活, 可以將多個dt+dd組合拆分為多個dl
表格標簽：
table標簽:以表格形式將數(shù)據(jù)顯示出來, 當(dāng)數(shù)據(jù)量非常大的時候, 表格這種展現(xiàn)形式被認為是最為清晰的一種展現(xiàn)形式
格式：
table定義表格
tr定義行
td定義單元格
[圖片上傳失敗...(image-be011c-1532748685918)]
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
border: 默認情況下表格的邊框?qū)挾葹?看不到, 通過border屬性給表格指定邊框?qū)挾?/p>
width: 默認情況下表格的寬度是由內(nèi)容自動計算出來的, 可以通過width屬性指定表格的寬度
height:默認情況下表格的高度是由內(nèi)容自動計算出來的, 可以通過height屬性指定表格的高度
cellspacing: 外邊距. 默認情況下單元格之間有2個像素的間隙, 可以通過cellpadding指定表格之間的間隙
cellpadding: 內(nèi)邊距. 默認情況下單元格邊緣距離內(nèi)容有1個像素的內(nèi)邊距, 可以通過cellpadding屬性指定單元格邊緣和內(nèi)容之間的內(nèi)邊距
align: 規(guī)定表格相對周圍元素的對齊方式, 它的取值有center（居中）瘤泪、left（居左）、right（居右）
給table設(shè)置align屬性, 是讓表格在瀏覽器中居左/居右/居中
給tr設(shè)置align屬性, 是讓當(dāng)前行中所有內(nèi)容居左/居右/居中
給td設(shè)置align屬性,是讓當(dāng)前單元格中所有內(nèi)容居左/居右/居中
該屬性僅僅作為了解, 企業(yè)開發(fā)中用css代替, 因為HTML僅僅用于說明語義
如果td中設(shè)置了align屬性, tr中也設(shè)置了align屬性, 那么單元格中的內(nèi)容會按照td中設(shè)置的來對齊
valign: 規(guī)定表格相對周圍元素的對齊方式, 它的取值有middle（居中）育八、top（居上）对途、bottom（居下）
給table設(shè)置valign屬性, 無效
給tr設(shè)置valign屬性, 是讓當(dāng)前行中所有內(nèi)容居上/居中/居下
給td設(shè)置valign屬性,是讓當(dāng)前單元格中所有內(nèi)容居上/居中/居下
如果td中設(shè)置了valign屬性, tr中也設(shè)置了valign屬性, 那么單元格中的內(nèi)容會按照td中設(shè)置的來對齊
bgcolor:規(guī)定表格的背景顏色
給table設(shè)置bgcolor屬性, 是給整個表格設(shè)置背景顏色
給tr設(shè)置bgcolor屬性, 是給當(dāng)前行設(shè)置背景顏色
給td設(shè)置bgcolor屬性, 是給當(dāng)前單元格設(shè)置背景顏色
該屬性僅僅作為了解, 企業(yè)開發(fā)中用css代替, 因為HTML僅僅用于說明語義
使用實例：
使用表格屬性讓快級元素中的多行文字水平垂直居中：
html代碼：
<div class="parent">
<p class="son">會議認為，黨的十八大以來髓棋，我國經(jīng)濟發(fā)展取得歷史性成就实檀、
發(fā)生歷史性變革，為其他領(lǐng)域改革發(fā)展提供了重要物質(zhì)條件按声。經(jīng)濟實力
再上新臺階膳犹，經(jīng)濟年均增長7.1%，成為世界經(jīng)濟增長的主要動力源和穩(wěn)定器签则。
</p>
</div>
css代碼：
.parent {
display：table须床； #設(shè)置成塊級表格元素
width：300px；
height：300px渐裂；
text-align：center豺旬； #表格元素中的文本钠惩、圖片、超鏈接水平居中
}
.son {
display：table-cell族阅； #設(shè)置為表格的單元格
height：200px篓跛；
background-color：yellow；
vertical-align：middle坦刀； #設(shè)置單元格的內(nèi)容垂直居中
}
表單標簽：
form標簽: 用于收集用戶信息, 讓用戶填寫愧沟、選擇相關(guān)信息
格式:
<form>
所有的表單內(nèi)容，都要寫在form標簽里面
</form>
注意事項:
- 所有的表單內(nèi)容鲤遥，都要寫在form標簽里面
屬性介紹：
action：表單提交到服務(wù)器的路由地址
method：提交表單的方式沐寺，常見為get（通過拼接url進行數(shù)據(jù)提交）和post（通過在request的body中提交key-value的方式進行數(shù)據(jù)提交）
在form標簽中嵌套的常見標簽：
input標簽：form表單中的核心標簽，通過input標簽的type屬性渴频，可以選擇不同的取值方式
格式:
<input disabled type="text" name="fullname" maxlength="8" placeholder='用戶名' />
屬性介紹：
type：設(shè)置input的類型芽丹，如下為常見類型
text=明文輸入框
password=暗文輸入框
radio=單選框（單選按鈕北启，天生是不互斥的卜朗，如果想互斥，必須要有相同的name屬性）
checkbox=多選框（也是要有相同的name咕村，雖然他不需要互斥场钉，但是也要有相同的name）
button=按鈕（多數(shù)情況下，用于通過 JavaScript 啟動腳本）
image=自定義圖像形式的按鈕
reset=重置按鈕（重置按鈕會清除表單中的所有數(shù)據(jù)）
submit=提交按鈕（提交按鈕會把表單數(shù)據(jù)發(fā)送到action屬性指定的頁面）
hidden=隱藏域（隱藏域的內(nèi)容不會被瀏覽器所顯示）
color=取色器（HTML5新增類型懈涛，可以獲取顏色）
date=日期選擇器（HTML5新增類型逛万，可以獲取日期）
name：表單中需要提交的數(shù)據(jù)以 name：value 的形式所表示，name一般指名所提交的是什么信息批钠，
value： 表單中需要提交的數(shù)據(jù)以 name：value 的形式所表示宇植，value一般指名用戶所提交的信息本體（value也可以用來配置默認值）
checked：默認勾選，checked屬性需要type值為radio或者checkbox的時候才生效埋心，作用是給單選框或者多選框默認勾上（前提是同一組內(nèi)容必須使用相同的name指郁，多組單選框如果選中多個checked只會生效最后一個）
placeholder：占位符，placeholder屬性需要type為input時才生效拷呆，作用是給文本框添加隱隱的解釋文本
disabled ：無法修改的文本框闲坎，disabled屬性需要type為input時才生效，作用是讓文本框不能通過用戶界面修改
maxlength：文本框可以輸入的最大長度為8個字符茬斧，同樣需要type是input才生效
label標簽: label標簽不會向用戶直接呈現(xiàn)任何特殊效果腰懂。不過，它為鼠標用戶改進了可用性项秉，通過鼠標點擊label元素區(qū)域能讓光標聚焦在綁定的輸入框中或者單多選框直接勾選
注意點:
表單元素要有一個id绣溜，然后label標簽就有一個for屬性，for屬性和id相同就表示綁定了
所有表單元素都可以通過label綁定
datalist標簽：需要有input輸入框存在的情況下以及支持HTML5特性的瀏覽器才有效娄蔼，給輸入框綁定待選項涮毫，起到提醒用戶的作用瞬欧。（和select完全不一樣）
格式：
<input type="text" list="輸入框id">
<datalist id='輸入框id'>
<option>待選項內(nèi)容</option>
</datalist>
[圖片上傳失敗...(image-e9263a-1532748685915)]
textarea標簽：表單中定義多行的文本輸入控件
格式：
<textarea cols="30" rows="10">默認</textarea>
屬性：
cols：表示columns“列”, 規(guī)定文本區(qū)內(nèi)的可見寬度
rows：表示rows“行”, 規(guī)定文本區(qū)內(nèi)的可見行數(shù)
注意點:
可以通過cols和rows來指定輸入框的寬度和高度
默認情況下輸入框是可以手動拉伸的
禁止手動拉伸可以在css中設(shè)置：textarea { resize : none}
select標簽：select標簽和ul、ol罢防、dl一樣艘虎，都是組標簽. 用于創(chuàng)建表單中的待選列表, 可以從選擇某一個帶選項，不能輸入其他值
格式：
<select>
<optgroup label="北京市">
<option>海淀區(qū)</option>
<option>昌平區(qū)</option>
<option>朝陽區(qū)</option>
</optgroup>
<optgroup label="廣州市">
<option>天河區(qū)</option>
<option>白云區(qū)</option>
</optgroup>
<option selected="selected">貴州</option>
</select>
option作用：select標簽中嵌套的子標簽咒吐，用做生成一個選項
option屬性：
selected：selected值為selected的時候野建，則為select選項框設(shè)置該option為默認選項
optgroup作用：給select標簽中的選項進行分組
optgroup屬性：
label：屬性為選項組規(guī)定描述
[圖片上傳失敗...(image-9e9a60-1532748685914)]
多媒體標簽：
marquee標簽：跑馬燈效果
格式：
<marquee>內(nèi)容</marquee>
marquee屬性:
direction: 設(shè)置滾動方向 left/right/up/down
scrollamount: 設(shè)置滾動速度, 值越大就越快
loop: 設(shè)置滾動次數(shù), 默認是-1, 也就是無限滾動
behavior: 設(shè)置滾動類型 slide滾動到邊界就停止, alternate滾動到邊界就彈回
注意點:
marquee標簽不是W3C推薦的標簽, 在W3C官方文檔中也無法查詢這個標簽, 但是各大瀏覽器對這個標簽的支持非常好
[圖片上傳失敗...(image-59900d-1532748685914)]
video標簽： 播放視頻
格式1：
<video src="">
</video>
格式2：
<video>
<source src="" type="video/mp4"></source>
<source src="" type="video/webm"></source>
</video>
屬性：
src: 需要播放的視頻地址
autoplay: 是否需要自動播放視頻
controls: 是否需要顯示控制條
poster: 視頻沒有播放之前顯示的占位圖片
loop: 循環(huán)播放視頻. 一般用于做廣告視頻
preload: 預(yù)加載視頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會失效
muted:視頻靜音
width/height: 和img標簽中的一模一樣，設(shè)置寬度高度
source的type屬性：聲明當(dāng)前視頻文件的格式恬叹，video/mp4指mp4格式候生、video/webm指webm格式
注意點：
1、當(dāng)前通過video標簽的第二種格式雖然能夠指定所有瀏覽器都支持的視頻格式, 但是想讓所有瀏覽器都通過video標簽播放視頻還有一個前提條件, 就是瀏覽器必須支持HTML5標簽, 否則同樣無法播放
2绽昼、在過去的一些瀏覽器是不支持HTML5標簽的, 所以為了讓過去的一些瀏覽器也能夠通過video標簽來播放視頻, 那么我們以后可以通過一個JS的框架叫做html5media來實現(xiàn)
3唯鸭、ideo標簽的第二種格式存在的意義就是為了解決瀏覽器適配問題. video 元素支持三種視頻格式, 我們可以把這三種格式都通過source標簽指定給video標簽, 那么以后當(dāng)瀏覽器播放視頻時它就會從這三種中選擇一種自己支持的格式來播放
4、通過localhost的方式打開的視頻或者音頻文件可能會產(chǎn)生無法拖動進度條的bug
audio標簽: 播放音頻
格式1：
<audio src="">
</audio>
格式2：
<audio>
<source src="" type="video/mp4"></source>
<source src="" type="video/webm"></source>
</audio>
屬性：
src: 需要播放的音頻地址
autoplay: 是否需要自動播放音頻
controls: 是否需要顯示控制條
loop: 循環(huán)播放音頻. 一般用于做背景音頻
-
preload: 預(yù)加載音頻, 但是需要注意preload和autoplay相沖, 如果設(shè)置了autoplay屬性, 那么preload屬性就會失效
muted:音頻靜音
source的type屬性：聲明當(dāng)前音頻文件的格式硅确，audio/mp3指mp3格式
HTML語義化：
[圖片上傳失敗...(image-1040b2-1532748685913)]
下面就讓我們把HTML5語義化標簽過一遍：
<header>
定義文章的介紹信息：標題目溉，logo，slogan菱农；包裹目錄部分缭付，搜索框，一個nav或者任何相關(guān)的logo循未；
一個頁面中<header>的個數(shù)沒有限制陷猫，可以為每個內(nèi)容塊添加一個header；
<nav>
定義文章導(dǎo)航欄的妖，鏈接等;
nav一般和u绣檬、li配合做導(dǎo)航欄；
<main>
定義文章的主要內(nèi)容
main標簽在一份文檔中是唯一的嫂粟，其后代元素常常包括
<article>娇未；
<article>
- 定義文檔中可以脫離其他部分，一份獨立的內(nèi)容赋元，通常帶有標題忘蟹，當(dāng)article內(nèi)嵌article時，里外層的內(nèi)容應(yīng)該是相關(guān)的搁凸，比如一篇微博和它的評論媚值；
<section>
- 與article的差別在于，它是整體的一部分护糖，或者是文章的一節(jié)褥芒，一般來說section也會帶有標題；
<aside>
- 側(cè)邊欄（與article并列存在）或者嵌入內(nèi)容（在article內(nèi)），通常認為是獨立拆分出來而不受整體影響的一部分锰扶，作為主要內(nèi)容的附屬信息献酗，如索引，詞條列表坷牛，或者頁面及站點的附屬信息罕偎，如廣告，作者資料介紹等京闰；
<footer>
- 頁腳颜及，通常包含作者、版權(quán)信息或者相關(guān)鏈接等蹂楣；
極易混淆的語義化標簽
下面這兩組元素俏站，雖然樣式上極其相似，但是其在語義上各有側(cè)重痊土，弄明白他們的區(qū)別肄扎，可以幫你摸清HTML5語義化的思路...
<i>
表示一段普通文本中，因為某種原因和正常文本不同赁酝，例如專業(yè)術(shù)語犯祠、外語短語或排版用的文字，其通常表現(xiàn)為斜體赞哗，他的出現(xiàn)不會改變語義雷则；
Terms in languages different from the main text should be annotated with lang attributes (or, in XML, lang attributes in the XML namespace).
一段文本中如果有插入語言不同的專業(yè)術(shù)語辆雾，需要在<i>標簽中加上<lang>屬性作為注解肪笋，例子如下：
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
<i lang="fr">是對je ne sais quoi（習(xí)語，表達妙不可言的意思）的注解度迂，表示包含的術(shù)語語種為法語藤乙；
<em>
表達對文本內(nèi)容的強調(diào)；
其強調(diào)位置的不同往往帶來語義的變化（可以理解為英語口語中針對一句話中不同位置的重度惭墓，影響聽話人的理解）坛梁；
在視覺效果上也是斜體的效果；
注意：
The em element also isn’t intended to convey importance; for that purpose, the strong element is more appropriate.
- <em>不適用于需要傳達重要性的內(nèi)容腊凶，傳達重要性的語義應(yīng)該使用<strong>划咐；
The em element isn’t a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.
- <em>標簽本質(zhì)上并不是讓包含文本變?yōu)樾斌w字。有時钧萍，作者只是想讓部分文本在段落/句子中脫穎而出褐缠，或是在不同語氣或者語態(tài)上，這時要用<i>风瘦；
<b>
b表示樣式上的粗體队魏；
其包含文本，不具備強調(diào)重要性的作用万搔，也不影響語態(tài)和語氣胡桨，僅僅是從樣式上讓包含文本特殊化;
常用語關(guān)鍵字官帘，文本驅(qū)動軟件中的可執(zhí)行語句或者一篇文章的導(dǎo)語，說明書中的產(chǎn)品/功能名稱等昧谊；
<strong>
- strong表示強調(diào)帶有著重意味刽虹，意在傳達內(nèi)容的重要性（需要盡快被看到）、嚴重性或者緊急性呢诬，状婶；
總結(jié)：
<em>適用于在一段文本中突出重點，強調(diào)位置的不同往往會影響語義馅巷，而如果僅僅在語態(tài)或者語氣上為了突出某個文本膛虫，應(yīng)該使用<i>；
在使用 <i>時钓猬，W3C鼓勵開發(fā)者最好檢查下是否有更合適的標簽可替代稍刀，例如，上述的<em>敞曹，來突出重點账月，或是<dfn>，用來定義一個術(shù)語澳迫；
如果為了突出文本的重要性局齿，緊急性，嚴重性應(yīng)該使用<strong>橄登；
W3C明確說明抓歼，<b> 元素應(yīng)當(dāng)是在其他標簽都不合適的情況下最后一個考慮使用的標簽，言外之意拢锹，官方并不推薦使用b標簽谣妻，
<figure>
- 文檔中的一些嵌入式內(nèi)容，比如引用的圖片卒稳，插圖蹋半，表格，代碼段等充坑，可以作為獨立的單元减江，當(dāng)這部分轉(zhuǎn)移到附錄中或者其他頁面時不會影響到主體，這樣的元素都可以放在
<figure>元素內(nèi)捻爷，而且可以搭配其子元素<figcaption>作很好的元素說明或者備注信息;
<img>
- img元素最好附帶alt信息辈灼，即對圖片進行文本說明，當(dāng)圖像無法查看時會顯示這段文本描述;
<table>
table元素現(xiàn)在有一系列語義化結(jié)構(gòu)標簽
<caption>: 表格的標題役衡，跳脫于表格之外;
<thead>：表格的表頭行茵休，定義表格的表頭內(nèi)容;
<tbody>：表格的主體部分，表格的主體部分;
<tfoot>：表格的腳注部分，tfoot要和thead榕莺，tbody結(jié)合起來使用;
<form>
- <label>標簽的用法：label標簽俐芯，為input元素定義標注，改進了表單控件的可用性钉鸯，當(dāng)你點擊到label標簽時吧史，會自動聚焦到對應(yīng)控件上，label標簽一般有兩種用法
1. label的for屬性與控件的id相對應(yīng)唠雕，比如：
<label for="username">請輸入用戶名: </label>
<input type="text" id="username" name="username">
2. label中內(nèi)嵌控件贸营，比如:
<label>請輸入用戶名<input type="text" id="username" name="username"></label>
此外，
placeholder屬性岩睁，其值會在輸入字段為空時顯示钞脂，并會在字段獲得焦點時消失；
表單中的單選radio控件和復(fù)選checkbox控件以及下拉框select控件捕儒，可以為radio, checkbox添加checked屬性以及為option添加selected屬性讓其默認選中
