[HTML] 新元素

首先要介紹的當然就是 HTML5 的新元素,認識各元素標籤是學習 HTML5 重要第一步,而且還要瞭解各元素的語義,運用得正確。雖然就算整個網站全部都用<div>去做,也許在網頁呈現上看起來不會有差異,也不代表可以這樣做。瞭解語義,正確運用,是學習 HTML5 的第一步。

以下列出所有 HTML5 的新元素標籤,以及語義,先有基本的認識,在實際運用中再多加回憶。

一、結構(Structural)元素

Tag Description
<article> 代表文章/獨立元件。
<aside> 代表側邊欄。
<bdi>  
<details> 代表一個互動元件,經由點擊可展開或收合內部內容,一般搭配<summary>使用。支援度參考
<dialog> 代表一個對話框。
<figcaption> 替<figure>元素定義標題。
<figure> 用來組織具有標題的獨立內容,主要為圖片、圖表、程式碼片段。
<footer> 代表一份文件的尾部,一般除了放在<body>的最後面之外,也可置於<section>裡當做結尾。
<header> 代表一份文件的標頭,一般除了放在<body>的最前面之外,也可置於<section>裡當做開始。
<main> 定義一份文件的主要內容。
<mark> 以背景黃色highlight出一段文字。例:這是mark標籤內的文字
<menuitem>  
<meter>  
<nav> 定義一份文件的導覽列。
<progress> 定義一個任務的進度達成了多少。支援度參考
<rp>  
<rt>  
<ruby>  
<section> 定義一份文件的區段。
<summary> 用來定義<details>的標題。
<time> 定義日期/時間。
<wbr> 指明何處該斷行。IE完全不支援。

二、表單(Form)元素

 

三、圖形(Graphics)元素

 

四、媒體(Media)元素

 

您可在此處留言

搶先留言!

Notify of
avatar
wpDiscuz