HTML5-介紹：HTML5 技術要點（3/3）

時間 2019-11-30

標籤 html5 html 介紹技術要點欄目 HTML5 简体版

原文原文鏈接

ylbtech-HTML5-介紹：HTML5 技術要點（3/3）

1.返回頂部

一、

重要標記

<video>標記

定義和用法：

</video> 標籤訂義視頻，好比電影片斷或其餘視頻流。

<audio> 標記

定義和用法

</audio> 標籤訂義聲音，好比音樂或其餘音頻流。

實例：

一段簡單的HTML5 音頻

您的瀏覽器不支持 audio 標籤。

</audio>

<canvas> 標記

定義和用法：

<canvas> 標籤訂義圖形，好比圖表和其餘圖像。

HTML5 的 canvas 元素使用JavaScript 在網頁上繪製圖像。

畫布是一個矩形區域，您能夠控制其每一像素。

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

實例：

經過 canvas 元素來顯示一個紅色的矩形：

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

</script>

程序接口

除了原先的DOM接口，HTML5增長了更多API,如：

1．用於即時2D繪圖的Canvas標籤

2．定時媒體回放

3．離線數據庫存儲

4．文檔編輯

5．拖拽控制

6．瀏覽歷史管理

元素變化

新的 解析順序新的元素： section, video, progress, nav, meter, time, aside, canvasinput

元素的新屬性：日期和時間，email, url。

新的 通用屬性：ping, charset, async。

全域屬性：id, tabindex, repeat。

移除元素：center, font, strike。

控件

就是Html標註的屬性里加上runat="server"所構成的控件，至於Html標註和Html控件之間的區別很明顯，Html控件是運行於服務器端，Html標註是運行於客戶端。

基本Html控件有：HtmlTexArea\HtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。

自定義的Html控件是根據本身的需求定義。當自主開發效率低，能夠從技術社區、源碼網站下載須要的控件。好比，須要插入table, image, links 等標籤。沒必要本身開發，可使用：ComponentOne Wijmo Editor等。

免費HTML5圖表庫—— .Net圖表控件Chart FX，深受你們喜好，相信你們已經很是熟悉了。並且還從Chart FX的開發商SoftwareFX得到一個激動人心的消息： 該公司已推出一套爲HTML5，jQuery和JavaScript開發者設計的圖表庫——jChartFX，並且jChartFX是免費的！

圖表庫

.Net圖表控件Chart FX相信你們已經很是熟悉了。Chart FX的開發商SoftwareFX推出的一套爲HTML五、jQuery和JavaScript開發者設計的免費HTML5圖表庫——jChartFX！

jChartFX亮點：

jChartFX充分利用了HTML5，CSS和SVG，讓您可以在瀏覽器提供美觀優越的圖表和更豐富的最終用戶體驗。
jChartFX擁有不少使人振奮的功能，它在無插件純JavaScript的瀏覽器上運行，這意味着在提升了網站安全性和速度的同時，最大程度的減小了網站服務器的負荷。
jChartFX還可以自動整合到jQuery UI ThemeRoller，自動讀取並解釋jQuery的主題和CSS文件，可以快速適應您的頁面佈局和設計，無需一行代碼。
jChartFX支持JSON，JSON可以幫助您實現，任何數據源中的數據均可以展示到圖表中。
jChartFX還支持超過40種的2D、3D圖表類型，免費的圖表控件中支持如此之多的圖表展現類型實屬可貴。

按字母順序排列的標籤列表
標籤	描述
<!--...-->	定義註釋	4	5
<!DOCTYPE>	定義文檔類型	4	5
<a>	定義超連接	4	5
<abbr>	定義縮寫	4	5
< acronym>	HTML 5 中不支持	4
<address>	定義地址元素	4	5
<applet>	定義 applet（HTML 5 中不支持）	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
<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 的信息	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>	定義有記號的文本	4	5
<menu>	定義菜單列表	4	5
<meta>	定義元信息	4	5
<meter>	定義預約義範圍內的度量		5
<nav>	定義導航連接		5
<noframes>	定義 noframe 部分（HTML 5 中不支持）	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	4	5
<select>	定義可選列表	4	5
<small>	定義小號文本	4	5
<source>	定義媒介源	4	5
<span>	定義文檔中的 section	4	5
<strike>	定義加刪除線的文本（HTML 5 中不支持）	4
<strong>	定義強調文本	4	5
<style>	定義樣式定義	4	5
<sub>	定義下標文本	4	5
<summary>	定義 details 元素的標題		5
<sup>	定義上標文本	4	5

