初識(shí)HTML5（二）

TML5基礎(chǔ)

前言

HTML5是新的HTML標(biāo)準(zhǔn)，是對(duì)HTML和XHML的繼承和發(fā)展。學(xué)習(xí)HTML5首先需要了解HTML5的語法基礎(chǔ)。本章將圍繞HTML5文檔基本格式、HTML5語法來進(jìn)行講解。

HTML5文檔基本格式

下面是HTML5最基本的代碼結(jié)構(gòu)：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

1.<!doctype>標(biāo)記

<!doctype>標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范。只有在開頭使用<!doctype>聲明，瀏覽器才能將該網(wǎng)頁作為有效的HTML文檔，并按指定的文檔類型進(jìn)行解析。使用HTML5的DOCTYPE聲明，會(huì)觸發(fā)瀏覽器以標(biāo)準(zhǔn)兼容模式來顯示頁面。

2.<html>標(biāo)記

<html>標(biāo)記位于<!doctype>標(biāo)記之后，也稱為根標(biāo)記，用于告知瀏覽器其自身是一個(gè)HTML文檔。<html>標(biāo)記標(biāo)志著HTML文檔的開始，</html>標(biāo)記表示HTML文檔的結(jié)束。他們之間是文檔的頭部和主體內(nèi)容。

3.<head>標(biāo)記

<head>標(biāo)記用于定義HTML文檔的頭部信息，也稱頭部標(biāo)記，是用來封裝其他位于文檔頭部標(biāo)記的標(biāo)記，如：<meta>、<title>、<link>、<style>、<script>標(biāo)記等。上面的代碼中，<meta>標(biāo)記的屬性charset指的是文檔的字符編碼，“utf-8”表示國際通用字符編碼。<title>標(biāo)記用于告訴用戶這個(gè)頁面是什么，如：百度頁面，在瀏覽器導(dǎo)航欄的最上方百度所屬頁面，會(huì)有一個(gè)百度的標(biāo)題。<link>標(biāo)記一般用來引入外部的CSS文件。<style>標(biāo)記用來包裹與html標(biāo)簽對(duì)應(yīng)的CSS樣式，通常與選擇器結(jié)合起來使用。<script>標(biāo)記用于引入外部的JavaScript（js）文件，如果<script>標(biāo)記位于<body>標(biāo)記中，就可以將js代碼寫在<script>標(biāo)記中。

注意：一個(gè)HTML文檔中只能包含一對(duì)<head>標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示在頁面中。

部分標(biāo)記會(huì)在下一章節(jié)進(jìn)行詳細(xì)解釋

4.<body>標(biāo)記

<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)記內(nèi)，<body>標(biāo)記中的內(nèi)容才是最終展示給用戶看的。

一個(gè)HTML文檔只能包含一對(duì)<body>標(biāo)記，且必須位于<html>標(biāo)記內(nèi)部，<head>標(biāo)記的后面，與<head>標(biāo)記是并列關(guān)系。

HTML5語法

1.標(biāo)簽不區(qū)分大小寫

為了兼容各個(gè)瀏覽器，HTML5采用寬松的語法格式，標(biāo)簽可以不區(qū)分大小寫就是HTML5語法變化的重要體現(xiàn)

<p>開始標(biāo)記的p標(biāo)記小寫，結(jié)束標(biāo)記的p標(biāo)記大寫</P>

上面的代碼標(biāo)簽的開始和結(jié)束標(biāo)簽大小寫雖然不同，但它是符合HTML5語法的規(guī)范的。

2.允許屬性值不使用引號(hào)

在HTML5中，屬性值不放在引號(hào)中也是正確的，如：

<input type=text readonly=readonly/>
<input type=checkbox checked=a/>

這段代碼等價(jià)于：

<input type="text" readonly="readonly"/>
<input type="checkbox" checked="a"/>

3.允許部分屬性值的屬性省略

在HTML5中，部分標(biāo)志性的屬性的屬性值是可以省略的，如：

<input type="text" readonly="readonly"/>
<input type="checkbox" checked="checked"/>

可以省略為：

