迎你來到站長在線的站長學(xué)堂，學(xué)習(xí)html5的知識，今天分享的是《HTML的相關(guān)概念詳解》。主要內(nèi)容有：WWW，W3C，WHATWG，URL，HTTP，XHTML，網(wǎng)站，域名，網(wǎng)站空間，網(wǎng)站程序。

WWW：（World Wide Web，萬維網(wǎng)）是一種建立在Internet上的、全球性的、交互的、多平臺的、分布式的信息資源網(wǎng)絡(luò)。它采用HTML語言描述超文本（Hypertext）文件。這里所說的超文本指的是包含有鏈接關(guān)系的文件，并且包含了多媒體對象的文件。

W3C：( World Wide Web Consortium )萬維網(wǎng)聯(lián)盟，創(chuàng)建于1994年是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機構(gòu)。W3C 制定了結(jié)構(gòu)(xhtml、xml)和表現(xiàn)(CSS)的標(biāo)準(zhǔn)，非贏利性的。

WHATWG：網(wǎng)頁超文本應(yīng)用技術(shù)工作小組，一個以推動網(wǎng)絡(luò)HTML 5 標(biāo)準(zhǔn)為目的而成立的組織。在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。

WWW有3個基本組成部分，分別是URL（統(tǒng)一資源定位器）、HTTP（超文本傳輸協(xié)議）和HTML（超文本標(biāo)識語言）。

URL：（Universal Resource Locators）提供在Web上進(jìn)入資源的統(tǒng)一方法和路徑，使得用戶所要訪問的站點具有唯一性，這就相當(dāng)于我們每個人只有一個身份證號一樣。它說明了鏈接所指向的每個文件的類型及其準(zhǔn)確位置。

HTTP：（Hypertext Transfer Protocol）超文本傳輸協(xié)議是一種網(wǎng)絡(luò)上傳輸數(shù)據(jù)的協(xié)議，專門用于傳輸以“超文本”（Hypertext）或“超媒體”（Hypermedia）的形式提供的信息。

HTML語言：（Hypertext Markup Language，中文通常稱為超文本置標(biāo)語言或超文本標(biāo)記語言）是一種文本類、解釋執(zhí)行的標(biāo)記語言，它是Internet上用于編寫網(wǎng)頁的主要語言。用HTML編寫的超文本文件稱為HTML文件。

XHTML：指可擴展超文本標(biāo)記語言（標(biāo)識語言）（EXtensible HyperText Markup Language）是一種置標(biāo)語言，表現(xiàn)方式與超文本標(biāo)記語言（HTML）類似，不過語法上更加嚴(yán)格。

要把信息發(fā)布到全球，就必須要使用能夠被大眾接受的語言，也就是使用一種大多數(shù)計算機能夠識別的出版語言。在WWW上，通常使用的發(fā)布語言是HTML，即超文本標(biāo)識語言。

HTML5：指的是HTML的第五次重大修改（第5個版本）(HTML5 是 W3C 與 WHATWG 合作的結(jié)果)。

HTML是純文本類型的語言，使用HTML編寫的網(wǎng)頁文件也是標(biāo)準(zhǔn)的純文本文件。

我們可以用任何文本編輯器，例如Windows的“記事本”程序打開它，查看其中的HTML源代碼，也可以在用瀏覽器打開網(wǎng)頁時，通過相應(yīng)的“查看/源文件”命令查看網(wǎng)頁中的HTML代碼。HTML文件可以直接由瀏覽器解釋執(zhí)行，而無須編譯。當(dāng)用瀏覽器打開網(wǎng)頁時，瀏覽器讀取網(wǎng)頁中的HTML代碼，分析其語法結(jié)構(gòu)，然后根據(jù)解釋的結(jié)果顯示網(wǎng)頁內(nèi)容，正是因為如此，網(wǎng)頁顯示的速度同網(wǎng)頁代碼的質(zhì)量有很大的關(guān)系，保持精簡和高效的HTML源代碼是十分重要的。