按字母順序排列的標籤列表
標籤	描述	4: 指在HTML 4.01 中定義了該元素 5: 指在HTML 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>	定義打字機文本	4	5
<u>	定義下劃線文本（HTML 5 中不支持）	4
<ul>	定義無序列表	4	5
<var>	定義變量	4	5
<video>	定義視頻		5
<xmp>	定義預格式文本（HTML 5 中不支持）	4

事件屬性

HTML 5 元素可擁有事件屬性，這些屬性在瀏覽器中觸發行爲，好比當用戶單擊一個HTML 5元素時啓動一段 JavaScript。下面列出的事件屬性，能夠把它們插入 HTML 標籤來定義事件行爲。

HTML 5 中的新事件屬性： onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。

4: 指在HTML 4.01 中定義了該元素。

5: 指在HTML 5 中定義了該元素。

HTML 5再也不支持的 HTML 4.01 屬性：onreset。

事件屬性
屬性	值	描述	4	5
onabort	script	發生 abort 事件時運行腳本。		5
onbeforeonload	script	在元素加載前運行腳本。		5
onblur	script	當元素失去焦點時運行腳本。	4	5
onchange	script	當元素改變時運行腳本。	4	5
onclick	script	在鼠標點擊時運行腳本。	4	5
oncontextmenu	script	當菜單被觸發時運行腳本。		5
ondblclick	script	當鼠標雙擊時運行腳本。	4	5
ondrag	script	只要腳本在被拖動就運行腳本。		5
ondragend	script	在拖動操做結束時運行腳本。		5
ondragenter	script	當元素被拖動到一個合法的放置目標時，執行腳本。		5
ondragleave	script	當元素離開合法的放置目標時。		5
ondragover	script	只要元素正在合法的放置目標上拖動時，就執行腳本。		5
ondragstart	script	在拖動操做開始時執行腳本。		5
ondrop	script	當元素正在被拖動時執行腳本。		5
onerror	script	當元素加載的過程當中出現錯誤時執行腳本。		5
onfocus	script	當元素得到焦點時執行腳本。	4	5
onkeydown	script	當按鈕按下時執行腳本。	4	5
onkeypress	script	當按鍵被按下時執行腳本。	4	5
onkeyup	script	當按鈕鬆開時執行腳本。	4	5
onload	script	當文檔加載時執行腳本。	4	5
onmessage	script	當 message 事件觸發時執行腳本。		5
onmousedown	script	當鼠標按鈕按下時執行腳本。	4	5
onmousemove	script	當鼠標指針移動時執行腳本。	4	5
onmouseover	script	當鼠標指針移動到一個元素上時執行腳本。	4	5
onmouseout	script	當鼠標指針移出元素時執行腳本。	4	5
onmouseup	script	當鼠標按鈕鬆開時執行腳本。	4	5
onmousewheel	script	當鼠標滾輪滾動時執行腳本。		5
onreset	script	當表單重置時執行腳本。不支持。	4
onresize	script	當元素調整大小時運行腳本。		5
onscroll	script	當元素滾動條被滾動時執行腳本。		5
onselect	script	當元素被選中時執行腳本。	4	5
onsubmit	script	當表單提交時運行腳本。	4	5
onunload	script	當文檔卸載時運行腳本。		5

標籤屬性

HTML 5標籤擁有屬性。在每一個標籤的參考頁中能夠找到相應的特殊屬性。這裏列出的屬性是通用於每一個標籤的核心屬性和語言屬性（有個別例外）。

4: 指在HTML 4.01 中定義了該元素

5: 指在HTML 5 中定義了該元素

HTML 5標籤中的新屬性有： contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template

HTML 5 中再也不支持的屬性：accesskey