<input type="text" readonly/>
<input type="checkbox" checked/>

下面是一張關(guān)于HTML5可以省略屬性值的屬性表：

提示：雖然HTML5對(duì)于語法的規(guī)范不是很嚴(yán)格，但是個(gè)人建議，標(biāo)簽采用小寫，引號(hào)加上，這兩點(diǎn)是為了讓頁面看起來美觀，也是為了方便后面頁面編寫出錯(cuò)時(shí)找錯(cuò)。

認(rèn)證的站長暫時(shí)還不能使用代碼，

可以先認(rèn)證再插入代碼

html組件和js組件使用權(quán)限限制

*頁面: 只允許經(jīng)過認(rèn)證的用戶使用html組件和js組件

*文章: 只允許經(jīng)過認(rèn)證的用戶使用js組件

html組件和js組件只允許使用規(guī)定的標(biāo)簽

*html組件: a, code, pre, blockquote, ul, ol, li, table, thead, tbody, tfoot, tr, td, th, dd, dl, dt, s, u, b, i, font, span, strong, br, em, hr, sub, sup, div, section, p, h1, h2, h3, h4, h5, h6, vedio, audio, svg, img, style, iframe, fidldset, animate, text, tspan

*js組件: , a, code, pre, blockquote, ul, ol, li, table, thead, tbody, tfoot, tr, td, th, dd, dl, dt, s, u, b, i, font, span, strong, br, em, hr, sub, sup, div, section, p, h1, h2, h3, h4, h5, h6, vedio, audio, svg, img, style, iframe, fidldset, animate, text, tspan

所有標(biāo)簽屬性限制

*不允許使用on開頭的屬性名

快站的技術(shù)小哥哥們限定了以上可使用的標(biāo)簽，如果有所補(bǔ)充歡迎在下方留言回復(fù)，或點(diǎn)擊【閱讀原文】在社區(qū)中回復(fù)，我們會(huì)考慮酌情開放

更多快站資訊，點(diǎn)擊進(jìn)入快站官網(wǎng)（www.kuaizhan.com）

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

HTML有很多用例，即：

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

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

什么是 HTML？

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

HTML 是如何工作的

在國內(nèi)的網(wǎng)站上找了一圈，這應(yīng)該是介紹歷史最細(xì)致的，長按保存手機(jī)里翻譯

html文件

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

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

html元素的三個(gè)部分

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

元素的三個(gè)主要部分是：

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

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

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

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

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

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

另一個(gè)屬性，HTML 類，對(duì)于開發(fā)和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。例如，我們將對(duì)標(biāo)題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實(shí)現(xiàn)相同的樣式，請(qǐng)?jiān)诿總€(gè)開始標(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ù)元素都有一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽，但有些元素不需要結(jié)束標(biāo)簽即可工作，例如空元素。這些元素不使用結(jié)束標(biāo)簽，因?yàn)樗鼈儧]有內(nèi)容：

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

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

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

< !DOCTYPE html >

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

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

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

塊級(jí)元素

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

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

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

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

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

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

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

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

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

<a href="https://www.icodingdeu.com/" >點(diǎn)我！</a>

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

HTML 的第一個(gè)版本由 18 個(gè)標(biāo)簽組成。從那時(shí)起，每個(gè)新版本都帶有添加到標(biāo)記中的新標(biāo)簽和屬性。迄今為止，該語言最重大的升級(jí)是 2014 年引入的 HTML5。
HTML 和 HTML5的主要區(qū)別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個(gè)語義標(biāo)簽，可以清楚地描述內(nèi)容，例如 <article>、<header> 和 <footer>。

HTML 的優(yōu)點(diǎn)和缺點(diǎn)

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

優(yōu)點(diǎn)：

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

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

缺點(diǎn)：

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

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

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

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

結(jié)論

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

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

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

如果您有任何其他喜歡的資源來學(xué)習(xí) HTML，請(qǐng)?jiān)谠u(píng)論部分告訴我們。

在線咨詢

上一篇：一文搞懂瀏覽器緩存機(jī)制
下一篇：前端篇：常用的網(wǎng)站開發(fā)工具

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商