HTML5的一些特性
目前成都創(chuàng)新互聯(lián)公司已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、西充網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
在HTML5中主要的特性之一就是減少網(wǎng)頁對Flash的依賴，很多視頻網(wǎng)站和網(wǎng)頁游戲都依賴著Flash來運(yùn)行，很多時(shí)候會(huì)發(fā)現(xiàn)，沒有安裝Flash就無法打開一些網(wǎng)頁，運(yùn)行Flash對瀏覽器壓力比較大，使用HTML5就可以直接剔除Flash直接通過HTML5來播放視頻或者運(yùn)行網(wǎng)頁游戲，這樣可以很大程度減輕對瀏覽器的壓力，并且網(wǎng)站開發(fā)人員維護(hù)起來也要方便得多。雖然HTML5出來有一段時(shí)間了，但是國內(nèi)普遍還是使用著Flash，在國外的網(wǎng)站大部分都已經(jīng)轉(zhuǎn)用了HTML5，例如YouTube視頻網(wǎng)站。
除此之外，HTML5能夠支持不同終端，不同尺寸的屏幕，在跨平臺(tái)上更加方便了，不局限于PC。HTML5相對于HTML4，增加了很多新標(biāo)記，并且語法也更簡潔了，將原本HTML4的一些過時(shí)的標(biāo)記去除了。HTML5還能夠具有網(wǎng)頁存儲(chǔ)數(shù)據(jù)的功能，能夠支持瀏覽器內(nèi)嵌的WEB Database，增加了網(wǎng)頁緩存。
因?yàn)镠TML5的許多改進(jìn)，令CSS3更強(qiáng)大能夠做出更加豐富的頁面效果，例如畫面層疊、圖像透明、圖片動(dòng)畫等等 。
HTML5的幾個(gè)主要特性總結(jié)：
減少網(wǎng)站對Flash的依賴
支持多終端不同屏幕的設(shè)備（手機(jī)、平板、智能手表）
增加了新標(biāo)記、語法更簡潔和多達(dá)百項(xiàng)的改進(jìn)
具有存儲(chǔ)功能，有一些瀏覽器有內(nèi)嵌的WEBDB（網(wǎng)頁數(shù)據(jù)庫）
網(wǎng)頁緩存
將原本HTML4的一些標(biāo)記去除了
令CSS3更豐富的做出頁面效果
HBuilder工具
HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開發(fā)IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。它基于Eclipse，所以順其自然地兼容了Eclipse的插件。
這是國產(chǎn)的一個(gè)免費(fèi)的IDE，能夠直接在百度或官網(wǎng)上下載到：
官網(wǎng)下載地址：
http://www.dcloud.io/
下載打開可以能會(huì)要求注冊賬戶，賬戶注不注冊都可以的，然后經(jīng)過一系列提示后進(jìn)入到主要界面：
在項(xiàng)目管理器里右鍵點(diǎn)會(huì)看到有一個(gè)新建的選項(xiàng)，或者點(diǎn)擊菜單欄上的文件也會(huì)看到有一個(gè)新建的選項(xiàng)，把鼠標(biāo)移動(dòng)到“新建”就能看到一系列的項(xiàng)目和網(wǎng)頁相關(guān)的文件創(chuàng)建，例如我創(chuàng)建一個(gè)Web項(xiàng)目：
打開文件html文件：
在body標(biāo)記內(nèi)寫上Hello World，然后選擇一個(gè)瀏覽器運(yùn)行：
運(yùn)行結(jié)果：
HTML文件后綴
常見的html文件的后綴有html、htm、xhtml等等，這些文件可以直接使用瀏覽器運(yùn)行，而且html文件可以直接使用記事本編輯：
運(yùn)行結(jié)果：
HTML5標(biāo)記
HTML5是一個(gè)超文本標(biāo)記語言，我們學(xué)習(xí)html就是學(xué)習(xí)這些標(biāo)記，標(biāo)記里還有許多的屬性，但是這些屬性在很多標(biāo)記里都是相通的，有大概70%的相通性。
現(xiàn)在我們來看一些標(biāo)記的格式：
第一種寫法：
：標(biāo)記的開始 ：標(biāo)記的結(jié)束
在html里并不嚴(yán)格區(qū)分大小寫，所以大寫也是可以的：
：標(biāo)記的開始 ：標(biāo)記的結(jié)束
第二種寫法，標(biāo)記里加上屬性：
href是一個(gè)屬性，””里寫屬性的值
屬性的值必須要用””（雙引號(hào)）或者’’（單引號(hào)）引起來，即便是數(shù)字也是如此。
第三種寫法，空標(biāo)記：
這是一個(gè)沒有內(nèi)容包含的標(biāo)記，也就是空標(biāo)記。
標(biāo)記里可以嵌套標(biāo)記，例如：
解釋：
td標(biāo)記嵌套在tr標(biāo)記里，tr標(biāo)記嵌套在table標(biāo)記里，這種嵌套也很好理解，就像其他編程語言一樣，類里面嵌套著方法，方法里面嵌套著循環(huán)或者條件分支語句。
在HBuilder里創(chuàng)建的html文件可以看到開頭的一個(gè)標(biāo)記就是DOCTYPE，這是一個(gè)文檔規(guī)范的引入、聲明，在HTML5里可能看不出引入了什么，但是在HTML4的語法里就不一樣了，例如我在HBuilder里創(chuàng)建一個(gè)HTML4文件：
文件內(nèi)容：
從HTML4的文件內(nèi)容可以看到DOCTYPE標(biāo)記里引用了一個(gè)網(wǎng)址，可以看到這個(gè)網(wǎng)址的末尾是引用的一個(gè)名為strict.dtd的文件，strict是嚴(yán)格詳細(xì)的意思，所以這就是HTML4的文檔規(guī)范文件，引用了這個(gè)文檔規(guī)范文件后，所有的語法、標(biāo)記、屬性都要嚴(yán)格遵守此文件里制定的規(guī)范。
在HTML5里則簡化了這些：
接下來第二個(gè)標(biāo)記就是html，這是根標(biāo)記也稱之為根元素，在一個(gè)html文件里，根標(biāo)記只需要寫一個(gè)即可，不要寫多個(gè)，所有的標(biāo)記內(nèi)容都嵌套在根標(biāo)記內(nèi)，這類似于Java的類的大括號(hào)，所有的靜態(tài)、實(shí)例成員都寫在類的大括號(hào)里，這個(gè)沒有什么好說的明白就行。
然后就是head標(biāo)記，head標(biāo)記是用于說明頁面的相應(yīng)配置，例如里面的title就是用于設(shè)置網(wǎng)頁的標(biāo)題，示例：
運(yùn)行結(jié)果，這就是網(wǎng)頁的標(biāo)題：
head里的meta標(biāo)記是用于設(shè)置網(wǎng)頁頁面中的相關(guān)信息的，meta的charset屬性是用于設(shè)置網(wǎng)頁的字符集的，一般使用UTF-8編碼，因?yàn)槟芗嫒莞鲊Z言和符號(hào)。如果想要只顯示中文簡體和繁體則可以使用GBK字符集，僅僅顯示中文簡體的話就使用GB2312字符集，設(shè)置成其他字符集后，其他的語言就會(huì)變成亂碼一般，網(wǎng)頁上就只能顯示字符集對應(yīng)的語言。
例如我把網(wǎng)頁字符集改為GB2312，然后添加日文內(nèi)容：
運(yùn)行結(jié)果：
如果使用UTF-8則不會(huì)出現(xiàn)這種問題：
運(yùn)行結(jié)果：
meta標(biāo)記里還有一個(gè)常用屬性，這個(gè)屬性是http-equiv，給這個(gè)屬性賦一個(gè)關(guān)鍵字為refresh（刷新），然后再用content屬性賦值一個(gè)網(wǎng)址和指定一個(gè)時(shí)間，就能指定頁面在指定的時(shí)間后跳轉(zhuǎn)到指定的網(wǎng)址上：
示例：
運(yùn)行結(jié)果，在五秒鐘之后就跳轉(zhuǎn)到了以下網(wǎng)站：
http-equiv屬性里賦值expire關(guān)鍵字，并且使用content屬性賦值一個(gè)時(shí)間，可以設(shè)定網(wǎng)頁的緩存過期時(shí)間：
在HTML里使用來注釋內(nèi)容
在瀏覽器里按F12可以查看控制臺(tái)，在控制臺(tái)里可以查看緩存信息：
在meta標(biāo)記里，有一個(gè)name屬性，這個(gè)屬性可以設(shè)置關(guān)鍵字、作者、和網(wǎng)頁描述：
當(dāng)我們使用搜索引擎時(shí)，搜索引擎去爬取數(shù)據(jù)就是靠網(wǎng)頁html設(shè)置的這些關(guān)鍵字和描述來爬取的，所以我們在搜索框里輸入要搜索的關(guān)鍵字，然后搜索引擎就依靠這樣的原理幫我們找到了這個(gè)關(guān)鍵字的網(wǎng)站或相關(guān)網(wǎng)站。
同樣的使用content屬性去進(jìn)行設(shè)置：
以上就是html頭部分的一些標(biāo)記與屬性還有關(guān)鍵字的介紹，接下來進(jìn)入到body標(biāo)記的學(xué)習(xí)，body標(biāo)記里面就是網(wǎng)頁的內(nèi)容，前面我們也在body標(biāo)記里寫了一句Hello World，運(yùn)行后在網(wǎng)頁上就能顯示出來。在body標(biāo)記可以寫任意的文本內(nèi)容，但是有一點(diǎn)就是換行、空格、特殊字符之類的要使用規(guī)定的標(biāo)記或者實(shí)體來表示，直接按回車或空格鍵是不管用的，示例：
運(yùn)行結(jié)果：
在網(wǎng)頁上是不會(huì)按照你編輯的樣式顯示的，有些符號(hào)得用標(biāo)記或者實(shí)體來表示。
例如回車就得使用
表示：
運(yùn)行結(jié)果：
同樣的空格也不能直接使用空格鍵：
運(yùn)行結(jié)果：
空格要使用實(shí)體來表示，實(shí)體就是html里的轉(zhuǎn)義符，實(shí)體的格式是以&開頭，以 ; 結(jié)束，例如空格的實(shí)體寫法示例：
一個(gè)實(shí)體代表一個(gè)空格，所以每行里有四個(gè)空格
運(yùn)行結(jié)果：
沒辦法直接表示的字符都可以使用實(shí)體來表示，這些實(shí)體都可以在網(wǎng)絡(luò)上搜索到，需要什么字符的實(shí)體就去網(wǎng)絡(luò)搜索就行了，平時(shí)只需要記住幾個(gè)常用的就行了，而且IDE里也有提示。
運(yùn)行結(jié)果：
標(biāo)尺線可以調(diào)整大小、長度、居中、居左、居右等等，還能設(shè)置顏色，設(shè)置大小使用size屬性，設(shè)置長度也就是寬度使用width屬性，設(shè)置居中、居左、居右等使用align屬性，單位可以使用px像素，使用像素作為單位的話，以后在任何瀏覽器上都不會(huì)改變，也不會(huì)因?yàn)闉g覽器的窗口縮放而發(fā)生變動(dòng)。除了像素之外也可以使用%為單位，使用%就是取上容器的百分比，上容器發(fā)生變化那么這個(gè)單位就會(huì)變動(dòng)，也就是會(huì)隨著上容器大小變動(dòng)而變動(dòng)，示例：
運(yùn)行結(jié)果：
align屬性有幾個(gè)常用的關(guān)鍵字，left居左、right居右、center居中，一般默認(rèn)是居中的。
color屬性可以用來設(shè)置顏色，可以使用16進(jìn)制來設(shè)置也可以用顏色的英文單詞來設(shè)置，還可以自己配色。使用16進(jìn)制的話得去網(wǎng)絡(luò)上搜索顏色相對應(yīng)的16進(jìn)制設(shè)置上去即可：
16進(jìn)制示例設(shè)置顏色：
運(yùn)行結(jié)果：
使用英文單詞的方式設(shè)置顏色示例：
運(yùn)行結(jié)果：
以上是如何設(shè)置標(biāo)尺線的幾個(gè)方面的介紹，一般情況下很少會(huì)改變大小，一般都是寬度和顏色設(shè)置的比較多。
重慶分公司
重慶分公司
