HTML代碼
HTML代碼 |
中文名:超文本標記語言 外文名: Hyper Text Markup Language 類 型:標記語言 其它稱呼: 超文本鏈接標記語言 外語縮寫: HTML 閱讀方式: 網頁瀏覽器 |
HTML代碼:超文本標記語言(標準通用標記語言下的一個應用,外語縮寫HTML),是迄今為止網絡上應用最為廣泛的語言,也是構成網頁文檔的主要語言。
HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。
HTML的結構包括頭部(Head)、主體(Body)兩大部分,其中頭部描述瀏覽器所需的信息,而主體則包含所要說明的具體內容。[1]
目錄
定義
超級文本標記語言是標準通用標記語言下的一個應用,也是一種規範,一種標準,它通過標記符號來標記要顯示的網頁中的各個部分。
網頁文件本身是一種文本文件,通過在文本文件中添加標記符,可以告訴瀏覽器如何顯示其中的內容(如:文字如何處理,畫面如何安排,圖片如何顯示等)。瀏覽器按順序閱讀網頁文件,然後根據標記符解釋和顯示其標記的內容,對書寫出錯的標記將不指出其錯誤,且不停止其解釋執行過程,編制者只能通過顯示效果來分析出錯原因和出錯部位。
但需要注意的是,對於不同的瀏覽器,對同一標記符可能會有不完全相同的解釋,因而可能會有不同的顯示效果。
來源
HTML的英文全稱是 Hypertext Marked Language,即超文本標記語言。
HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly於1990年創立的一種標記語言,它是標準通用化標記語言SGML的應用。
用HTML編寫的超文本文檔稱為HTML文檔,它能獨立於各種操作系統平台(如UNIX, Windows等)。
使用HTML語言,將所需要表達的信息按某種規則寫成HTML文件,通過專用的瀏覽器來識別,並將這些HTML文件「翻譯」成可以識別的信息,即現在所見到的網頁。
自1990年以來,HTML就一直被用作WWW的信息表示語言,使用HTML語言描述的文件需要通過WWW瀏覽器顯示出效果。
HTML是一種建立網頁文件的語言,通過標記式的指令(Tag),將影像、聲音、圖片、文字動畫、影視等內容顯示出來。
事實上,每一個HTML文檔都是一種靜態的網頁文件,這個文件裡面包含了HTML指令代碼,這些指令代碼並不是一種程序語言,只是一種排版網頁中資料顯示位置的標記結構語言,易學易懂,非常簡單。
HTML的普遍應用就是帶來了超文本的技術―通過單擊鼠標從一個主題跳轉到另一個主題,從一個頁面跳轉到另一個頁面,與世界各地主機的文件鏈接超文本傳輸協議規定了瀏覽器在運行HTML文檔時所遵循的規則和進行的操作。
HTTP協議的制定使瀏覽器在運行超文本時有了統一的規則和標準。
特點
超級文本標記語言文檔製作不是很複雜,但功能強大,支持不同數據格式的文件鑲入,這也是萬維網(WWW)盛行的原因之一,其主要特點如下:
簡易性:超級文本標記語言版本升級採用超集方式,從而更加靈活方便。[2]
可擴展性:超級文本標記語言的廣泛應用帶來了加強功能,增加標識符等要求,超級文本標記語言採取子類元素的方式,為系統擴展帶來保證。
平台無關性:雖然個人計算機大行其道,但使用MAC等其他機器的大有人在,超級文本標記語言可以使用在廣泛的平台上,這也是萬維網(WWW)盛行的另一個原因。
通用性:另外,HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁製作人建立文本與圖片相結合的複雜頁面,這些頁面可以被網上任何其他人瀏覽到,無論使用的是什麼類型的電腦或瀏覽器。
編輯方法
HTML其實是文本,它需要瀏覽器的解釋,它的編輯器大體可以分為以下幾種:[3]
基本文本、文檔編輯軟件,使用微軟自帶的記事本或寫字板都可以編寫,當然,如果你用WPS來編寫,也可以。不過存盤時請使用.htm或.html作為擴展名,這樣就方便瀏覽器認出直接解釋執行了。
半所見即所得軟件,如:FCK-Editer、E-webediter等在線網頁編輯器;尤其推薦:Sublime Text代碼編輯器(由Jon Skinner開發,Sublime Text2收費但可以無限期試用)。
所見即所得軟件,使用最廣泛的編輯器,完全可以一點不懂HTML的知識就可以做出網頁,如:AMAYA(出品單位:萬維網聯盟);FRONTPAGE(出品單位:微軟);Dreamweaver(出品單位Adobe)。
Microsoft Visual Studio(出品公司:微軟):其中所見即所得軟件與半所見即所得的軟件相比,開發速度更快,效率更高,且直觀的表現更強。任何地方進行修改只需要刷新即可顯示。缺點是生成的代碼結構複雜,不利於大型網站的多人協作和精準定位等高級功能的實現。
字符集
在網頁中除了可顯示常見的美國信息交換標準代碼(外語縮寫:ASCII)字符和漢字外,HTML還有許多特殊字符,它們一起構成了HTML字符集。
有2種情況需要使用特殊字符,一是網頁中有其特殊意義的字符,二是鍵盤上沒有的字符。
HTML字符可以用一些代碼來表示,代碼可以有2種表示方式。即字符代碼(命名實體)和數字代碼(編號實體)。
字符代碼以「&」符開始,以分號";"結束,其間是字符名,如®。
數字代碼也以「&#」符開始,以分號";"結束,其間是編號,如®。
數據類型
超文本標記語言定義了多種數據類型的元素內容,如腳本數據和樣式表的數據,和眾多類型的屬性值,包括ID、名稱、URI、數字、長度單位、語言、媒體描述符、顏色、字符編碼、日期和時間等。所有這些數據類型都是專業的字符數據。
結構
一個網頁對應多個HTML文件,超文本標記語言文件以.htm(磁盤操作系統DOS限制的外語縮寫)為擴展名或.html(外語縮寫)為擴展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來產生超文本標記語言文件,只用修改文件後綴即可。[4]
標準的超文本標記語言文件都具有一個基本的整體結構,標記一般都是成對出現(部分標記除外例如:
),即超文本標記語言文件的開頭與結尾標誌和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用於頁面整體結構的確認。
標記符<html>,說明該文件是用超文本標記語言(本標籤的中文全稱)來描述的,它是文件的開頭;而</html>,則表示該文件的結尾,它們是超文本標記語言文件的開始標記和結尾標記。
頭部內容
標記符< html>:說明該文件是用超文本標記語言來描述的,它是文件的開頭,而</html>則表示該文件的結尾,它們是超文本標記語言文件的開始標記和結尾標記。
<head></head>:這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容,它本身不作為內容來顯示,但影響網頁顯示的效果。頭部中最常用的標記符是標題標記符和meta標記符,其中標題標記符用於定義網頁的標題,它的內容顯示在網頁窗口的標題欄中,網頁標題可被瀏覽器用做書籤和收藏清單。
以下表格列出了 HTML head 元素:
標籤 | 描述 |
---|---|
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標籤的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關係 |
<meta> | 定義了HTML文檔中的元數據 |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
主體內容
<body></body>;,網頁中顯示的實際內容均包含在這2個正文標記符之間。正文標記符又稱為實體標記。
示例:
<!DOCTYPEhtml><html lang="en"><head><metacharset="UTF-8"><title>Title</title>
</head>
<body>
</body>
</html>
相關要求
在編輯超文本標記語言文件和使用有關標記符時有一些約定或默認的要求。
文本標記語言源程序的文件擴展名默認使用htm(磁盤操作系統DOS限制的外語縮寫為擴展名)或html(外語縮寫為擴展名),以便於操作系統或程序辨認,除自定義的漢字擴展名。在使用文本編輯器時,注意修改擴展名。而常用的圖像文件的擴展名為gif和jpg。
超文本標記語言源程序為文本文件,其列寬可不受限制,即多個標記可寫成一行,甚至整個文件可寫成 一行;若寫成多行,瀏覽器一般忽略文件中的回車符(標記指定除外);對文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號(實體符)「 (注意此字母必須小寫,方可空格)」表示非換行空格;表示文件路徑時使用符號「/」分隔,文件名及路徑描述可用雙引號也可不用引號括起。
標記符中的標記元素用尖括號括起來,帶斜槓的元素表示該標記說明結束;大多數標記符必須成對使用,以表示作用的起始和結束;標記元素忽略大小寫,即其作用相同,但完整的空格可使用特殊符號「 (注意此字母必須小寫,方可空格)」;許多標記元素具有屬性說明,可用參數對元素作進一步的限定,多個參數或屬性項說明次序不限,其間用空格分隔即可;一個標記元素的內容可以寫成多行。
標記符號,包括尖括號、標記元素、屬性項等必須使用半角的西文字符,而不能使用全角字符。
HTML注釋由"「結束結束,例如。注釋內容可插入文本中任何位置。任何標記若在其最前插入驚嘆號,即被標識為注釋,不予顯示。 [5]
視頻
web前端開發 html基礎入門視頻教程
html基礎入門視頻教程120分鐘搭建一個網站
參考資料
- ↑ HTML 語言代碼參考手冊, W3school
- ↑ HTML標籤及特點, 博客園,2018年1月3日
- ↑ HTML 代碼編寫技巧, CSDN博客,2018年4月24日
- ↑ HTML網頁結構-HTML基礎結構, DIVCSS5
- ↑ HTML代碼規範, 簡書,2019.05.24