天天看點

【HTML5】H5的新标簽簡介

新标記 

html5 提供了一些新的元素和屬性,例如<nav>(網站導航塊)和<footer>。這種标簽将有利于搜尋引

擎的索引整理,同時更好的幫助小螢幕裝置和視障人士使用,除此之外,還為其他浏覽要素提供了新的

功能,如<audio>和<video>标記。

一些過時的 html4 标記将被取消。其中包括純粹顯示效果的标記,如<font>和<center>,它們已經被 css 取代。

(1)<video> 标記

定義和用法:

<video> 标簽定義視訊,比如電影片段或其他視訊流。

執行個體:

一段簡單的 html5 視訊

<video src="movie.ogg" controls="controls">

您的浏覽器不支援 video 标簽。

</video>

浏覽器支援的視訊格式:

ogg = 帶有 thedora 視訊編碼和 vorbis 音頻編碼的 ogg 檔案。

mp4 = 帶有 h.264 視訊編碼和 aac 音頻編碼的 mpeg 4 檔案。

webm = webm由google提出,是一個開放、免費的媒體檔案格式。

(2)<audio>  标記

定義和用法

<audio> 标簽定義聲音,比如音樂或其他音頻流。

一段簡單的 html 5 音頻

<audio src="someaudio.wav">

您的浏覽器不支援 audio 标簽。

</audio>

音頻格式:

目前,audio 元素支援三種音頻格式:

ogg vorbis、mp3、wav

(3)<canvas>  标記

<canvas> 标簽定義圖形,比如圖表和其他圖像。

什麼是 canvas?

html5 的 canvas 元素使用 javascript 在網頁上繪制圖像。

畫布是一個矩形區域,您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字元以及添加圖像的方法。

如何通過 canvas 元素來顯示一個紅色的矩形:

效果:

【HTML5】H5的新标簽簡介

其中canvas.getcontext()定義和用法

getcontext() 方法傳回一個用于在畫布上繪圖的環境。

文法

canvas.getcontext(contextid)

參數

參數 contextid 指定了您想要在畫布上繪制的類型。目前唯一的合法值是 "2d",它指定了二維繪圖,并且導緻這個方法傳回一個環境對象,該對象導出一個二維繪圖 api。

提示:在未來,如果 <canvas> 标簽擴充到支援 3d 繪圖,getcontext() 方法可能允許傳遞一個 "3d" 字元串參數。

增加:

編輯本段新應用程式接口(api )

除了原先的 dom 接口,html5 增加了更多 api,如:

1. 用于即時 2d 繪圖的 canvas 标簽

2. 定時媒體回放

3. 離線資料庫存儲

4. 文檔編輯

5. 拖拽控制

6. 浏覽曆史管理

去除:

b 和 i 标簽依然存在,但它們的意義已經和之前有所不同,u,font,center,strike 這些标簽則被完全去掉了。

目前标簽的相容性:

按字母順序排列的标簽清單

?4: 訓示在 html 4.01 中定義了該元素

?5: 訓示在 html 5 中定義了該元素

标簽 描述 4 5

<!--...--> 定義注釋。 4 5

<!doctype> 定義文檔類型。 4 5

<a> 定義超連結。 4 5

<abbr> 定義縮寫。 4 5

<acronym> html 5 中不支援。定義首字母縮寫。 4

<address> 定義位址元素。 4 5

<applet> html 5 中不支援。定義 applet。 4

<area> 定義圖像映射中的區域。 4 5

<article> 定義 article。 5

<aside> 定義頁面内容之外的内容。 5

<audio> 定義聲音内容。 5

<b> 定義粗體文本。 4 5

<base> 定義頁面中所有連結的基準 url。 4 5

<basefont> html 5 中不支援。請使用 css 代替。 4

<bdo> 定義文本顯示的方向。 4 5

<big> html 5 中不支援。定義大号文本。 4

<blockquote> 定義長的引用。 4 5

html 5 從入門到精通-中文學習教程

第 10 頁, 總 261 頁  05-16-2011

<body> 定義 body 元素。 4 5

<br> 插入換行符。 4 5

<button> 定義按鈕。 4 5

<canvas> 定義圖形。 5

<caption> 定義表格标題。 4 5

<center> html 5 中不支援。定義居中的文本。 4

<cite> 定義引用。 4 5

<code> 定義計算機代碼文本。 4 5

<col> 定義表格列的屬性。 4 5

<colgroup> 定義表格列的分組。 4 5

<command> 定義指令按鈕。 5

