小熊奶糖(BearCandy)
小熊奶糖(BearCandy)
发布于 2024-03-14 / 10 阅读
0
0

html格式化标签,语意标签,链接标签等

以下是一些HTML中关于文本样式的常见标签及其用法:

Strong标签 (<strong>)

用途: <strong> 标签用于强调文本,使其比周围文本显得更重要,大多数浏览器会将其内容显示为加粗字体。这个标签具有语义,表明文本的重要性。

用法:

<p>这是普通文本,而这是<strong>重要文本</strong>。</p>

Font标签 (<font>)

注解: <font> 标签在HTML4中曾被用于设置文本的颜色、大小和字体,但此标签已在HTML5中废弃,不再推荐使用。不过这里仍然给出旧有的用法作为参考:

旧用法

<p><font color="red" size="5" face="Arial">这是红色、字号为5且字体为Arial的文本</font></p>

现在应使用CSS代替 <font> 标签来设置文本样式。

Big标签 (<big>)

注解: <big> 标签以前用于使文本增大字号,但在HTML5中也被废弃。若要增大字号,请使用CSS。

旧用法

<p><big>这是大号文本</big></p>

现代替代方案:

<p style="font-size: larger;">这是大号文本</p>

斜体标签 (<i>)

用途: <i> 标签用于呈现斜体文本,常用于表示一种语气(如引用、想法、术语等)。在HTML5中,尽管它仍可用于呈现斜体样式,但如果是为了强调,推荐使用 <em> 标签。

用法:

<p>这里的<i>文本会斜体显示</i>。</p>

加粗标签 (<b><strong>)

  • <b> 标签纯粹用于呈现加粗的文本样式,没有明确的语义含义。
  • <strong> 标签不仅加粗文本,还具有强调的意义。

用法:

<p><b>这里是加粗文本(无特定语义)</b></p>
<p><strong>这里是加粗且有强调语义的文本</strong></p>

下划线 (<u><ins>)

  • <u> 标签用于在文本下添加下划线,无明显语义,主要用于装饰性效果。
  • <ins> 标签则表示插入文本,通常也会显示为下划线,但具有语义,意味着文本是后来加入的。

用法:

<p><u>带下划线的文本</u></p>
<p><ins>插入的文本(可能带下划线)</ins></p>

删除线 (<s><del>)

  • <s> 标签用于呈现文本已作废或不应再被考虑的状态,通常表现为删除线样式。
  • <del> 标签同样用于表示文本已经被删除或不再有效,它带有语义,可提供时间信息等附加内容。

用法:

<p><s>不再有效的文本</s></p>
<p><del datetime="2022-01-01">已删除的文本,删除时间为2022年1月1日</del></p>

### 上标 (`<sup>`) 和 下标 (`<sub>`)
**用途**: 
- `<sup>` 标签用于创建上标文本,例如化学方程式中的指数或数学公式中的幂。
- `<sub>` 标签用于创建下标文本,如数学公式中的下标变量或化学元素符号中的下角标。

**用法**:
```html
<p>水的分子式是 H<sub>2</sub>O,E=mc<sup>2</sup> 是爱因斯坦的质能方程。</p>

以下是HTML中Mark、Link、Em、I以及注释标签的用途和基本用法:

Mark标签 (<mark>)

用途: <mark> 标签用于在文档中高亮或突出显示某些文本,通常呈现为黄色背景或者加亮的效果。

用法:

<p>这是一个句子,其中 <mark>高亮显示的部分</mark> 是特别关注的内容。</p>

Link标签 (<link>)

用途: <link> 标签用于将外部样式表文件链接到HTML文档,以便为文档定义样式。

用法:

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

在这个例子中,rel="stylesheet" 表示链接资源是样式表,type="text/css" 指定资源类型为CSS,href="styles.css" 则指定了样式表文件的URL。

Em标签 (<em>)

用途: <em> 标签用来表示文本中的强调部分,不仅视觉上通常是斜体,更重要的是它传达了一种语义上的强调,对搜索引擎和辅助技术设备(如屏幕阅读器)具有重要意义。

用法:

<p>我喜欢吃 <em>苹果</em> 和香蕉。</p>

在这里,<em> 标签内的“苹果”会被视为语义上更为强调的部分。

I标签 (<i>)

用途: <i> 标签原本用来展示一种不同寻常的语气(比如诗歌、外来词、科学名称等),表现为斜体字形。虽然在现代HTML5中也推荐用于无特殊语义但需要以斜体显示的文本,但它不带有强调的语义含义。

用法:

<p>我的<i>最爱</i>是科幻小说。</p>

此处,<i> 标签使得“最爱”以斜体显示,但并无强调的语义意义。

注释标签 (<!-- -->)

用途: HTML注释标签用于在源代码中添加开发者可见的注释,这些注释不会在浏览器中显示给用户看。

用法:

<!-- 这是一个注释,用于向开发者解释代码 -->
<p>这是一段正文。</p>

上述代码中的 <!-- 这是一个注释 --> 部分,在浏览器加载并解析HTML文档时将被忽略。

  1. 格式化/排版标签

    • <strong>:强调(加粗)标签,表示文本重要性。
    • <font>:(已弃用)用于指定字体、颜色和大小,但现在应使用CSS样式替代。
    • <big>:(已弃用)用于增大文本尺寸,现也应使用CSS替代。
    • <i>:斜体标签,传统上用于表示强调或某种特殊语气。
    • <u>:下划线标签,用于添加下划线样式,无特定语义。
    • <s><del>:用于表示删除线,前者通常表示文本不再准确或不再相关,后者具有语义,表示内容已被删除或修订。
    • <ins>:插入标签,通常带有下划线,表示文本是新插入或添加的内容。
  2. 语义标签

    • <strong> 同时也属于语义标签,因为它传达了文本的重要性。
    • <em>:强调标签,用于表示文本的语义强调,通常表现为斜体样式。
    • <sup>:上标标签,用于显示上标文本,如数学公式中的指数或化学方程式中的上标。
    • <sub>:下标标签,用于显示下标文本,如数学公式中的下标或化学符号中的下标。
  3. 链接和元数据标签

    • <link>:元数据标签,用于引入外部资源,尤其是CSS样式表和其他元数据关联。
  4. 注释标签

    • <!-- -->:注释标签,用于在HTML文档中添加开发者可见的注释,不影响页面内容显示。

评论