HTML手冊：開發(fā)人員HTML 便捷指南

時間：2023-09-03 20:24:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-03 20:24:01 來源：網(wǎng)站運(yùn)營

HTML手冊：開發(fā)人員HTML 便捷指南：介紹

歡迎大家閱讀HTML手冊！我寫這本手冊是為了幫助大家快速學(xué)習(xí) HTML 并熟悉高級 HTML 主題。

HTML 是超文本標(biāo)記語言的縮寫，是 Web 最基本的構(gòu)建基塊之一。

HTML 正式誕生于 1993 年，從那以后它演變成現(xiàn)在的狀態(tài)，從簡單的文本文檔發(fā)展為強(qiáng)大的 Web 應(yīng)用程序。

本手冊面向廣大讀者。

首先是初學(xué)者。我以簡潔而全面的方式從零開始解釋 HTML，因此您可以使用本書從基礎(chǔ)上學(xué)習(xí) HTML。

然后，專業(yè)人士。 HTML 通常被認(rèn)為是不太重要的學(xué)習(xí)。這樣講也是有一定道理的。

然而，許多事情對大部分人來說還是晦澀難懂的。包括我在內(nèi)。我寫這本手冊是為了幫助我理解該主題，因?yàn)楫?dāng)我需要解釋一些東西時，最好確保我先從內(nèi)而外地知道這件事。

即使大家在日常工作中不編寫 HTML，了解 HTML 的工作方式也可以幫助您在需要了解它時（例如在調(diào)整網(wǎng)頁時）省去一些麻煩。

您可以通過 happyzjp@gmail.com 與我聯(lián)系。

我的網(wǎng)站是 http://www.icoderoad.com。

圖書索引

前言

HTML 基礎(chǔ)

文件標(biāo)題

文件主體

與文字互動的標(biāo)簽

鏈接

容器標(biāo)簽和頁面結(jié)構(gòu) HTML

樣式

表格

多媒體標(biāo)簽：音頻和視頻

框架

圖像

可用性

前言

HTML 是稱為 Web 的奇跡的基礎(chǔ)。

在這組相當(dāng)簡單且有限的規(guī)則之下，有著不可思議的力量，它使我們–開發(fā)人員，制作人員，設(shè)計師，作家和修補(bǔ)匠–為全球各地的人們制作文檔，應(yīng)用程序和體驗(yàn)。

我的第一本 HTML 手冊被稱為“ HTML ”。 它是一個很長，很大的頁面。

20 多年過去了，HTML 仍然是 Web 的基礎(chǔ)，并且到現(xiàn)在變化很小。

當(dāng)然，我們有了更多的語義標(biāo)記，表示性 HTML 不再是一回事，由 CSS 負(fù)責(zé)了事物的設(shè)計

HTML 的成功基于一件事：簡單性。

當(dāng)最終人們意識到事情太復(fù)雜了時，它拒絕通過 XHTML 被劫持為 XML 方言。

之所以這樣做，是因?yàn)樗鼮槲覀兲峁┝肆硪粋€功能：兼容性。 當(dāng)然，它有一些規(guī)則，但是學(xué)習(xí)這些規(guī)則之后，您將擁有很多自由。

瀏覽器變得富有彈性，并且在解析和向用戶呈現(xiàn) HTML 時總是盡可能做得更好。

整個 Web 平臺做對了一件事情：它永遠(yuǎn)不會破壞向后兼容性。 令人難以置信的是，我們可以回溯到 1991 年編寫的 HTML 文檔，它們看上去和那時一樣。

我們甚至知道第一個網(wǎng)頁是什么。 就是這樣的：http://info.cern.ch/hypertext/WWW/TheProject.html

由于 Web 和 HTML 的另一個重要功能，您可以看到頁面的源代碼：我們可以檢查任何網(wǎng)頁的 HTML。

不要認(rèn)為這是理所當(dāng)然的。 我不知道有其他平臺可以提供這種功能。

內(nèi)置在任何瀏覽器中的出色開發(fā)人員工具使我們能夠檢查世界上任何人編寫的 HTML 并從中汲取靈感。

如果您不熟悉 HTML，那么本手冊旨在幫助您入門。 如果您是一位經(jīng)驗(yàn)豐富的 Web 開發(fā)人員，這本手冊將提高您的知識。

即使我在 Web 上使用了 20 多年，我在編寫它時也學(xué)到了很多東西，而且我相信您也會發(fā)現(xiàn)一些新東西。

或者，您將重新學(xué)習(xí)忘記的舊知識。

無論如何，本手冊的目標(biāo)是對您有用，我希望它能成功。

HTML 基礎(chǔ)

HTML 是WHATWG定義的標(biāo)準(zhǔn)，WHATWG 是 Web 超文本應(yīng)用程序技術(shù)工作組的縮寫，該組織由使用最流行的 Web 瀏覽器的人員組成。這意味著它基本上由 Google，Mozilla，Apple 和 Microsoft 控制。

過去，W3C（萬維網(wǎng)聯(lián)盟）是負(fù)責(zé)創(chuàng)建 HTML 標(biāo)準(zhǔn)的組織。

當(dāng)很明顯 W3C 向 XHTML 推進(jìn)不是一個好主意時，該控件非正式地從 W3C 轉(zhuǎn)移到 WHATWG。

如果您從未聽說過 XHTML，那么這里有個簡短的故事。在 2000 年代初期，我們都相信 Web 的未來（尤其是 XML）。因此，HTML 已從基于 SGML 的創(chuàng)作語言轉(zhuǎn)變?yōu)?XML 標(biāo)記語言。

這是一個很大的變化。我們必須知道并尊重更多規(guī)則。更嚴(yán)格的規(guī)則。

最終，瀏覽器供應(yīng)商意識到這不是 Web 的正確路徑，于是他們推遲了，創(chuàng)建了現(xiàn)在稱為 HTML5 的東西。

W3C 并未真正同意放棄對 HTML 的控制，多年來，我們有 2 個相互競爭的標(biāo)準(zhǔn)，每個標(biāo)準(zhǔn)旨在成為正式標(biāo)準(zhǔn)。最終，W3C 于 2019 年 5 月 28 日正式宣布，“真正的” HTML 版本是 WHATWG 發(fā)布的版本。

我提到了 HTML5。讓我解釋一下這個小故事。我知道，到目前為止，這有點(diǎn)令人困惑，就像涉及許多演員的生活中的許多事情一樣，但它也令人著迷。

我們在 1993 年擁有HTML 版本 1。這是原始的 RFC。

HTML 2于 1995 年問世。

我們在 1997 年 1 月獲得HTML 3，在 1997 年 12 月獲得HTML 4。

真是繁忙的時間！

20 多年過去了，我們擁有了整個 XHTML，最終我們有了這個 HTML5“東西”，它不再僅僅是 HTML。

HTML5 是一個術(shù)語，現(xiàn)在定義了整套技術(shù)，其中包括 HTML，但增加了許多 API 和標(biāo)準(zhǔn)，例如 WebGL，SVG 等。

這里要了解的關(guān)鍵是：現(xiàn)在沒有（任何）像 HTML 版本這樣的東西。這是當(dāng)前的標(biāo)準(zhǔn)。類似于 CSS，稱為“ 3”，但實(shí)際上是一堆獨(dú)立開發(fā)的獨(dú)立模塊。與 JavaScript 一樣，我們每年都有一個新版本，但是如今，唯一重要的是引擎實(shí)現(xiàn)了哪些單獨(dú)的功能。

是的，我們稱它為 HTML5，但是 HTML4 是 1997 年發(fā)布的。對于任何事物來說，這都是很長的時間，更不用說在網(wǎng)絡(luò)上了。

這是標(biāo)準(zhǔn)現(xiàn)在“生效”的地方：https://html.spec.whatwg.org/multipage。

HTML 是我們用來構(gòu)造我們在 Web 上消費(fèi)的內(nèi)容的標(biāo)記語言。

HTML 以不同的方式提供給瀏覽器。

它可以由根據(jù)請求或會話數(shù)據(jù)構(gòu)建它的服務(wù)器端應(yīng)用程序生成，例如 Rails 或 Laravel 或 Django 應(yīng)用程序。

它可以由動態(tài)生成 HTML 的 JavaScript 客戶端應(yīng)用程序生成。

在最簡單的情況下，它可以存儲在文件中，并由 Web 服務(wù)器提供給瀏覽器。

讓我們深入探討最后一種情況。盡管實(shí)際上，它可能是生成 HTML 的最不流行的方法，但是了解基本的構(gòu)建基塊仍然是必不可少的。

按照約定，HTML 文件以.html 或.htm 擴(kuò)展名保存。

在此文件中，我們使用tags來組織內(nèi)容。

標(biāo)簽包裝內(nèi)容，每個標(biāo)簽為其包裝的文本賦予特殊含義。

讓我們舉幾個例子。

這個 HTML 片段使用 p 標(biāo)簽創(chuàng)建了一個段落：

<p>A paragraph of text</p>

此 HTML 代碼段使用 ul 標(biāo)簽（表示無序列表）和 litags（表示列表項）創(chuàng)建項目列表：