標籤屬性
屬性	值	描述	4	5
acceskey	a character	設置訪問一個元素的鍵盤快捷鍵。不支持。	4
class	class_ruleor style_rule	元素的類名。	4	5
contenteditable	true false	設置是否容許用戶編輯元素。		5
contentextmenu	id of a menu element	給元素設置一個上下文菜單。		5
dir	ltr rtl	設置文本方向。	4	5
draggable	true false auto	設置是否容許用戶拖動元素。		5
id	id_name	元素的惟一 id。	4	5
irrelevant	true false	設置元素是否相關。不顯示非相關的元素。		5
lang	language_code	設置語言碼。	4	5
ref	urlor elementID	引用另外一個文檔或文檔上另外一個位置。僅在 template 屬性設置時使用。		5
registrationmark	registration mark	爲元素設置拍照。可規定於任何 <rule> 元素的後代元素，除了 <nest> 元素。		5
style	style_definition	行內的樣式定義。	4	5
tabindex	number	設置元素的 tab 順序。	4	5
template	urlor elementID	引用應該應用到該元素的另外一個文檔或本文檔上另外一個位置。		5
title	tooltip_text	顯示在工具提示中的文本。	4	5

異常處理

HTML 5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML 5在設計時保證舊的瀏覽器可以安全的忽略掉新的HTML 5代碼。與HTML 4.01相比，HTML 5給出瞭解析的詳細規則， 力圖讓不一樣的瀏覽器即便在發生語法錯誤時也能返回相同的結果。

優點

HTML5能夠提供:

1.提升可用性和改進用戶的友好體驗;

2.有幾個新的標籤，這將有助開發人員定義重要的內容；

3.能夠給站點帶來更多的多媒體元素(視頻和音頻)；

4.能夠很好的替代FLASH和Silverlight；

5.當涉及到網站的抓取和索引的時候，對於 SEO很友好；

6.將被大量應用於移動應用程序和遊戲。

谷歌和HTML5

2010年5月22日，谷歌建立了一個塗鴉來記念Pac Man的視頻遊戲。這個塗鴉是一個動畫，同時也是一個能夠玩的Pac Man的遊戲。這個塗鴉就是谷歌經過使用HTML5標準制做的，固然谷歌也提供一個FLASH版原本支持不兼容HTML5的瀏覽器。我敢打賭，這是大多數互聯網網民第一次和HTML5的接觸。對於我的來講，這是一個興奮的消息。以個人觀點，這個塗鴉提供了一個機會能夠窺視將來互聯網、網頁、移動應用軟件和遊戲等發展趨勢。對於搜索引擎優化，他開闢了我更多的想象，它讓我思考HTML5在SEO領域的潛力。網站轉移到HTML5標準對於SEO有什麼優點?

HTML 5開發領域的領軍人物包括 Sencha，Adobe，Appcelerator，appMobi及Facebook，亞馬遜，Google三大巨頭。無論你是想開發出新型視頻應用的開發商如Brightcover仍是想開發新型音頻應用的開發商如Soundcloud，不管是桌面應用仍是移動應用，HTML 5都是創新的主旋律。

HTML5與SEO

一：使搜索引擎更加容易抓取和索引

對於一些網站，特別是那些嚴重依賴於FLASH的網站HTML5是一個大福音。若是你有一個都是FLASH的站點，你就必定會看到切換到HTML5的好處。首先，搜索引擎的蜘蛛將可以抓取你的站點和索引你的內容。全部嵌入到動畫中的內容將所有能夠被搜索引擎讀取。在搜索引擎優化的基本理論中，這一方面將會驅動你的網站得到更多的右擊流量。

二：提供更多的功能，提升用戶的友好體驗

使用HTML5的另外一個好處就是它能夠增長更多的功能。對於HTML5的功能性問題，咱們從全球幾個主流站點對它的青睞就能夠看出。社交網絡大亨Facebook已經推出他們期待已久的基於HTML5的iPad應用平臺，潘多拉也推出他們基於HTML5的音樂播放器的新版本。遊戲平臺 Zynga也在推出了三款新的在移動設備瀏覽器上運行的基於HTML5的遊戲等等。天天都有不斷的基於HTML5的網站和HTML5特性的網站被推出。保持站點處於新技術的前沿，也能夠很好的提升用戶的友好體驗。

三：可用性的提升，提升用戶的友好體驗

最後咱們能夠從可用性的角度上看，HTML5能夠更好的促進用戶於網站間的互動狀況。多媒體網站能夠得到更多的改進，特別是在移動平臺上的應用，使用 HTML5能夠提供更多高質量的視頻和音頻流。到目前爲止，事實就是iPhone和iPad將不會支持FLASH，同時ADOBE公司也公開聲明將中止FLASH基於移動平臺的開發，能夠這麼說——移動平臺往後視頻音頻是HTML5的天下！

二、

一、

https://baike.baidu.com/item/html5

二、

6.返回頂部