HTML5學習筆記----html5與傳統html區別

一. HTML5語法的改變

該知識點所說變化指的是基於HTML4基礎上所定義的改變，主要有以下：

 

1. HTML5的文件擴展符(.html或.htm)與內容類型(text/html)保持不變。
2. HTML5中，刻意不使用版本聲明，一份文檔將會適用於全部版本的HTML。
3. 從HTML5開始，對於文件的字符編碼推薦使用UTF-8。
4. HTML5確保了與以前HTML版本的最大程度的兼容性。   

   爲了保證兼容性，需從元素提及，在HTML5.中，元素的標記能夠省略。其體來講，元素的標記分爲「不容許寫結束標記」、「能夠省略結束標記」和‘「開始標記和結束標記所有能夠省略」三種類型。

•  不容許寫結束標記元素有：area、base、br、col.....
•  能夠省略結束標記：li、dt、dd、p、rt......
•  開始標記和結束標記所有能夠省略：html、head、body.....
   
• 二.新增的結構元素

   

  • section元素表示頁面中的一個內容區塊，好比章節、頁眉、頁腳或頁面中的其餘部分；
  • article元素表示頁面中的一塊與上下文不相關的獨立內容，譬如博客中的一篇文章或報紙中的一篇文章；
  • aside元素表示article元素的內容以外的、與article元素的內容相關的輔助信息；
  • header元素表示頁面中一個內容區塊或整個頁面的標題；
  • hgroup元素用於對整個頁面或頁面中一個內容區塊的標題進行組合；
  • footer元素表示整個頁面或頁面中一個內容區塊的腳註。通常來講，它會包含創做者的姓名、創做日期以及創做者聯繫信息；
  • nav元素表示頁面中導航連接的部分；
  • figure元素表示一段獨立的流內容，通常表示文檔主體流內容中的一個獨立單元，使用figcaption元素爲figure元素組添加標題

   

  二、新增的其餘元素

   

  • audio元素定義音頻，好比音樂或其餘音頻流；
  • embed元素用來插入各類多媒體，格式能夠是Midi、Wav、AU、MP3等；
  • mark元素上要用來在視覺上向用戶呈現那些須要突出顯示或高亮顯示的文字，典型應用就是在搜索結果中向用戶高亮顯示搜素關鍵詞；
  • progress元素表示運行中的進程
  • ruby元素表示ruby註釋(中文註音或字符)
  • rt元素表示字符(中文註音或字符)的解釋或發音
  • rp元素在ruby註釋中使用，以定義不支持ruby素的瀏覽器所顯示的內容。
  • wbr元素表示軟換行，而當寬度不夠時，主動在此處進行換行
  • canvas元素表示圖形，好比圖表和其餘圖像
  • cammand元素表示命令按鈕，好比單選按鈕、複選框或按鈕
  • details元素表示用戶要求獲得而且能夠獲得的細節信息
  • datagrid元素表示可選數據的列表，它以樹形列表的形式來顯示
  • keygen元素表示生成密鑰
  • output元素表示不一樣類型的輸出，好比腳本的輸出
  • source元素爲媒介元素(好比<video>和<audio>)定義媒介資源
  • menu元素表示菜單列表

   

  三、新增的input元素

   

  • email 類型表示必須輸入E-main地址的文本輸入框
  • url 類型表示必須輸入URL地址的文本輸入框
  • number類型表示必須輸人數值的文本輸入框
  • range 類型表示必須輸入必定範圍內數字值的文本輸人框
        HTML5擁有多個可供選取日期和時間的新型輸入文本框:
  
  • date ——選取日、月、年
  • month ——選取月、年
  • week ——選取周和年
  • time ——選取時間(小時和分鐘)
  • datetime ——一選取時間、日、月、年(UTC 時間)
  • datetime.local ——選取時間、日、月、年(本地時間)

   

   

  三.廢除元素

   

  一、能使用CSS替代的元素

   

  • 對幹basefont、big、center、font、s、strike、tt、u這些元素，因爲它們的功能都是純粹去畫面展現服務的，而HTML5中提倡把畫面展現性功能放在CSS樣式表中統一編輯，因此這些元素廢除了

   

  二、再也不使用frame框架

   

  • 對於frameset元素、frame元素與noframes元素，因爲frame框架對網頁可用性存在負面影響，在HTML5中已不支持frame框架，只支持iframe框架，或者用服務器方建立的由多個頁面組成的複合頁面的形式，同時將以上這三個元素廢除。

   

  三、只有部分瀏覽器支持的元素

   

  •  對於applet、bgsound、blink、marquee等元素，因爲只有部分瀏覽器支持這些元素，特別是bgsound元素以及marquee元素，只被Internet Explorer所支持，因此在HTML 5中被廢除。其中applet元素可由ernedd元素或object元素替代，bgsound元素可由audio元素替代，marquee能夠由JavaScript編程的方式所替代

   

  四、其餘被廢除的元素：

   

  • 廢除rb元素，使用ruby元素替代
  • 廢除acronym元素，使用abbr元素替代
  • 廢除dir元素，使用ul元素替代
  • 廢除isindex元素，使用form元素與input元素相結合的方式替代
  • 廢除listing元素，使用pre元素替代
  • 廢除xmp元素，使用code元素替代
  • 廢除nextid元素，使用GUIDS替代
  • 廢除plaintext元素，使用「 text/plian」 MIME類型替代

   

   

  四.新增屬性和廢除屬性

  1、新增屬性

  一、與表單相關屬性

   

  • 新增autofocus屬性，它以指定屬性的方式讓元素在畫面打開時自動得到焦點；
  • 新增placeholder屬性，它會對用戶的輸入進行提示，提示用戶能夠輸入的內容；
  • 新增form屬性，聲明它屬於哪一個表單，而後將其放置在頁面上任何位置，而不是表單以內；
  • 新增required屬性，該屬性表示在用戶提交的時候進行檢查，檢查該元素內必定要有輸入內容；
  •    .....

  二、與連接相關屬性
  

  • 增長media屬性，該屬性規定目標URL是爲何類型的媒介/設備進行優化的，只能在href屬性存在時使用；
  • 增長hreflang屬性與rel屬性，以保持與a元素、link元素的一致；
  •  ......

  三、其餘屬性
  

  • 屬性reverend，它指定列表倒序顯示；
  • 爲script元素增長async屬性，它定義腳本是否異步執行；
  • ......

   

  2、廢除屬性

   

  • 能被CSS樣式表替代的屬性所有廢除掉；
  • 多餘屬性，例如：target、profile、version等被廢除掉；
  • .......        

   

  五.全局屬性

        在HTML5中，新增了一個’‘全局屬性「的概念。所謂全局屬性，是指能夠對任何元素都使用的屬性。

   

  一、contentEditable 屬性

  • 該屬性容許用戶編輯元素中的內容，能夠得到鼠標焦點，屬性爲布爾值，可被指定爲true或false。另外，該屬性還有個隱藏inherit狀態，爲true時，容許編輯，爲false時，不容許編輯，未指定時，由inherit決定。

  二、designMode 屬性
  

  • 該屬性用來決定整個頁面是否可編輯。有兩個屬性「on」與"off"。屬性爲"on"時，可編輯，爲「off」時，不可編輯。

  三、hidden屬性
  

  • 全部元素都容許使用一個hidden屬性，該屬性相似於input元素中的hidden元素，功能是通知瀏覽器不渲染該元素，使該元素處於不可見狀態。該屬性值爲布爾值，爲true時，不可見，爲false時，可見。

  四、spellcheck屬性
  

  • 該屬性是HTML 5針對input元素(type=text) 與textarea這兩個文本輸入框提供的一個新屬性，主要對用戶輸入內容進行拼寫與語法檢查。屬性值爲布爾值，書寫時必須明確聲明屬性值爲true或false書寫方式以下：

     <!—如下兩種書寫方法正確—>   <textarea spellcheck="true"  >   <input type=text spellcheck=false>   <!—如下兩種書寫方法爲錯誤—>   <textarea spellcheck  >