前端開發注意事項(HTML與CSS進階)

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