/

文本的HTML標籤

文本的HTML標籤

發現您可以在網頁上使用的各種HTML標籤來顯示文本

p 標籤

此標籤定義了一個文本段落。

1
<p>一些文本</p>

這是一個塊元素。

在其中，我們可以添加任何內聯元素，例如 span 或 a。

我們不能添加塊元素。

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

默認情況下，瀏覽器會對段落進行上下邊距設置。在Chrome中為 16px，但實際值可能各瀏覽器不同。

這使得兩個連續的段落之間產生間距，模擬我們印刷文本中的“段落”。

span 標籤

這是內聯標籤，可用於在段落中創建一個可通過CSS選取的部分：

1
<p>文本的一部分 <span>這裡還有一部分</span></p>

br 標籤

此標籤表示換行。它是內聯元素，不需要關閉標籤。

我們使用它在 p 標籤中換行，而不創建新的段落。

與創建新段落相比，它不會添加額外的間距。

1
<p>一些文本<br>換行</p>

標題標籤

HTML提供了6個標題標籤。從最重要到最不重要，我們有 h1，h2，h3，h4，h5，h6。

通常，一個頁面只會有一個 h1 元素作為頁面標題。然後，根據頁面內容，可能會有一個或多個 h2 元素。

標題，特別是標題的組織，對於SEO也很重要，搜索引擎以各種方式使用它們。

瀏覽器默認情況下會呈現較大的 h1 標籤，並根據 h 數字的增加使元素的大小變小：

Headings

所有標題都是塊元素。它們不能包含其他元素，只能包含文本。

strong 標籤

此標籤用於將其中的文本標記為粗體。這是非常重要的，它不是視覺提示，而是語義提示。根據使用的媒介不同，它的解釋也會有所不同。

瀏覽器默認情況下將此標籤中的文本設置為粗體。

em 標籤

此標籤用於將其中的文本標記為強調。與 strong 一樣，它不是視覺提示，而是語義提示。

瀏覽器默認情况下將此標籤中的文本設置為斜體。

引用

blockquote HTML標籤可用於在文本中插入引用。

瀏覽器默認情況下將 blockquote 元素應用了一個邊距。Chrome應用了左右邊距為40px，上下邊距為10px。

q HTML標籤用於內嵌引用。

水平線

雖然不是基於文本，但 hr 標籤經常在頁面內部使用。它表示水平分隔線並在頁面中添加一條水平線。

有助於區分頁面中的各個部分。

代碼塊

code 標籤對於顯示代碼特別有用，因為瀏覽器給它一個等寬字體。

通常這是唯一瀏覽器處理的事情。這是Chrome應用的CSS：

1
2
3
code {
 font-family: monospace;
}

該標籤通常包含在pre標籤中，因為code元素會忽略空格和換行。就像p標籤一樣。

Chrome對pre提供了這個默認樣式：

1
2
3
4
5
6
pre {
 display: block;
 font-family: monospace;
 white-space: pre;
 margin: 1em 0px;
}

這可以防止空格折疊並使其成為塊元素。

列表

我們有3種類型的列表：

  • 無序列表
  • 有序列表
  • 定義列表

使用ul標籤創建無序列表。列表中的每個項目都使用li標籤創建：

1
2
3
4
<ul>
 <li>第一個</li>
 <li>第二個</li>
</ul>

有序列表類似，只需使用ol標籤：

1
2
3
4
<ol>
 <li>第一個</li>
 <li>第二個</li>
</ol>

兩者之間的區別是有序列表在每個項目前面有一個數字：

Lists

定義列表有所不同。它包含一個詞語及其定義：

1
2
3
4
5
6
<dl>
 <dt>Flavio</dt>
 <dd>名字</dd>
 <dt>Copes</dt>
 <dd>姓氏</dd>
</dl>

這是瀏覽器通常呈現它們的方式：

Definition list

我必須說你很少在網絡上看到它們，當然遠不如 ul 和 ol 那麼常見，但有時它們可能很有用。

其他文本標籤

還有一些具有呈現目的的標籤：

  • mark 標籤
  • ins 標籤
  • del 標籤
  • sup 標籤
  • sub 標籤
  • small 標籤
  • i 標籤
  • b 標籤

下面是這些標籤的默認視覺呈現示例：

Various tags

也許您想知道，b 和 strong 之間有什麼不同？i 和 em 之間有什麼不同？

區別在於語義含義。b 和 i 直接提示瀏覽器將某段文本加粗或斜體，而 strong 和 em 給文本賦予特殊含義，而由瀏覽器決定呈現樣式。默認情況下與 b 和 i 完全相同。但您可以使用CSS更改這一默認行為。

還有一些用於文本的其他不太常用的標籤。我只提到了我看到的使用最多的標籤。

tags: [“HTML”, “text”, “tags”, “paragraphs”, “inline elements”, “headings”, “strong”, “em”, “blockquote”, “q”, “horizontal line”, “code”, “lists”, “unordered lists”, “ordered lists”, “definition lists”, “mark”, “ins”, “del”, “sup”, “sub”, “small”, “quote”]