網(wǎng)站：一個完整的網(wǎng)站，主要由域名，網(wǎng)站空間和網(wǎng)站程序組成。如果我們把網(wǎng)站比喻成一棟房子的話，域名相對于門牌號，代表了地址。網(wǎng)站空間相對于房子的地皮，房子的空間與網(wǎng)站空間的大小相對應(yīng)。網(wǎng)站程序相對于建筑材料和建筑方法了。建房子是需要建筑工人來完成，做網(wǎng)站就是程序員的事情了。

域名：簡單的說就是網(wǎng)站的網(wǎng)址最重要的部分。如本站的域名是olzz.com。輸入哪一個域名就到達(dá)哪一個網(wǎng)站。這相對于房子的門牌號，有了實際的地址，你才知道要去哪里。域名在互聯(lián)網(wǎng)上是唯一的，你注冊了這個域名，別人就不能注冊了，所以那些簡短、有意義的域名，價格就很昂貴。實際中的地址也是一樣，相同大小的房子，北京一環(huán)內(nèi)的是要比大西北沙漠里面的房子要貴。

網(wǎng)站空間：網(wǎng)站空間主要用于存放網(wǎng)頁內(nèi)容的，比如網(wǎng)站的源碼，圖片，視頻，文檔等內(nèi)容。目前主要有兩種，一個是云服務(wù)器，一個是虛擬主機。一臺云服務(wù)器相對于一臺獨立的電腦，通常可以做無數(shù)個網(wǎng)站。一個虛擬主機，就是服務(wù)器里面的一個文件夾，通常來說，一個虛擬主機只能做一個網(wǎng)站。不管是服務(wù)器還是虛擬主機，空間越大就越貴（當(dāng)然其他的配置也會更高）。拿房子來說，一個占地幾個平方的茅草屋和幾萬平方的高樓大廈的成本是不一樣的。

網(wǎng)站程序：網(wǎng)站程序也叫網(wǎng)站源碼，你要建什么功能的網(wǎng)站，就要開發(fā)什么樣的程序。比如購物網(wǎng)站，視頻網(wǎng)站，游戲網(wǎng)站，博客網(wǎng)站等網(wǎng)站程序不一樣，對應(yīng)的功能也是不一樣的。就好比建房子，你建一個 茅草屋和建一個高樓大廈，所用的材料和建筑方法是不一樣的。現(xiàn)在有很多開源的建站程序，比如搭建博客用WordPress、zblog，搭建論壇用discuz。當(dāng)然現(xiàn)成的網(wǎng)站程序的功能不能滿足自己的需求，這就需要對網(wǎng)站的功能進(jìn)行單獨定制。

TML 或超文本標(biāo)記語言 允許 Web 用戶使用元素、標(biāo)簽和屬性創(chuàng)建和構(gòu)造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因為它不能創(chuàng)建動態(tài)功能。

HTML有很多用例，即：

1. 網(wǎng)頁開發(fā)。開發(fā)人員使用 HTML 代碼來設(shè)計瀏覽器如何顯示網(wǎng)頁元素，例如文本、超鏈接和媒體文件。
2. 互聯(lián)網(wǎng)導(dǎo)航。由于 HTML 被大量用于嵌入超鏈接，因此用戶可以輕松地在相關(guān)頁面和網(wǎng)站之間導(dǎo)航和插入鏈接。
3. 網(wǎng)絡(luò)文檔。HTML 使組織和格式化文檔成為可能，類似于 Microsoft Word。
4. 還值得注意的是，HTML 現(xiàn)在被視為官方 Web 標(biāo)準(zhǔn)。萬維網(wǎng)聯(lián)盟 (W3C)維護(hù)和開發(fā) HTML 規(guī)范，同時提供定期更新。

