HTML頁面元素解釋
HTML 是 Web 開發(fā)的支柱，也是創(chuàng)建基于 Web 的文檔的基本構(gòu)建塊。讓我們快速看一下它是如何工作的。
（更多優(yōu)質(zhì)內(nèi)容：java567.com）
HTML 有什么作用？
HTML 的主要作用是通過使用一組標(biāo)簽或元素來定義網(wǎng)頁的結(jié)構(gòu)和布局。這些標(biāo)簽代表不同類型的內(nèi)容，例如標(biāo)題、段落、圖像、鏈接、表單和表格。
HTML 標(biāo)記包含在尖括號 (<>) 中，由開始標(biāo)記、內(nèi)容和結(jié)束標(biāo)記（由正斜杠“/”標(biāo)識）組成。
通過使用 HTML，Web 開發(fā)人員可以定義網(wǎng)頁的語義結(jié)構(gòu)，指定標(biāo)題、段落、列表和部分等元素。這是一個典型的 HTML 頁面示例，其中<head>清楚地標(biāo)識了<body>、<header>、 和<footer>部分：
?<!DOCTYPE html>
?<html>
?<head>
? <title>My Demo</title>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1">
?</head>
?<body>
?<header>
? <h3>My Demo</h3>
?</header>
?<div>
? <!--And a comment!
? -->
? Here are some important points to consider:<br>
? <ul>
? <li>Point One
? <li>Point Two
? <li>Point Three
? </ul>
?<footer>
? ?<p>© 2023 My Demo. All rights reserved.</p>
? ?<nav>
? ? ?<ul>
? ? ? ?<li><a href="/about">About</a></li>
? ? ? ?<li><a href="/contact">Contact</a></li>
? ? ? ?<li><a href="/privacy">Privacy Policy</a></li>
? ? ?</ul>
? ?</nav>
?</footer>
?</div>
?</body>
?</html>
此外，HTML 允許包含圖像和視頻等多媒體內(nèi)容。它還允許您集成其他 Web 技術(shù)，例如用于樣式的 CSS（層疊樣式表）和用于交互的 JavaScript。
下面是一個示例代碼片段，顯示了將圖像和視頻合并到網(wǎng)頁中。
?<img src="test_image.png" width="800" alt="A test image">
?<hr>
?
?<div>
? ?<video controls>
? ? ?<source src="sample_video.mkv" type="video/mp4">
? ? ?Your browser does not support the video tag.
? ?</video>
?</div>
HTML 文檔由 Web 瀏覽器解釋，呈現(xiàn)結(jié)構(gòu)化內(nèi)容并將其呈現(xiàn)給用戶。它使瀏覽器能夠理解網(wǎng)頁上元素的層次結(jié)構(gòu)、關(guān)系和表示。它確保一切都按預(yù)期顯示，并且具有適當(dāng)?shù)慕换バ浴?/p>
在本指南中，我們將探討核心 HTML 元素，包括文檔結(jié)構(gòu)、外部鏈接、嵌入式媒體和簡單表單。我們將通過實際創(chuàng)建東西來完成所有這些工作。不再有無聊的幻燈片。
了解 HTML 頁面結(jié)構(gòu)
好的。HTML 文檔的基本結(jié)構(gòu)（有時稱為 HTML 骨架）為創(chuàng)建網(wǎng)頁提供了基礎(chǔ)。它由幾個建立結(jié)構(gòu)和定義頁面內(nèi)容的基本元素組成。
當(dāng)我右鍵單擊一個頁面時，我可以選擇查看頁面源代碼選項，然后我會發(fā)現(xiàn)自己正在查看 HTML 源代碼。
好吧，從頭開始。文檔類型聲明 (<!DOCTYPE>) 位于 HTML 文檔的最開頭，以指定正在使用的 HTML 版本。它確保瀏覽器正確解釋頁面。
HTML 標(biāo)記是 HTML 文檔的根元素。它包含頁面的全部內(nèi)容，并充當(dāng)所有其他 HTML 元素的容器。
如果您一直滾動到頁面底部，您會看到一個結(jié)束標(biāo)記，如下所示：</html>。
HTML 代碼的 <head> 部分是什么？
head 標(biāo)簽包含有關(guān)網(wǎng)頁的元數(shù)據(jù)和其他不可見信息。它可以包括頁面標(biāo)題、字符編碼、鏈接樣式表和 JavaScript 文件等元素。head 標(biāo)簽中的內(nèi)容對加載頁面的用戶不直接可見。
本例中的字符集標(biāo)記使用UTF-8。那是怎么回事？HTML 字符編碼是指在 HTML 文檔中用于表示和顯示字符、符號和特殊字符的方法。
這可能是這樣的：
?<!DOCTYPE html>
?<html>
?<head>
? <title>My Demo</title>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1">
?</head>
?<body>
由于 HTML 是一種基于文本的標(biāo)記語言，因此它需要一種標(biāo)準化的方式來表示大寫字母 AZ、小寫字母 az 和數(shù)字 0-9 等基本字母數(shù)字集之外的字符。
使用 UTF-8 編碼時，ASCII 范圍之外的字符使用多個字節(jié)表示。例如，像“A”這樣的基本拉丁字符由單個字節(jié) (0x41) 表示，而某些非拉丁字符可能需要兩個或更多字節(jié)。
該<head>部分還可以包含樣式信息，這些信息可以很容易地放在隨附的 CSS 文件中。這可能是這樣的：
?<style>
? ?.video-container {
? ? ?width: 500px; /* Set the desired width */
? ?}
?</style>
body 標(biāo)簽表示網(wǎng)頁的可見內(nèi)容。它包含將在屏幕上顯示的所有元素，例如文本、圖像、標(biāo)題、段落和鏈接。body 標(biāo)簽中的內(nèi)容是用戶訪問頁面時看到的內(nèi)容。
標(biāo)題標(biāo)簽，如 h1、h2 等，用于定義頁面正文中各節(jié)的標(biāo)題或標(biāo)題。h1 標(biāo)簽代表主標(biāo)題，h2 代表副標(biāo)題，h3 代表副標(biāo)題，依此類推。
段落標(biāo)簽，<p>定義頁面正文中的文本塊或內(nèi)容。它們創(chuàng)建單獨的段落，通常用于構(gòu)建文本內(nèi)容。
?<p>Here is some new text:</p>
理解語義標(biāo)簽
最后，HTML5引入了一組語義標(biāo)簽，為內(nèi)容提供更有意義和描述性的結(jié)構(gòu)。這些標(biāo)簽包括頁眉、導(dǎo)航、部分、文章、旁白和頁腳。
盡管它們并不總是對頁面在瀏覽器中的顯示方式產(chǎn)生任何直接影響，但語義標(biāo)簽有助于組織并使我們更容易理解頁面不同部分的用途。
以感嘆號開頭的標(biāo)簽實際上用于用戶看不到的評論，并且不會影響瀏覽器閱讀頁面的方式。這是一個例子：
?<!-- Here's a comment that's just for developers' eyes. -->
注釋標(biāo)簽的目的是幫助我們記住各個代碼段的用途和功能。這一切都是為了記錄您的代碼。
事實上，“可讀性”是所有編寫良好的 HTML 代碼的重要特征。我們在這里看到的每個元素——無論是控制元數(shù)據(jù)、樣式、腳本、導(dǎo)航還是純文本——在智能呈現(xiàn)時都可以為用戶看到的頁面和代碼本身的價值做出貢獻。
