HTML+CSS 輕松入門(mén)之HTML簡(jiǎn)介

由來(lái)

萬(wàn)維網(wǎng)上的一個(gè)超媒體文檔稱(chēng)之為一個(gè)頁(yè)面（外語(yǔ)：page）。作為一個(gè)組織或者個(gè)人在萬(wàn)維網(wǎng)上放置開(kāi)始點(diǎn)的頁(yè)面稱(chēng)為主頁(yè)（外語(yǔ)：Homepage）或首頁(yè)，主頁(yè)中通常包括有指向其他相關(guān)頁(yè)面或其他節(jié)點(diǎn)的指針（超級(jí)鏈接），所謂超級(jí)鏈接，就是一種統(tǒng)一資源定位器（Uniform Resource Locator，外語(yǔ)縮寫(xiě)：URL）指針，通過(guò)激活（點(diǎn)擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁(yè)。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。在邏輯上將視為一個(gè)整體的一系列頁(yè)面的有機(jī)集合稱(chēng)為網(wǎng)站（Website或Site）。超級(jí)文本標(biāo)記語(yǔ)言（英文縮寫(xiě)：HTML）是為“網(wǎng)頁(yè)創(chuàng)建和其它可在網(wǎng)頁(yè)瀏覽器中看到的信息”設(shè)計(jì)的一種標(biāo)記語(yǔ)言。

網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱(chēng)為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。[1]

定義

超級(jí)文本標(biāo)記語(yǔ)言是標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)，

超文本標(biāo)記語(yǔ)言(16張)

?它通過(guò)標(biāo)記符號(hào)來(lái)標(biāo)記要顯示的網(wǎng)頁(yè)中的各個(gè)部分。網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫(huà)面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁(yè)文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對(duì)書(shū)寫(xiě)出錯(cuò)的標(biāo)記將不指出其錯(cuò)誤，且不停止其解釋執(zhí)行過(guò)程，編制者只能通過(guò)顯示效果來(lái)分析出錯(cuò)原因和出錯(cuò)部位。但需要注意的是，對(duì)于不同的瀏覽器，對(duì)同一標(biāo)記符可能會(huì)有不完全相同的解釋?zhuān)蚨赡軙?huì)有不同的顯示效果。

語(yǔ)言特點(diǎn)

超級(jí)文本標(biāo)記語(yǔ)言文檔制作不是很復(fù)雜，但功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)?，這也是萬(wàn)維網(wǎng)（WWW）盛行的原因之一，其主要特點(diǎn)如下：

簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便。

可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類(lèi)元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。

平臺(tái)無(wú)關(guān)性：雖然個(gè)人計(jì)算機(jī)大行其道，但使用MAC等其他機(jī)器的大有人在，超級(jí)文本標(biāo)記語(yǔ)言可以使用在廣泛的平臺(tái)上，這也是萬(wàn)維網(wǎng)（WWW）盛行的另一個(gè)原因。

通用性：另外，HTML是網(wǎng)絡(luò)的通用語(yǔ)言,一種簡(jiǎn)單、通用的全置標(biāo)記語(yǔ)言。它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類(lèi)型的電腦或?yàn)g覽器。

書(shū)寫(xiě)方式

它其實(shí)是文本，它需要瀏覽器的解釋?zhuān)木庉嬈鞔篌w可以分為三種，

基本文本、文檔編輯軟件，使用微軟自帶的記事本或?qū)懽职宥伎梢跃帉?xiě)，當(dāng)然，如果你用WPS來(lái)編寫(xiě)，也可以。不過(guò)存盤(pán)時(shí)請(qǐng)使用.htm或.html作為擴(kuò)展名，這樣就方便瀏覽器認(rèn)出直接解釋執(zhí)行了。

半所見(jiàn)即所得軟件，

如：FCK-Editer、E-webediter等在線網(wǎng)頁(yè)編輯器；

尤其推薦：Sublime Text代碼編輯器（由Jon Skinner開(kāi)發(fā)，Sublime Text 2收費(fèi)但可以無(wú)限期試用）。

所見(jiàn)即所得軟件，使用最廣泛的編輯器，完全可以一點(diǎn)不懂HTML的知識(shí)就可以做出網(wǎng)頁(yè)，如：

