HTML 元素

TML 文檔由 HTML 元素定義。

HTML 元素

開始標簽 *	元素內容	結束標簽 *
<p>	這是一個段落	</p>
<a href="default.htm">	這是一個鏈接	</a>
<br>

*開始標簽常被稱為起始標簽（opening tag），結束標簽常稱為閉合標簽（closing tag）。

HTML 元素語法

HTML 元素以開始標簽起始
HTML 元素以結束標簽終止
元素的內容是開始標簽與結束標簽之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
大多數 HTML 元素可擁有屬性

注釋: 您將在本教程的下一章中學習更多有關屬性的內容。

嵌套的 HTML 元素

<p大多數 html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">

HTML 文檔由嵌套的 HTML 元素構成。

HTML 文檔實例

<!DOCTYPE html>

<html>

<body>

<p>這是第一個段落。</p>

</body>

</html>

以上實例包含了三個 HTML 元素。

HTML 實例解析

<p> 元素:

<p>這是第一個段落。</p>

這個 <p> 元素定義了 HTML 文檔中的一個段落。

這個元素擁有一個開始標簽 <p> 以及一個結束標簽 </p>.

元素內容是: This is my first paragraph.

<body> 元素:

<body>

<p>這是第一個段落。</p>

</body>

The <body> 元素定義了 HTML 文檔的主體。

這個元素擁有一個開始標簽 <body> 以及一個結束標簽 </body>。

元素內容是另一個 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>

<p>這是第一個段落。</p>

</body>

</html>

The <html> 元素定義了整個 HTML 文檔。

這個元素擁有一個開始標簽 <html> ，以及一個結束標簽 </html>.

元素內容是另一個 HTML 元素（body 元素）。

不要忘記結束標簽

即使您忘記了使用結束標簽，大多數瀏覽器也會正確地顯示 HTML：

<p>這是一個段落

以上實例在瀏覽器中也能正常顯示，因為關閉標簽是可選的。

但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。

HTML 空元素

沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。

<br> 就是沒有關閉標簽的空元素（<br> 標簽定義換行）。

在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。

在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

HTML 提示：使用小寫標簽

HTML 標簽對大小寫不敏感：<P> 等同于 <p>。許多網站都使用大寫的 HTML 標簽。

W3CSchool 使用的是小寫標簽，因為萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

ideo元素與audio元素所具有的屬性大致相同，

下面來看一下這兩個元素都具有哪些屬性。

　src屬性和autoplay屬性

src屬性用于指定媒體數據的URL地址。

autoplay屬性用于指定媒體是否在頁面加載后自動播放，使用方法如下。

在文件中創建多媒體元素<video>，并在元素的src屬性中，

設置播放的視頻文件的URL地址，并設置頁面加載完成后自動播放這個文件。代碼如下。

<!DOCTYPE HTML>

<html>

<head>

<title>使用多媒體元素播放文件</title>

</head>

<body>

你的瀏覽器不支持視頻

</video>

</body>

</html>

　perload屬性

perload屬性用于指定視頻或音頻數據是否預加載。如果使用預加載，

則瀏覽器會預先將視頻或音頻數據進行緩沖，這樣可以加快播放速度，

因為播放時數據已經預先緩沖完畢。

該屬性有3個可選值，分別是none、metadata和auto，其默認值為auto。

　none值表示不進行預加載。

　metadata表示只預加載媒體的元數據（媒體字節數、第一幀、播放列表、持續時間等）。

　auto表示預加載全部視頻或音頻。

該屬性的使用方法如下。

　poster（video元素獨有屬性）和loop屬性

當視頻不可用時，可以使用該元素向用戶展示一幅替代用的圖片。當視頻不可用時，

最好使用poster屬性，以免展示視頻的區域中出現一片空白。

該屬性的使用方法如下。

在文件中創建一個video元素，為video元素設置poster屬性，并選取一幅圖片作為該屬性的值。代碼如下。

<html>

<head>

<title>設置video 元素的poster 屬性</title>

</head>

<body>

你的瀏覽器不支持視頻

</video>

</body>

</html>

運行實例，在播放視頻文件之前，在視頻播放區域中首先將顯示poster屬性指定的圖片，

loop屬性用于指定是否循環播放視頻或音頻，

其使用方法如下。

　controls屬性、width屬性和height屬性（后兩個是video元素獨有屬性）