<ul>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

當(dāng)瀏覽器為 HTML 頁面提供服務(wù)時，將解析標(biāo)簽，然后瀏覽器將根據(jù)定義其視覺外觀的規(guī)則來渲染元素。

其中一些規(guī)則是內(nèi)置的，例如列表的呈現(xiàn)方式或鏈接的藍(lán)色底線顯示方式。

其他一些規(guī)則由您使用 CSS 設(shè)置。

HTML 不是演示性的。它與事物的外觀無關(guān)。相反，它關(guān)心事物的含義。

瀏覽器由 CSS 語言來決定外觀，由誰來構(gòu)建頁面來定義指令。

現(xiàn)在，我做的兩個例子是在頁面上下文之外獲取的 HTML 代碼段。

HTML 頁面結(jié)構(gòu)

讓我們舉一個合適的 HTML 頁面的例子。

事情從文檔類型聲明（也稱為 doctype）開始，一種告訴瀏覽器這是 HTML 頁面的方式，以及我們使用的 HTML 版本。

Modern HTML uses this doctype:

<！DOCTYPE html>

然后，我們有了 html 元素，它具有一個開始和結(jié)束標(biāo)記：

<！DOCTYPE html>

<html>

...

</ html>

大多數(shù)標(biāo)簽與開始標(biāo)簽和結(jié)束標(biāo)簽成對出現(xiàn)。結(jié)束標(biāo)記與開始標(biāo)記的書寫方式相同，但帶有/：

<sometag>some content</sometag>

有幾個自動關(guān)閉標(biāo)簽，這意味著它們不需要單獨(dú)的關(guān)閉標(biāo)簽，因?yàn)樗鼈冎胁话魏蝺?nèi)容。

html 起始標(biāo)記用于文檔的開頭，緊隨文檔類型聲明之后。

html 結(jié)束標(biāo)記是 HTML 文檔中存在的最后一件事。

在 html 元素內(nèi)，我們有 2 個元素：head 和 body：

<！DOCTYPE html>

<html>

<head>

...

</ head>

<body>

...

</ body>

</ html>

在頭部內(nèi)部，我們將具有創(chuàng)建網(wǎng)頁所必需的標(biāo)簽，例如標(biāo)題，元數(shù)據(jù)以及內(nèi)部或外部 CSS 和 JavaScript。通常情況下，不會直接顯示在頁面上的東西只會幫助瀏覽器（或 Google 搜索機(jī)器人等機(jī)器人）正確顯示它。

在主體內(nèi)部，我們將獲得頁面的內(nèi)容?？梢姷臇|西。

標(biāo)簽與元素

我提到了標(biāo)簽和元素。有什么不同？

元素具有開始標(biāo)記和結(jié)束標(biāo)記。在此示例中，我們使用 p 開始和結(jié)束標(biāo)記創(chuàng)建 p 元素：

<p>A paragraph of text</p>

因此，一個元素構(gòu)成了整個包裝：

起始標(biāo)簽

文字內(nèi)容（可能還有其他元素）

結(jié)束標(biāo)簽

如果元素沒有結(jié)束標(biāo)記，則僅使用開始標(biāo)記編寫，并且不能包含任何文本內(nèi)容。

就是說，我可能會在書中使用標(biāo)簽或元素一詞來表示相同的意思，除非我明確提到開始標(biāo)簽或結(jié)束標(biāo)簽。

屬性

元素的開始標(biāo)記可以包含我們可以附加的特殊信息片段，稱為屬性。

屬性具有 key =“ value”語法：

<p class="a-class">A paragraph of text</p>

您也可以使用單引號，但是在 HTML 中使用雙引號是一個很好的約定。

我們可以有很多：

<p class="a-class" id="an-id">A paragraph of text</p>

并且某些屬性是布爾值，這意味著您只需要鍵：

<script defer src =“ file.js”> </ script>

class 和 id 屬性是您會發(fā)現(xiàn)最常用的兩個屬性。

它們具有特殊的含義，并且在 CSS 和 JavaScript 中都非常有用。

兩者之間的區(qū)別在于，id 在網(wǎng)頁的上下文中是唯一的；它不能重復(fù)。

另一方面，類可以在多個元素上多次出現(xiàn)。

另外，id 只是一個值。類可以包含多個值，以空格分隔：

<p class="a-class another-class">A paragraph of text</p>

通常使用破折號-在類值中分隔單詞，但這只是一個約定。

這些只是您可能擁有的兩個屬性。有些屬性僅用于一個標(biāo)簽。他們是高度專業(yè)化的。

可以以更通用的方式使用其他屬性。您剛剛看到了 id 和 class，但是我們還有其他一些，例如 style，可用于在元素上插入內(nèi)聯(lián) CSS 規(guī)則。

不區(qū)分大小寫

HTML 不區(qū)分大小寫。標(biāo)簽可以全部大寫，也可以小寫。在早期，大寫是常態(tài)。今天，小寫字母已成為規(guī)范。這是一個慣例。

您通常這樣寫：

<p>A paragraph of text</p>

不像這樣：

<P>A paragraph of text</P>

空格

相當(dāng)重要在 HTML 中，即使您在一行中添加了多個空格，瀏覽器的 CSS 引擎也會將其折疊。

例如，本段的呈現(xiàn)：

<p>A paragraph of text</p>

與此相同：

<p> A paragraph of text</p> 與此相同：

<p>A paragraph

of

text </p>

使用空白 CSS 屬性，您可以更改行為方式。您可以在CSS Spec中找到有關(guān) CSS 如何處理空白的更多信息。

我通常喜歡

<p>A paragraph of text</p>

要么

<p>

A paragraph of text

</p>

嵌套標(biāo)簽應(yīng)縮進(jìn) 2 或 4 個字符，具體取決于您的偏好：

<body>

<p>

A paragraph of text

</p>

<ul>

<li>A list item</li>

</ul>

</body>

注意：在特殊情況下，您可以使用＆nbsp; HTML 實(shí)體（首字母縮寫，表示不間斷空格）--有關(guān) HTML 實(shí)體的更多信息。我認(rèn)為這不應(yīng)被濫用。始終首選使用 CSS 來更改視覺呈現(xiàn)。

文件標(biāo)題

head 標(biāo)簽包含定義文檔屬性的特殊標(biāo)簽。

它總是寫在 body 標(biāo)簽之前，緊接在 html 標(biāo)簽之后：

<!DOCTYPE html>

<html>

<head>

...

</head>

...

</html>

我們永遠(yuǎn)不會在此標(biāo)簽上使用屬性。而且我們不會在其中編寫內(nèi)容。

它只是其他標(biāo)簽的容器。在其中，根據(jù)您需要執(zhí)行的操作，我們可以使用多種標(biāo)簽：

title 標(biāo)題

script 腳本

Noscript

link 鏈接

style 樣式

base 基礎(chǔ)

meta 元素

標(biāo)題標(biāo)簽

title 標(biāo)簽確定頁面標(biāo)題。標(biāo)題顯示在瀏覽器中，它尤其重要，因?yàn)樗撬阉饕鎯?yōu)化（SEO）的關(guān)鍵因素之一。

腳本標(biāo)簽

此標(biāo)記用于將 JavaScript 添加到頁面中。

您可以使用開始標(biāo)記，JavaScript 代碼和結(jié)束標(biāo)記來內(nèi)聯(lián)包含它：

<script>

..some JS

</script>

或者，您可以使用 src 屬性加載外部 JavaScript 文件：

<script src="file.js"></script>

默認(rèn)情況下，type 屬性設(shè)置為 text / javascript，因此它是完全可選的。

關(guān)于此標(biāo)簽，有一些非常重要的知識。

有時，在頁面底部</ body>標(biāo)記之前使用此標(biāo)記。為什么？出于性能原因。

默認(rèn)情況下，加載腳本會阻止頁面的呈現(xiàn)，直到解析并加載腳本為止。

通過將其放在頁面底部，可以在已經(jīng)解析并加載整個頁面之后加載并執(zhí)行腳本，與保留在 head 標(biāo)記中相比，可以為用戶提供更好的體驗(yàn)。

我的看法是，這現(xiàn)在是不好的做法。讓腳本保留在 head 標(biāo)簽中。

在現(xiàn)代 JavaScript 中，我們有一個替代方案，那就是比將腳本保留在頁面底部（defer 屬性）更有效。這是一個相對于當(dāng)前 URL 加載 file.js 文件的示例：

<script defer src="file.js"></script>

這種情況觸發(fā)了到快速加載頁面和快速加載 JavaScript 的更快路徑。

注意：async 屬性是相似的，但是我認(rèn)為比 defer 更糟糕。我會在https://flaviocopes.com/javascript-async-defer/

Noscript 標(biāo)簽

此標(biāo)記用于檢測何時在瀏覽器中禁用了腳本。

注意：用戶可以選擇在瀏覽器設(shè)置中禁用 JavaScript 腳本。否則，瀏覽器可能默認(rèn)不支持它們。

