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效果，查看便知

總結

以上是生活随笔為你收集整理的前端开发注意事项(HTML与CSS进阶)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。