HTML 與 CSS 進階
- Img 標簽
alt 屬性 一定要添加 用于圖片描述 給機器看的,如果圖片加載失敗,會顯示 alt
<img src="" alt=""/>
- 為 img 添加 圖片注釋 建議做法為 figure(圖形) 和 figcaption [caption(字幕)]
<figure><img src="" alt=""/> <figcaption>圖片說明</figcaption>
</figure>
- 表格語義化 數據形式的最佳選擇還是表格
(h5新增 th, caption, thead, tbody 和 tfoot 根據需求選擇使用者三個標簽)
<table><caption>表格示例</caption><!-- 表頭 --><thead><tr><th>表頭單元格1</th><th>表頭單元格2</th></tr></thead><!-- 表身 --><tbody><tr><td>標準單元格1</td><td>標準單元格2</td></tr><tr><td>標準單元格1</td><td>標準單元格2</td></tr></tbody><!-- 表腳 --><tfoot><tr><td>標準單元格1</td><td>標準單元格2</td></tr></tfoot></table>
- 換行符<br/>
<div><span>標題</span> <br/><span>第一部分內容</span><br/><span>第二部分內容</span><br/><span>第三部分內容</span>
</div>
<!-- 上邊是錯誤用法 吃驚嗎 -->
<!-- br 有自己的特定語義 只適合用戶 P 標簽內部的換行-->
<p>廣東省<br/>廣州市<br/>黃埔大道61號
</p>
- 無序列表 <ul>
主要用于列表型數據
<ul><li><span>1</span>HTML 教程</li><li><span>2</span>PHP 教程</li><li><span>3</span>java 教程</li>
</ul>
有人說,每一個列表前都有數字,為什么不用有序列表實現。
答: 因為有序列表前的數字外觀是固定的,不能修改。所以在開發中,大多數情況下都是使用無序列表
- Strong 標簽和 em標簽
可以用于 SEO 突出
W3C 對這兩個標簽賦予了"強調"的語義。 為了SEO突出,可以使用 strong 和 em如果被 CSS 重新定義新的樣式,也不影響這兩個標簽的語義
如何判斷一個頁面是否語義良好
去掉所有CSS效果,查看便知