controls屬性指定是否為視頻或音頻添加瀏覽器自帶的播放用的控制條。

控制條中具有播放、暫停等按鈕。其使用方法如下。

說明

開發者也可以在腳本中自定義控制條，而不使用瀏覽器默認的控制條。

width屬性與height屬性用于指定視頻的寬度與高度（以像素為單位），

使用方法如下。

在文件中創建一個video元素，首先在元素的src屬性中設置需要播放的視頻文件，

然后分別設置video元素的寬度與高度。代碼如下。

<html>

<head>

<title>設置video 元素的大小</title>

</head>

<body>

你的瀏覽器不支持視頻

</video>

</body>

</html>

　error屬性

在讀取、使用媒體數據的過程中，正常情況下該屬性為null，

但是任何時候只要出現錯誤，該屬性將返回一個MediaError對象，

該對象的code屬性返回對應的錯誤狀態碼，其可能的值如下。

　MEDIA_ERR_ABORTED（數值1）：媒體數據的下載過程由于用戶的操作而被終止。

　MEDIA_ERR_NETWORK（數值2）：確認媒體資源可用，但是在下載時出現網絡錯誤，媒體數據的下載過程被終止。

　MEDIA_ERR_DECODE(數值3）：確認媒體資源可用，但是解碼時發生錯誤。

　MEDIA_ERR_SRC_NOT_SUPPORTED（數值4）：媒體資源不可用，媒體格式不被支持。

error屬性為只讀屬性。

　networkState屬性

該屬性在媒體數據加載過程中讀取當前網絡的狀態，其值如下。

　NETWORK_EMPTY（數值0）：元素處于初始狀態。

　NETWORK_IDLE（數值1）：瀏覽器已選擇好用什么編碼格式來播放媒體，但尚未建立網絡連接。

　NETWORK_LOADING（數值2）：媒體數據加載中。

　NETWORK_NO_SOURCE（數值3）：沒有支持的編碼格式，不執行加載。

networkState屬性為只讀屬性，讀取網絡狀態的實例代碼如下。

　currentSrc屬性、buffered屬性

可以用currentSrc屬性來讀取播放中的媒體數據的URL地址，該屬性為只讀屬性。

最靠譜的WEB前端教程——整整140集，全程干貨無廢話，學完變大佬！

一部分：HTML簡介

什么是HTML？

HTML代表超文本標記語言（Hypertext Markup Language）。它是一種用于構建網頁的標記語言。HTML文件包含一組標簽，這些標簽用于定義網頁的結構和內容。瀏覽器讀取HTML文件，并根據標記中的指示呈現網頁內容。

HTML的主要作用是定義文本內容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。

HTML的基本結構

每個HTML文檔都應該遵循以下基本結構：

<!DOCTYPE html>
<html>
<head>
    <title>網頁標題</title>
</head>
<body>
    <!-- 內容在這里 -->
</body>
</html>

讓我們逐步解釋這個結構：

<!DOCTYPE html>：這是文檔類型聲明，它告訴瀏覽器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文檔的根元素。所有其他元素都包含在<html>標簽內。
<head>：包含與文檔相關的元信息，如頁面標題、字符集聲明和外部樣式表鏈接。
<title>：定義網頁的標題，顯示在瀏覽器標簽頁上。
<body>：包含網頁的主要內容，如文本、圖像和其他媒體。

HTML標簽和元素

HTML標簽是由尖括號括起來的名稱，例如<p>表示段落，<img>表示圖像。標簽通常成對出現，有一個開始標簽和一個結束標簽。例如：

<p>這是一個段落。</p>

<p>是開始標簽，</p>是結束標簽，文本位于兩個標簽之間。標簽定義了元素的類型和結構。

有些HTML標簽是自封閉的，不需要結束標簽，例如<img>用于插入圖像。

HTML注釋

在HTML中，你可以使用注釋來添加說明性文字，注釋不會在瀏覽器中顯示。HTML注釋使用結尾，如下所示：

<!-- 這是一個注釋 -->

注釋通常用于添加文檔說明、調試代碼或標記未來的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、標題、列表等元素中。以下是一些常見的文本元素：

<p>：定義一個段落。
<h1>到<h6>：定義標題，<h1>是最高級別的標題，<h6>是最低級別的標題。
<strong>：定義強調文本，通常以粗體顯示。
<em>：定義強調文本，通常以斜體顯示。
<a>：定義超鏈接，允許用戶點擊跳轉到其他頁面。

示例：

<p>這是一個段落。</p>
<h1>這是一個標題</h1>
<p><strong>這是強調文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問<a href="https://www.example.com">示例網站</a></p>

圖像

要在網頁中插入圖像，可以使用<img>標簽。它是一個自封閉標簽，需要指定圖像的src屬性來指定圖像文件的路徑。

示例：

htmlCopy code
<img src="image.jpg" alt="圖像描述">

src：指定圖像文件的路徑。
alt：提供圖像的替代文本，用于無法加載圖像時的文字描述。

鏈接

通過使用<a>標簽，可以在網頁中創建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標URL。

示例：

<a href="https://www.example.com">訪問示例網站</a>

href：指定鏈接的目標URL。

列表

HTML支持有序列表（<ol>）、無序列表（<ul>）和定義列表（<dl>）。

無序列表

無序列表使用<ul>標簽定義，每個列表項使用<li>標簽。

示例：

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

有序列表

有序列表使用<ol>標簽定義，每個列表項使用<li>標簽。

示例：

<ol>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>

定義列表

定義列表使用<dl>標簽定義，每個定義項目使用<dt>標簽定義術語，使用<dd>標簽定義描述。

示例：

<dl>
    <dt>術語1</dt>
    <dd>描述1</dd>
    <dt>術語2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表單

HTML表單允許用戶與網頁進行交互，提交數據。以下是HTML表單的基本元素：

<form>元素

<form>元素用于創建表單，可以包含文本字段、復選框、單選按鈕、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表單元素在這里 -->
</form>

action：指定表單數據提交的目標URL。
method：指定提交方法，通常是"post"或"get"。

輸入字段

輸入字段用于接收用戶輸入的數據，常見的輸入字段類型包括文本框、密碼框、單選按鈕、復選框等。

文本框

文本框使用<input>標簽，type屬性設置為"text"。

示例：

<input type="text" name="username" placeholder="用戶名">

type：指定字段類型。
name：指定字段的名稱。
placeholder：設置文本框的占位符文本。

密碼框

密碼框使用<input>標簽，type屬性設置為"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密碼">

單選按鈕

單選按鈕使用<input>標簽，type屬性設置為"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定單選按鈕組的名稱。
value：指定每個選項的值。

復選框

復選框使用<input>標簽，type屬性設置為"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">訂閱新聞

下拉列表

下拉列表使用<select>和<option>標簽創建。<select>定義下拉列表，而<option>定義選項。

示例：

<select name="country">
    <option value="us">美國</option>
    <option value="ca">加拿大</option>
    <option value="uk">英國</option>
</select>

name：指定下拉列表的名稱。
每個<option>標簽表示一個選項，使用value屬性定義選項的值。

第四部分：HTML樣式和CSS

HTML用于定義網頁的結構和內容，但要使網頁看起來更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。

內聯樣式

可以在HTML元素內部使用style屬性來定義內聯樣式。

示例：

<p style="color: blue; font-size: 16px;">這是一個藍色的段落。</p>

外部樣式表

外部樣式表將樣式規則保存在獨立的CSS文件中，并通過<link>標簽將其鏈接到HTML文檔。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中鏈接外部樣式表：

<link rel="stylesheet" type="text/css" href="style.css">

這使得可以在整個網站上共享相同的樣式。

總結

HTML是構建現代網頁的基礎。通過學習HTML的基本語法和元素，你可以創建吸引人且功能強大的網頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現內容和實現用戶交互。

這篇文章提供了HTML的基礎知識，但HTML是一個廣泛的主題，還有許多高級特性和技巧等待你探索。希望這篇文章對你入門HTML有所幫助，讓你能夠開始創建自己的網頁。繼續學習和實踐，你將成為一個熟練的網頁開發者。

在線咨詢

上一篇：XML 和 HTML 比較：你應該知道的主要區別
下一篇：圖片上傳組件WebUploader圖片被壓縮解決方案

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 元素

一部分：HTML簡介

什么是HTML？

HTML的基本結構

HTML標簽和元素

HTML注釋

第二部分：HTML基本元素

文本

圖像

鏈接

列表

無序列表

有序列表

定義列表

第三部分：HTML表單

<form>元素

輸入字段

文本框

密碼框

單選按鈕

復選框

下拉列表

第四部分：HTML樣式和CSS

內聯樣式

外部樣式表

總結

您的項目需求