DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> 談談html5新增的元素及其他功能
談談html5新增的元素及其他功能
編輯:HTML5教程     

    相信大家一開始學習web時看到html5就自然想到html,就算也沒學過html,就好像聽聞過小米2s就自然也熟悉小米3紅米。不管是技術還是產品都是站在前輩的肩膀上發展起來的,正因此若是熟悉html,對於html5的學習就相當於在html這個容器裡繼續扔新的東西進去,哈哈哈,好像廢話多了。

     目前,web已經悄然引來html5的時代了,下面揭曉html5成功背後的面紗。

 1.首先,html5語法發生了什麼變化?!

   1.1內容類型(祖宗不變)

       擴展名:.html或htm

        文件類型:text/html

   1.2DOCTYPE聲明的簡化

    從繁瑣的聲明:<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtmll/DTD/xhtnll-transitional.dtd"> 

敲完之後我自己都暈了,別怕以後html5不會讓你暈了,現在聲明只需要這樣:

 <!DOCTYPE html>

更重要的是html5在使用工具時還可以加入SYSTEM識別符

<!DOCTYPE html SYSTEM"">

  1.3指定編碼字符

  不僅可以使用原來的指定方式<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

  還可以使用簡化版<meta charset="UTF-8"/>

2.兼容html的處理

  2.1可省略的標記

     ---不允許寫結束標記,</>形式不可以寫成<></>(br還可以<br>)

         這樣的元素有 area base br col command embed hr img input keygen  link meta param source track                 wbr 

   ---可以省略結束標記:li dt dd p tr optgroup option colgroup thead tbody tfoot tr td th-----建議不要省略,語法沒錯,但會影響文本的效果。

   ---都省略的有:html head body colgroup tbody

   (colgroup在上面的兩項都出現,本人也費解)

 2.2具有布爾值屬性---真假問題這裡就不碼了,可以參考賀春雷《html+css+JavaScript》

 3.新增的元素

   網頁設計的分層,之前都是用<div>,設置ID屬性指定功能,現在直接用屬性值當做一個元素,設置它的功能,道理很簡單,既然都可以到達目的地,那何必要選擇彎路。

 例如<header>代替<div id="header">

header--顯示頭部信息

article---定義獨立內容,常用於用戶評語或博客條目

<div>
<p>當時間在你的回憶裡流逝時...</p>

</div>
<article style="border:1px solid blue;">
    <p>我們慢慢蘇醒</p>
    </article>

section---節,例如文章的章節、頁眉、頁腳等,該標記中還新增一個cite屬性,引用資源的URL

nav---導航鏈接,在一個html中可以有多個nav

<nav>
        <a href="#">首頁 </a>
        <a href="#">圖片 </a>
        <a href="#">視頻 </a>
        </nav>

 hgroup---適用於多標題文檔,對標題進行組合,可以理解hgroup相當一個容器,裡面包含有正副標題

footer---眉腳,頁面底部,footer元素內使用address元素

4.新增的塊級語義元素

   aside定義所處的內容之外的內容,但與附近內容有關(注釋、引用、提示)

  figure 定義媒介內容

 dialog定義對話框或窗口,帶有open屬性,跟用戶互動

5.行內語義元素

  mark元素標記,相當於熒光筆在紙上標記文字

  time元素定義時間(24小時制)、日期

 meter元素定義度量衡

 process元素定義運行中的進度

6.其他新增元素

 video、audio、source、embed、canvas、bdi、command、datalist、details、keygen、output、rp、rt、ruby、track、summary

暫時寫到這裡,首次發博不足之處歡迎強烈砸磚~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved