HTML簡介

從其歷史和基本構建塊中發現HTML

HTML是由工作組,是Web超文本應用程序技術工作組(Web Hypertext Application Technology Working Group)的首字母縮寫,該組織由使用最流行的Web瀏覽器的人員組成。這意味著它基本上由Google,Mozilla,Apple和Microsoft控制。

過去的W3C(萬維網聯盟)是負責創建HTML標準的組織。

當很明顯W3C向XHTML推進不是一個好主意時,該控件非正式地從W3C轉移到WHATWG。

如果您從未聽說過XHTML,那麼這裡有個簡短的故事。在2000年初,我們都相信Web的未來(嚴重地)是XML。因此,HTML已從基於SGML的創作語言轉變為XML標記語言。

這是一個很大的變化。我們必須知道並尊重更多的規則。更嚴格的規則。

最終,瀏覽器供應商意識到這不是Web的正確路徑,於是他們推遲了,創建了現在稱為HTML5的東西。

W3C並未真正同意放棄對HTML的控制,多年來,我們獲得了2個相互競爭的標準,每個標準都旨在成為官方標準。最終,W3C於2019年5月28日正式宣布,“真正的” HTML版本是WHATWG發布的版本。

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

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

HTML 2於1995年問世。

我們有HTML 3在1997年1月,以及HTML 4 in December 1997.

繁忙的時候!

20多年過去了,我們擁有了所有這些XHTML東西,最終我們現在處在這個HTML5“東西”上,這並不是真的只是HTML還有。

HTML5是一個術語,現在定義了一套完整的技術,其中包括HTML,但增加了許多API和標準,例如WebGL,SVG等。

這裡要了解的關鍵是:現在沒有(像)HTML版本這樣的東西。這是生活水平。像CSS一樣,我們將其稱為3,但實際上,它是一堆單獨開發的獨立模塊。像JavaScript一樣,我們每年都有一個新版本,但是這與引擎實現了哪些單獨功能無關緊要。

是的,我們稱它為HTML5,但HTML4是1997年發布的。對於任何事物來說,這都是很長的時間,想想網絡。