根據(jù)將其放置在文檔頭還是文檔正文中，它的用法有所不同。

我們現(xiàn)在正在談?wù)撐臋n頭，因此讓我們首先介紹這種用法。

在這種情況下，noscript 標(biāo)簽只能包含其他標(biāo)簽：

link 鏈接標(biāo)簽

style 樣式標(biāo)簽

meta 元標(biāo)記

如果禁用了腳本，則更改頁面提供的資源或元信息。

在此示例中，我使用 no-script-alert 類設(shè)置了一個元素，以顯示是否禁用了腳本，因?yàn)樗秋@示的：默認(rèn)情況下，沒有顯示：

<!DOCTYPE html>

<html>

<head>

...

<noscript>

<style>

.no-script-alert {

display: block;

}

</style>

</noscript>

...

</head>

...

</html>

讓我們解決另一種情況：如果放在正文中，它可以包含在 UI 中呈現(xiàn)的內(nèi)容，例如段落和其他標(biāo)簽。

鏈接標(biāo)簽

鏈接標(biāo)簽用于設(shè)置文檔和其他資源之間的關(guān)系。

它主要用于鏈接要加載的外部 CSS 文件。

該元素沒有結(jié)束標(biāo)簽

Usage:

用法：

<!DOCTYPE html>

<html>

<head>

...

<link href="file.css" rel="stylesheet">

...

</head>

...

</html>

media 屬性允許根據(jù)設(shè)備功能加載不同的樣式表：

<link href="file.css" media="screen" rel="stylesheet">

<link href="print.css" media="print" rel="stylesheet">

我們還可以鏈接到樣式表以外的資源。

例如，我們可以使用

<link rel="alternate" type="application/rss+xml" href="/index.xml">

或者我們可以使用以下方式關(guān)聯(lián)收藏夾圖標(biāo)：

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">

此標(biāo)記還用于多頁內(nèi)容，以使用 rel =“ prev”和 rel =“ next”指示上一頁和下一頁。主要用于 Google。截至 2019 年，Google 宣布不再使用此標(biāo)簽，因?yàn)闆]有它它可以找到正確的頁面結(jié)構(gòu)。

樣式標(biāo)簽

此標(biāo)記可用于將樣式添加到文檔中，而不是加載外部樣式表。

用法：

<style>

.some-css {}

</style>

與 link 標(biāo)簽一樣，您可以使用 media 屬性僅在指定的介質(zhì)上使用該 CSS：

<style media="print">

.some-css {}

</style>

基本標(biāo)簽

此標(biāo)記用于為頁面中包含的所有相對 URL 設(shè)置基本 URL。

<!DOCTYPE html>

<html>

<head>

...

<base href="https://flaviocopes.com/">

...

</head>

...

</html>

元標(biāo)記

元標(biāo)記執(zhí)行各種任務(wù)，它們非常非常重要。

特別是對于 SEO。

元元素僅具有開始標(biāo)記。

最基本的一個是 description meta 標(biāo)簽：

<meta name="description" content="A nice page">

如果 Google 發(fā)現(xiàn)比頁面上的內(nèi)容更好地描述頁面，則可以使用它在結(jié)果頁面中生成頁面描述（不要問我怎么做）。

字符集元標(biāo)記用于設(shè)置頁面字符編碼。 utf-8 在大多數(shù)情況下：

<meta charset="utf-8">

robots 元標(biāo)記可指示搜索引擎機(jī)械手是否對頁面建立索引：

<meta name="robots" content="noindex">

或者他們是否應(yīng)該遵循鏈接：

<meta name="robots" content="nofollow">

You can set nofollow on individual links, too. This is how you can set nofollow globally.

您也可以在單個鏈接上設(shè)置 nofollow。這樣可以全局設(shè)置 nofollow。

您可以將它們組合：

<meta name="robots" content="noindex, nofollow">

默認(rèn)行為是索引，請遵循。

您可以使用其他屬性，包括 nosnippet，noarchive，noimageindex 等。

您也可以告訴 Google 而不是定位所有搜索引擎：

<meta name="googlebot" content="noindex, nofollow">

其他搜索引擎也可能具有自己的 meta 標(biāo)簽。

說到這一點(diǎn)，我們可以告訴 Google 禁用某些功能。這會阻止搜索引擎結(jié)果中的翻譯功能：

視口 meta 標(biāo)簽用于告訴瀏覽器根據(jù)設(shè)備寬度設(shè)置頁面寬度。

<meta name="viewport" content="width=device-width, initial-scale=1">

查看有關(guān)此標(biāo)簽的更多信息。

另一個比較流行的 meta 標(biāo)簽是 http-equiv =“ refresh”標(biāo)簽。此行告訴瀏覽器等待 3 秒鐘，然后重定向到該其他頁面：

<meta http-equiv="refresh" content="3;url=http://flaviocopes.com/another-page">

使用 0 而不是 3 將盡快重定向。

這不是完整的參考；存在其他較少使用的元標(biāo)記。

介紹完本文檔標(biāo)題后，我們就可以開始深入研究文檔正文了。

文件主體

在 head 標(biāo)簽之后，我們在 HTML 文檔中只能有一件東西：body 元素。

<!DOCTYPE html>

<html>

<head>

...

</head>

<body>

...

</body>

</html>

就像 head 和 html 標(biāo)簽一樣，我們在一頁中只能有一個 body 標(biāo)簽。

在 body 標(biāo)簽內(nèi)，我們具有定義頁面內(nèi)容的所有標(biāo)簽。

從技術(shù)上講，開始和結(jié)束標(biāo)記是可選的。但是我認(rèn)為添加它們是一個好習(xí)慣。為了清楚起見。

在下一章中，我們將定義可在頁面正文中使用的各種標(biāo)簽。

但是，在此之前，我們必須在塊元素和內(nèi)聯(lián)元素之間引入?yún)^(qū)別。

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

在頁面正文中定義的視覺元素通?？梢苑譃閮深悾?br>
塊元素（p，div，標(biāo)題元素，列表和列表項，...）

內(nèi)聯(lián)元素（a，span，img，...）

有什么區(qū)別？

塊元素位于頁面中時，不允許其他元素位于它們旁邊。在左邊或右邊。

相反，內(nèi)聯(lián)元素可以坐在其他內(nèi)聯(lián)元素旁邊。

區(qū)別還在于我們可以使用 CSS 編輯的視覺屬性。我們可以更改塊元素的寬度/高度，邊距，填充和邊框。我們不能對內(nèi)聯(lián)元素執(zhí)行此操作。

請注意，使用 CSS 我們可以更改每個元素的默認(rèn)設(shè)置，例如將 p 標(biāo)簽設(shè)置為內(nèi)聯(lián)，或?qū)?span 設(shè)置為 block 元素。

另一個區(qū)別是內(nèi)聯(lián)元素可以包含在塊元素中。反之則不成立。

某些塊元素可以包含其他塊元素，但這要視情況而定。例如，p 標(biāo)簽不允許這種選項。

與文字互動的標(biāo)簽

p 標(biāo)簽

該標(biāo)簽定義了一段文本。

<p>Some text</p>

這是一個塊元素。

在其中，我們可以添加任何喜歡的內(nèi)聯(lián)元素，例如 span 或 a。

我們不能添加塊元素。

我們不能將 p 元素嵌套到另一個元素中。

默認(rèn)情況下，瀏覽器設(shè)置段落樣式的頂部和底部為空白。在 Chrome 中為 16px，但實(shí)際值可能因?yàn)g覽器而異。

這將導(dǎo)致兩個連續(xù)的段落被隔開，從而復(fù)制了我們在打印文本中所認(rèn)為的“段落”。

span 標(biāo)簽

這是一個內(nèi)聯(lián)標(biāo)簽，可用于在可使用 CSS 定位的段落中創(chuàng)建一個部分：

<p>A part of the text <span>and here another part</span></p>

br 標(biāo)簽

此標(biāo)記表示換行符。這是一個內(nèi)聯(lián)元素，不需要結(jié)束標(biāo)記。

我們使用它在 p 標(biāo)記內(nèi)創(chuàng)建新行，而無需創(chuàng)建新段落。

與創(chuàng)建新段落相比，它不會增加額外的間距。

<p>Some text<br>A new line</p>

標(biāo)題標(biāo)簽

HTML 為我們提供了 6 個標(biāo)題標(biāo)簽。從最重要到最不重要，我們有 h1，h2，h3，h4，h5，h6。

通常，頁面將具有一個 h1 元素，即頁面標(biāo)題。然后，根據(jù)頁面內(nèi)容，您可能會有一個或多個 h2 元素。

標(biāo)題，尤其是標(biāo)題組織，對于 SEO 也是必不可少的，搜索引擎以各種方式使用它們。

默認(rèn)情況下，瀏覽器將使 h1 標(biāo)簽變大，并且隨著 h 附近的數(shù)字增加，元素的大小將減?。?br>









所有標(biāo)題都是塊元素。它們不能包含其他元素，而只能是文本。

strong 標(biāo)簽

