HTML 術(shù)語(yǔ)詞典：全面解析 HTML 核心概念與常用標(biāo)簽

2025-04-09 18:53 更新

屬性

class

HTML 元素可以有一個(gè)或多個(gè)類(lèi)，類(lèi)之間用空格分隔。你可以使用 CSS 通過(guò)類(lèi)來(lái)選擇元素并為其設(shè)置樣式。

示例 

<div class="big-box yellow-box">這是一個(gè)大的黃色盒子。</div>

id

HTML 元素可以有一個(gè) id 屬性來(lái)標(biāo)識(shí)它。id 應(yīng)該是唯一的，每個(gè)元素最多只能有一個(gè) id。

示例 

<div id="my-box">這是我的盒子！請(qǐng)把你的文字放在其他盒子里。</div>

href

鏈接使用 href 屬性告訴瀏覽器要去哪里，href 存儲(chǔ)一個(gè) URL。

示例 

<a href="http://m.o2fo.com/">去 W3Cschool！</a>

基本格式

你可以使用簡(jiǎn)單的格式標(biāo)簽輕松地將文本設(shè)置為粗體、斜體或下劃線(xiàn)。

示例 

這段文字是 <b>粗體</b>，<i>斜體</i> 和 <u>下劃線(xiàn)</u>。

Body（主體）

主體是頁(yè)面所有內(nèi)容的容器。它緊跟在 <head> 標(biāo)簽之后，位于整體 <html> 標(biāo)簽內(nèi)。

示例 

<html>
  <head>
    <title>主體標(biāo)簽的例子</title>
  </head>
  <body>
    這是在主體里面！
  </body>
</html>

閱讀更多

使用

幾乎所有內(nèi)容都應(yīng)該放在主體標(biāo)簽內(nèi)。主要例外是腳本和樣式標(biāo)簽，以及頁(yè)面標(biāo)題標(biāo)簽。如你所見(jiàn)，在這個(gè)例子中，主體標(biāo)簽內(nèi)有一個(gè)標(biāo)題、一個(gè)圖像和一個(gè)鏈接。頭部標(biāo)簽只包含外部文件和頁(yè)面標(biāo)題。

示例 

<html>
  <head>
    <title>我的主頁(yè)</title>
    <link rel="stylesheet" type="text/css" href="homepage.css" />
    <script type="text/javascript" src="homepage.js"></script>
  </head>
  <body>
    <h1>你好，這是一張我的貓的照片！</h1>
    <img src="cat.jpg" />
    <a href="mailto:cat@w3cschool.cn">給我發(fā)郵件</a>
  </body>
</html>

子元素

一個(gè)元素是另一個(gè)元素的直接后代或嵌套在另一個(gè)元素內(nèi)時(shí)，它被稱(chēng)為子元素。在使用 CSS 子選擇器和偽元素時(shí)，這些概念非常有用。

示例 

<ul id="parent">
  <li id="child">我是 parent 的子元素！</li>
</ul>

注釋

HTML 注釋有時(shí)用于代碼中以解釋標(biāo)記的部分。它們與其他語(yǔ)言中的注釋類(lèi)似。用戶(hù)在瀏覽器中看不到注釋。

語(yǔ)法 

<!-- 這是一個(gè)注釋 -->

Div（分區(qū)）

一個(gè)塊級(jí)容器（或網(wǎng)頁(yè)的“分區(qū)”），用于沒(méi)有語(yǔ)義意義的內(nèi)容。

語(yǔ)法 

<div>這是一個(gè) div 元素。</div>

Head（頭部）

頭部標(biāo)簽圍繞對(duì)用戶(hù)不可見(jiàn)但對(duì)瀏覽器重要的內(nèi)容。此標(biāo)簽內(nèi)的元素包含關(guān)于頁(yè)面的元數(shù)據(jù)以及樣式表、腳本等的鏈接。

<html>
  <head>
  </head>
  <body>
  </body>
</html>

標(biāo)題

標(biāo)題元素如 <h1>、<h2>、<h3> 等允許你使用六級(jí)文檔標(biāo)題，從最大到最小，將文檔分成邏輯部分。例如，上面的“標(biāo)題”一詞被包裹在一個(gè) <h2> 標(biāo)簽中。

語(yǔ)法 

<h1>這是一個(gè)標(biāo)題！</h1>

水平線(xiàn)

此標(biāo)簽創(chuàng)建一條貫穿其容器的黑色 1 像素粗的線(xiàn)。你可以使用 CSS 使其看起來(lái)不同。

示例 

這段文字被<hr>分隔... 從這段文字！

閱讀更多

HTML

HTML 是什么？

HTML 代表超文本標(biāo)記語(yǔ)言。它是用于創(chuàng)建所有網(wǎng)站的語(yǔ)言。

閱讀更多

<html> 標(biāo)簽

所有 HTML 文件都包含在一個(gè)總體的 html 標(biāo)簽內(nèi)。這是定義 html 文檔的基本標(biāo)簽。

語(yǔ)法 

<html> 你的網(wǎng)頁(yè)其余部分放在這里！</html>

閱讀更多

超鏈接

