Web前端開發——HTML之HTML標籤(Ⅵ)語義化 em、strong、dl、dt、dd、

目錄

1. Web語義化

2. em和strong標籤

2.1 測試代碼

2.2 效果圖

3. 自定義列表dl、列表項dt、 描述dd

3.1 測試代碼

3.2 效果圖 


1. Web語義化

讓頁面具有良好的結構與含義,從而讓人和機器都能快速理解網頁內容

2. em和strong標籤

2.1 測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div align="center">
        <p><em>強調</em> <br />
            <i>斜體,無語義</i>
        </p>
        <p>
            <strong>重點強調</strong> <br />
            <b>粗體,無語義</b>
        </p>
    </div>

</body>
</html>

2.2 效果圖

儘管em和i標籤、strong和b標籤顯示的效果相同,但是em和strong強調了語義,i和b標籤已經不再使用

3. 自定義列表dl、列表項dt、 描述dd

dl可以表示用戶自定義一個列表,dt表示列表項,dd是對列表項的描述

3.1 測試代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>超文本標記語言</dd>
        <dt>CSS</dt>
        <dd>層疊樣式表</dd>
    </dl>
</body>
</html>

3.2 效果圖 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章