HTML學習筆記(四)_HTML5常用元素與屬性

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:指定元信息的值。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章