此標(biāo)記用于將其中的文本標(biāo)記為強(qiáng)。這非常重要，它不是視覺提示，而是語義提示。根據(jù)使用的介質(zhì)，其解釋將有所不同。

默認(rèn)情況下，瀏覽器使該標(biāo)記中的文本變?yōu)榇煮w。

em 標(biāo)簽

此標(biāo)記用于標(biāo)記其中強(qiáng)調(diào)的文本。就像強(qiáng)一樣，它不是視覺提示，而是語義提示。

瀏覽器默認(rèn)情況下以斜體顯示文本。

Quotes

blockquote HTML 標(biāo)記可用于在文本中插入引文。

默認(rèn)情況下，瀏覽器對 blockquote 元素應(yīng)用邊距。 Chrome 會應(yīng)用 40px 左右邊距，以及 10px 上下邊距。

q HTML 標(biāo)記用于內(nèi)聯(lián)引號。

水平線

并非真正基于文本，但是 hr 標(biāo)簽通常在頁面內(nèi)使用。這表示水平尺，并在頁面中添加一條水平線。

有助于分隔頁面中的各個部分。

代碼塊

code 標(biāo)簽對于顯示代碼特別有用，因?yàn)闉g覽器為它提供了等寬字體。

這通常是瀏覽器唯一要做的。這是 Chrome 應(yīng)用的 CSS：

code {

font-family: monospace;

}

此標(biāo)記通常包裝在 pre 標(biāo)記中，因?yàn)榇a元素會忽略空格和換行符。像 p 標(biāo)簽一樣。

Chrome 會預(yù)先提供此默認(rèn)樣式：

pre {

display: block;

font-family: monospace;

white-space: pre;

margin: 1em 0px;

}

這可以防止空格崩潰并使其成為塊元素。

列表

我們有 3 種類型的列表：

無序列表

有序列表

定義清單

使用 ul 標(biāo)簽創(chuàng)建無序列表。列表中的每個項目都是使用 li 標(biāo)簽創(chuàng)建的：

<ul>

<li>First</li>

<li>Second</li>

</ul>

有序列表是相似的，只是用 ol 標(biāo)簽制成：

<ol>

<li>First</li>

<li>Second</li>

</ol>

兩者之間的區(qū)別在于，有序列表在每個項目之前都有一個數(shù)字：










定義列表有些不同。您有一個術(shù)語及其定義：

<dl>

<dt>Flavio</dt>

<dd>The name</dd>

<dt>Copes</dt>

<dd>The surname</dd>

</dl>

這是瀏覽器通常呈現(xiàn)它們的方式：










我必須說，您很少在野外看到它們，肯定不會像 ul 和 ol 那樣多，但是有時它們可 能有用。

其他文字標(biāo)簽

有許多具有演示目的的標(biāo)簽：

mark 標(biāo)簽

ins 標(biāo)簽

del 標(biāo)簽

sup 標(biāo)簽

sub 標(biāo)簽

small 標(biāo)簽

i 標(biāo)簽

b 標(biāo)簽

這是它們的視覺渲染的示例，默認(rèn)情況下瀏覽器會應(yīng)用它們：










您可能想知道，b 與強(qiáng)有什么不同？我與 em 有何不同？

區(qū)別在于語義上。 b 和 i 是瀏覽器的直接提示，使一段文本變?yōu)榇煮w或斜體，strong 和 em 賦予該文本特殊的含義，這取決于瀏覽器的樣式。默認(rèn)情況下，它恰好與 b 和 i 完全相同。盡管您可以使用 CSS 進(jìn)行更改。

還有許多其他與文本相關(guān)的較少使用的標(biāo)簽。我剛剛提到了使用最多的那些。

鏈接

鏈接是使用 a 標(biāo)簽定義的。鏈接目標(biāo)是通過其 href 屬性設(shè)置的。

例：

<a href="https://flaviocopes.com">click here</a>

在開始標(biāo)記和結(jié)束標(biāo)記之間，我們有鏈接文本。

上面的示例是絕對 URL。鏈接也可以使用相對 URL：

<a href="/test">click here</a>

在這種情況下，單擊鏈接時，用戶將移動到當(dāng)前來源的/ test URL。

請注意/字符。如果省略，則瀏覽器將代替將測試字符串添加到當(dāng)前 URL，而不是從原始位置開始

例如，我在頁面https://flaviocopes.com/axios/ 上，我具有以下鏈接：

一次點(diǎn)擊即可將我?guī)У絟ttps://flaviocopes.com/test

單擊測試，將我?guī)У絟ttps://flaviocopes.com/axios/test

鏈接標(biāo)簽可以在其中包含其他內(nèi)容，而不僅僅是文本。例如，圖像：

<a href="https://flaviocopes.com">

<img src="test.jpg">

</a>

或其他任何元素，但其他標(biāo)記除外。

如果要在新選項卡中打開鏈接，則可以使用 target 屬性：

<a href="https://flaviocopes.com" target="_blank">open in new tab</a>

容器標(biāo)簽和頁面結(jié)構(gòu) HTML

容器標(biāo)簽

HTML 提供了一組容器標(biāo)記。這些標(biāo)簽可以包含一組未指定的其他標(biāo)簽

我們有：

文章

區(qū)段

div

理解它們之間的差異可能會造成混淆。

讓我們看看何時使用它們中的每一個。

文章

article 標(biāo)簽標(biāo)識可以獨(dú)立于頁面中其他事物的事物。

例如，主頁中的博客文章列表。

或鏈接列表。

<div>

<article>

<h2>A blog post</h2>

<a ...>Read more</a>

</article>

<article>

<h2>Another blog post</h2>

<a ...>Read more</a>

</article>

</div>

我們不僅限于列表：文章可以是頁面中的主要元素。

<article>

<h2>A blog post</h2>

<p>Here is the content...</p>

</article>

在商品標(biāo)簽內(nèi)，我們應(yīng)該有一個標(biāo)題（h1-h6）和

區(qū)段

代表文檔的一部分。每個節(jié)都有一個標(biāo)題標(biāo)簽（h1-h6），然后是節(jié)主體。

例：

<section>

<h2>A section of the page</h2>

<p>...</p>

<img ...>

</section>

將較長的文章分成不同的部分很有用。

不應(yīng)用作通用容器元素。 div 是為此而設(shè)計的。

div

div 是通用容器元素：

<div>

...

</div>

您經(jīng)常向該元素添加 class 或 id 屬性，以允許使用 CSS 對其進(jìn)行樣式設(shè)置。

我們在需要容器的任何地方使用 div，但現(xiàn)有標(biāo)簽不合適。

與頁面相關(guān)的標(biāo)簽

nav 標(biāo)簽

此標(biāo)記用于創(chuàng)建定義頁面導(dǎo)航的標(biāo)記。為此，我們通常添加一個 ulor ol 列表：

<nav>

<ol>

<li><a href="/">Home</a></li>

<li><a href="/blog">Blog</a></li>

</ol>

</nav>

aside 標(biāo)簽

aside 標(biāo)簽用于添加與主要內(nèi)容相關(guān)的內(nèi)容。

例如，在其中添加引號的框?；騻?cè)邊欄。

例：

<div>

<p>some text..</p>

<aside>

<p>A quote..</p>

</aside>

<p>other text...</p>

</div>

使用 side 表示它包含的內(nèi)容不屬于它所在的部分的常規(guī)流程的一部分。

header 標(biāo)簽

標(biāo)頭標(biāo)記代表頁面的一部分，即簡介。例如，它可以包含一個或多個標(biāo)題標(biāo)簽（h1-h6），商品的標(biāo)語，圖像。

<article>

<header>

<h1>Article title</h1>

</header>

...

</div>

main 標(biāo)簽

main 標(biāo)簽代表頁面的主要部分：

<body>

....

<main>

<p>....</p>

</main>

</body>

footer 標(biāo)簽

頁腳標(biāo)記用于確定文章的頁腳或頁面的頁腳：

<article>

....

<footer>

<p>Footer notes..</p>

</footer>

</div>

表單

表單是您與使用 Web 技術(shù)構(gòu)建的頁面或應(yīng)用程序進(jìn)行交互的方式。

您具有一組控件，并且在提交表單時（單擊“提交”按鈕或以編程方式單擊），瀏覽器會將數(shù)據(jù)發(fā)送到服務(wù)器。

默認(rèn)情況下，此數(shù)據(jù)發(fā)送會導(dǎo)致在發(fā)送數(shù)據(jù)后重新加載頁面，但是可以使用 JavaScript 更改此行為（在本書中不做解釋）。

使用 form 標(biāo)記創(chuàng)建一個表單：

<form>

...

</form>

默認(rèn)情況下，表單是使用 GET HTTP 方法提交的。這有其缺點(diǎn)，通常您要使用 POST。

您可以使用 method 屬性將表單設(shè)置為在提交時使用 POST：

<form method="POST">

...

</form>

使用 GET 或 POST 將表單提交到其駐留的相同 URL。

因此，如果表單位于https://flaviocopes.com/contacts 頁面，則按“提交”按鈕將向該 URL 發(fā)出請求。

可能什么也不會發(fā)生。

