:::note warning
此篇文章只針對文本部分做教學,若無需求,可不必觀看
:::
# 結構化元素
結構化元素就是指 HTML 元素中具有明確含義和作用的元素,例如 p
元素表示段落。
HTML4.01 版本的結構化元素:
名稱 | 代碼 |
---|---|
標題元素 | <h1> ~ <h6> |
段落元素 | <p> |
粗體元素 | <b> |
斜體元素 | <i> |
上標 / 下標元素 | <sup> / <sub> |
換行元素 | <br> |
水平線元素 | <hr> |
相對於 HTML 4.01 版本而言,HTML5 版本新增了一系列結構化元素。
HTML5 版本的新增的結構化元素:
<article>
元素<section>
元素<nav>
元素<aside>
元素<header>
元素<main>
元素<footer>
元素
# HTML4 的元素
# 標題元素
HTML 標題元素具體是指 <h1>
~ <h6>
元素,其呈現了 6 個不同級別的標題,<h1>
元素級別最高, <h6>
元素級別最低。每個元素獨占一行。
# 段落元素
HTML <p>
元素表示一個段落,該元素通常呈現出當前段落的文本與其他段落的文本之間會以空白進行隔離。如下示例代碼展示了 <p>
元素的用法:
# 粗體元素
HTML <b>
元素用來定義需要提醒注意的內容。該元素在過去被認為是粗體元素,因為絕大多數瀏覽器解析該元素呈現的是粗體效果。
如果不是出於語義目的而使用 <b>
元素,那麼讓文本顯示粗體更好的方式是使用將 CSS 的 font-weight 屬性設置為 bold。
<b>
元素的應用場景例如摘要中的關鍵字、評論中的產品名稱,或其他典型的應該加粗顯示的文字。
以前 <b>
元素的含義就是讓文本變成粗體效果。但從 HTML4 版本開始,不讚成標簽表示帶樣式信息,於是 <b>
元素的含義發生了變化。
# 斜體元素
HTML <i>
元素用來定義表現因某些原因需要區分普通文本的一系列文本,例如技術術語、外文短語或是小說中人物的思想活動等。瀏覽器運行解析 <i>
元素一般呈現的效果是斜體。
# 上標 / 下標元素
HTML <sup>
元素表示為上標元素,HTML <sub>
元素表示為下標元素。這兩個元素的特點如下:
<sup>
元素定義的文本內容與主體內容相比,顯示更高更小。<sub>
元素定義的文本內容與主體內容相比,顯示更低更小。
# 換行元素
HTML <br>
元素會在 HTML 頁面中生成一個換行符。
編寫在 <br>
元素後的文本內容會呈現在第二行中。
# 水平線元素
HTML <hr>
元素用來表示段落元素之間的主題轉換。在較早版本的 HTML 中, <hr>
元素表示一個水平線,並且瀏覽器運行解析也是水平線效果。但目前 <hr>
元素被定義為語義上的,而不是表現上。
# HTML5 版本的結構化元素
# <article>
元素
HTML <article>
元素用來定義 HTML 頁面中的可獨立分配或可複用結構,例如論壇的帖子、新聞網站的文章等。
# <section>
元素
HTML <section>
元素用來定義 HTML 頁面中的獨立部分,該獨立部分沒有更具體的的語義元素來描述該元素。
關於 <section>
元素在開發中的使用時需要注意如下要點:
一般通過是否包含一個標題元素( <h1>
~ <h6>
)作為子級元素來識別每一個 <section>
元素。
如果元素內容可以分為幾個部分的話,應該使用 <article>
元素 而不是 <section>
元素。
不要將 <section>
元素作為一個普通容器使用,這應該是 <div>
元素的用法。
# <nav>
元素
HTML <nav>
元素用來定義 HTML 頁面中的導航鏈接,比較常見的是菜單,目錄和索引。
關於 <nav>
元素在開發中的使用時需要注意如下要點:
並不是所有的鏈接都必須使用 <nav>
元素,該元素只用於將一些熱門的鏈接放入導航欄。
一個 HTML 頁面可能存在多個 <nav>
元素。
# <aside>
元素
HTML <aside>
元素用來定義一個和 HTML 頁面中其餘內容幾乎無關的內容,被認為是獨立於該內容的一部分並且可以被單獨的拆分出來而不會使整體受影響。通常比較常見的是側邊欄或者標注框。
# <header>
元素
HTML <header>
元素用來定義 HTML 頁面中的具有引導和導航作用的內容,比較常見的是 Logo、搜索框、作者名稱等。
:::note info
一個 HTML 頁面並沒有限制只能出現一個 <header>
元素,可以為每個內容區塊添加一個 <header>
元素。
:::
# <main>
元素
HTML <main>
元素用來定義 HTML 頁面中的主要內容。主內容區塊指與頁面標題或主要功能直接相關的內容。這部分內容在 HTML 頁面中應當是獨一無二的,不包含任何任何重複的內容。
:::note info
關於 <main>
元素在開發中的使用時需要注意如下要點:
- 一個 HTML 頁面中只能出現一個
<main>
元素。 <mian>
元素不能出現在<article>
元素、<aside>
元素、<nav>
元素、<header>
元素和<footer>
元素的內部。
:::
# <footer>
元素
HTML <footer>
元素用來定義 HTML 元素中的一個章節內容或根元素的頁腳。一個頁腳通常包含該章節作者、版權數據或文檔相關鏈接等信息。
關於 <footer>
元素在開發中的使用時需要注意 <footer>
元素中的作者信息應該包含在 <address>
元素中。
# 空白
當瀏覽器運行並解析 HTML 頁面時,遇到兩個或兩個以上的連續空格時,只將其顯示為一個空格效果。這種特性叫做白色空間折疊。
# 轉義字符
原義字符 | 描述 | 轉義字符 |
---|---|---|
空格 | ||
< | 小於號 | < |
> | 大於號 | > |
& | 和號 | & |
" | 引號 | " |
© | 版權(copyright) | © |
® | 注冊商標 | ® |
™ | 商標 | ™ |
× | 乘號 | × |
÷ | 除號 | ÷ |
# 語義化元素
語義化元素與結構化元素類似,都是具有具體含義的元素,區別在於語義化元素更多定義一個單詞、一行內容的語義或樣式。
名稱 | 代碼 | 釋義 | 效果 |
---|---|---|---|
加粗元素 | <strong> | HTML 頁面中的十分重要的文本內容 | 瀏覽器運行 HTML 頁面默認呈現的是粗體效果 (同 <b> ) |
強調元素 | <em> | HTML 頁面中的需要用戶著重閱讀的文本內容 | 瀏覽器運行 HTML 頁面默認呈現的是斜體效果 (同 <i> ) |
引用元素 | <blockquote> | HTML <blockquote> 元素用來定義 HTML 頁面中的標記較長的引用內容,一般瀏覽器解析後會對其進行縮進。 | 瀏覽器運行 HTML 頁面默認會將其首尾加上 "" |
引用元素 | <q> | HTML <q> 元素用來定義 HTML 頁面中的較短的引用內容,瀏覽器解析後會在其兩側使用引號包裹。 | 瀏覽器運行 HTML 頁面默認會將其首尾加上 "" |
引文元素 | <cite> | HTML 頁面中的對一個作品的引用,該元素必須包含引用作品的符合簡寫格式的標題或者 URL。 | 瀏覽器解析後會呈現斜體效果 |
定義元素 | <dfn> | 定義 HTML 頁面中的術語 | 有些瀏覽器會將 <dfn> 元素解析後呈現為斜體,但 Safari 和 Chrome 瀏覽器則不會改變其樣式。 |
地址元素 | <address> | HTML 頁面中提供了某個人或某個組織的聯系信息 | 瀏覽器解析後會呈現為斜體效果 |
內容修改元素 | <del> 和 <ins> | HTML <del> 元素用來定義 HTML 頁面中刪除的文字內容HTML <ins> 元素用來定義 HTML 頁面中插入的文字內容。 | <del> 會有刪除線<ins> 會有底線 |