HTML5 新增的標簽

增的結構標簽

section元素

表示頁面中的一個內容區塊,比如章節、頁眉、頁腳或頁面的其他部分。可以和h1、 h2...等元素結合起來使用，表示文檔結構。

例：HTML5中<section>...</section>;HTML4中<div>...</div>。

article元素

表示頁面中一塊與上下文不相關的獨立內容。比如一篇文章。

aside元素

表示article元素內容之外的、與article元素內容相關的輔助信息。

header元素

表示頁面中一個內容區塊或真個頁面的標題。

hgroup元素

表示對真個頁面或頁面中的一個內容區塊的標題進行組合。

footer元素

表示整個頁面或頁面中一個內容區塊的腳注。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯系信息。

nav元素

表示頁面中導航鏈接的部分。

figure元素

表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。

figure 定義媒介內容的分組, 以及它們的標題。

figcaption 定義 figure 元素的標題。

例如：

<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>

HTML4中常寫作

<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>

新增的其他元素

video元素

定義視頻。像電影片段或其他視頻流。例：

<video src="movie.ogg" controls="controls">video元素</video>

HTML4中寫法：

<object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>

audio元素

定義音頻。如音樂或其他音頻流。例：

<audio src ="someaudio.wav">audio元素</audio>

html4中寫法：

<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value= "someaudio.wav">
</object>

embed元素

用來嵌入內容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />

HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>

mark元素

主要用來在視覺上向用戶呈現哪些需要突出顯示或高亮顯示的文字。典型應用搜索結果中高亮顯示搜素關鍵字。

HTML5<mark></mark>;HTML4 <span></span>。

progress元素

表示運行中的進程，可以使用progress元素顯示JavaScript中耗時時間函數的進程。等待中……、請稍后等。<progress></progress>。

time元素

表示日期或時間，也可以兩者同時。

ruby元素

定義 ruby 注釋(中文注音或字符)。

與 <ruby> 以及 <rt> 標簽一同使用。ruby 元素由一個或多個字符(需要一個解釋/發音)和一個提供該信息的 rt 元素組成，

還包括可選的 rp 元素，定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

<ruby>

漢朝<rt><rp>(</rp>西漢和東漢<rp>)</rp></rt>

</ruby>

rt元素

定義字符(中文注音或字符)的解釋或發音。

rp元素

在 ruby 注釋中使用, 以定義不支持 ruby 元素的瀏覽器所顯示的內容。

wbr元素

表示軟換行。與br元素的區別：br元素表示此處必須換行；wbr表示瀏覽器窗口或父級元素足弓寬時(沒必要換行時)，

不換行，而寬度不夠時主動在此處換行。

canvas元素

定義圖形，比如圖表和其他圖像。<canvas> 元素只是圖形容器(畫布)，必須使用腳本來繪制圖形。

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

command元素各版本瀏覽器支持有問題

表示命令按鈕，比如單選按鈕、復選框或按鈕。

只有當 command 元素位于 menu 元素內時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規定鍵盤快捷鍵。。

<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

details標簽

用于描述文檔或文檔某個部分的細節。

可與 summary 標簽配合使用，summary可以為 details 定義標題。

標題是可見的，用戶點擊標題時，會顯示出 details。summary應該是details的第一個子元素。

<details>
<summary>迪麗熱巴</summary>
<p>迪麗熱巴（Dilraba），1992年6月3日出生于新疆烏魯木齊市，中國內地影視女演員。</p>
</details>

fieldset標簽

組合表單中的相關元素

fieldset 標簽用于從邏輯上將表單中的元素組合起來。

legend 標簽為 fieldset 元素定義標題。

<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>
</form>

datalist標簽

定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。

datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。使用 input 元素的 list 屬性來綁定 datalist。

<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

datagrid標簽如何用？

定義可選數據的列表。datagrid 作為樹列表來顯示。

如果把 multiple 屬性設置為 true，則可以在列表中選取一個以上的項目。

keygen標簽如何用?

標簽規定用于表單的密鑰對生成器字段。

當提交表單時，私鑰存儲在本地，公鑰發送到服務器。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output標簽

定義不同類型的輸出，比如腳本的輸出。

<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

source標簽

標簽為媒介元素(比如 <video> 和 <audio>)定義媒介資源。

menu標簽

定義菜單列表。當希望列出表單控件時使用該標簽。注意與nav的區別，menu專門用于表單控件。

<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

abbr: 標記一個縮寫

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

顯示結果

The PRC was founded in 1949.

mark標簽

定義有記號的文本。

<mark>有記號的文本</mark>

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

例

使用 meter 元素展示給定的數據范圍：

瀏覽器支持

Firefox、Opera、Chrome 和 Safari 6 支持 <meter> 標簽。

標簽定義及使用說明

<meter> 標簽定義度量衡。僅用于已知最大和最小值的度量。

比如：磁盤使用情況，查詢結果的相關性等。

注意： <meter> 不能作為一個進度條來使用，進度條 <progress> 標簽。

HTML 4.01 與 HTML5 之間的差異

<meter> 是 HTML5 的新標簽。

屬性

