1.HTML5新增的通用屬性:
(1).contentEditable屬性:
HTML5爲大部分HTML元素都增加了contentEditable屬性,如果該屬性設爲true,那麼瀏覽器將會允許開發者直接編輯該HTML元素裏的內容。此處的HTML元素並不是值那些原本就允許用戶輸入的表單元素,如文本框、文本域之類的,而是可以把<table../>,<div../>等元素變成可編輯狀態。
contentEditable具有“可繼承”的特點:如果一個HTML元素的父元素是“可編輯”的,那麼它默認也是可編輯的,除非顯示的指定值爲false。
(2).designMode屬性:
designMode屬性相當於一個全局的contentEditable屬性,如果把整個頁面的designMode屬性設置爲on時,該頁面上所有可支持contentEditable屬性的元素都變成可編輯狀態,designMode默認是false。
在js代碼中只能修改整個HTML頁面的designMode屬性(body)。
(3).hidden屬性:
支持true、false兩個值,一旦包某個HTML元素的hidden設爲true,就意味着通知瀏覽器不現實該組件,瀏覽器不會保留該組件所佔用的空間。此實行可以代替css樣式單中的display屬性,設置hidden爲true相當於在css中設置display:none;
(4).spellcheck屬性:
HTML爲input、textarea等元素增加了此屬性,支持true、false兩種屬性值,如果設置true,瀏覽器將會負責對用戶的輸入的文本內容執行輸入檢查,如果檢查不通過,瀏覽器會對平措的單詞進行提示。
2.HTML5新增的文檔結構元素:
(1).<article>:用於代表頁面上獨立的、完整的一篇“文章”,該元素表示的內容可以是一個帖子、一篇blog文章、一篇短文、一條完整的回覆等。總之,只要是一篇獨立的文檔內容,就應該使用此元素,簡單規則如下:
可使用header標籤定義文章“標題”部分,可使用“footer”定義文章“腳註”部分。可使用多個section把文章內容分成幾個“段落”,可嵌套多個article作爲它的附屬“文章”,比如一篇blog文章後面可以有多篇回覆文章。
(2).<section>:用來對頁面內容分塊,建議此元素包含一個標題,可以包含多個article元素,表示該“分塊”內容包含多篇分塊文章,此元素也可以嵌套section元素,用來包含多個“子分塊”。
(div元素只是一個通用的容器,而section元素則是一個負責“分塊”的HTML組件)。
(article和section這兩個元素很容易混淆,因爲他們都可以包含很多子元素,而且可以互相嵌套,但article和section的側重點不同:article側重於表達一段獨立的、完整的文章,而section則側重於對頁面內容進行分塊,換句話說,如果想表達一段獨立的、完整的文章,則用section;如果想把一塊內容分爲幾個部分,則應該使用section元素)。
(3).<nav>:該元素專門用於定義頁面上的“導航條”,包括頁面上方的“主導航條”,側邊的“邊框導航”、頁面內部的“頁面導航”、頁面下方的“底部導航”等,html5推薦將這些導航鏈接分別放在相應的nav元素中進行管理。
(4).<aside>:專門用於定義當前頁面或當前文章的附屬信息,通常來說,推薦aside元素使用css渲染成側邊欄。
將此元素放在body內部,表明爲整個頁面添加“邊欄”;放在其他父元素內部,表明爲父元素添加“邊欄”。
(5).<header>:定義文章“頭部”信息,該元素內部可包含多個標題元素,也可包含hgroup元素,還可以包含普通的p、span等元素。
(6).<hgroup>:用於組織多個標題元素,當header不要包含多個標題元素時,可以考慮使用hgroup把他們組成一組。
(7).<footer>:定義“腳註”部分,包括版權信息、作者授權信息等。
(8).<figure>:表示一塊獨立的“圖片區域”,該元素內部可包含一個或多個img元素所代表的圖片。初次之外,還可包含一個figcaption(最多隻能包含一個),用於定義該“圖9片區域”的標題。
(9).<figcaption>:通常放在figure內部,用於定義“圖片區域”的標題。
3.HTML5新增的語義相關元素:
(1).<mark>:用於顯示頁面中需要重點“關注”的內容,瀏覽器通常會用黃色顯示mark標識的內容。(此元素非常適合用於“高亮顯示”全文檢索時的關鍵字)
(2).<time>:用來顯示被標註的內容分是日期,時間或者日期時間
4. HTML5新增的兩個特殊功能的元素:
(1).<meter>:用於表示一個已知最大值和最小值的技術儀表,比如電池電量、速度表等。
(2).<processs>:用於表示一個進度條,可指定如下屬性:
max:指定進度條完成時的值。
value:指定進度條當前完成的進度值。
5.HTML5頭部和元信息:
使用<head../>元素可以定義HTML文檔頭,該元素可以包含如下子元素。
(1).<script>:用於包含js腳本。
(2).<style>:定義內部css樣式。
(3).<link>:鏈接外部css樣式資源。
(4).<title>:定義文檔標題。
(5).<base>:用於指定該頁面中所有鏈接的記住鏈接。
此元素必須是空元素,可指定一下兩個屬性:
href:指定所有鏈接的基準鏈接。
target:指定超鏈接默認在哪個窗口打開鏈接。該屬性值只能是_blank,_parent_self和_top。
(6).<meta>:用於指定該頁面中的元數據。
定義元數據也就是指定一些name-value對,還可以指定一下屬性:
http-equiv:指定元信息的名稱,該屬性指定的名稱具有特殊意義,它可以向瀏覽器傳回一些有用的信息,幫助瀏覽器正確地處理網頁內容。支持的值主要有:
Expiress:指定網頁的過期時間。一旦網頁過期,必須重新從服務器上下載。
Pragma:指定禁止I瀏覽器從本地磁盤緩存中調閱頁面內容,瀏覽器一旦離開該網頁就無法脫機訪問該頁面。content=“no-cache”;
Refresh:指定瀏覽器多長時間後自動刷新指定頁面,例如:
<meta http-equiv="Refresh" content=“5" /> //設置五秒後自動刷新本頁面
<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com" /> //設置兩秒後自動刷新百度頁面
Set-Cookie:設置Cookie,如果網頁過期,那麼客戶端上的cookie也將被刪除。
Content-Type:設置該頁面的內容類型和所用的字符集。
name:指定元信息的名稱,該屬性值可以隨意指定,比如作者,版權,關鍵字等。(爲網頁指定有效的關鍵字有利於搜索引擎收錄本站點)
content:指定元信息的值。
HTML學習筆記(四)_HTML5常用元素與屬性
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
解讀浮動閉合最佳方案:clearfix(轉)
飘走了的刃刃
2018-08-27 19:33:24
CSS垂直居中方法總結(部分翻譯)
飘走了的刃刃
2018-08-27 19:33:21
文本框輸入驗證:只能輸入數字和小數點
小锋007
2018-08-27 19:11:17
jsp中上傳圖片時的即時顯示效果
小锋007
2018-08-27 19:11:17
JS控制文本框textarea輸入字數限制
小锋007
2018-08-27 19:11:16
表單的js驗證框架,只提供提示信息及正則表達式即可自動驗證及提示
小锋007
2018-08-27 19:11:16
<a>標籤-超鏈接中使用confirm方法
小锋007
2018-08-27 19:11:16
圖片上傳時即時顯示2
小锋007
2018-08-27 19:11:16
鼠標劃過時整行變色代碼
小锋007
2018-08-27 19:11:16
點擊按鈕——網頁返回頂部代碼
小锋007
2018-08-27 19:11:16
textarea屬性設置
小锋007
2018-08-27 19:11:15
HTML&CSS課堂筆記
qq_38313060
2018-08-27 19:07:07
HTML課堂筆記
qq_38313060
2018-08-27 19:07:05
_blank, _self, _parent, _top, _new
smile_juan
2018-08-27 18:37:40