天天看點

HTML5 新特性(HTML5 新元素 新标簽)HTML5 新标簽(新元素)

HTML5 新标簽(新元素)

新的語義元素

HTML5提供的新元素可以更好的描述網頁文檔結構:

HTML5 新特性(HTML5 新元素 新标簽)HTML5 新标簽(新元素)

新語義标簽

标簽 描述

<article>

定義文章。

<aside>

定義頁面内容以外的内容。

<details>

定義使用者能夠檢視或隐藏的額外細節。

<figcaption>

定義

<figure>

元素的标題。

<figure>

規定自包含内容,比如圖示、圖表、照片、代碼清單等。

<footer>

定義文檔或節的頁腳。

<header>

規定文檔或節的頁眉。

<main>

規定文檔的主内容。

<mark>

定義重要的或強調的文本。

<nav>

定義導航連結。

<section>

定義文檔中的節。

<summary>

定義

<details>

元素的可見标題。

<time>

定義日期/時間。

新的表單元素

标簽 描述

<datalist>

定義輸入控件的預定義選項。

<keygen>

定義鍵對生成器字段(用于表單)。

<output>

定義計算結果。

新的輸入類型

HTML5 為

<input>

增加了如下類型:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

**ps:**浏覽器版本過低而不支援的輸入類型會預設視為:

text

新的輸入屬性

HTML5 為

<input>

增加了如下屬性:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height 和 width
  • list
  • min 和 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

并為

<form>

增加如需屬性:

  • autocomplete
  • novalidate

新的屬性文法

HTML5 允許四種不同的屬性文法。

示例

<input>

标簽中使用的不同文法:

标簽 描述
Empty

<input type="text" value="John Doe" disabled>

Unquoted

<input type="text" value=John>

Double-quoted

<input type="text" value="John Doe">

Single-quoted

<input type="text" value='John Doe'>

在 HTML5 中,根據屬性所需,可能會使用所有這四種文法。

HTML5 圖像

标簽 描述

<canvas>

定義使用 JavaScript 的圖像繪制。

<svg>

定義使用 SVG 的圖像繪制。

新的媒介元素

标簽 描述

<audio>

定義聲音或音樂内容。

<embed>

定義外部應用程式的容器(比如插件)。

<source>

定義

<video>

<audio>

的來源。

<track>

定義

<video>

<audio>

的軌道。

<video>

定義視訊或影片内容。

繼續閱讀