您需要服務(wù)器端來處理請求，通常您會“監(jiān)聽”專用 URL 上的那些表單提交事件。

您可以通過 action 參數(shù)指定 URL：

<form action="/new-contact" method="POST">

...

</form>

這將導(dǎo)致瀏覽器使用 POST 將表單數(shù)據(jù)提交到同一來源的/ new-contact URL。

如果來源（協(xié)議+域+端口）為https://flaviocopes.com（默認(rèn)端口 80），則意味著表單數(shù)據(jù)將發(fā)送到 https://flaviocopes.com/new-contact。

我談到了數(shù)據(jù)。哪些數(shù)據(jù)？

用戶通過 Web 平臺上可用的一組控件提供數(shù)據(jù)：

input boxes （單行文本）

text areas（多行文字）

select boxes（從下拉菜單中選擇一個選項）

radio buttons（從始終可見的列表中選擇一個選項）

checkboxes（選擇零，一個或多個選項）

file uploads(文件上傳)

還有更多！

讓我們在以下表單字段概述中介紹其中的每一個。

input 標(biāo)簽

輸入字段是使用最廣泛的表單元素之一。這也是一個非常通用的元素，它可以根據(jù) type 屬性完全更改行為。

默認(rèn)行為是單行文本輸入控件：

<input>

等效于使用：

<input type="text">

與后面的所有其他字段一樣，您需要給該字段命名，以便在提交表單時將其內(nèi)容發(fā)送到服務(wù)器：

<input type="text" name="username">

當(dāng)字段為空時，占位符屬性用于以淺灰色顯示一些文本。有助于向用戶提示輸入內(nèi)容：

<input type="text" name="username" placeholder="Your username">

電子郵件

使用 type =“ email”將在提交之前驗(yàn)證客戶端（在瀏覽器中）電子郵件的正確性（語義正確性，不能確保電子郵件地址存在）

<input type="email" name="email" placeholder="Your email">

密碼

使用 type =“ password”將使輸入的每個鍵都顯示為星號（*）或點(diǎn)，這對于承載密碼的字段很有用。

<input type="password" name="password" placeholder="Your password">

號碼

您可以讓輸入元素僅接受數(shù)字：

<input type="number" name="age" placeholder="Your age">

您可以指定可接受的最小值和最大值：

<input type="number" name="age" placeholder="Your age" min="18" max="110">

step 屬性有助于識別不同值之間的步驟。例如，以 5 的步長接受 10 到 50 之間的值：

<input type="number" name="a-number" min="10" max="50" step="5">

隱藏領(lǐng)域

可以向用戶隱藏字段。提交表單后，它們?nèi)詫l(fā)送到服務(wù)器：

<input type="hidden" name="some-hidden-field" value="some-value">

它通常用于存儲諸如 CSRF 令牌之類的值，用于安全性和用戶標(biāo)識，甚至使用特殊技術(shù)來檢測發(fā)送垃圾郵件的機(jī)器人。

它也可以僅用于識別表單及其動作。

設(shè)定默認(rèn)值

所有這些字段均接受預(yù)定義的值。如果用戶不更改它，那么它將是發(fā)送到服務(wù)器的值：

<input type="number" name="age" value="18">

如果設(shè)置了占位符，則當(dāng)用戶清除輸入字段值時，將顯示該值：

<input type="number" name="age" placeholder="Your age" value="18">

表格提交

type =“ submit”字段是一個按鈕，一旦被用戶按下，將提交表單：

value 屬性設(shè)置按鈕上的文本，如果缺少該文本，則會顯示“提交”文本：

表格驗(yàn)證

瀏覽器為表單提供客戶端驗(yàn)證功能。

您可以根據(jù)需要設(shè)置字段，以確保將其填充，并對每個字段的輸入強(qiáng)制采用特定格式。

讓我們看看兩個選項。

根據(jù)需要設(shè)置字段

必填屬性可幫助您進(jìn)行驗(yàn)證。如果未設(shè)置該字段，則客戶端驗(yàn)證將失敗，并且瀏覽器不會提交表單：

<input type="text" name="username" required>

強(qiáng)制執(zhí)行特定格式

我在上面描述了 type =“ email”字段。它會根據(jù)規(guī)范中設(shè)置的格式自動驗(yàn)證電子郵件地址。

在 type =“ number”字段中，我提到了 min 和 max 屬性以限制輸入到間隔的值。

您可以做更多。

您可以在任何字段上強(qiáng)制使用特定格式。

pattern 屬性使您能夠設(shè)置正則表達(dá)式來驗(yàn)證值。

我建議閱讀我的正則表達(dá)式指南，網(wǎng)址為 flaviocopes.com/javascript-regular-expressions/.

pattern="https://.*"

<input type="text" name="username" pattern="[a-zA-Z]{8}">

其他領(lǐng)域

文件上傳

您可以從本地計算機(jī)加載文件，然后使用 type =“ file”輸入元素將其發(fā)送到服務(wù)器：

<input type="file" name="secret-documents">

您可以附加多個文件：

<input type="file" name="secret-documents" multiple>

您可以使用 accept 屬性指定允許的一種或多種文件類型。這接受圖像：

<input type="file" name="secret-documents" accept="image/*">

您可以使用特定的 MIME 類型（例如 application / json）或設(shè)置文件擴(kuò)展名（例如.pdf）。或設(shè)置多個文件擴(kuò)展名，如下所示：

<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">

按鈕

type =“ button”輸入字段可用于向表單添加不是提交按鈕的其他按鈕：

<input type="button" value="Click me">

它們用于使用 JavaScript 以編程方式執(zhí)行某些操作。

有一個特殊的字段呈現(xiàn)為按鈕，其特殊動作是清除整個表單并將字段的狀態(tài)恢復(fù)為初始狀態(tài)：

<input type="reset">

單選按鈕

單選按鈕用于創(chuàng)建一組選項，其中一個選項被按下，其他所有選項均被禁用。

這個名字來自具有這種接口的老式汽車收音機(jī)。

您定義一組 type =“ radio”輸入，所有輸入都具有相同的 name 屬性和不同的 value 屬性：

<input type="radio" name="color" value="yellow">

<input type="radio" name="color" value="red">

<input type="radio" name="color" value="blue">

提交表單后，顏色數(shù)據(jù)屬性將只有一個值。

總會檢查一個元素。第一項是默認(rèn)情況下選中的項。

您可以使用 checked 屬性設(shè)置預(yù)先選擇的值。每個無線電輸入組只能使用一次。

選框

與單選框相似，但它們允許選擇多個值，或者根本不選擇。

您定義一組 type =“ checkbox”輸入，所有輸入都具有相同的 name 屬性和不同的 value 屬性：

<input type="checkbox" name="color" value="yellow">

<input type="checkbox" name="color" value="red">

<input type="checkbox" name="color" value="blue">

默認(rèn)情況下，所有這些復(fù)選框都不會選中。使用 checked 屬性在頁面加載時啟用它們。

由于此輸入字段允許多個值，因此在表單提交時，這些值將作為數(shù)組發(fā)送到服務(wù)器。

日期和時間

我們有一些輸入類型可以接受日期值。

type =“ date”輸入字段允許用戶輸入日期，并在需要時顯示日期選擇器：

<input type="date" name="birthday">

type =“ time”輸入字段允許用戶輸入時間，并在需要時顯示時間選擇器：

<input type="time" name="time-to-pickup">

type =“ month”輸入字段允許用戶輸入月份和年份：

<input type="month" name="choose-release-month">

type =“ week”輸入字段允許用戶輸入一周和一年：

<input type="week" name="choose-week">

所有這些字段均允許限制范圍和每個值之間的步長。我建議檢查 MDN 以獲取有關(guān)其用法的詳細(xì)信息。

使用 type =“ datetime-local”字段可以選擇日期和時間。

<input type="datetime-local" name="date-and-time">

這是測試所有頁面的頁面： https://codepen.io/flaviocopes/pen/ZdWQPm

顏色選擇器

您可以使用 type =“ color”元素讓用戶選擇一種顏色：

<input type="color" name="car-color">

您可以使用 value 屬性設(shè)置默認(rèn)值：

瀏覽器將負(fù)責(zé)向用戶顯示顏色選擇器。

范圍

該輸入元素顯示一個滑塊元素。人們可以使用它從開始值到結(jié)束值：

<input type="range" name="age" min="0" max="100" value="30">

您可以提供一個可選步驟：

<input type="range" name="age" min="0" max="100" value="30" step="10">

電話

type =“ tel”輸入字段用于輸入電話號碼：

<input type="tel" name="telephone-number">

使用 tel over text 的主要賣點(diǎn)是在移動設(shè)備上，該設(shè)備可以選擇顯示數(shù)字鍵盤。

指定模式屬性以進(jìn)行其他驗(yàn)證：

<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number">

網(wǎng)址

type =“ url”字段用于輸入 URL。

<input type="url" name="website">

您可以使用 pattern 屬性對其進(jìn)行驗(yàn)證：

<input type="url" name="website" pattern="https://.*">

textarea 標(biāo)簽

