整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
增的結構標簽
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 定義任何類型的任務的進度。
<progress min="0" max="100" value="60"></progress>
件datagrid使用
注意點：數據中有控件需要渲染
<script type="text/javascript">
$(function(){
/**
* 當列中有動態的數據和按鈕的，比如：
<a id='btn' href='#' class='easyui-linkbutton' >預定</a>
直接寫出這樣是不會顯示按鈕的。
要注意js代碼的執行順序。
首先，加載頁面完畢，后把js+css等庫加載上。
其次，這些庫再渲染組件。
然后，加載json數據，a標簽才來，這時已不會渲染。
所以，在數據加載完畢之后再做渲染（就是通過js創建）。
*/
$("#datagrid").datagrid({
columns:[[ //用二位數組的方式
{"checkbox":true},
{title:"車次",width:100,field:'ceci'},
//title中可以添加標簽
{title:"出發站<br>終點站",width:100,field:'startstate'},
{title:"出發時間<br>到達時間",width:100,field:'starttime'},
{title:"歷時",width:100,field:'totaltime'},
{title:"商務座",width:100,field:'swz'},
//預訂按鈕
{title:"備注",width:100,field:'bz'}
]],
//自動展開/收縮列的大小
fitColumns:true,
//請求數據
url:"datagrid.json",
//頂部工具欄
toolbar:
[{
text:"修改",
iconCls: 'icon-edit',
handler: function(){
alert('編輯按鈕')
}
},'-',{
text:"刪除",
iconCls: 'icon-help',
handler: function(){
alert('幫助按鈕')
}
}]
,
//在數據加載成功的時候觸發。
onLoadSuccess:function(){
$("#btn").linkbutton({
iconCls:"icon-add"
})
},
//在從遠程站點加載數據的時候顯示提示消息。
loadMsg:"數據正在加載中....",
method:"POST",
//如果為true，則在DataGrid控件底部顯示分頁工具欄。
pagination:true,
//如果為true，則顯示一個行號列。
rownumbers:true,
//如果為true，則只允許選擇一行。
singleSelect:true,
//是否顯示斑馬線效果。
striped:true
})
})
</script>
HTML 5 也被稱為 Web Applications 1.0。為了實現這個目標，增加了幾個為 Web 頁面提供交互體驗的新元素：
details
datagrid
menu
command
這些元素都可以根據用戶的操作和選擇改變顯示的內容，而不需要從服務器裝載新頁面。
details
details 元素表示在默認情況下可能不顯示的詳細信息。可選的 legend 元素可以提供詳細信息的摘要。
details 元素的用途之一是提供腳注和尾注。例如：
The bill of a Craveri's Murrelet is about 10% thinner
than the bill of a Xantus's Murrelet.
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) p. 247
</p>
</details>
沒有指定具體的顯示方式。瀏覽器可以選用腳注、尾注和工具提示等方式。
每個 details 元素可以有一個 open 屬性。如果設置了這個屬性，那么詳細信息在最初就顯示出來。如果沒有設置這個屬性，那么會隱藏它們，直到用戶要求顯示它們。無論是哪種情況，用戶都可以通過單擊一個圖標或其他控件來顯示或隱藏詳細信息。
datagrid
datagrid 元素提供一個網格控件。可以用它顯示樹、列表和表格，用戶和腳本可以更新這些界面元素。與之相反，傳統的表格主要用來顯示靜態數據。
datagrid 從它的內容（一個 table、select 或其他 HTML 元素）獲得初始數據。例如，代碼 9 中的 datagrid 包含一張成績表。在這個示例中，datagrid 的數據來自一個 table。更簡單的一維 datagrid 可以從 select 元素獲得數據。如果使用其他 HTML 元素，那么每個子元素成為網格中的一行。
<datagrid>
<table>
<tr><td>Jones</td><td>Allison</td><td>A-</td><td>B </td><td>A</td></tr>
<tr><td>Smith</td><td>Johnny</td><td>A</td><td>C </td><td>A</td></tr>
<tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
<tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B </td><td>A</td></tr>
</table>
</datagrid>
這個元素與常規表格的區別在于，用戶可以選擇行、列和單元格；把行、列和單元格折疊起來；編輯單元格；刪除行、列和單元格；對網格排序；以及在客戶機瀏覽器中直接進行其他數據操作。可以用 JavaScript 代碼監視更新。Document Object Model（DOM）中增加了 HTMLDataGridElement 接口以支持這個元素（代碼 10 HTMLDataGridElement）。
interface HTMLDataGridElement : HTMLElement {
attribute DataGridDataProvider data;
readonly attribute DataGridSelection selection;
attribute boolean multiple;
attribute boolean disabled;
void updateEverything();
void updateRowsChanged(in RowSpecification row, in unsigned long count);
void updateRowsInserted(in RowSpecification row, in unsigned long count);
void updateRowsRemoved(in RowSpecification row, in unsigned long count);
void updateRowChanged(in RowSpecification row);
void updateColumnChanged(in unsigned long column);
void updateCellChanged(in RowSpecification row, in unsigned long column);
};
還可以使用 DOM 在網格中動態地裝載數據。也就是說，datagrid 可以不包含那些提供初始數據的子元素。可以用一個 DataGridDataProvider 對象設置它（代碼 11 DataGridDataProvider）。這樣就可以從數據庫、XmlHttpRequest 或者 JavaScript 代碼能夠訪問的任何資源裝載數據。
interface DataGridDataProvider {
void initialize(in HTMLDataGridElement datagrid);
unsigned long getRowCount(in RowSpecification row);
unsigned long getChildAtPosition(in RowSpecification parentRow,
in unsigned long position);
unsigned long getColumnCount();
DOMString getCaptionText(in unsigned long column);
void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
DOMString getRowImage(in RowSpecification row);
HTMLMenuElement getRowMenu(in RowSpecification row);
void getRowClasses(in RowSpecification row, in DOMTokenList classes);
DOMString getCellData(in RowSpecification row, in unsigned long column);
void getCellClasses(in RowSpecification row, in unsigned long column,
in DOMTokenList classes);
void toggleColumnSortState(in unsigned long column);
void setCellCheckedState(in RowSpecification row, in unsigned long column,
in long state);void cycleCell(in RowSpecification row, in unsigned long column);
void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};
menu 和 command
menu 元素實際上在 HTML 2 中就出現了。在 HTML 4 中廢棄了它，但是 HTML 5 又恢復了它并指定了新的意義。在 HTML 5 中，menu 包含 command 元素，每個 command 元素引發一個操作。例如，代碼 12 HTML 5 菜單 是一個彈出警告框的菜單。
<menu>
<commandlabel="Do 1st Command"/>
<command label="Do 2nd Command"/>
<commandlabel="Do 3rd Command"/>
</menu>
還可以用 checked="checked" 屬性將命令轉換為復選框。通過指定 radiogroup 屬性，可以將復選框轉換為單選按鈕，這個屬性的值是互相排斥的按鈕的組名。
除了簡單的命令列表之外，還可以使用 menu 元素創建工具欄或彈出式上下文菜單，這需要將 type 屬性設置為 toolbar 或 popup。例如，代碼 13. HTML 5 工具欄 顯示一個與 WordPress 等 blog 編輯器相似的工具欄。它使用 icon 屬性鏈接到按鈕的圖片。
<menu type="toolbar">
<commandlabel="strong" icon="bold.gif"/>
<command onclick="insertTag(buttons, 1);"label="em" icon="italic.gif"/>
<command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
<commandlabel="b-quote" icon="blockquote.gif"/>
<command onclick="insertTag(buttons, 4);"label="del" icon="del.gif"/>
<command onclick="insertTag(buttons, 5);"label="ins" icon="insert.gif"/>
<command label="img" icon="image.gif"/>
<commandlabel="ul" icon="bullet.gif"/>
<commandlabel="ol" icon="number.gif"/>
<commandlabel="li" icon="item.gif"/>
<command label="code" icon="code.gif"/>
<command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
<command label="abbr" icon="abbr.gif"/>
<command label="acronym" icon="acronym.gif"/>
</menu>
label 屬性提供菜單的標題。例如，代碼14. HTML 5 Edit 菜單 顯示一個 Edit 菜單。
<menu type="popup" label="edit">
<command label="Undo"/>
<command label="Redo"/>
<commandlabel="Cut"/>
<command onclick="copy()" label="Copy"/>
<command onclick="paste()"label="Paste"/>
<command label="Clear"/>
</menu>
菜單可以嵌套在其他菜單中，形成層次化的菜單結構。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
