HTML5新增的結構元素(新增的都是塊元素,獨占一行) 1) header 定義了文檔的頭部區域 <header> <h1>網站標題<h1> </header> 2) nav 定義導航鏈接的部分 <nav> <ul> <li>首頁</li> <li>關於我們</li> <li>聯繫我們</li> < ...
HTML5新增的結構元素(新增的都是塊元素,獨占一行)
1) header 定義了文檔的頭部區域
<header>
<h1>網站標題<h1>
</header>
2) nav 定義導航鏈接的部分
<nav>
<ul>
<li>首頁</li>
<li>關於我們</li>
<li>聯繫我們</li>
</ul>
</nav>
3) section 定義文檔中的節(section,區段)
當一個元素只是為了樣式化或者方便腳本使用時,使用div元素;當元素內容明確出現在文檔大綱中,使用section元素
4) article定義頁面獨立的內容區域
一個特殊的section元素,代表一個獨立完整的相關內容塊
5) aside 定義頁面的側邊欄內容
一般有兩種使用方式:
1.包含在article元素中作為主要內容的附屬信息,其中的內容可以是與當前文章有關的相關資料、名詞解釋等
<article>
<h1>....</h1>
<p>...</p>
<aside>...</aside>
</article>
2.在article元素外使用,作為頁面或站點全局的附屬信息。例如側邊欄
6) footer 定義section或document的頁腳
一般用於頁面或區域的底部,通常包含文檔的作者、版權信息、使用條款等等。
HTML5新增網頁元素
1) video 定義視頻
2) audio 定義音頻
3) canvas 定義圖形
4) datalist 定義可選數據的列表
用於為文本框提供一個可選數據的列表。如果把datalist提供的列表綁定到某文本框,需要使用文本框的list屬性來引用datalist元素的id屬性
datalist元素由一個或多個option元素組成,每一個option元素必須設置value屬性
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>datalist元素用法</title>
</head>
<body>
<input type="text" list="food" />
<datalist id="food">
<option value="麵包">麵包</option>
<option value="薯片">薯片</option>
</datalist>
</body>
</html>
5) time 定義日期或時間
使用或不使用在視覺效果上沒區別,使用後更容易被搜索引擎搜索到
6) mark 在視覺上向用戶呈現那些需要突出的文字
當把一行文字包含在mark元素內,頁面顯示時文字會有背景
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>mark元素用法</title>
</head>
<body>
<p>今天的天氣是<mark>晴轉多雲</mark></p>
</body>
</html>
7) progress 運行中的進度(進程)
頁面上顯示為一個進度條。value屬性表示當前已完成的進度,max屬性表示總進度
HTML新增全局屬性
1) contentEditable 是否允許用戶線上編輯元素中的內容
屬性可以設置為true或false。設置為true:頁面元素允許被編輯;設置為false:頁面元素不允許被編輯;未設置屬性,則該元素的編輯狀態由父元素決定。
編輯完元素內容後,如果想保存編輯的內容,只能把元素的innerHTML屬性發送到伺服器端進行保存。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>contentEditable全局屬性用法</title>
</head>
<body>
<ul contenteditable="true">
今天的天氣是晴轉多雲
</ul>
</body>
</html>
2) designMode 整個頁面是否可編輯
通常整個頁面是不能被編輯的。designMode屬性只能在JavaScript腳本中修改,屬性值有:on和off。
3) hidden 是否對元素進行隱藏
HTML5中所有元素都可以使用hidden屬性。屬性為bool類型,設為false元素可見;true元素不可見
4) spellcheck 是否必須對元素進行拼寫或語法檢查
spellcheck屬性針對單行文本框和多行文本框設置的。屬性為bool類型,設為true進行語法檢查;false不進行語法檢查。
但如果元素的readOnly屬性和disabled屬性生效的話,spellcheck屬性將失效。
5) tabindex 規定元素的Tab鍵移動順序
就是當在網頁中不斷的按下Tab鍵時,焦點所對應的控制項。每一個控制項的tabindex屬性表示該控制項是第幾個被訪問到的。