<rp id="wnpn7"><ruby id="wnpn7"></ruby></rp>
<progress id="wnpn7"><track id="wnpn7"><rt id="wnpn7"></rt></track></progress>
<ruby id="wnpn7"></ruby>
<ruby id="wnpn7"><blockquote id="wnpn7"><div id="wnpn7"></div></blockquote></ruby>

    1. <em id="wnpn7"><ruby id="wnpn7"><input id="wnpn7"></input></ruby></em>
      1. <button id="wnpn7"><acronym id="wnpn7"></acronym></button><button id="wnpn7"><acronym id="wnpn7"></acronym></button>

        <rp id="wnpn7"><acronym id="wnpn7"></acronym></rp>

        <li id="wnpn7"><object id="wnpn7"><u id="wnpn7"></u></object></li>
        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > HTML >
        • html5教程之HTML5的革新:結構之美

        本站最新發布   Python從入門到精通|Python基礎教程
        試聽地址  
        http://www.squ68.com/eschool/python.html


        前言 HTML 5如同一場革命,正在Web2.0后時代轟轟烈烈的進行著。 HTML 5是什么,無須我在這里贅述了。對于HTML 5的革新,按我的理解,可以總結為語義明確的標簽體系、化繁為簡的富媒體支持、神奇的本地數據存儲技術、不需要插件的富動畫(canvas)、強大的API支持。總之,HTML 5讓人機交互,人網交互變得更加舒適,貼合用戶。以往對富媒體應用與本存儲的支持乏力也不再是瀏覽器的切膚之痛。將Web從內容平臺推向標準化的應用平臺,并一統各在平臺陣營的標準,才是HTML 5革命的初衷。 本文,我就拋磚引玉,闡述HTML 5的革新之一:語義更明確簡潔的結構。 從"頭"說起 一個標準的XHTML頭部代碼應該是這樣:

        
        	
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        </head>

          你能記住嗎?你會去死記硬背嗎?當然不會!我們只需要機械的復制粘貼即可。 再看看一個標準的HTML 5頭部是如何的:

        
        	
        <!doctype html>
        <meta charset=gb2312>

          孰繁孰簡,就不用我說了。是的,HTML 5的頭部可以如此簡單,可以輕易的記住!并且,可以忽略大小寫,引號以及最后一個尖括號前的反斜線。 為什么可以如此松散?其實,如果把XHTML當成text/html發送,瀏覽器一樣可以很好的解析,瀏覽器并不在乎代碼的語法。所以,HTML 5是形而上的,它可能會破壞原有的一些標準,但仍可在瀏覽器中很好的表現。 當然,為了團隊協助與后續維護的方便,我們還是應該統一一種你喜歡的風格的寫法,比如:

        
        	
        <!doctype html>
        <html>
        <head>
        <meta charset="gb2312" />
        ...
        </head>
        <body>
        ...
        </body>
        </html>

          另外,HTML 5雖然目前并不為所有瀏覽器所支持,但這個能省去100多字節(對于日PV百萬級以上的站點,能省下不少的流量哦)的頭部已可以完美的兼容了。如果你對瀏覽器解析模式有研究的話,你應該知道,頁面在沒有定義doctype的情況下會觸發怪異模式,而只要定義了<!doctype html>瀏覽器就可以在標準模式下解析頁面,而不需要指定某個類型的DTD。 新的語義化標簽體系 語義化編碼是一個合格前端Developer必備的技能,但隨著網頁的日漸豐富化,僅僅用原有的xhtml標簽去語義化顯然已經力不從心。上帝說:"要有光!"便有了光。于是,HTML 5提供了一系列新的標簽及相應屬性,以反應現代網站典型語義。實踐出真理。還是寫一個例子吧:

        
        	
        <div id="header">
        <div class="hgroup">
        <h1>網站標題</h1>
        <h1>網站副標題</h1>
        </div>
        <div id="nav">
        <ul>
        <li>HTML 5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        </ul>
        </div>
        </div>
        <!--//header end-->
        <div id="left">
        <div class="article">
        <p>這是一篇講述HTML 5新結構標簽的文章。</p>
        </div>
        <div class="article">
        <p>這還是一篇講述HTML 5新結構標簽的文章。</p>
        </div>
        </div>
        <!--//left end-->
        <div id="aside">
        <h1>作者簡介</h1>
        <p>Mr.Think,專注Web前端技術的凡夫俗子。</p>
        </div>
        <!--//side end-->
        <div id="footer">
        頁面的底部
        </div>
        <!--//footer end-->

          上面是一個簡單的博客頁面部分HTML,由頭部、文章展示區、右側欄、底部組成。編碼整潔,也符合XHTML的語義化,即便是在HTML 5中也可以很好的表現。但是對瀏覽器來說,這就是一段沒有區分開權重的代碼,而不是一個讓機器也能讀懂語義的標簽來定義相應的區塊。比如,標準瀏覽器(比如Firefox、Chroome甚至新版的IE)都有一個快捷鍵可以帶引客戶直接跳轉到頁面的導航,但問題是所有的區塊都是用DIV定義,并且DIV的ID值是同開發者定的,所以,瀏覽器并不知道哪個應該是導航鏈接所在區塊。HTML 5新標簽的出現,正好彌補了這一缺憾。那么,上面的代碼,換成HTML 5就可以這樣寫:

        
        	
        <header>
        <hgroup>
        <h1>網站標題</h1>
        <h1>網站副標題</h1>
        </hgroup>
        <nav>
        <ul>
        <li>HTML 5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        </ul>
        </nav>
        </header>
        <div id="left">
        <article>
        <p>這是一篇講述HTML 5新結構標簽的文章。</p>
        </article>
        <article>
        <p>這還是一篇講述HTML 5新結構標簽的文章。</p>
        </article>
        </div>
        <aside>
        <h1>作者簡介</h1>
        <p>Mr.Think,專注Web前端技術的凡夫俗子。</p>
        </aside>
        <footer>
        網頁底部
        </footer>

          原來,HTML的頁面結構可以如此之美,不用注釋也能一目了然。對于瀏覽器,找到對應的區塊也不再會茫然無措。 如何用HTML 5新標簽結構化元素 通過上面的示例,我們了解到HTML 5的新標簽對結構化的革新,但切換到實際使用中,該如何恰當的使用它們呢?我想這也是很多HTML 5學習者想問一個問題。如同XHTML語義化一樣,HTML 5語義化標簽的使用也應該遵循:每個標簽都有它特定的意義,而語義化,就是讓我們在適當的位置用適當的標簽,以更好的讓人和機器(機器可理解為瀏覽器可理解為搜索引擎)都一目了然。比如header標簽一般是頁面的第一個區塊元素(header標簽也可用于類型的頭部元素中,比如文章區塊的標題),包含的了頁面的主題信息;nav標簽一般用于包裹導航信息;footer一般用來包裹頁面底部信息;等等。 下面是我參考HTML 5手冊列出的結構類常用新標簽的語義解釋及使用指引: <header>標簽 手冊釋義:定義 section 或 document 的頁眉。 使用指引:一般用來包含頁面頭部,也可用于其他區域頭部,比如article頭部:

        
        	
        <header>
        <hgroup>
        <h1>網站標題</h1>
        <h1>網站副標題</h1>
        </hgroup>
        </header>

          <hgroup>標簽 手冊釋義:用于對網頁或區段(section)的標題進行組合。 使用指引:用于標題類的組合,比如文章的標題與副標題:

        
        	
        <hgroup>
        <h1>這是一篇介紹HTML 5結構標簽的文章</h1>
        <h2>HTML 5的革新</h2>
        </hgroup>

          <nav>標簽 手冊釋義:定義導航鏈接的部分。 使用指引:用于定義頁面的導航部分:

        
        	
        <nav>
        <ul>
        <li>HTML 5</li>
        <li>CSS</li>
        <li>JavaScript</li>
        </ul>
        </nav>

          <aside>標簽 定義 article 以外的內容。aside 的內容應該與 article 的內容相關。 使用指引:用于成節的內容,會在文檔流中開始一個新的節,一般用于與文章內容相關的邊欄:

        
        	
        <aside>
        <h1>作者簡介</h1>
        <p>Mr.Think,專注Web前端技術的凡夫俗子。</p>
        </aside>

          <section>標簽 手冊釋義:定義文檔中的節(section)。比如章節、頁眉、頁腳或文檔中的其他部分。 使用指引:用于成節的內容,會在文檔流中開始一個新的節:

        
        	
        <section>
        <h1>section是什么?</h1>
        <h2>一個新的章節</h2>
        <article>
        <h2>關于section</h1>
        <p>section的介紹</p>
        ...
        </article>
        </section>

          <footer>標簽 手冊釋義:定義 section 或 document 的頁腳。典型地,它會包含創作者的姓名、文檔的創作日期以及/或者聯系信息。 使用指引:一般用來包裹整個頁面通用底部,也可用于其他區域底部,比如article底部:

        
        	
        <footer>
        COPYRIGHT@Mr.Think
        </footer>

          <article>標簽 手冊釋義:定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章,或者來自 blog 的文本,或者是來自論壇的文 本。亦或是來自其他外部源內容。 使用指引:顧名思義,一般用于文章區塊:

        
        	
        <article>
        <header>
        <hgroup>
        <h1>這是一篇介紹HTML 5結構標簽的文章</h1>
        <h2>HTML 5的革新</h2>
        </hgroup>
        <time datetime="2011-03-20">2011.03.20</time>
        </header>
        <p>文章內容詳情</p>
        </article>

          <figure>標簽 手冊釋義:用于對元素進行組合。 使用指引:多用于圖片與圖片描述組合:

        
        	
        <figure>
        <img src="img.gif" alt="figure標簽" title="figure標簽" />
        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看