AMAYA（出品單位：萬(wàn)維網(wǎng)聯(lián)盟）；

FRONTPAGE（出品單位：微軟）；

Dreamweaver（出品單位：Adobe）。

所見(jiàn)即所得軟件與半所見(jiàn)即所得的軟件相比，開(kāi)發(fā)速度更快，效率更高，且直觀的表現(xiàn)更強(qiáng)。任何地方進(jìn)行修改只需要刷新即可顯示。缺點(diǎn)是生成的代碼結(jié)構(gòu)復(fù)雜，不利于大型網(wǎng)站的多人協(xié)作和精準(zhǔn)定位等高級(jí)功能的實(shí)現(xiàn)。

字符集

在網(wǎng)頁(yè)中除了可顯示常見(jiàn)的美國(guó)信息交換標(biāo)準(zhǔn)代碼（外語(yǔ)縮寫(xiě)：ASCII）字符和漢字外，HTML還有許多特殊字符，它們一起構(gòu)成了HTML字符集。有2種情況需要使用特殊字符，一是網(wǎng)頁(yè)中有其特殊意義的字符，二是鍵盤(pán)上沒(méi)有的字符。HTML字符可以用一些代碼來(lái)表示，代碼可以有2種表示方式。即字符代碼（命名實(shí)體）和數(shù)字代碼（編號(hào)實(shí)體）。字符代碼以“&”符開(kāi)始，以分號(hào)";"結(jié)束，其間是字符名，如®。數(shù)字代碼也以“&#”符開(kāi)始，以分號(hào)";"結(jié)束，其間是編號(hào)，如?。

整體結(jié)構(gòu)

一個(gè)網(wǎng)頁(yè)對(duì)應(yīng)多個(gè)HTML文件，超文本標(biāo)記語(yǔ)言文件以.htm（磁盤(pán)操作系統(tǒng)DOS限制的外語(yǔ)縮寫(xiě)）為擴(kuò)展名或.html（外語(yǔ)縮寫(xiě)）為擴(kuò)展名?？梢允褂萌魏文軌蛏蒚XT類(lèi)型源文件的文本編輯器來(lái)產(chǎn)生超文本標(biāo)記語(yǔ)言文件，只用修改文件后綴即可。

超文本標(biāo)記語(yǔ)言

標(biāo)準(zhǔn)的超文本標(biāo)記語(yǔ)言文件都具有一個(gè)基本的整體結(jié)構(gòu)，標(biāo)記一般都是成對(duì)出現(xiàn)（部分標(biāo)記除外例如：<br/>），即超文本標(biāo)記語(yǔ)言文件的開(kāi)頭與結(jié)尾標(biāo)志和超文本標(biāo)記語(yǔ)言的頭部與實(shí)體兩大部分。有三個(gè)雙標(biāo)記符用于頁(yè)面整體結(jié)構(gòu)的確認(rèn)。

標(biāo)記符<html>,說(shuō)明該文件是用超文本標(biāo)記語(yǔ)言（本標(biāo)簽的中文全稱(chēng)）來(lái)描述的,

HTML代碼

它是文件的開(kāi)頭;而</html>,則表示該文件的結(jié)尾，它們是超文本標(biāo)記語(yǔ)言文件的開(kāi)始標(biāo)記和結(jié)尾標(biāo)記。

頭部?jī)?nèi)容

關(guān)于HTML(4張)

<head></head>；這2個(gè)標(biāo)記符分別表示頭部信息的開(kāi)始和結(jié)尾。頭部中包含的標(biāo)記是頁(yè)面的標(biāo)題、序言、說(shuō)明等內(nèi)容，它本身不作為內(nèi)容來(lái)顯示，但影響網(wǎng)頁(yè)顯示的效果。頭部中最常用的標(biāo)記符是標(biāo)題標(biāo)記符和meta標(biāo)記符，其中標(biāo)題標(biāo)記符用于定義網(wǎng)頁(yè)的標(biāo)題，它的內(nèi)容顯示在網(wǎng)頁(yè)窗口的標(biāo)題欄中，網(wǎng)頁(yè)標(biāo)題可被瀏覽器用作書(shū)簽和收藏清單。