textarea 元素允許用戶輸入多行文本。與輸入相比，它需要一個結(jié)束標(biāo)記：

<textarea></textarea>

您可以使用 CSS 設(shè)置尺寸，也可以使用 row 和 cols 屬性：

<textarea rows="20" cols="10"></textarea>

與其他表單標(biāo)簽一樣，name 屬性確定發(fā)送到服務(wù)器的數(shù)據(jù)中的名稱：

<textarea name="article"></textarea>

選擇標(biāo)簽

該標(biāo)簽用于創(chuàng)建下拉菜單。

用戶可以選擇可用的選項之一。

每個選項都是使用 option 標(biāo)記創(chuàng)建的。您為選擇添加一個名稱，并為每個選項添加一個值：

<select name="color">

<option value="red">Red</option>

<option value="yellow">Yellow</option>

</select>

您可以將選項設(shè)置為禁用：

<select name="color">

<option value="red" disabled>Red</option>

<option value="yellow">Yellow</option>

</select>

您可以有一個空選項：

<select name="color">

<option value="">None</option>

<option value="red">Red</option>

<option value="yellow">Yellow</option>

</select>

可以使用 optgroup 標(biāo)記對選項進(jìn)行分組。每個選項組都有一個標(biāo)簽屬性：

<select name="color">

<optgroup label="Primary">

<option value="red">Red</option>

<option value="yellow">Yellow</option>

<option value="blue">Blue</option>

</optgroup>

<optgroup label="Others">

<option value="green">Green</option>

<option value="pink">Pink</option>

</optgroup>

</select>

表格

Web 表格的早期是建筑布局的重要組成部分。

后來，它們被 CSS 及其布局功能所取代，如今，我們擁有功能強(qiáng)大的工具（如 CSS Flexbox 和 CSS Grid）來構(gòu)建布局。表現(xiàn)在僅用于猜測表的構(gòu)建！

表格標(biāo)簽

使用 table 標(biāo)記定義一個表：

<table>

</table>

在表內(nèi)部，我們將定義數(shù)據(jù)。我們根據(jù)行進(jìn)行推理，這意味著我們將行添加到表中（而不是列中）。我們將在一行中定義列。

行數(shù)

使用 tr 標(biāo)記添加一行，這是我們唯一可以添加到表元素中的東西：

<table>

<tr></tr>

<tr></tr>

<tr></tr>

</table>

這是一個有 3 行的表。

第一行可以充當(dāng)標(biāo)題。

列標(biāo)題

表標(biāo)題包含列名，通常以粗體顯示。

考慮一下 Excel / Google 表格文檔。頂部的 A-B-C-D ...標(biāo)頭。










<table>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr></tr>

<tr></tr>

</table>

表內(nèi)容

該表的內(nèi)容是在其他 tr 元素內(nèi)部使用 td 標(biāo)簽定義的：

<table>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td>Row 1 Column 1</td>

<td>Row 1 Column 2</td>

<td>Row 1 Column 3</td>

</tr>

<tr>

<td>Row 2 Column 1</td>

<td>Row 2 Column 2</td>

<td>Row 2 Column 3</td>

</tr>

</table>

如果您不添加任何 CSS 樣式，這就是瀏覽器呈現(xiàn)它的方式：










添加此 CSS：

th, td {

padding: 10px;

border: 1px solid #333;

}

使該表看起來更像一個合適的表：










跨欄和行

使用 colspan 屬性，行可以決定跨越 2 列或更多列：

<table>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td colspan="2">Row 1 Columns 1-2</td>

<td>Row 1 Column 3</td>

</tr>

<tr>

<td colspan="3">Row 2 Columns 1-3</td>

</tr>

</table>










或者，可以使用 rowspan 屬性跨越兩行或更多行：

<table>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td colspan="2" rowspan="2">Rows 1-2 Columns 1-2</td>

<td>Row 1 Column 3</td>

</tr>

<tr>

<td>Row 2 Column 3</td>

</tr>

</table>










行標(biāo)題

在我解釋如何使用表的第一個 tr 標(biāo)記內(nèi)的 th 標(biāo)記解釋列標(biāo)題之前。

您可以將 th 標(biāo)記添加為 tr（不是表的第一個 tr）中的第一個元素，以具有行標(biāo)題：

<table>

<tr>

<th></th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<th>Row 1</th>

<td>Col 2</td>

<td>Col 3</td>

</tr>

<tr>

<th>Row 2</th>

<td>Col 2</td>

<td>Col 3</td>

</tr>

</table>

更多標(biāo)簽來組織表格

您可以在表格中添加 3 個以上的標(biāo)簽，以使其更有條理。

使用大表時最好。并正確定義頁眉和頁腳。

這些標(biāo)簽是

thead

tbody

tfoot

它們包裝 tr 標(biāo)記以清楚地定義表的不同部分。這是一個例子：

<table>

<thead>

<tr>

<th></th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</thead>

<tbody>

<tr>

<th>Row 1</th>

<td>Col 2</td>

<td>Col 3</td>

</tr>

<tr>

<th>Row 2</th>

<td>Col 2</td>

<td>Col 3</td>

</tr>

</tbody>

<tfoot>

<tr>

<td></td>

<td>Footer of Col 1</td>

<td>Footer of Col 2</td>

</tr>

</tfoot>

</table>







表格標(biāo)題

一個表應(yīng)具有描述其內(nèi)容的標(biāo)題標(biāo)簽。該標(biāo)簽應(yīng)放在開頭表格標(biāo)簽之后：

<table>

<caption>Dogs age</caption>

<tr>

<th>Dog</th>

<th>Age</th>

</tr>

<tr>

<td>Roger</td>

<td>7</td>

</tr>

</table>

多媒體標(biāo)簽：音頻和視頻

在本節(jié)中，我想向您展示音頻和視頻標(biāo)簽。

音頻標(biāo)簽

該標(biāo)簽允許您將音頻內(nèi)容嵌入 HTML 頁面。

該元素可以通過 getUserMedia（）使用麥克風(fēng)來流音頻，或者可以播放您使用 src 屬性引用的音頻源：

<audio src="file.mp3">

默認(rèn)情況下，瀏覽器不顯示此元素的任何控件。這意味著只有在設(shè)置為自動播放時音頻才會播放（稍后會詳細(xì)介紹），并且用戶看不到如何停止音頻，控制音量或在軌道上移動。

要顯示內(nèi)置控件，可以添加 controls 屬性：

<audio src="file.mp3" controls>

控件可以具有自定義外觀。

您可以使用 type 屬性指定音頻文件的 MIME 類型。如果未設(shè)置，瀏覽器將嘗試自動確定它：

默認(rèn)情況下，音頻文件不會自動播放。添加自動播放屬性以自動播放音頻：

<audio src="file.mp3" controls autoplay>

注意：移動瀏覽器不允許自動播放

如果設(shè)置了 loop 屬性，則會在 0:00 重新開始播放音頻；否則，如果不存在，音頻將在文件末尾停止：

<audio src="file.mp3" controls autoplay loop>

您還可以使用靜音屬性播放靜音的音頻文件（不十分確定這有什么用）：

<audio src="file.mp3" controls autoplay loop muted>

使用 JavaScript，您可以偵聽音頻元素上發(fā)生的各種事件，其中最基本的是：

play 文件開始播放時播放

pause 音頻播放暫停時暫停

playing 從暫?；謴?fù)音頻時播放

ended 到達(dá)音頻文件末尾時結(jié)束

視頻標(biāo)簽

該標(biāo)簽允許您將視頻內(nèi)容嵌入 HTML 頁面。

該元素可以使用網(wǎng)絡(luò)攝像頭通過 getUserMedia（）或 WebRTC 流式傳輸視頻，也可以播放使用 src 屬性引用的視頻源：

<video src="file.mp4">

默認(rèn)情況下，瀏覽器不顯示該元素的任何控件，僅顯示視頻。

這意味著僅當(dāng)設(shè)置為自動播放時，視頻才會播放（稍后會詳細(xì)介紹），并且用戶看不到如何停止，暫停，控制音量或跳到視頻中的特定位置。

要顯示內(nèi)置控件，可以添加 controls 屬性：

<video src="file.mp4" controls>

控件可以具有自定義外觀。

您可以使用 type 屬性指定視頻文件的 MIME 類型。如果未設(shè)置，瀏覽器將嘗試自動確定它：

<video src="file.mp4" controls type="video/mp4">

默認(rèn)情況下，視頻文件不會自動播放。添加自動播放屬性以自動播放視頻：

<video src="file.mp4" controls autoplay>

某些瀏覽器還需要靜音屬性才能自動播放。視頻僅在靜音時自動播放：

<audio src="file.mp3" controls autoplay muted>

如果設(shè)置了 loop 屬性，則會在 0:00 重新開始播放視頻；否則，如果不存在，則視頻在文件結(jié)尾處停止：

<video src="file.mp4" controls autoplay loop>

您可以將圖像設(shè)置為海報圖像：

<video src="file.mp4" poster="picture.png">

如果不存在，瀏覽器將在可用時立即顯示視頻的第一幀。