<datalist> 定義下拉清單。 5

<dd> 定義定義的描述。 4 5

<del> 定義删除文本。 4 5

<details> 定義元素的細節。 5

<dfn> 定義定義項目。 4 5

<dir> html 5 中不支援。定義目錄清單。 4

<div> 定義文檔中的一個部分。 4 5

<dl> 定義定義清單。 4 5

<dt> 定義定義的項目。 4 5

<em> 定義強調文本。 4 5

<embed> 定義外部互動内容或插件。 5

<fieldset> 定義 fieldset。 4 5

<figcaption> 定義 figure 元素的标題。 5

<figure> 定義媒介内容的分組,以及它們的标題。 5

<font> html 5 中不支援。 4

<footer> 定義 section 或 page 的頁腳。 5

<form> 定義表單。 4 5

<frame> html 5 中不支援。定義子視窗(架構)。 4

<frameset> html 5 中不支援。定義架構的集。 4

<h1> to <h6> 定義标題 1 到标題 6。 4 5

<head> 定義關于文檔的資訊。 4 5

<header> 定義 section 或 page 的頁眉。 5

<hgroup> 定義有關文檔中的 section 的資訊。 5

<hr> 定義水準線。 4 5

<html> 定義 html 文檔。 4 5

<i> 定義斜體文本。 4 5

<iframe> 定義行内的子視窗(架構)。 4 5

<img> 定義圖像。 4 5

<input> 定義輸入域。 4 5

<ins> 定義插入文本。 4 5

<keygen> 定義生成密鑰。 5

<isindex> html 5 中不支援。定義單行的輸入域。 4

<kbd> 定義鍵盤文本。 4 5

<label> 定義表單控件的标注。 4 5

<legend> 定義 fieldset 中的标題。 4 5

<li> 定義清單的項目。 4 5

<link> 定義資源引用。 4 5

<map> 定義圖像映射。 4 5

<mark> 定義有記号的文本。 5

<menu> 定義菜單清單。 4 5

<meta> 定義元資訊。 4 5

<meter> 定義預定義範圍内的度量。 5

<nav> 定義導航連結。 5

<noframes> html 5 中不支援。定義 noframe 部分。 4

<noscript> 定義 noscript 部分。 4 5

<object> 定義嵌入對象。 4 5

<ol> 定義有序清單。 4 5

<optgroup> 定義選項組。 4 5

<option> 定義下拉清單中的選項。 4 5

<output> 定義輸出的一些類型。 5

<p> 定義段落。 4 5

<param> 為對象定義參數。 4 5

<pre> 定義預格式化文本。 4 5

<progress> 定義任何類型的任務的進度。 5

<q> 定義短的引用。 4 5

<rp> 定義若浏覽器不支援 ruby 元素顯示的内容。 5

<rt> 定義 ruby 注釋的解釋。 5

<ruby> 定義 ruby 注釋。 5

<s> html 5 中不支援。定義加删除線的文本。 4

<samp> 定義樣本計算機代碼。 4 5

<script> 定義腳本。 4 5

<section> 定義 section。 5

<select> 定義可選清單。 4 5

<small> 定義小号文本。 4 5

<source> 定義媒介源。 5

<span> 定義文檔中的 section。 4 5

<strike> html 5 中不支援。定義加删除線的文本。 4

<strong> 定義強調文本。 4 5

<style> 定義樣式定義。 4 5

<sub> 定義下标文本。 4 5

<summary> 定義 details 元素的标題。 5

<sup> 定義上标文本。 4 5

<table> 定義表格。 4 5

<tbody> 定義表格的主體。 4 5

<td> 定義表格單元。 4 5

<textarea> 定義 textarea。 4 5

<tfoot> 定義表格的腳注。 4 5

<th> 定義表頭。 4 5

<thead> 定義表頭。 4 5

<time> 定義日期/時間。 5

<title> 定義文檔的标題。 4 5

<tr> 定義表格行。 4 5

<tt> html 5 中不支援。定義打字機文本。 4

<u> html 5 中不支援。定義下劃線文本。 4

<ul> 定義無序清單。 4 5

<var> 定義變量。 4 5

<video> 定義視訊。 5

<xmp> html 5 中不支援。定義預格式文本。 4

總結:

html 5 有兩大特點:

首先,強化了 web 網頁的表現性能。除了可描繪二維圖形外,還準備了用于播放視訊和音頻的标簽。

其次,追加了本地資料庫等 web 應用的功能。

轉載請注明出處:http://blog.csdn.net/acmman/article/details/50952056