設(shè)置文檔標(biāo)題和其它在網(wǎng)頁(yè)中不顯示的信息，比如direction方向、語(yǔ)言代碼Language Code（實(shí)體定義!ENTITY % i18n）、指定字典中的元信息、等等。

主體內(nèi)容

超文本標(biāo)記語(yǔ)言(2張)

<body></body>；網(wǎng)頁(yè)中顯示的實(shí)際內(nèi)容均包含在這2個(gè)正文標(biāo)記符之間。正文標(biāo)記符又稱(chēng)為實(shí)體標(biāo)記。

發(fā)展歷史

超文本標(biāo)記語(yǔ)言（第一版）——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)）：

HTML 2.0——1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)

HTML 3.2——1997年1月14日，W3C推薦標(biāo)準(zhǔn)

HTML 4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)

HTML 4.01（微小改進(jìn)）——1999年12月24日，W3C推薦標(biāo)準(zhǔn)

HTML 5——2014年10月28日，W3C推薦標(biāo)準(zhǔn)[4]??（詳見(jiàn)本處參考資料）

ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日發(fā)布，基于嚴(yán)格的HTML 4.01語(yǔ)法，是國(guó)際標(biāo)準(zhǔn)化組織和國(guó)際電工委員會(huì)的標(biāo)準(zhǔn)。

Wijmo是基于HTML5、jQuery、CSS3和SVG的一個(gè)控件包，能夠滿足構(gòu)建當(dāng)今Web系統(tǒng)的需求?；赪ijmo，您的系統(tǒng)運(yùn)行將更加快速和流暢，外觀也會(huì)更加引人入勝。Wijmo中所有新的控件都是在符合最新的UI設(shè)計(jì)潮流的基礎(chǔ)上，對(duì)新的以及改良后的主題進(jìn)行封裝。優(yōu)美的、專(zhuān)業(yè)的控件外觀會(huì)讓您的應(yīng)用程序引人注目。比如 ComponentOne Studio for ASP .NET Wijmo 控件包內(nèi)置的6個(gè)主題，同時(shí)可以使用jQuery?UI項(xiàng)目提供的 30 多個(gè)主題，甚至可以使用 ThemeRoller 創(chuàng)建屬于您自己的系統(tǒng)主題。

HTML沒(méi)有1.0版本是因?yàn)楫?dāng)時(shí)有很多不同的版本。有些人認(rèn)為蒂姆·伯納斯-李的版本應(yīng)該算初版，這個(gè)版本沒(méi)有IMG元素。當(dāng)時(shí)被稱(chēng)為HTML+的后續(xù)版的開(kāi)發(fā)工作于1993年開(kāi)始，最初是被設(shè)計(jì)成為“HTML的一個(gè)超集”。第一個(gè)正式規(guī)范為了和當(dāng)時(shí)的各種HTML標(biāo)準(zhǔn)區(qū)分開(kāi)來(lái)，使用了2.0作為其版本號(hào)。HTML+的發(fā)展繼續(xù)下去，但是它從未成為標(biāo)準(zhǔn)。

HTML3.0規(guī)范是由當(dāng)時(shí)剛成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字繞排和復(fù)雜數(shù)學(xué)元素的顯示。雖然它是被設(shè)計(jì)用來(lái)兼容2.0版本的，但是實(shí)現(xiàn)這個(gè)標(biāo)準(zhǔn)的工作在當(dāng)時(shí)過(guò)于復(fù)雜，在草案于1995年9月過(guò)期時(shí)，標(biāo)準(zhǔn)開(kāi)發(fā)也因?yàn)槿狈g覽器支持而中止了。3.1版從未被正式提出，而下一個(gè)被提出的版本是開(kāi)發(fā)代號(hào)為Wilbur的HTML 3.2，去掉了大部分3.0中的新特性，但是加入了很多特定瀏覽器，例如Netscape和Mosaic的元素和屬性。HTML對(duì)數(shù)學(xué)公式的支持最后成為另外一個(gè)標(biāo)準(zhǔn)MathML。