本文將介紹 HTML 的基礎(chǔ)知識，包括它的工作原理、優(yōu)缺點以及它與 CSS 和 JavaScript 的關(guān)系。

什么是 HTML？

HTML（代表超文本標(biāo)記語言）是構(gòu)成大多數(shù)網(wǎng)頁和在線應(yīng)用程序的計算機語言。超文本是用于引用其他文本片段的文本，而標(biāo)記語言是告訴 Web 服務(wù)器文檔的樣式和結(jié)構(gòu)的一系列標(biāo)記。

HTML 是如何工作的

html文件

平均每個網(wǎng)站包含幾個不同的信息 HTML 頁面。例如，主頁、關(guān)于頁面和聯(lián)系頁面都將具有單獨的 HTML 文件。

HTML 文檔是以 .html 或 .htm 擴展名結(jié)尾的文件。Web 瀏覽器讀取 HTML 文件并呈現(xiàn)其內(nèi)容，以便互聯(lián)網(wǎng)用戶可以查看它。

html元素的三個部分

所有 HTML 頁面都有一系列 HTML 元素，由一組標(biāo)簽和屬性組成。HTML 元素是網(wǎng)頁的構(gòu)建塊。標(biāo)簽告訴 Web 瀏覽器元素在哪里開始和結(jié)束，而屬性描述元素的特征。

元素的三個主要部分是：

• 開始標(biāo)簽 - 用于說明元素開始生效的位置。標(biāo)簽用左尖括號和右尖括號包裹。例如，使用開始標(biāo)簽 <p> 創(chuàng)建一個段落。
• 內(nèi)容——這是其他用戶看到的輸出。
• 結(jié)束標(biāo)簽 - 與開始標(biāo)簽相同，但在元素名稱前有一個正斜杠。例如，</p> 結(jié)束一個段落。

這三個部分的組合將創(chuàng)建一個 HTML 元素：

<p>這是在HTML中添加段落的方法。</p>

HTML 元素的另一個關(guān)鍵部分是它的屬性，它有兩個部分——名稱和屬性值。名稱標(biāo)識用戶想要添加的附加信息，并且屬性值給出進(jìn)一步的說明。

例如，添加紫色和 font-family verdana 的樣式元素將如下所示：

< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >

另一個屬性，HTML 類，對于開發(fā)和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。 例如，我們將對標(biāo)題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實現(xiàn)相同的樣式，請在每個開始標(biāo)記后添加 class=”important”：

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多數(shù)元素都有一個開始標(biāo)簽和一個結(jié)束標(biāo)簽，但有些元素不需要結(jié)束標(biāo)簽即可工作，例如空元素。這些元素不使用結(jié)束標(biāo)簽，因為它們沒有內(nèi)容：

< img src= "/" alt= "圖像" >

這個圖像標(biāo)簽有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內(nèi)容，也沒有結(jié)束標(biāo)簽。

最后，每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：

< !DOCTYPE html >

最常用的 HTML 標(biāo)簽和 HTML 元素

目前，有 142 個 HTML 標(biāo)簽可以用于創(chuàng)建各種元素。盡管現(xiàn)代瀏覽器不再支持其中一些標(biāo)簽，但學(xué)習(xí)所有可用的不同元素仍然是有益的。

第二節(jié)將討論最常用的 HTML 標(biāo)簽和兩個主要元素——塊級元素和內(nèi)聯(lián)元素。

塊級元素

塊級元素占據(jù)頁面的整個寬度。它總是在文檔中開始一個新行。例如，標(biāo)題元素將位于與段落元素不同的行中。

每個 HTML 頁面都使用這三個標(biāo)簽：

• <html>標(biāo)簽是定義整個 HTML 文檔的根元素。
• <head> 標(biāo)簽保存頁面標(biāo)題和字符集等元信息。
• <body>標(biāo)簽包含了頁面上出現(xiàn)的所有內(nèi)容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的塊級標(biāo)簽包括：

