HTML5學(xué)習(xí)筆記(一）

HTML5是一個嶄新的標(biāo)記語言。

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出四方臺免費做網(wǎng)站回饋大家。

HTML5提供許多新的標(biāo)簽，這些標(biāo)簽其實大多數(shù)在我們以往的網(wǎng)頁設(shè)計中已經(jīng)經(jīng)常用到了，只是HTML5將其標(biāo)準(zhǔn)化了而已。所以我們的設(shè)計理念方法其實還是不變的，只是將需要替換的標(biāo)簽進(jìn)行替換即可，當(dāng)然HTML5還提出了不少新的理念，這些個內(nèi)容則需要我們認(rèn)真去研究一下了，所以我們學(xué)習(xí)HTML5，其實就是在學(xué)習(xí)這些新的設(shè)計理念。

下面我就來研究一下HTML5

1、關(guān)于申明

老版的HTML（HTML4.01、XHTML1.0）開頭的申明語句內(nèi)容極為豐富，豐富到我看著就哆嗦的地步，太長了，我是記不住，每次就是網(wǎng)站復(fù)制。

HTML5中對網(wǎng)站申明進(jìn)行了大改革，短短一句

道盡了一切，精簡的語句會令整個代碼顯得非常整潔。

2、文檔編碼

這個文檔編碼同樣也獲得了精簡的權(quán)利，此后僅僅需要在之間加上一句

，同樣非常簡單。

  附：原文檔編碼：

3、語義性標(biāo)簽

HTML5讓人津津樂道的一個方面就是她新增的諸多語義性標(biāo)簽，這些標(biāo)簽極大地規(guī)范了代碼的意義。

首先我先搭建一個簡單地、標(biāo)準(zhǔn)的HTML5頁面代碼：








導(dǎo)航


文章
側(cè)邊欄

結(jié)尾

從上面的代碼中可以很輕松的看出來他與以前的代碼的區(qū)別：以前的許多許多的

沒有了，取而代之的是語義更為明確的標(biāo)簽，強大的語義標(biāo)簽幾乎可以控制整個頁面，因為他們支持嵌套，一個頁面有開頭、內(nèi)容、結(jié)尾，這其中的內(nèi)容、結(jié)尾同樣可以擁有自己的開頭、內(nèi)容、結(jié)尾，而且還可以持續(xù)嵌套下去，也就是說，幾乎每一個標(biāo)簽的開合就會形成一個閉合的空間，在這個空間的內(nèi)部可以衍生出完美的事物（即語義標(biāo)簽在一個網(wǎng)頁中并不是只能出現(xiàn)一次，他不僅可以出現(xiàn)多次，而且在不同的空間中時互相之間并不干擾，她只為他所在的空間服務(wù)）。

語義標(biāo)簽

序號	標(biāo)簽	意義
1	nav	定義導(dǎo)航
2	header	定義文檔頁眉
3	section	定義文檔區(qū)域
4	article	定于一篇文章
5	aside	定義側(cè)邊欄或相關(guān)內(nèi)容
6	footer	定義文檔頁尾

接上所述，上文曾提到，每個語義標(biāo)簽都可以形成一個獨立的自我空間，其內(nèi)部的一切皆由該語義標(biāo)簽來限定，即其內(nèi)部的一切并不會影響該標(biāo)簽外部的區(qū)域，這樣就有了這樣一個例子，以前我們使用

~標(biāo)簽時，通常遵循這樣的慣例：一個HTML文檔內(nèi)部有且只能有一個

標(biāo)簽，用于定義該網(wǎng)頁的主標(biāo)題，而其余的各個標(biāo)題則使用

或

標(biāo)簽來定義，以突出主標(biāo)題的重要性，為網(wǎng)頁的SEO提供條件；然而現(xiàn)在，我們有了HTML5，我們可以在每個獨立的空間內(nèi)利用

來定義自己的主標(biāo)題，利用

或

來定義副標(biāo)題，由于每個語義標(biāo)簽的獨立性，其內(nèi)部的

將不會影響到主頁面的主標(biāo)題的權(quán)重。如下面的例子所示：








導(dǎo)航

主頁面標(biāo)題

區(qū)域1標(biāo)題

文章1標(biāo)題
文章1內(nèi)容


文章2標(biāo)題
文章2內(nèi)容



區(qū)域2標(biāo)題

文章3標(biāo)題
文章3內(nèi)容


文章4標(biāo)題
文章4內(nèi)容


側(cè)邊欄
結(jié)尾