Articles
HTML简介
与文本相关的标签

与文本相关的标签

本文介绍与文本相关的标签。

解释分为语义标签和非语义标签。

YouTube Video

为预览创建 CSS

html-tags.css 
  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 20px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29}
 30
 31p, pre {
 32    margin: 10px 0;
 33    padding: 0;
 34}
 35
 36ul, ol, dl, menu {
 37    margin: 0;
 38}
 39
 40pre {
 41    background-color: #f0f0f0;
 42    border-left: 4px solid #ccc;
 43    padding: 10px;
 44    overflow-x: auto;
 45}
 46
 47p.sample, .sample {
 48    background-color: #e7f4e9;
 49    padding: 10px;
 50    border-left: 4px solid #7bbd82;
 51    color: #333;
 52}
 53
 54p.sample-error, .sample-error {
 55    background-color: #f4e7e7;
 56    padding: 10px;
 57    border-left: 4px solid #bd827b;
 58    color: #333;
 59}
 60
 61p.sample-warn, .sample-warn {
 62    background-color: #f4f1e7;
 63    padding: 10px;
 64    border-left: 4px solid #bda97b;
 65    color: #333;
 66}
 67
 68code {
 69    padding: 2px 4px;
 70    border-radius: 4px;
 71    font-family: monospace;
 72}
 73
 74span {
 75    font-weight: bold;
 76}
 77
 78main {
 79    padding-bottom: 100px;
 80}
 81
 82article {
 83    background-color: white;
 84    padding: 20px;
 85    margin-bottom: 10px;
 86    border-radius: 8px;
 87    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 88}
 89
 90section {
 91    margin-bottom: 20px;
 92}
 93
 94table {
 95    width: 100%;
 96    border-collapse: collapse;
 97}
 98
 99th, td {
100    border: 1px solid #ddd;
101}

基本的文本相关标签

<div> 标签

This is a division of content.
1<div>This is a division of content.</div>

  • <div> 标签是一个块级元素，用于在HTML中创建区块。

  • <div> 标签是一个非语义化标签。

    在强调语义化HTML时，可以使用有意义的标签（如<section>、<article>）。这有助于搜索引擎和屏幕阅读器更好地理解页面内容。

  • 结合使用CSS和JavaScript，可以控制页面的外观和行为。

    <div>标签用于将页面内容分组为块级元素。它主要与CSS和JavaScript结合使用以调整页面布局、样式并操作元素。

<p> 标签

This is a paragraph of text.

1<p>This is a paragraph of text.</p>
  • <p>标签是用于在HTML中定义段落的元素。<p>表示一个段落，主要用于分组和显示文本。它通过视图上分隔文本部分，有助于使内容更易于阅读。
  • 您不能在<p>标签内放置其他块级元素，如另一个<p>标签或一个<div>标签。HTML规范禁止这样做。如果这么做，浏览器会自动关闭标签，并且不会正确显示。

<a> 标签

Go to codesparklab.com 
1<a href="https://codesparklab.com" title="Code Spark Lab">Go to codesparklab.com</a>

  • <a>标签用于创建链接。

    <a>标签用于创建到其他页面、外部网站或文件的链接。href属性用于指定链接的目标。

  • 可以用于文本或图片链接，使用target="_blank"则会在新标签页中打开链接。

  • target 属性用于指定链接的目标如何显示。

    • _self（默认）：在当前窗口或标签页中打开链接。
    • _blank：在新窗口或标签页中打开链接。
    • _parent：在父框架中打开链接。
    • _top：在整个窗口中打开链接，忽略任何框架。

  • title属性用于在链接上显示工具提示。当用户将鼠标悬停在链接上时，会显示指定的标题。

1<a href="#section1">Go to Section 1</a>
2
3<h2 id="section1">Section 1</h2>
4<p>This is Section 1 content.</p>
  • <a>标签也用于跳转到同一页面内的特定位置。为实现此功能，可在目标元素上设置一个id属性，并在链接的href属性中使用此id。

<span> 标签

Here is some highlighted text 
1Here is some <span style="color: red;">highlighted text

  • <span> 标签是一个内联元素。

    “”标签是一个内联元素，因此当它在文本、链接、图像或其他内联元素之间使用时，不会换行。它自然地融入到页面的流中。

  • 您可以局部应用特定样式。

    当您想将样式应用于文档的一部分时，可以使用“”标签分配一个CSS类或ID，并将样式应用于特定范围。

  • <span> 标签是一个非语义化元素。

    由于“”标签没有特定的含义或结构角色，因此纯粹用于样式或脚本目的。当需要语义强调时，更适合使用语义标签，如“”或“”，这些会在后面介绍。

<br> 标签

Here is some text with a
line break. 
1Here is some text with a <br> line break.

  • <br> 标签是一个内联元素。

    由于“
    ”标签是一个内联元素，它不会占据整个块，并且在其放置的位置会在文本中创建一个换行。虽然“

    ”标签在上下添加边距以分隔段落，“
    ”标签则是在不添加任何边距的情况下创建换行。

  • 它是一个自闭合标签，因此不需要闭合标签 (</br>)。

  • 最好避免过度使用它，而使用“

    ”标签或CSS来进行段落分隔或布局调整。

    当将文本组织成段落时，更适合使用“

    ”标签。也建议使用CSS进行布局调整。例如，使用CSS中的“white-space”属性可以如实显示文本中的换行和空格。

<hr> 标签

