增的結(jié)構(gòu)標(biāo)簽

section元素

表示頁面中的一個(gè)內(nèi)容區(qū)塊,比如章節(jié)、頁眉、頁腳或頁面的其他部分。可以和h1、 h2...等元素結(jié)合起來使用，表示文檔結(jié)構(gòu)。

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

article元素

表示頁面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容。比如一篇文章。

aside元素

表示article元素內(nèi)容之外的、與article元素內(nèi)容相關(guān)的輔助信息。

header元素

表示頁面中一個(gè)內(nèi)容區(qū)塊或真?zhèn)€頁面的標(biāo)題。

hgroup元素

表示對(duì)真?zhèn)€頁面或頁面中的一個(gè)內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合。

footer元素

表示整個(gè)頁面或頁面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來說，他會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。

nav元素

表示頁面中導(dǎo)航鏈接的部分。

figure元素

表示一段獨(dú)立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。使用figcaption元素為figure元素組添加標(biāo)題。

figure 定義媒介內(nèi)容的分組, 以及它們的標(biāo)題。

figcaption 定義 figure 元素的標(biāo)題。

例如：

<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元素

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

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

mark元素

主要用來在視覺上向用戶呈現(xiàn)哪些需要突出顯示或高亮顯示的文字。典型應(yīng)用搜索結(jié)果中高亮顯示搜素關(guān)鍵字。

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

progress元素

表示運(yùn)行中的進(jìn)程，可以使用progress元素顯示JavaScript中耗時(shí)時(shí)間函數(shù)的進(jìn)程。等待中……、請(qǐng)稍后等。<progress></progress>。

time元素

表示日期或時(shí)間，也可以兩者同時(shí)。

ruby元素

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

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

還包括可選的 rp 元素，定義當(dāng)瀏覽器不支持 "ruby" 元素時(shí)顯示的內(nèi)容。

<ruby>

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

</ruby>

rt元素

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

rp元素

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

wbr元素

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

不換行，而寬度不夠時(shí)主動(dòng)在此處換行。

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元素 各版本瀏覽器支持有問題

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

只有當(dāng) command 元素位于 menu 元素內(nèi)時(shí)，該元素才是可見的。否則不會(huì)顯示這個(gè)元素，但是可以用它規(guī)定鍵盤快捷鍵。。

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

details標(biāo)簽

用于描述文檔或文檔某個(gè)部分的細(xì)節(jié) 。

可與 summary 標(biāo)簽配合使用，summary可以為 details 定義標(biāo)題。

標(biāo)題是可見的，用戶點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出 details。summary應(yīng)該是details的第一個(gè)子元素。

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

fieldset標(biāo)簽

組合表單中的相關(guān)元素

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

legend 標(biāo)簽為 fieldset 元素定義標(biāo)題。

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

datalist標(biāo)簽

定義選項(xiàng)列表。請(qǐng)與 input 元素配合使用該元素，來定義 input 可能的值。

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

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

datagrid標(biāo)簽 如何用？

定義可選數(shù)據(jù)的列表。datagrid 作為樹列表來顯示。

如果把 multiple 屬性設(shè)置為 true，則可以在列表中選取一個(gè)以上的項(xiàng)目。

keygen標(biāo)簽 如何用?

標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。

當(dāng)提交表單時(shí)，私鑰存儲(chǔ)在本地，公鑰發(fā)送到服務(wù)器。

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

output標(biāo)簽

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

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

source標(biāo)簽

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

menu標(biāo)簽

定義菜單列表。當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。注意與nav的區(qū)別，menu專門用于表單控件。

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

abbr: 標(biāo)記一個(gè)縮寫

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

顯示結(jié)果

The PRC was founded in 1949.

mark標(biāo)簽

定義有記號(hào)的文本。

<mark>有記號(hào)的文本</mark>

progress 定義任何類型的任務(wù)的進(jìn)度。

<progress min="0" max="100" value="60"></progress>

、常用的標(biāo)簽

<h1>~<h6> 表示是一個(gè)標(biāo)題

<p> 段落標(biāo)簽

<hr/> 水平線標(biāo)簽

<br/> 換行標(biāo)簽

<sub> 下標(biāo)

<sup> 上標(biāo)

<pre> 原樣標(biāo)簽： 原樣標(biāo)簽會(huì)保留空格和換行符。

<ol> <li> 有序的列表標(biāo)簽、

<ul> <li> 無序的列表標(biāo)簽。

項(xiàng)目列表標(biāo)簽(dl dt dd)

行內(nèi)標(biāo)簽(span)

塊標(biāo)簽<div> div標(biāo)簽的內(nèi)容會(huì)獨(dú)立占一行。

二、實(shí)體標(biāo)簽

空格 &nbsp;

小于號(hào) &lt;

大于號(hào) &gt;

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

人民幣 &yen；

版權(quán) &copy;

商標(biāo) &reg;

三、媒體標(biāo)簽

<embed></embed>

hidden ： 設(shè)置隱藏插件是否隱藏。

src ：用于指定音樂的路徑

<embed src="1.mp3" ></embed>

<marquee> 飄動(dòng)標(biāo)簽direction : 指定飄動(dòng)的方向

scrollamount : 指定飄動(dòng)的速度。

loop :指定飄動(dòng)的次數(shù)

四、超鏈接標(biāo)簽

<a> 超鏈接標(biāo)簽

a標(biāo)簽常用的屬性：

href : 用于指定鏈接的資源

target: 設(shè)置打開新資源的目標(biāo)。

_Blank 在獨(dú)立的窗口上打開新資源

_self 在當(dāng)前窗口打開新資源

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

格式：

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

郵件 的協(xié)議： mailTo迅雷的協(xié)議： thunder

超鏈接標(biāo)簽的作用：

1. 可以用于鏈接資源。

2. 錨點(diǎn)點(diǎn)位.

1. 首先編寫一個(gè)錨點(diǎn) 錨點(diǎn)的格式： <a name="錨點(diǎn)名字"> 數(shù)據(jù)</a>

2. 使用a標(biāo)簽 的herf屬性連接到錨點(diǎn)出。 href=”#錨點(diǎn)的名字“

五、圖片標(biāo)簽

img標(biāo)簽常用的屬性:

width： 設(shè)置圖片寬度

height 設(shè)置圖片高度

alt: 如果圖片資源無法找到，那么就顯示對(duì)應(yīng)的文字對(duì)圖片進(jìn)行說明。

六、表格標(biāo)簽

表格使用到的標(biāo)簽：

<table> 表格

<tr> 行

<td> 單元格

<th> 表頭 默認(rèn)的樣式是居中，加粗。

<caption> 表格的標(biāo)題

表格常用的屬性：

border 設(shè)置表格的邊框

width : 設(shè)置表格的寬度

height: 設(shè)置表格的高度的。

colspan: 設(shè)置單元格占據(jù)指定的列數(shù)。

rowspan : 設(shè)置單元格占據(jù)指定的行數(shù)。

<thead> 標(biāo)簽用于組合 HTML 表格的表頭內(nèi)容。

<thead> 元素應(yīng)該與 <tbody> 和 <tfoot> 元素結(jié)合起來使用，用來規(guī)定表格的各個(gè)部分（表頭、主體、頁腳）。

通過使用這些元素，使瀏覽器有能力支持獨(dú)立于表格表頭和表格頁腳的表格主體滾動(dòng)。當(dāng)包含多個(gè)頁面的長(zhǎng)的表格被打印時(shí)，表格的表頭和頁腳可被打印在包含表格數(shù)據(jù)的每張頁面上。

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

七、表單標(biāo)簽

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<!-- 表單標(biāo)簽： 表單標(biāo)簽的作用是用于提交數(shù)據(jù)給服務(wù)器的表單標(biāo)簽的根標(biāo)簽是<form>標(biāo)簽常用的屬性action: 該屬性是用于指定提交數(shù)據(jù)的地址。method： 指定表單的提交方式。get : 默認(rèn)使用的提交方式。 提交的數(shù)據(jù)會(huì)顯示在地址欄上。post ： 提交的數(shù)據(jù)不會(huì)顯示在地址欄上。注意： 表單項(xiàng)的數(shù)據(jù)如果需要提交到服務(wù)器上面，那么表單項(xiàng)必須要有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/>
<!-- 復(fù)選框 同一組的復(fù)選框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/>
個(gè)人簡(jiǎn)介:
<!-- 文本域 -->
<textarea name="intro" rows="10" cols="30"></textarea><br/>
<!-- 提交按鈕 -->
<input type="submit" value="注冊(cè)"/>
<!-- 重置按鈕 -->
<input type="reset" value="重置"/>
</form>
</body>
</html>

更多精彩內(nèi)容在微信公眾平臺(tái)：網(wǎng)頁設(shè)計(jì)自學(xué)平臺(tái)

干貨！免費(fèi)領(lǐng)取Adobe高級(jí)講師前端教程

點(diǎn)我領(lǐng)取