新标記
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 元素來顯示一個紅色的矩形:
效果:
其中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