New：HTML5 新屬性。

屬性	值	描述
formNew	form_id	規定 <meter> 元素所屬的一個或多個表單。
highNew	number	規定被界定為高的值的范圍。
lowNew	number	規定被界定為低的值的范圍。
maxNew	number	規定范圍的最大值。
minNew	number	規定范圍的最小值。
optimumNew	number	規定度量的最優值。
valueNew	number	必需。規定度量的當前值。

全局屬性

<meter> 標簽支持全局屬性，查看完整屬性表 HTML全局屬性。

事件屬性

<meter> 標簽支持所有 HTML事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

、常用的標簽

<h1>~<h6> 表示是一個標題

<p> 段落標簽

<hr/> 水平線標簽

<br/> 換行標簽

<sub> 下標

<sup> 上標

<pre> 原樣標簽：原樣標簽會保留空格和換行符。

<ol> <li> 有序的列表標簽、

<ul> <li> 無序的列表標簽。

項目列表標簽(dl dt dd)

行內標簽(span)

塊標簽<div> div標簽的內容會獨立占一行。

二、實體標簽

空格  

小于號 <

大于號 >

-----------------------------

人民幣 &yen；

版權 ©

商標 ®

三、媒體標簽

<embed></embed>

hidden ：設置隱藏插件是否隱藏。

src ：用于指定音樂的路徑

<marquee> 飄動標簽direction : 指定飄動的方向

scrollamount : 指定飄動的速度。

loop :指定飄動的次數

四、超鏈接標簽

<a> 超鏈接標簽

a標簽常用的屬性：

href : 用于指定鏈接的資源

target: 設置打開新資源的目標。

_Blank 在獨立的窗口上打開新資源

_self 在當前窗口打開新資源

file: file協議（文件協議）這種協議主要是用于搜索本地機器的資源文件的。

格式：

file:///f:/美女/1.jpg

郵件的協議： mailTo迅雷的協議： thunder

超鏈接標簽的作用：

1. 可以用于鏈接資源。

2. 錨點點位.

1. 首先編寫一個錨點錨點的格式： <a name="錨點名字"> 數據</a>

2. 使用a標簽的herf屬性連接到錨點出。 href=”#錨點的名字“

五、圖片標簽

img標簽常用的屬性:

width：設置圖片寬度

height 設置圖片高度

alt: 如果圖片資源無法找到，那么就顯示對應的文字對圖片進行說明。

六、表格標簽

表格使用到的標簽：

<table> 表格

<tr> 行

<td> 單元格

<th> 表頭默認的樣式是居中，加粗。

<caption> 表格的標題

表格常用的屬性：

border 設置表格的邊框

width : 設置表格的寬度

height: 設置表格的高度的。

colspan: 設置單元格占據指定的列數。

rowspan : 設置單元格占據指定的行數。

<thead> 標簽用于組合 HTML 表格的表頭內容。

<thead> 元素應該與 <tbody> 和 <tfoot> 元素結合起來使用，用來規定表格的各個部分（表頭、主體、頁腳）。

通過使用這些元素，使瀏覽器有能力支持獨立于表格表頭和表格頁腳的表格主體滾動。當包含多個頁面的長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

<thead> 標簽必須被用在以下情境中：作為 <table> 元素的子元素，出現在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

七、表單標簽

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<!-- 表單標簽： 表單標簽的作用是用于提交數據給服務器的表單標簽的根標簽是<form>標簽常用的屬性action: 該屬性是用于指定提交數據的地址。method： 指定表單的提交方式。get : 默認使用的提交方式。 提交的數據會顯示在地址欄上。post ： 提交的數據不會顯示在地址欄上。注意： 表單項的數據如果需要提交到服務器上面，那么表單項必須要有name的屬性值 -->

</head>
<body>
<form action="http://www.baidu.com" method="post"> <!-- 文本輸入框 單 行- -> 用戶名：<input name="userName" type="text"/><br/>
<!-- 密碼框 -->
密碼：<input name="password" type="password"/><br/>
<!-- 單選框 -->
性別： 男<input checked="true" value="man" name="sex" type="radio"/>
女<input name="sex" value="woman" type="radio"/><br/>
< !-- 下拉框 -->
來自的城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">廣州</option>
<option value="SZ">深圳</option>
</select><br/>
<!-- 復選框 同一組的復選框name的屬性值要一致 -->
興趣愛好：java <input value="java" name="hobit" checked="checked" type ="checkbox" />
javascript <input type="checkbox" value="javascript" name="hobit" />
android <input value="android" name="hobit" type="checkbox" /><br/> <!-- 文件上傳框-->
大頭照：<input name="image" type="file" /><br/>
個人簡介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按鈕 -->
<input type="submit" value="注冊"/>
<!-- 重置按鈕 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>

更多精彩內容在微信公眾平臺：網頁設計自學平臺

干貨！免費領取Adobe高級講師前端教程

點我領取

在線咨詢

上一篇：博客網站添加復制轉載提醒彈窗Html代碼
下一篇：jquery 動態修改td的colspan屬性，需要規避？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5 新增的標簽

您的項目需求