HTML 4.0同樣也加入了很多特定瀏覽器的元素和屬性，但是同時(shí)也開(kāi)始“清理”這個(gè)標(biāo)準(zhǔn)，把一些元素和屬性標(biāo)記為過(guò)時(shí)，建議不再使用它們。HTML的未來(lái)和CSS結(jié)合會(huì)更好。

HTML 5草案的前身名為Web?Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。在2008年1月22日，第一份正式草案發(fā)布。

XHTML1.0——發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來(lái)經(jīng)過(guò)修訂于2002年8月1日重新發(fā)布。

XHTML?1.1，于2001年5月31日發(fā)布，W3C推薦標(biāo)準(zhǔn)。

XHTML?2.0，W3C工作草案。

XHTML?5，從XHTML 1.x的更新版，基于HTML 5草案。

HTML4.01 是常見(jiàn)的版本。

相關(guān)要求

HTML

在編輯超文本標(biāo)記語(yǔ)言文件和使用有關(guān)標(biāo)記符時(shí)有一些約定或默認(rèn)的要求。

文本標(biāo)記語(yǔ)言源程序的文件擴(kuò)展名默認(rèn)使用htm（磁盤(pán)操作系統(tǒng)DOS限制的外語(yǔ)縮寫(xiě)為擴(kuò)展名）或html（外語(yǔ)縮寫(xiě)為擴(kuò)展名），以便于操作系統(tǒng)或程序辨認(rèn)，除自定義的漢字?jǐn)U展名。在使用文本編輯器時(shí)，注意修改擴(kuò)展名。而常用的圖像文件的擴(kuò)展名為gif和jpg。

超文本標(biāo)記語(yǔ)言源程序?yàn)槲谋疚募淞袑捒刹皇芟拗?，即多個(gè)標(biāo)記可寫(xiě)成一行，甚至整個(gè)文件可寫(xiě)成一行；若寫(xiě)成多行，瀏覽器一般忽略文件中的回車(chē)符（標(biāo)記指定除外）；對(duì)文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號(hào)（實(shí)體符）“ （注意此字母必須小寫(xiě)，方可空格）”表示非換行空格；表示文件路徑時(shí)使用符號(hào)“/”分隔，文件名及路徑描述可用雙引號(hào)也可不用引號(hào)括起。

標(biāo)記符中的標(biāo)記元素用尖括號(hào)括起來(lái)，帶斜杠的元素表示該標(biāo)記說(shuō)明結(jié)束；大多數(shù)標(biāo)記符必須成對(duì)使用，以表示作用的起始和結(jié)束；標(biāo)記元素忽略大小寫(xiě)，即其作用相同，但完整的空格可使用特殊符號(hào)“ （注意此字母必須小寫(xiě)，方可空格）”；許多標(biāo)記元素具有屬性說(shuō)明，可用參數(shù)對(duì)元素作進(jìn)一步的限定，多個(gè)參數(shù)或?qū)傩皂?xiàng)說(shuō)明次序不限，其間用空格分隔即可；一個(gè)標(biāo)記元素的內(nèi)容可以寫(xiě)成多行。

標(biāo)記符號(hào)，包括尖括號(hào)、標(biāo)記元素、屬性項(xiàng)等必須使用半角的西文字符，而不能使用全角字符。

HTML注釋由"“結(jié)束結(jié)束，例如。注釋內(nèi)容可插入文本中任何位置。任何標(biāo)記若在其最前插入驚嘆號(hào)，即被標(biāo)識(shí)為注釋?zhuān)挥栾@示。

常見(jiàn)實(shí)體

標(biāo)記

數(shù)據(jù)類(lèi)型html示例

超文本標(biāo)記語(yǔ)言定義了多種數(shù)據(jù)類(lèi)型的元素內(nèi)容，如腳本數(shù)據(jù)和樣式表的數(shù)據(jù)，和眾多類(lèi)型的屬性值，包括ID、名稱(chēng)、URI、數(shù)字、長(zhǎng)度單位、語(yǔ)言、媒體描述符、顏色、字符編碼、日期和時(shí)間等。所有這些數(shù)據(jù)類(lèi)型都是專(zhuān)業(yè)的字符數(shù)據(jù)。

繼續(xù)學(xué)習(xí)