• 標(biāo)題標(biāo)簽 - 這些范圍從 <h1> 到 <h6>，其中標(biāo)題 h1 的大小最大，當(dāng)它們向上移動到 h6 時變得越來越小。
• 段落標(biāo)簽——全部使用 <p> 標(biāo)簽括起來。
• 列表標(biāo)簽——有不同的變體。<ol> 標(biāo)簽用于有序列表，<ul> 用于無序列表。然后，使用 <li> 標(biāo)記將各個列表項括起來。

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素格式化塊級元素的內(nèi)部內(nèi)容，例如添加鏈接和強調(diào)的字符串。內(nèi)聯(lián)元素最常用于在不破壞內(nèi)容流的情況下格式化文本。

例如，一個 <strong> 標(biāo)簽會以粗體呈現(xiàn)一個元素，而 <em> 標(biāo)簽會以斜體顯示它。超鏈接也是使用 <a> 標(biāo)記和 href 屬性來指示鏈接目標(biāo)的內(nèi)聯(lián)元素：

<a href="https://www.icodingdeu.com/" >點我！</a> 

HTML 演變——HTML 和 HTML5 有什么區(qū)別？

HTML 的第一個版本由 18 個標(biāo)簽組成。從那時起，每個新版本都帶有添加到標(biāo)記中的新標(biāo)簽和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。

HTML 和 HTML5的主要區(qū)別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標(biāo)簽，可以清楚地描述內(nèi)容，例如 <article>、<header> 和 <footer>。

HTML 的優(yōu)點和缺點

就像任何其他計算機語言一樣，HTML 有其優(yōu)點和局限性。以下是 HTML 的優(yōu)缺點：

優(yōu)點：

• 初學(xué)者友好: HTML 具有干凈且一致的標(biāo)記，以及較淺的學(xué)習(xí)曲線。
• 支持領(lǐng)域廣：該語言被廣泛使用，擁有大量資源和龐大的社區(qū)。
• 無障礙：它是開源的并且完全免費。HTML 在所有 Web 瀏覽器中本機運行。
• 靈活的：HTML很容易與PHP和 Node.js等后端語言集成。

就像任何其他計算機語言一樣，HTML 有其優(yōu)點和局限性。以下是 HTML 的優(yōu)缺點：

缺點：

• 靜止的 該語言主要用于靜態(tài)網(wǎng)頁。對于動態(tài)功能，您可能需要使用 JavaScript 或 PHP 等后端語言。
• 單獨的 HTML 頁面 用戶必須為 HTML 創(chuàng)建單獨的網(wǎng)頁，即使元素相同。
• 瀏覽器兼容性 一些瀏覽器采用新特性的速度很慢。有時較舊的瀏覽器并不總是呈現(xiàn)較新的標(biāo)簽。

HTML、CSS 和 Javascript 是如何相關(guān)的

HTML 用于添加文本元素并創(chuàng)建內(nèi)容結(jié)構(gòu)。然而，僅僅建立一個專業(yè)的和完全響應(yīng)的網(wǎng)站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創(chuàng)建絕大多數(shù)網(wǎng)站內(nèi)容。

• CSS 負(fù)責(zé)樣式，例如背景、顏色、布局、間距和動畫。
• JavaScript 添加了動態(tài)功能，例如滑塊、彈出窗口和照片庫。這三種語言是前端開發(fā)的基礎(chǔ)。

結(jié)論

HTML 是 Internet 上的主要標(biāo)記語言。每個 HTML 頁面都有一系列創(chuàng)建網(wǎng)頁或應(yīng)用程序內(nèi)容結(jié)構(gòu)的元素。

HTML 是一種對初學(xué)者友好的語言，有很多支持，主要用于靜態(tài)網(wǎng)站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我們還向您展示了一些在線教學(xué)課程，它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。

如果您有任何其他喜歡的資源來學(xué)習(xí) HTML，請在評論部分告訴我們。