溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML5是一個嶄新的標記語言。
HTML5提供許多新的標簽，這些標簽其實大多數在我們以往的網頁設計中已經經常用到了，只是HTML5將其標準化了而已。所以我們的設計理念方法其實還是不變的，只是將需要替換的標簽進行替換即可，當然HTML5還提出了不少新的理念，這些個內容則需要我們認真去研究一下了，所以我們學習HTML5，其實就是在學習這些新的設計理念。
下面我就來研究一下HTML5
1、關于申明
老版的HTML（HTML4.01、XHTML1.0）開頭的申明語句內容極為豐富，豐富到我看著就哆嗦的地步，太長了，我是記不住，每次就是網站復制。
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5中對網站申明進行了大改革，短短一句
<!DOCTYPE HTML>
道盡了一切，精簡的語句會令整個代碼顯得非常整潔。
2、文檔編碼
這個文檔編碼同樣也獲得了精簡的權利，此后僅僅需要在<head></head>之間加上一句
<meta charset=”utf-8”>
，同樣非常簡單。
附：原文檔編碼： <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
3、語義性標簽
HTML5讓人津津樂道的一個方面就是她新增的諸多語義性標簽，這些標簽極大地規范了代碼的意義。
首先我先搭建一個簡單地、標準的HTML5頁面代碼：
<!doctype html> <html> <head> <meta charset=”utf-8”> </head> <body> <header> <nav>導航</nav> </header> <section> <article>文章</article> <aside>側邊欄</aside> </section> <footer>結尾</footer> </body> </html>
從上面的代碼中可以很輕松的看出來他與以前的代碼的區別：以前的許多許多的<div class=””><div id=””>沒有了，取而代之的是語義更為明確的標簽，強大的語義標簽幾乎可以控制整個頁面，因為他們支持嵌套，一個頁面有開頭、內容、結尾，這其中的內容、結尾同樣可以擁有自己的開頭、內容、結尾，而且還可以持續嵌套下去，也就是說，幾乎每一個標簽的開合就會形成一個閉合的空間，在這個空間的內部可以衍生出完美的事物（即語義標簽在一個網頁中并不是只能出現一次，他不僅可以出現多次，而且在不同的空間中時互相之間并不干擾，她只為他所在的空間服務）。
語義標簽
| 序號 | 標簽 | 意義 | ||
| 1 | nav | 定義導航 | ||
| 2 | header | 定義文檔頁眉 | ||
| 3 | section | 定義文檔區域 | ||
| 4 | article | 定于一篇文章 | ||
| 5 | aside | 定義側邊欄或相關內容 | ||
| 6 | footer | 定義文檔頁尾 |
接上所述，上文曾提到，每個語義標簽都可以形成一個獨立的自我空間，其內部的一切皆由該語義標簽來限定，即其內部的一切并不會影響該標簽外部的區域，這樣就有了這樣一個例子，以前我們使用<h2>~<h7>標簽時，通常遵循這樣的慣例：一個HTML文檔內部有且只能有一個<h2>標簽，用于定義該網頁的主標題，而其余的各個標題則使用<h3>或<h4>標簽來定義，以突出主標題的重要性，為網頁的SEO提供條件；然而現在，我們有了HTML5，我們可以在每個獨立的空間內利用<h2>來定義自己的主標題，利用<h3>或<h4>來定義副標題，由于每個語義標簽的獨立性，其內部的<h2>將不會影響到主頁面的主標題的權重。如下面的例子所示：
<!doctype html> <html> <head> <meta charset=”utf-8”> </head> <body> <header> <nav>導航</nav> </header> <h2>主頁面標題</h2> <section> <h2>區域1標題</h2> <article> <h2>文章1標題</h2> <p>文章1內容</p> </article> <article> <h2>文章2標題</h2> <p>文章2內容</p> </article> </section> <section> <h2>區域2標題</h2> <article> <h2>文章3標題</h2> <p>文章3內容</p> </article> <article> <h2>文章4標題</h2> <p>文章4內容</p> </article> </section> <aside>側邊欄</aside> <footer>結尾</footer> </body> </html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
