HTML進階教程

HTML進階

一、HTML、XML、HTML5的本質區別：

• HTML：指HTML4.01 （HyperText Mark-up Language 超文本標記語言）
• XML：指HTML的過渡版 （EXtensible HyperText Mark-up Language 擴展的超文本標記語言）
• HTML5：指HTML的升級版

二、語義化

優點：1）利於開發調試和後期維護 2）利於搜索引擎優化

2.1 標題語義化

• 一個頁面只能有一個h1便籤
• h1~h6之間不要斷層
• 不要用h1~h6來定義樣式
• 不要用div來代替h1~h6

2.2 圖片語義化

• alt屬性（必需）：圖片描述，給搜索引擎看的，當圖片無法顯示時，頁面會顯示alt中的文字
• title屬性（可選）：圖片描述，給用戶看的，當鼠標移到圖片上時，會顯示title中的文字

  <img src="" alt="圖片描述(搜索引擎看)" title="圖片描述(用戶看)"/>
  

• figure元素：用於包含圖片和圖注
• figcaption元素：用於表示圖註文字

  <!--figure元素用來包含圖片和圖注、figcaption元素用於表示圖註文字-->
  <figure>
      <img src="" alt=""/>
      <figcaption></figcaption>
  </figure>
  

2.3 表格語義化

• thead、tbody、tfoot三個標籤的語義:表頭、表身、表腳。有了這幾個標籤，表格語義更加良好，結構更加清晰

2.4 表單語義化

• label標籤:用於顯示在輸入控件旁邊的說明性文字，將表單元素和說明文字關聯起來
  • for屬性的2個作用:
    1. 語義上綁定了label元素和表單元素
    2. 增強了鼠標可用性

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

  • label標籤兩種關聯方式:

    <!--第1種-->
    <input id="cbk" type="checkbox" /><label for="cbk">複選框</label>
    <!--第2種-->
    <label>複選框<input id="cbk" type="checkbox"/></label>
    

• fieldset標籤給表單進行分組，legend標籤定義某一組表單的標題
  • fieldset標籤和legend標籤的兩個作用:
    1. 增強表單的語義
    2. fieldset元素的disabled屬性可以禁用整個組中的表單元素

    <form action="index.php" method="post">
        	<fieldset>
        		<legend>title of form</legend>
            		<p>
            			<label for="name">賬號：</label>
            			<input type="text" name="name" id="name"/>
            		</p>
            		<p>
            			<label for="password">密碼：</label>
            			<input type="password" name="password" id="password"/>
            		</p>
        		<input type="checkbox" name="remember" id="remember"/>
        		<label for="remember">記住我</label>
        		<input type="submit" value="登錄">
        	</fieldset>
    </form>
    

2.5 其他語義化

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

  <p>第一行<br/>第二行<br/>第三行<br/></p>
  

• 無序列表ul
  爲了實現良好的語義，對於列表型的數據，建議使用無序列表

  <!--span標籤可以自定義列表項-->
  <ul>
  	<li><span>1</span>python</li>
  	<li><span>2</span>php</li>
  	<li><span>3</span>C</li>
  </ul>
  

• strong標籤和em標籤
  在strong和em內部的文本會被強調爲重要文本，爲了SEO想要突出某些關鍵字可以使用這兩個標籤，一般會先去掉他們的默認樣式，再用CSS重新定義，這並不影響他們的語義

• 顯示圖片的2種方式:

  • 使用img標籤
    通過HTML來實現，圖片作爲HTML的一部分，且被搜索引擎所看到
  • 使用背景圖片
    通過CSS實現，不作爲HTML的一部分，不被搜索引擎所看到，僅起到修飾作用

2.6 語義化驗證

• 如何判斷一個頁面的語義是否良好呢？
  去掉CSS樣式，再看頁面是否還具有可讀性