您可以設(shè)置 width 和 height 屬性以設(shè)置元素將要占用的空間，以便瀏覽器可以考慮它，并且在最終加載時它不會更改布局。它需要一個數(shù)值，以像素為單位。

使用 JavaScript，您可以偵聽視頻元素上發(fā)生的各種事件，其中最基本的是：

play 文件開始播放時播放

pause 視頻暫停時暫停

playing 從暫?；謴?fù)視頻播放

ended 到達(dá)視頻文件末尾時結(jié)束

框架

iframe 標(biāo)簽允許我們將來自其他來源（其他網(wǎng)站）的內(nèi)容嵌入到我們的網(wǎng)頁中。

從技術(shù)上講，iframe 會創(chuàng)建一個新的嵌套瀏覽上下文。這意味著 iframe 中的任何內(nèi)容都不會干擾父頁面，反之亦然。 JavaScript 和 CSS 不會從 iframe 中“泄漏”。

許多網(wǎng)站都使用 iframe 執(zhí)行各種操作。您可能熟悉 Codepen，Glitch 或其他允許您在頁面的一部分進(jìn)行編碼的站點(diǎn)，并且在框中看到了結(jié)果。那是一個 iframe。

<iframe src="page.html"></iframe>

您也可以加載絕對 URL：

<iframe src="https://site.com/page.html"></iframe>

您可以設(shè)置一組寬度和高度參數(shù)（或使用 CSS 進(jìn)行設(shè)置），否則 iframe 將使用默認(rèn)的 300x150 像素框：

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc

srcdoc 屬性使您可以指定一些要顯示的內(nèi)聯(lián) HTML。它是 src 的替代方法，但是是最新的，并且在 Edge 18 及更低版本以及 IE 中不受支持：

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

sandbox

sandbox 屬性可讓我們限制 iframe 中允許的操作。

如果我們忽略它，則一切都被允許：

<iframe src="page.html"></iframe>

如果將其設(shè)置為“”，則不允許任何操作：

<iframe src="page.html" sandbox=""></iframe>

我們可以通過在 sandbox 屬性中添加選項來選擇允許的內(nèi)容。您可以通過在兩者之間添加一個空格來允許多個。這是您可以使用的選項的不完整列表：

allow-forms: 允許提交表格

allow-modals 允許打開模式窗口，包括在 JavaScript 中調(diào)用 alert（）

allow-orientation-lock 允許鎖定屏幕方向

allow-popups 使用 window.open（）和 target =“ _ blank”鏈接允許彈出窗口

allow-same-origin 將正在加載的資源視為相同來源

allow-scripts 允許加載的 iframe 運(yùn)行腳本（但不能創(chuàng)建彈出窗口）。

allow-top-navigation 允許訪問 iframe 到頂級瀏覽上下文

Allow

目前尚處于試驗(yàn)階段，僅受基于 Chromium 的瀏覽器支持，這是父窗口與 iframe 之間資源共享的未來。

它類似于 sandbox 屬性，但是讓我們允許特定的功能，包括：

accelerometer 允許訪問 Sensors API 加速度計界面

ambient-light-sensor 允許訪問 Sensors API AmbientLightSensor 接口

autoplay 允許自動播放視頻和音頻文件

camera 允許從 getUserMedia API 訪問攝像機(jī)

display-capture 允許使用 getDisplayMedia API 訪問屏幕內(nèi)容

fullscreen 允許進(jìn)入全屏模式

geolocation 允許訪問 Geolocation API

gyroscope 允許訪問 Sensors API 陀螺儀界面

magnetometer 允許訪問 Sensors API 磁力計接口

microphone 使用 getUserMedia API 允許訪問設(shè)備麥克風(fēng)

midi 允許訪問 Web MIDI API

payment 允許訪問付款請求 API

speaker 允許通過設(shè)備揚(yáng)聲器播放音頻

usb 允許訪問 WebUSB API。

vibrate 允許訪問振動 API

vr 允許訪問 WebVR API

Referrer

加載 iframe 時，瀏覽器會在 Referer 標(biāo)頭中向其發(fā)送有關(guān)誰正在加載 iframe 的重要信息（請注意單個 r，這是我們必須忍受的錯字）。

引薦來源網(wǎng)址的拼寫錯誤源自計算機(jī)科學(xué)家 Phillip Hallam-Baker 最初提出的將字段合并到 HTTP 規(guī)范中的提議。在將拼寫錯誤合并到“請求注釋”標(biāo)準(zhǔn)文檔 RFC 1945 中時，就已經(jīng)將拼寫錯誤固定下來。

Referrerpolicy 屬性可讓我們將引薦來源網(wǎng)址設(shè)置為在加載時發(fā)送到 iframe。引薦來源網(wǎng)址是 HTTP 標(biāo)頭，可讓頁面知道誰在加載它。這些是允許的值：

no-referrer-when-downgrade 是默認(rèn)值，當(dāng)通過 HTTPS 加載當(dāng)前頁面并且通過 HTTP 協(xié)議加載 iframe 時，不發(fā)送引薦來源網(wǎng)址

origin 無引薦來源不發(fā)送引薦來源標(biāo)頭

來源引薦來源網(wǎng)址已發(fā)送，并且僅包含來源（端口，協(xié)議，域），而不包含來源+路徑（默認(rèn)設(shè)置）

從 iframe 中從相同起點(diǎn)（端口，協(xié)議，域）加載時，origin-when-cross-origin 會以其完整格式（起點(diǎn)+路徑）發(fā)送引薦來源網(wǎng)址。否則，僅發(fā)送原點(diǎn)

same-origin 僅當(dāng)從 iframe 中的相同來源（端口，協(xié)議，域）加載時，才發(fā)送相同來源的引薦來源網(wǎng)址

如果當(dāng)前頁面是通過 HTTPS 加載的，并且 iframe 也通過 HTTPS 協(xié)議加載，則 strict-origin 會將原點(diǎn)作為引薦來源發(fā)送。如果通過 HTTP 加載 iframe，則不發(fā)送任何內(nèi)容

當(dāng)在相同原點(diǎn)上工作時，strict-origin-when-cross-origin 將原點(diǎn)+路徑作為引薦來源發(fā)送。如果當(dāng)前頁面是通過 HTTPS 加載的，并且 iframe 也通過 HTTPS 協(xié)議加載，則將原點(diǎn)作為引薦來源發(fā)送。如果通過 HTTP 加載 iframe，則不發(fā)送任何內(nèi)容

unsafe-url：即使從 HTTP 加載資源并且通過 HTTPS 加載當(dāng)前頁面，也將原始+路徑作為引薦來源發(fā)送

圖像

可以使用 img 標(biāo)簽顯示圖像。

此標(biāo)記接受 src 屬性，我們使用它來設(shè)置圖像源：

<img src="image.png">

我們可以使用多種圖像。最常見的是 PNG，JPEG，GIF，SVG 和最近的 WebP。

HTML 標(biāo)準(zhǔn)要求存在 alt 屬性來描述圖像。屏幕閱讀器和搜索引擎機(jī)器人都使用此功能：

<img src="dog.png" alt="A picture of a dog">

您可以設(shè)置 width 和 height 屬性來設(shè)置元素將要占用的空間，以便瀏覽器可以考慮它，并且在完全加載時它不會更改布局。它需要一個數(shù)值，以像素為單位。

<img src="dog.png" alt="A picture of a dog" width="300" height="200">

圖標(biāo)簽

Figure 標(biāo)記通常與 img 標(biāo)記一起使用。

圖是要顯示帶標(biāo)題的圖像時經(jīng)常使用的語義標(biāo)記。您可以這樣使用它：

<figure>

<img src="dog.png"

alt="A nice dog">

<figcaption>A nice dog</figcaption>

</figure>

figcaption 標(biāo)簽用于包裝字幕文本。

使用 srcset 的響應(yīng)式圖像

srcset 屬性使您可以根據(jù)自己的喜好，設(shè)置瀏覽器可以根據(jù)像素密度或窗口寬度使用的響應(yīng)圖像。這樣，它只能下載呈現(xiàn)頁面所需的資源，而如果是在移動設(shè)備上，則不能下載更大的圖像。

這是一個示例，其中我們針對 4 種不同的屏幕尺寸提供了 4 張其他圖片：

<img src="dog.png"

alt="A picture of a dog"

srcset="dog-500.png 500w,

dog-800.png 800w,

dog-1000.png 1000w,

dog-1400.png 1400w">

在 srcset 中，我們使用 w 度量來指示窗口寬度。

既然這樣做，我們還需要使用 sizes 屬性：

<img src="dog.png"

alt="A picture of a dog"

sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"

srcset="dog-500.png 500w,

dog-800.png 800w,

dog-1000.png 1000w,

dog-1400.png 1400w">

在此示例中，sizes 屬性中的（max-width：500px）100vw，（max-width：900px）50vw，800px 字符串描述與視口有關(guān)的圖像大小，多個條件之間用分號分隔。

