標題語義化
圖片語義化
表格語義化
表單語義化
其他語義化
語義化表單
HTML5摒棄的標籤

對標題h1-h6的語義化 注意的四方面
1，一個頁面只能有一個h1標籤
2，h1-h6之間不要斷層
3，不要用h1-h6來定義樣式
4，不要用div來代替h1-h6

對圖片的語義化
1，alt屬性 和 title屬性 alt一定要新增
2，figure元素和figcaption元素

實現圖片+圖注 的效果 ，在html5中 引入figure元素和figcaption兩個元素來增強圖片的語義化
figure元素 ： 包含圖片和圖注
figcaption元素 ：用來表示圖註文字

<figure>
    <img src="img/bg-1.png" alt="紅花"/>
    <figcaption>這是一朵漂亮的花朵</figcaption>
</figure>
 

表格語義化
table tr 和td 這3個是常用的
加強表格的語義化又增加了，th caption thead tbody 和 tfoot


表單語義化
1，lable標籤

  for屬性值：為所關聯的表單元素的id
  <input id="name" type="text"/>  
  所關聯的label標籤為<label for="name">說明性文字</label>

  label標籤的for屬性有兩個作用
  1，語義上綁定了label元素和表單元素
  2，增強了滑鼠可用性，也就是點選label中的文字時，其所關聯的表達元素也會獲取焦點
  換句話說：label標籤for屬性的作用 就是使得滑鼠單擊的範圍擴大到label元素上
  極大提高了使用者點選的可操作性

 
<label for="">說明性文字</label>

 label標籤有2種關聯方式，下面兩種寫法是等價的
     <input id="cbk" type="checkbox"/><label for="cbk">複選框</label><br/>
     <label>複選框<input id="cbk" type="checkbox"/></label>

2，fieldset標籤和legend標籤
使用 fieldset標籤 來給表單元素進行分組
legend標籤 用於定義某一組表單的標題

<fieldset>
    <legend>表單組標題</legend>
    ......
</fieldset>

    <form action="index.aspx" method="post">
        <fieldset>
            <legend>登入學習網站</legend>
            <p>
                <label for="name">賬號</label><input type="text" id="name" name="name"/>
            </p>
            <p>
                <label for="pwd">密碼</label><input type="password" id="pwd" name="pwd"/>
            </p>

            <input type="checkbox" id="remember-me" name="remember-me"/><label for="remember-me">記住我</label>
            <input type="submit" value="登入"/>
        </fieldset>
    </form>

換行符<br/>標籤只適合在p標籤內部的換行，不能用於其他標籤

strong實現加粗文字 em實現斜體文字 ，這兩個標籤賦予 強調的語義，標籤內部的文字被強調為重要文字，
搜尋引擎對這兩個標籤頁賦予一定的權重，如果在頁面中 為了SEO而想要突出某些關鍵字，可以使用strong 和 em 這兩個標籤
一般情況下，去掉strong 和 em的預設樣式，然後在使用CSS重新定義新的樣式，但不影響這兩個標籤的語義，只是改變外觀而已

del標籤 和 ins 標籤 這兩個標籤是配合使用的，
del表示 "delete" 用於定義被刪除的文字
ins 表示"insert" 用於定義被更新的文字
一般會使用CSS重新定義del 和 ins標籤樣式