This is some text.
This is another section of text. 
1This is some text.<hr>This is another section of text.

  • “

    ”标签是一个块级元素。

    “

    ”标签用于插入一条水平线，以视觉上分隔内容的不同部分。它也可用于表示主题的中断，基于上下文赋予其意义。

  • 它是一个自闭合标签，因此不需要闭合标签（“”）。

  • 您可以使用CSS自定义其颜色、长度和厚度。

语义化文本相关标签

从 <h1> 标签到 <h6> 标签

Main Heading

Subheading

Sub-subheading

1<h1>Main Heading</h1>
2<h2>Subheading</h2>
3<h3>Sub-subheading</h3>

  • “

    ”到“

    ”标签是HTML中的标题标签。

    “

    ”标签代表最重要的标题，通常用作整个页面的主标题。通常在每个HTML文档中只使用一个“

    ”标签。

    <h2> 标签是仅次于 <h1> 的重要标题，用于页面中的章节或部分标题。

    “

    ”标签代表在“

    ”下的副标题或更小的部分。

    “

    ”、“

    ”、“
    ”标签代表较低级别的标题，用于更详细的项目或部分标题。

  • 标题标签表示文本的重要性，并帮助创建页面的逻辑结构。搜索引擎也使用标题标签来理解页面内容。

<strong> 标签

Important text to emphasize significance. 
1<strong>Important text</strong> to emphasize significance.

  • <strong>标签是一个用于表示文本重要性或强调的HTML标签，通常以粗体显示。

  • <strong>标签是一个语义标签，其主要目的是增加意义。

    它可以表示文本在上下文中是重要的。例如，它可以向搜索引擎展示文本的重要性，这对SEO有帮助。它也能向使用屏幕阅读器的用户传达文本的重要性。另一方面，稍后将介绍的<b>标签只是一个将文本加粗的标签，并不提供语义上的强调。

<em> 标签

Emphasized text for italics and emphasis. 
1<em>Emphasized text</em> for italics and emphasis.

  • <em>标签是一个用于表示文本重要性或强调的HTML标签，通常以斜体显示。

  • <em>标签是一个语义标签，其主要目的是提供意义。

    与<strong>标签类似，它可以表示文本在上下文中是重要的。<strong>标签通常以粗体显示，而<em>标签通常以斜体显示。两者都被屏幕阅读器和搜索引擎识别为语义上的强调，但<strong>表示更强的重要性，而<em>传达情感上的强调。此外，稍后介绍的<i>标签只是将文本设置为斜体，并不提供语义上的强调。

<mark> 标签

Highlighted text for attention. 
1<mark>Highlighted text</mark> for attention.
  • <mark>标签用于指示特定文本在上下文中是重要的。这对突出显示搜索结果或关键点很有用。
  • 默认情况下，<mark> 标签中的文本以黄色背景显示，视觉上强调其重要性。

<del> 标签

Deleted text shows removed content. 
1<del>Deleted text</del> shows removed content.

  • <del>标签用于指示文本已被删除或修改。这个标签对于显示文本的更改或修订历史很有用。

  • 包含在<del>标签中的文本通常以删除线显示。这从视觉上表明内容已被删除。

    包含在<del>标签中的文本也被屏幕阅读器识别为已删除内容。这使得不易察觉的内容也能被理解。

<ins> 标签

Inserted text shows added content. 
1<ins>Inserted text</ins> shows added content.

  • <ins> 标签用于指示文档中新添加或修改的文本。此标签用于显示文本添加或修订的历史。

  • 在浏览器中，用 <ins> 标签括起来的文本通常会以下划线显示。这在视觉上表示添加的内容。

    屏幕阅读器也会识别 <ins> 标签括起来的文本为新添加内容。这使得不易察觉的内容也能被理解。

<abbr> 标签

WHO 
1<abbr title="World Health Organization">WHO</abbr>
  • <abbr> 标签是用于表示缩写或首字母缩略词的行内元素。 使用此标签可以提供缩写的完整含义，有助于提高SEO和可访问性。这对不熟悉缩写的读者和使用屏幕阅读器的用户特别有帮助，以更好地理解其内容。

文本装饰相关标签

<b> 标签

Bold text without semantic emphasis. 
1<b>Bold text</b> without semantic emphasis.
  • <b> 标签是一个用于加粗文本的行内元素。 和我们将介绍的其他标签一样，它用于视觉重点而不是语义重点。

<i> 标签

Italic text for style. 
1<i>Italic text</i> for style.
  • <i> 标签是一个用于斜体文本的行内元素。

<u> 标签

Underlined text for decoration. 
1<u>Underlined text</u> for decoration.
  • <u> 标签是一个用于文本加下划线的行内元素。

<small> 标签

This is small text. 
1<small>This is small text.</small>
  • <small> 标签是一个内联元素，用于以较小的尺寸显示文本。 它通常用于表示次于主要内容的补充信息或注释。

<s> 标签

Strikethrough text 
1<s>Strikethrough text</s>
  • <s> 标签是一个用于给文本添加删除线的行内元素。

<sub> 标签

H2O 
1H<sub>2</sub>O
  • <sub> 标签是一个内联元素，用于显示下标文本。

<sup> 标签

E = mc2 
1E = mc<sup>2</sup>
  • <sup> 标签是一个内联元素，用于显示上标文本。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

HTML 块级元素和内联元素与代码显示、引用和列表相关的标签
Copyright © 2024 codesparklab.com; all rights reserved.