媒體條件 max-width：500px 設(shè)置與視口寬度相關(guān)的圖像大小。簡而言之，如果窗口大小小于 500 像素，它將以窗口大小的 100％渲染圖像。

如果窗口大小更大但<900px，它將以窗口大小的 50％渲染圖像。

如果更大，它將以 800 像素渲染圖像。

vw 度量單位可能對您來說是新的，簡而言之，我們可以說 1 vw 是窗口寬度的 1％，因此 100vw 是窗口寬度的 100％。

一個有用的網(wǎng)站來生成 srcset 和逐漸變小的圖像是https://responsivebreakpoints.com/.

圖片標(biāo)簽

HTML 還為我們提供了圖片標(biāo)簽，該標(biāo)簽與 srcset 的功能非常相似，并且區(qū)別非常細(xì)微。

當(dāng)您完全希望更改文件時，而不是僅提供較小版本的文件時，可以使用圖片?；蛱峁┢渌麍D像格式。

我發(fā)現(xiàn)的最佳用例是在提供 WebP 圖像時，該圖像仍未被廣泛支持。在圖片標(biāo)簽中，您指定了圖像列表，并且將按順序使用它們，因此在下一個示例中，支持 WebP 的瀏覽器將使用第一個圖像，如果不使用，則回退為 JPG：

<picture>

<source type="image/webp" srcset="image.webp">

<img src="image.jpg" alt="An image">

</picture>

源標(biāo)簽為圖像定義一種（或多種）格式。 img 標(biāo)簽是備用瀏覽器，如果瀏覽器很舊并且不支持 picture 標(biāo)簽。

在圖片內(nèi)的源標(biāo)簽中，您可以添加媒體屬性以設(shè)置媒體查詢。

下面的示例類似于 srcset 的上述示例：

<picture>

<source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">

<source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">

<source media="(min-width: 1000w)" srcset="dog-1000.png" sizes="800px">

<source media="(min-width: 1400w)" srcset="dog-1400.png" sizes="800px">

<img src="dog.png" alt="A dog image">

</picture>

但這不是用例，因?yàn)槿缒?，它更加冗長。

圖片標(biāo)簽是最新的，但除 Opera Mini 和 IE（所有版本）外，所有主流瀏覽器現(xiàn)在都支持它。

可用性

重要的是，在設(shè)計 HTML 時要考慮到可訪問性。

擁有可訪問的 HTML 意味著殘疾人可以使用 Web。有完全失明或有視覺障礙的用戶，有聽力障礙的人以及許多其他不同的障礙。

不幸的是，這個主題沒有重視它所需要的重要性，而且似乎沒有其他主題那么酷。

如果某人看不到您的頁面，但仍想使用其內(nèi)容怎么辦？首先，他們該怎么做？他們不能使用鼠標(biāo)，而是使用屏幕閱讀器。您不必想象。您可以立即嘗試：Google 提供免費(fèi)的 ChromeVox Chrome 擴(kuò)展程序。可訪問性還必須注意允許工具輕松選擇元素或?yàn)g覽頁面。

網(wǎng)頁和 Web 應(yīng)用程序并非始終以可訪問性作為其首要目標(biāo)之一，也許發(fā)行的版本 1 不可訪問，但事后事實(shí)可以使網(wǎng)頁可訪問。越早越好，但是永遠(yuǎn)不會太晚。

這很重要，在我國，必須可以訪問政府或其他公共組織建立的網(wǎng)站。

使 HTML 可訪問是什么意思？讓我說明您需要考慮的主要事項。

注意：CSS 主題中還有其他幾項需要注意，例如顏色，對比度和字體。或如何使 SVG 圖像可訪問。我在這里不談?wù)撍麄儭?br>
使用語義 HTML

語義 HTML 非常重要，這是您需要注意的主要事情之一。讓我說明一些常見的情況。

為標(biāo)題標(biāo)簽使用正確的結(jié)構(gòu)很重要。最重要的是 h1，對于次要的標(biāo)題使用較高的數(shù)字，但是所有相同級別的標(biāo)題都應(yīng)具有相同的含義（像樹形結(jié)構(gòu)一樣思考）

h1

h2

h3

h2

h2

h3

h4

使用 strong 和 em 代替 b 和 i。從視覺上看，它們看起來相同，但是前兩個具有更多的含義。 b 和我是視覺元素。

列表很重要。屏幕閱讀器可以檢測列表并提供概述，然后讓用戶選擇是否進(jìn)入列表。

一個表應(yīng)具有描述其內(nèi)容的標(biāo)題標(biāo)簽：

<table>

<caption>Dogs age</caption>

<tr>

<th>Dog</th>

<th>Age</th>

</tr>

<tr>

<td>Roger</td>

<td>7</td>

</tr>

</table>

對圖像使用 alt 屬性

所有圖像必須具有描述圖像內(nèi)容的 alt 標(biāo)簽。這不僅是一種好習(xí)慣，而且是 HTML 標(biāo)準(zhǔn)所必需的，未經(jīng)它驗(yàn)證的 HTML 也是必須的。

<img src="dog.png" alt="picture of my dog">

如果這是您添加它的誘因，那么對搜索引擎也有好處。

使用角色屬性

使用 role 屬性，您可以為頁面中的各個元素分配特定的角色。

您可以分配許多不同的角色：互補(bǔ)，列表，列表項，主要，導(dǎo)航，區(qū)域，選項卡，警報，應(yīng)用程序，文章，橫幅，按鈕，單元格，復(fù)選框，contentinfo，對話框，文檔，提要，圖，表格，網(wǎng)格，網(wǎng)格單元格，標(biāo)題，img，列表框，行，行組，搜索，開關(guān)，表，選項卡，文本框，計時器。

內(nèi)容很多，我為您提供了這個MDN 鏈接，以供您參考。但是，您無需為頁面中的每個元素分配角色。在大多數(shù)情況下，屏幕閱讀器可以從 HTML 標(biāo)簽推斷出來。例如，您不需要將角色標(biāo)簽添加到導(dǎo)航，按鈕，表格等語義標(biāo)簽。

讓我們以 nav 標(biāo)簽為例。您可以使用它來定義頁面導(dǎo)航，如下所示：

<nav>

<ul>

<li><a href="/">Home</a></li>

<li><a href="/blog">Blog</a></li>

</ul>

</nav>

如果您被迫使用 div 標(biāo)簽而不是 nav，則可以使用導(dǎo)航角色：

<div role="navigation">

<ul>

<li><a href="/">Home</a></li>

<li><a href="/blog">Blog</a></li>

</ul>

</div>

因此，這里有一個實(shí)際的例子：當(dāng)標(biāo)簽還沒有傳達(dá)含義時，使用角色分配有意義的值。

##使用 tabindex 屬性

tabindex 屬性允許您更改按 Tab 鍵選擇“可選”元素的順序。默認(rèn)情況下，只有使用 Tab 鍵通過導(dǎo)航才能“選擇”鏈接和表單元素（并且您無需在其上設(shè)置 tabindex）。

添加 tabindex =“ 0”可以選擇一個元素：

<div tabindex="0">

...

</div>

而是使用 tabindex =“-1”從此基于標(biāo)簽的導(dǎo)航中刪除一個元素，這可能非常有用。

使用 aria 屬性

ARIA 是首字母縮寫詞，表示可訪問的 Rich Internet Applications，并定義了可以應(yīng)用于元素的語義。

aria-label 標(biāo)簽

此屬性用于添加描述元素的字符串。

例：

<p aria-label="The description of the product">...</p>

我在博客的側(cè)邊欄上使用此屬性，在這里我有一個輸入框用于搜索而沒有顯式標(biāo)簽，因?yàn)樗哂姓嘉环麑傩浴?br>
aria-labelledby 標(biāo)簽

此屬性在當(dāng)前元素和對其進(jìn)行標(biāo)記的元素之間設(shè)置關(guān)聯(lián)。

如果您知道如何將輸入元素與標(biāo)簽元素相關(guān)聯(lián)，則類似。

我們傳遞描述當(dāng)前元素的商品 ID。

例：

<h3 id="description">The description of the product</h3>

<p aria-labelledby="description">

...

</p>

aria-describedby 標(biāo)簽

此屬性使我們可以將一個元素與另一個用作描述的元素相關(guān)聯(lián)。

例：

<button aria-describedby="payNowDescription" >Pay now</button>

<div id="payNowDescription">Clicking the button will send you to our Stripe form!</div>

使用隱藏的 Aria 隱藏內(nèi)容

我喜歡網(wǎng)站中的簡約設(shè)計。例如，我的博客主要是內(nèi)容，在邊欄中有一些鏈接。但是，側(cè)邊欄中的某些內(nèi)容只是視覺元素，不會加深無法看到頁面的人的體驗(yàn)。就像我的徽標(biāo)圖片或深色/深色主題選擇器。

添加 aria-hidden =“ true”屬性將告訴屏幕閱讀器忽略該元素。

在哪里了解更多

這只是該主題的介紹。要了解更多信息，我推薦以下資源：

https://www.w3.org/TR/WCAG20/

https://webaim.org

https://developers.google.com/web/fundamentals/accessibility/