超鏈接（或鏈接）當(dāng)用戶(hù)點(diǎn)擊時(shí)會(huì)將他們帶到另一個(gè)網(wǎng)頁(yè)。鏈接最常用的屬性是 href，它告訴瀏覽器鏈接指向哪里。

語(yǔ)法 

<a href="這個(gè)鏈接指向的網(wǎng)址">鏈接文本</a>

示例 

以下文字 <a  rel="external nofollow" target="_blank" >去 Google</a>。

圖像

img 標(biāo)簽將圖像嵌入到你的 HTML 中?？偸桥c 'src' 屬性一起使用，它告訴瀏覽器在哪里找到圖像。注意 <img/> 標(biāo)簽是自閉合的。

語(yǔ)法 

<img src='我的本地圖像.jpg'/>

換行

此標(biāo)簽用于在文本塊中強(qiáng)制換行。這適用于單個(gè)段落中需要此格式的情況，如詩(shī)歌或地址。要分隔段落，請(qǐng)將每個(gè)段落分成一個(gè)單獨(dú)的 <p> 元素。結(jié)果元素在網(wǎng)頁(yè)上將如下所示：

示例 

<p>一些文本 <br/> 跨兩行的文本</p>

鏈接

鏈接元素用于將你的文檔連接到相關(guān)資源（與超鏈接非常不同，超鏈接當(dāng)你點(diǎn)擊它們時(shí)會(huì)帶你到另一個(gè)網(wǎng)頁(yè)）。鏈接只出現(xiàn)在文檔的頭部部分，因此它們不會(huì)改變內(nèi)容，只改變呈現(xiàn)方式。鏈接最常用于連接到樣式表、腳本、網(wǎng)站圖標(biāo)或頁(yè)面的替代格式，如 RSS 源或 PDF。

示例 

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

列表

HTML 支持兩種列表：有序列表和無(wú)序列表。在列表中，每個(gè)列表項(xiàng)都有自己的標(biāo)簽。

無(wú)序列表

無(wú)序列表是項(xiàng)目以項(xiàng)目符號(hào)表示的列表。

示例 

購(gòu)物清單
<ul>
  <li>洗碗液</li>
  <li>貓砂</li>
  <li>番茄醬</li>
</ul>

閱讀更多

有序列表

有序列表的項(xiàng)目以數(shù)字表示。

示例 

我的編號(hào)列表
<ol>
  <li>第一項(xiàng)！</li>
  <li>第二項(xiàng)！</li>
  <li>最后一項(xiàng)！</li>
</ol>

閱讀更多

段落

<p>

HTML 中最常用的標(biāo)簽之一 - 它表示一個(gè)文本段落。它通常包含其他元素，如 <img/>、<a>、<strong> 和 <em>。

語(yǔ)法 

<p>這是段落文本！</p>

語(yǔ)義化格式

這些標(biāo)簽與之前提到的格式標(biāo)簽類(lèi)似，但它們有語(yǔ)義價(jià)值（意義）。<em> 用于你想要強(qiáng)調(diào)的內(nèi)容，<strong> 用于重要的內(nèi)容。通過(guò)嵌套這些元素，你可以傳達(dá)文本的強(qiáng)調(diào)或重要性級(jí)別。嵌套的層數(shù)越多，文本的重要性就越高。

示例 

<p><strong><strong>警告：</strong>酸會(huì)造成嚴(yán)重灼傷</strong></p>

表格

用于以行和列顯示信息的元素。支持帶有標(biāo)簽的列標(biāo)題和列尾。將信息分為行（由 tr 標(biāo)簽表示），行中包含單元格（由 td 標(biāo)簽表示）。

示例 

<table>
  <thead>
    <tr>
      <th>項(xiàng)目</th>
      <th>價(jià)格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>香蕉</td>
      <td>￥8.00</td>
    </tr>
    <tr>
      <td>酸奶</td>
      <td>￥10.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>總計(jì)</td>
      <td>￥18.00</td>
    </tr>
  </tfoot>
</table>

標(biāo)簽和元素

標(biāo)簽是基本的標(biāo)簽，用于將你的標(biāo)記分成元素。它們由一個(gè)關(guān)鍵詞組成，關(guān)鍵詞被尖括號(hào) <> 包圍。內(nèi)容位于兩個(gè)標(biāo)簽之間，關(guān)閉標(biāo)簽前綴為斜杠（注意：有些 HTML 標(biāo)簽是自閉合的，如圖像標(biāo)簽）。標(biāo)簽還可以有屬性。

語(yǔ)法 

<tag attribute='value'>內(nèi)容</tag>

標(biāo)題

此標(biāo)簽告訴瀏覽器在頂部顯示頁(yè)面標(biāo)題，并告訴搜索引擎你的網(wǎng)站標(biāo)題是什么。它位于 <head> 標(biāo)簽內(nèi)。盡量使你的頁(yè)面標(biāo)題描述性，但不要太冗長(zhǎng)。

示例 

<title>HTML 術(shù)語(yǔ)詞典</title>

希望這篇文章能幫助你更好地理解 HTML！如果你有任何問(wèn)題或需要進(jìn)一步的幫助，請(qǐng)隨時(shí)訪(fǎng)問(wèn) 編程獅。


課程推薦：


以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)