這是標準“生存”的地方:[https://html.spec.whatwg.org/multipage]。

HTML基礎

HTML是用於構造我們在Web上消費的內容的標記語言。

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

它可以由根據請求或會話數據構建它的服務器端應用程序生成,例如Rails或Laravel或Django應用程序。

或者可以由JavaScript客戶端應用程序生成,該客戶端應用程序可以即時生成HTML。

或者,在最簡單的情況下,它可以存儲到文件中,並由Web服務器提供給瀏覽器。

讓我們深入研究這種情況,儘管在實踐中它可能是生成HTML的最不流行的方法,但了解基本的構建基塊仍然是必不可少的。

按照慣例,HTML文件將與.html或者.htm擴大。

在此文件中,我們使用標籤

標籤包裝內容,每個標籤為其包裝的文本賦予特殊含義。

讓我們舉幾個例子。

該HTML代碼段使用p標籤:

<p>A paragraph of text</p>

該HTML代碼段使用ul標籤,這意味著無序列表li標籤,這意味著項目清單

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

當瀏覽器為HTML頁面提供服務時,標籤將被解釋,瀏覽器將根據定義元素視覺外觀的規則來渲染元素。

其中一些規則是內置的。例如,類似列表的呈現方式。或如何用藍色下劃線顯示鏈接。

其他一些規則由您使用CSS設置。

HTML不是演示性的。不在乎事情如何。相反,它與什麼事情有關意思是

瀏覽器由CSS語言來決定事物的外觀,由誰來構建頁面來定義指令。

現在,我做的那兩個例子是在頁面上下文之外獲取的HTML代碼段。

HTML頁面結構

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

事情始於文檔類型聲明(又名doctype),這是一種告訴瀏覽器的方法,它是一個HTML頁面,以及我們使用的是哪個HTML版本。

現代HTML使用此doctype:

<!DOCTYPE html>

然後我們有html元素,具有開始和結束標籤:

<!DOCTYPE html>
<html>
...
</html>

所有標籤都有一個開始和結束標籤。除了一些自閉標籤外,因為它們不包含任何東西,因此不需要合上標籤在他們中

結束標記與開始標記相同,但帶有一個/

html在文檔類型聲明之後,在文檔的開始處使用了開始標記。

html結束標記是HTML文檔中的最後一件事。

在 - 的里面html元素,我們有2個元素:headbody

<!DOCTYPE html>
<html>
	<head>
	...
	</head>
	<body>
	...
	</body>
</html>

裡面head我們將擁有創建網頁必不可少的標籤,例如標題,元數據以及內部或外部CSS和JavaScript。通常情況下,不會直接顯示在頁面上的東西只會幫助瀏覽器(或Google搜索機器人等機器人)正確顯示它。

裡面body我們將擁有頁面的內容。這可見的東西

標籤與元素

我提到了標籤和元素。有什麼不同?

元素具有開始標記和結束標記。

在這種情況下,我們使用p開始和結束標籤以創建一個p元素。

<p>A paragraph of text</p>

因此,一個元素構成了整體包裹

  • 起始標籤
  • 文字內容(可能還有其他元素)
  • 結束標籤

如果元素沒有結束標籤,則僅使用開始標籤編寫,並且不能包含任何文本內容。

就是說,我可能會在書中使用標籤或元素一詞來表示相同的意思,除了我明確提到開始標籤或結束標籤。

屬性

元素的開始標記可以包含我們可以附加的特殊信息片段,稱為屬性

屬性具有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>

classid屬性是您會發現最常用的兩個屬性。

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

兩者之間的區別在於id在網頁的上下文中是唯一的,不能重複。

另一方面,類可以在多個元素上多次出現。

另外,id只是一個價值。class可以容納多個值,以空格分隔:

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

破折號很常見-在類值中分隔單詞,但這只是一個約定。

這些只是您可以擁有的可能屬性中的2個。有些屬性僅用於一個標籤。他們是高度專業化的。

可以以更通用的方式使用其他屬性。你剛剛看到idclass,但我們還有其他人,例如style可用於在元素上插入內聯CSS規則。

不區分大小寫

HTML不區分大小寫。標籤可以全部大寫,也可以小寫。在早期,上限是常態。今天,小寫字母已成為常態。這是一個慣例。

您通常這樣寫:

<p>A paragraph of text</p>

不像這樣:

<P>A paragraph of text</P>

空格

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

例如,本段的呈現

<p>A paragraph of text</p>

與此相同:

<p>        A paragraph of text</p>

與此相同:

<p>A paragraph

of text </p>

使用white-spaceCSS屬性您可以更改行為方式。您可以在中找到有關CSS如何處理空白的更多信息。CSS規範

我想說的是,使用使語法在視覺上更井井有條,更易於閱讀的語法,但是您可以使用任何喜歡的語法。

我通常會前往

<p>A paragraph of text</p>

或者

<p>
	A paragraph of text
</p>

嵌套標籤應縮進2或4個字符,具體取決於您的偏好:

<body>
	<p>
		A paragraph of text
	</p>
	<ul>
		<li>A list item</li>
	</ul>
</body>

注意:這意味著如果您要添加額外的空間,可能會讓您發瘋。我建議在需要時使用CSS騰出更多空間。

注意:在特殊情況下,您可以使用&nbsp;HTML實體(首字母縮略詞表示不間斷空間)-有關HTML實體的更多信息。我認為這不應被濫用。始終首選使用CSS來更改視覺呈現。

文件標題

head標籤包含定義文檔屬性的特殊標籤。

它總是寫在body標籤,在打開後html標籤:

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	...
</html>

我們永遠不會在此標籤上使用屬性。而且我們不會在其中編寫內容。

它只是其他標籤的容器。在其中,我們可以有各種各樣的標籤,具體取決於您需要執行的操作:

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

title標籤

title標籤確定頁面標題。標題顯示在瀏覽器中,它尤其重要,因為它是搜索引擎優化的關鍵因素之一。

script標籤

此標記用於將JavaScript添加到頁面中。

您可以使用開始標記,JavaScript代碼和結束標記來內聯包含它:

<script>
..some JS
</script>

或者,您可以使用src屬性:

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

type默認情況下,屬性設置為text/javascript,因此完全是可選的。

關於此標籤,有一些非常重要的知識。

有時在頁面底部使用此標記。為什麼?出於性能原因。

默認情況下,加載腳本會阻止頁面的呈現,直到解析並加載腳本為止。

這樣,在所有頁面都已被解析和加載之後,腳本便被加載並執行,與將腳本保留在頁面中相比,該腳本為用戶提供了更好的體驗。head標籤。

我的看法是,這現在是不好的做法。讓script住在head標籤。

在現代JavaScript中,除了將腳本保留在頁面底部之外,我們還有一種更有效的選擇-defer屬性:

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

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

注意:async屬性是相似的,但在我看來,這是比這更糟糕的選擇defer。我會在頁面中詳細說明原因https://flaviocopes.com/javascript-async-defer/

noscript標籤

此標記用於檢測何時在瀏覽器中禁用了腳本。

注意:用戶可以選擇在瀏覽器設置中禁用JavaScript腳本。否則,瀏覽器可能默認情況下不支持它們。

無論是放在文檔頭中還是放在文檔正文中,它的用法都不同。

現在我們在談論文檔頭,因此讓我們首先介紹這種用法。

在這種情況下,noscript標籤只能包含其他標籤:

  • link標籤
  • style標籤
  • meta標籤

更改頁面提供的資源,或者meta信息(如果禁用了腳本)。

在此示例中,我使用no-script-alert用於顯示是否禁用腳本的類,就像以前一樣display: none默認情況下:

<!DOCTYPE html>
<html>
	<head>
		...
		<noscript>
			<style>
				.no-script-alert {
					display: block;
				}
			</style>
		</noscript>
	...
&lt;/<span style="color:#f92672">head</span>&gt;
...

</html>

讓我們解決另一種情況:如果放在正文中,它可以包含在UI中呈現的內容,例如段落和其他標籤。

link標籤用於設置文檔和其他資源之間的關係。

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

該元素沒有結束標籤。

用法:

<!DOCTYPE html>
<html>
	<head>
		...
		<link href="file.css" rel="stylesheet">
		...
	</head>
	...
</html>

media屬性允許根據設備功能加載不同的樣式表:

<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">

我們可以使用以下方式關聯收藏夾圖標:

<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">

這個標籤曾是也用於多頁內容,使用rel="prev"rel="next". Mostly for Google. In 2019 Google宣布不再使用此標籤因為它可以找到沒有它的正確頁面結構。

style標籤

此標記可用於將樣式添加到文檔中,而不是加載外部樣式表。

用法:

<style>
.some-css {}
</style>

link標籤,您可以使用media屬性以僅在指定的介質上使用該CSS:

<style media="print">
.some-css {}
</style>

您也可以在文檔正文中添加此標籤。說到這一點,有趣的是scoped屬性,僅將該CSS分配給當前文檔子樹。換句話說,為了避免CSS洩漏到父元素之外。

base標籤

此標記用於為頁面中包含的所有相對URL設置基本URL。

<!DOCTYPE html>
<html>
	<head>
		...
		<base href="https://flaviocopes.com/">
		...
	</head>
	...
</html>

meta標籤

元標記執行各種任務,它們非常非常重要。

特別是對於SEO。

meta元素僅具有開始標記。

最基本的是description元標記:

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

可能如果Google發現比頁面上的內容更好地描述了頁面,請使用Google來在其結果頁面中生成頁面描述(不要問我怎麼做)。

charsetmeta標籤用於設置頁面字符編碼。utf-8大多數情況下:

<meta charset="utf-8">

robotsmeta標籤可指示搜索引擎機器人是否將網頁編入索引:

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

或者他們是否應該遵循鏈接:

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

您也可以在單個鏈接上設置nofollow。這是你可以設置的nofollow全球範圍。

您可以將它們結合起來:

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

默認行為是index, follow

您可以使用其他屬性,包括nosnippetnoarchivenoimageindex和更多。

您也可以只告訴Google而不是定位全部搜索引擎:

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

其他搜索引擎也可能具有自己的meta標籤。

說到這一點,我們可以告訴Google禁用某些功能。這會阻止搜索引擎結果中的翻譯功能:

<meta name="google" content="notranslate">

viewportmeta標籤用於告訴瀏覽器根據設備寬度設置頁面寬度。

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

看到更多關於這個標籤

另一個頗受歡迎的meta標籤是http-equiv="refresh"一。此行告訴瀏覽器等待3秒鐘,然後重定向到該其他頁面:

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

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

這不是完整的參考,存在其他使用較少的元標記。

介紹完本文檔標題後,我們就可以開始深入研究文檔正文了。

文件主體

在結束head標籤之後,我們在HTML文檔中只能有一件東西:body元素。

<!DOCTYPE html>
<html>
	<head>
		...
	</head>
	<body>
		...
	</body>
</html>

就像headhtml標籤,我們只能有一個body在一頁中標記。

在 - 的里面body標籤,我們擁有定義頁面內容的所有標籤。

從技術上講,開始和結束標記是可選的。但是我認為添加它們是一個好習慣。只是為了清楚起見。

在下一章中,我們將定義可在頁面正文中使用的各種標籤。

但是,在此之前,我們必須引入塊元素和內聯元素之間的區別。

塊元素與內聯元素

在頁面正文中定義的視覺元素通常可以分為兩類:

  • 塊元素(pdiv,標題元素,列表和列表項,…)
  • 內聯元素(aspanimg,…)

有什麼區別?

塊元素位於頁面中時,不允許其旁邊有其他元素。在左邊或右邊。

相反,內聯元素可以坐在其他內聯元素旁邊。

區別還在於我們可以使用CSS編輯的視覺屬性。我們可以更改寬度/高度,邊距,填充和邊框或塊元素。我們不能對內聯元素執行此操作。

請注意,使用CSS我們可以更改每個元素的默認設置,p標記為內聯(例如)或span成為一個塊元素。

另一個區別是內聯元素可以包含在塊元素中。反之則不成立。

某些塊元素可以包含其他塊元素,但這要視情況而定。這p例如,標記不允許這種選項。

免費下載我的HTML手冊


更多HTML教程: