HTML一些標記的認識

發布時間：2020-07-23 23:29:43 來源：網絡閱讀：389 作者：ZeroOne01 欄目：web開發

HTML5的一些特性

HTML一些標記的認識

在HTML5中主要的特性之一就是減少網頁對Flash的依賴，很多視頻網站和網頁游戲都依賴著Flash來運行，很多時候會發現，沒有安裝Flash就無法打開一些網頁，運行Flash對瀏覽器壓力比較大，使用HTML5就可以直接剔除Flash直接通過HTML5來播放視頻或者運行網頁游戲，這樣可以很大程度減輕對瀏覽器的壓力，并且網站開發人員維護起來也要方便得多。雖然HTML5出來有一段時間了，但是國內普遍還是使用著Flash，在國外的網站大部分都已經轉用了HTML5，例如YouTube視頻網站。

除此之外，HTML5能夠支持不同終端，不同尺寸的屏幕，在跨平臺上更加方便了，不局限于PC。HTML5相對于HTML4，增加了很多新標記，并且語法也更簡潔了，將原本HTML4的一些過時的標記去除了。HTML5還能夠具有網頁存儲數據的功能，能夠支持瀏覽器內嵌的WEB Database，增加了網頁緩存。

因為HTML5的許多改進，令CSS3更強大能夠做出更加豐富的頁面效果，例如畫面層疊、圖像透明、圖片動畫等等。

HTML5的幾個主要特性總結：

減少網站對Flash的依賴
支持多終端不同屏幕的設備（手機、平板、智能手表）
增加了新標記、語法更簡潔和多達百項的改進
具有存儲功能，有一些瀏覽器有內嵌的WEBDB（網頁數據庫）
網頁緩存
將原本HTML4的一些標記去除了
令CSS3更豐富的做出頁面效果

HBuilder工具

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE。HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。它基于Eclipse，所以順其自然地兼容了Eclipse的插件。

這是國產的一個免費的IDE，能夠直接在百度或官網上下載到：

官網下載地址：

http://www.dcloud.io/

HTML一些標記的認識

下載打開可以能會要求注冊賬戶，賬戶注不注冊都可以的，然后經過一系列提示后進入到主要界面：

HTML一些標記的認識

在項目管理器里右鍵點會看到有一個新建的選項，或者點擊菜單欄上的文件也會看到有一個新建的選項，把鼠標移動到“新建”就能看到一系列的項目和網頁相關的文件創建，例如我創建一個Web項目：

HTML一些標記的認識

打開文件html文件：

HTML一些標記的認識

在body標記內寫上Hello World，然后選擇一個瀏覽器運行：

HTML一些標記的認識

運行結果：

HTML一些標記的認識

HTML文件后綴

常見的html文件的后綴有html、htm、xhtml等等，這些文件可以直接使用瀏覽器運行，而且html文件可以直接使用記事本編輯：

HTML一些標記的認識

運行結果：

HTML一些標記的認識

HTML5標記

HTML5是一個超文本標記語言，我們學習html就是學習這些標記，標記里還有許多的屬性，但是這些屬性在很多標記里都是相通的，有大概70%的相通性。

現在我們來看一些標記的格式：

第一種寫法：

<html>：標記的開始 </html>：標記的結束

在html里并不嚴格區分大小寫，所以大寫也是可以的：

<HTML>：標記的開始 </HTML>：標記的結束

第二種寫法，標記里加上屬性：

href是一個屬性，””里寫屬性的值

屬性的值必須要用””（雙引號）或者’’（單引號）引起來，即便是數字也是如此。

第三種寫法，空標記：

這是一個沒有內容包含的標記，也就是空標記。

標記里可以嵌套標記，例如：

<table>

<tr>

</tr>

</table>

解釋：

td標記嵌套在tr標記里，tr標記嵌套在table標記里，這種嵌套也很好理解，就像其他編程語言一樣，類里面嵌套著方法，方法里面嵌套著循環或者條件分支語句。

在HBuilder里創建的html文件可以看到開頭的一個標記就是DOCTYPE，這是一個文檔規范的引入、聲明，在HTML5里可能看不出引入了什么，但是在HTML4的語法里就不一樣了，例如我在HBuilder里創建一個HTML4文件：

文件內容：

HTML一些標記的認識

從HTML4的文件內容可以看到DOCTYPE標記里引用了一個網址，可以看到這個網址的末尾是引用的一個名為strict.dtd的文件，strict是嚴格詳細的意思，所以這就是HTML4的文檔規范文件，引用了這個文檔規范文件后，所有的語法、標記、屬性都要嚴格遵守此文件里制定的規范。

在HTML5里則簡化了這些：

HTML一些標記的認識

接下來第二個標記就是html，這是根標記也稱之為根元素，在一個html文件里，根標記只需要寫一個即可，不要寫多個，所有的標記內容都嵌套在根標記內，這類似于Java的類的大括號，所有的靜態、實例成員都寫在類的大括號里，這個沒有什么好說的明白就行。

然后就是head標記，head標記是用于說明頁面的相應配置，例如里面的title就是用于設置網頁的標題，示例：

HTML一些標記的認識

運行結果，這就是網頁的標題：

HTML一些標記的認識

head里的meta標記是用于設置網頁頁面中的相關信息的，meta的charset屬性是用于設置網頁的字符集的，一般使用UTF-8編碼，因為能兼容各國語言和符號。如果想要只顯示中文簡體和繁體則可以使用GBK字符集，僅僅顯示中文簡體的話就使用GB2312字符集，設置成其他字符集后，其他的語言就會變成亂碼一般，網頁上就只能顯示字符集對應的語言。

例如我把網頁字符集改為GB2312，然后添加日文內容：

HTML一些標記的認識

運行結果：

HTML一些標記的認識

如果使用UTF-8則不會出現這種問題：

HTML一些標記的認識

運行結果：

HTML一些標記的認識

meta標記里還有一個常用屬性，這個屬性是http-equiv，給這個屬性賦一個關鍵字為refresh（刷新），然后再用content屬性賦值一個網址和指定一個時間，就能指定頁面在指定的時間后跳轉到指定的網址上：

示例：

HTML一些標記的認識

運行結果，在五秒鐘之后就跳轉到了以下網站：

HTML一些標記的認識

http-equiv屬性里賦值expire關鍵字，并且使用content屬性賦值一個時間，可以設定網頁的緩存過期時間：

HTML一些標記的認識

在HTML里使用來注釋內容

在瀏覽器里按F12可以查看控制臺，在控制臺里可以查看緩存信息：

HTML一些標記的認識

在meta標記里，有一個name屬性，這個屬性可以設置關鍵字、作者、和網頁描述：

HTML一些標記的認識

當我們使用搜索引擎時，搜索引擎去爬取數據就是靠網頁html設置的這些關鍵字和描述來爬取的，所以我們在搜索框里輸入要搜索的關鍵字，然后搜索引擎就依靠這樣的原理幫我們找到了這個關鍵字的網站或相關網站。

同樣的使用content屬性去進行設置：

HTML一些標記的認識

以上就是html頭部分的一些標記與屬性還有關鍵字的介紹，接下來進入到body標記的學習，body標記里面就是網頁的內容，前面我們也在body標記里寫了一句Hello World，運行后在網頁上就能顯示出來。在body標記可以寫任意的文本內容，但是有一點就是換行、空格、特殊字符之類的要使用規定的標記或者實體來表示，直接按回車或空格鍵是不管用的，示例：

HTML一些標記的認識

運行結果：

HTML一些標記的認識

在網頁上是不會按照你編輯的樣式顯示的，有些符號得用標記或者實體來表示。

例如回車就得使用<br />表示：

HTML一些標記的認識

運行結果：

HTML一些標記的認識

同樣的空格也不能直接使用空格鍵：

HTML一些標記的認識

運行結果：

HTML一些標記的認識

空格要使用實體來表示，實體就是html里的轉義符，實體的格式是以&開頭，以 ; 結束，例如空格的實體寫法示例：

HTML一些標記的認識

一個實體代表一個空格，所以每行里有四個空格

運行結果：

HTML一些標記的認識

沒辦法直接表示的字符都可以使用實體來表示，這些實體都可以在網絡上搜索到，需要什么字符的實體就去網絡搜索就行了，平時只需要記住幾個常用的就行了，而且IDE里也有提示。

<hr />標尺線，標尺線就是一條橫線，示例：

HTML一些標記的認識

運行結果：

HTML一些標記的認識

標尺線可以調整大小、長度、居中、居左、居右等等，還能設置顏色，設置大小使用size屬性，設置長度也就是寬度使用width屬性，設置居中、居左、居右等使用align屬性，單位可以使用px像素，使用像素作為單位的話，以后在任何瀏覽器上都不會改變，也不會因為瀏覽器的窗口縮放而發生變動。除了像素之外也可以使用%為單位，使用%就是取上容器的百分比，上容器發生變化那么這個單位就會變動，也就是會隨著上容器大小變動而變動，示例：

HTML一些標記的認識