HTML基础1-文本级元素

HTML 简介

什么是 HTML？

HTML (HyperText Markup Language) 是一种用于创建网页的标准标记语言。它通过使用一系列预定义的元素来描述文档的结构和外观，
您可以使用 HTML 来建立自己的 WEB 站点。

HTML 的作用

HTML 用于定义网页的结构，告诉浏览器如何显示页面上的内容

历代HTML

版本	发布日期	主要更新
HTML 1.0	1993	基础标签集
HTML 2.0	1995	改进并标准化
HTML 3.2	1997	复杂元素如 `<table>` 和 `<font>`
HTML 4.01	1999	定义了三个不同的 DTD；增加了对 CSS 的支持
XHTML 1.0	2000	基于 HTML 4.01，采用 XML 语法
HTML5	2014	新的语义标签；增强的多媒体支持；本地存储等功能
HTML5.1	2016	小范围改进和澄清
HTML5.2	2017	添加新特性，如 `<template>` 元素的增强等
HTML Living Standard	持续发展	作为持续更新的标准，无固定版本号

HTML例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is my first HTML document.</p>
</body>
</html>

HTML 标签简介

什么是 HTML 标签？

HTML (HyperText Markup Language)标签是用来定义 HTML 文档结构的特殊关键字。这些标签告诉浏览器如何解释和呈现文档中的内容。每个 HTML 标签都有特定的功能，用于表示不同的元素类型。

HTML 标签的基本结构

HTML 标签通常由尖括号包围的关键词组成。例如， 是一个段落标签，它告诉浏览器这是一个段落的开始。大多数标签需要一个开始标签和一个结束标签，结束标签前面会有一个斜杠/。例如：

<p>这是一个段落。</p>

HTML元素

文本级元素

``: 段落

用途: 定义文档中的一个段落。
属性: 无
示例:
```
This is a paragraph of text.
```

`<h1>` 至 `<h6>`: 标题

用途: 定义不同级别的标题。
属性: 无

示例:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Sub-sub-subheading</h4>
<h5>Sub-sub-sub-subheading</h5>
<h6>Sub-sub-sub-sub-subheading</h6>

这些元素是HTML中最基础也是最重要的文本级元素，用于构建文档的基本结构。下面是完整的示例代码，演示如何使用和<h1>至<h6>元素：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML 文本级元素示例</title>
</head>
<body>
  <h1>主标题</h1>
  <p>这是一个段落。段落由多个句子组成，通常用于描述或叙述信息。</p>
  <h2>子标题</h2>
  <p>子标题下的段落。段落可以帮助组织文本内容，使得文档结构更加清晰。</p>
  <h3>三级标题</h3>
  <p>三级标题下的段落。使用不同级别的标题可以帮助读者理解文档的层次结构。</p>
  <h4>四级标题</h4>
  <p>四级标题下的段落。标题级别从 `<h1>` 到 `<h6>`，其中 `<h1>` 通常用于最重要的标题。</p>
  <h5>五级标题</h5>
  <p>五级标题下的段落。虽然 `<h5>` 和 `<h6>` 不经常使用，但在复杂文档中它们仍然有用。</p>
  <h6>六级标题</h6>
  <p>六级标题下的段落。这是最低级别的标题，通常用于非常详细的子主题。</p>
</body>
</html>

`<a>`: 锚链接

用途: 创建超链接到其他页面或同一页面内的位置。
属性:
- href: 链接的目标地址。
- target: 指定链接打开的方式，如 _blank 表示新窗口打开。

示例:

<a href="https://www.example.com" target="_blank">Example Link</a>

`<abbr>`: 缩写

用途: 表示缩写词或首字母缩略词。
属性:
- title: 提供缩写的完整形式。

示例:

<abbr title="Hypertext Markup Language">HTML</abbr>

``: 加粗

用途: 对文本进行视觉加粗。
属性: 无
示例:
```
This text is bold.
```

` `: 换行

用途: 在文本中插入换行。
属性: 无
示例:
```
Line one Line two
```

`<cite>`: 引用作品名称

用途: 标记引用的作品名称。
属性: 无

示例:

<cite>The Scream</cite> by Edvard Munch

`<code>`: 计算机代码片段

用途: 表示计算机源代码或可执行程序的片段。
属性: 无

示例:

<code>function helloWorld() { console.log('Hello, world!'); }</code>

`<data>`: 显示数据值

用途: 显示一个机器可读的数据值。
属性:
- value: 数据的机器可读值。

示例:

<data value="12345">Product #12345</data>

`<dfn>`: 定义

用途: 标记定义术语。
属性: 无

示例:

<p><dfn>HTML</dfn> stands for Hypertext Markup Language.</p>

``: 强调

用途: 强调文本，通常以斜体显示。
属性: 无

示例:

<p>I was very <em>surprised</em> by the news.</p>

``: 斜体

用途: 将文本设置为斜体样式。
属性: 无
示例:
```
This text is italicized.
```

`<kbd>`: 键盘输入

用途: 表示键盘输入或其他用户输入。
属性: 无

示例:

<p>To save a file, press <kbd>Ctrl+S</kbd>.</p>

``: 高亮

用途: 高亮显示文本。
属性: 无

示例:

<p>Find the word <mark>example</mark> in this paragraph.</p>

`<q>`: 短引用

用途: 表示短引用或简短摘录。
属性: 无
示例:
```
She said, <q>What time is it?</q>
```

`<s>`: 删除线

用途: 表示不再相关或不准确的内容。
属性: 无
示例:
```
<s>This information is outdated.</s>
```

``: 较小文字

用途: 显示较小的文字，常用于法律声明或版权信息。
属性: 无

示例:

<p>Copyright © 2024 <small>All rights reserved.</small></p>

``: 通用内联容器

用途: 用于应用样式或添加脚本处理的通用容器。
属性: 无

示例:

<p><span style="color:red;">This text is red.</span></p>

``: 强调重要性

用途: 表示重要的文本，通常以加粗显示。
属性: 无

示例:

<p>This is <strong>very important</strong>.</p>

``: 下标

用途: 表示下标，通常用于化学方程式等。
属性: 无
示例:
```
H2O
```

``: 上标

用途: 表示上标，通常用于指数或脚注。
属性: 无
示例:
```
102
```

`<time>`: 时间/日期

用途: 标记时间或日期。
属性:
- datetime: 机器可读的时间或日期格式。

示例:

<p>Today is <time datetime="2024-07-30">July 30, 2024</time>.</p>

``: 下划线

用途: 将文本设置为下划线样式。
属性: 无
示例:
```
This text is underlined.
```

`<var>`: 变量

用途: 表示变量名或可替换的值。
属性: 无

示例:

<p>Let <var>x</var> be the unknown value.</p>

``: 自动换行机会

用途: 指定文本中的允许换行的位置。
属性: 无

示例:

<p>This-is-a-long-word-that-might-need-to-break-at-the-dashes<wbr>-to-wrap-properly.</p>

完整实例

代码


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML 文本级元素示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    h1, h2, h3, h4, h5, h6 {
      color: #333;
    }
    p {
      color: #666;
    }
    a {
      color: #0077CC;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    code {
      background-color: #f4f4f9;
      padding: 2px 4px;
      border-radius: 4px;
    }
    pre {
      background-color: #f4f4f9;
      padding: 10px;
      overflow-x: auto;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    kbd {
      display: inline-block;
      padding: 2px 4px;
      font-size: 0.85em;
      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
      line-height: 1.4;
      color: #444;
      background-color: #f7f7f7;
      border: solid 1px #ccc;
      border-bottom-color: #bbb;
      border-radius: 3px;
      box-shadow: inset 0 -1px 0 #bbb;
    }
  </style>
</head>
<body>
  <h1>HTML 文本级元素示例</h1>
  <p>欢迎来到这篇关于HTML文本级元素的文章。在这里，我们将探讨如何使用HTML中的各种文本级元素来构建结构化的文档。</p>

  <h2>段落与标题</h2>
  <p>段落和标题是HTML文档的基础。段落使用`<p>`标签定义，而标题则使用从`<h1>`到`<h6>`的标签来定义。</p>

  <h3>段落</h3>
  <p>段落是文本的基本单位，通常由一个或多个句子组成。使用`<p>`标签可以明确地区分文档中的不同段落。</p>

  <h4>标题</h4>
  <p>标题用于表示文档中的不同部分或章节。从最重要的`<h1>`到最不重要的`<h6>`，这些标签帮助读者快速理解文档的结构。</p>

  <h5>示例</h5>
  <p>下面是一个使用段落和标题的示例：</p>

  <h6>示例段落</h6>
  <p>这是一个示例段落。段落通常用于描述或叙述信息，帮助组织文本内容，使得文档结构更加清晰。</p>

  <h6>示例标题</h6>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <h4>四级标题</h4>
  <h5>五级标题</h5>
  <h6>六级标题</h6>

  <h2>其他文本级元素</h2>
  <p>除了段落和标题之外，HTML还提供了许多其他的文本级元素，这些元素可以增强文档的表现力和语义性。</p>

  <h3>链接</h3>
  <p>链接使用`<a>`标签来创建。例如，这是一个指向 <a href="https://www.example.com" target="_blank">示例网站</a> 的链接。</p>

  <h3>缩写</h3>
  <p>缩写使用`<abbr>`标签来表示。例如，HTML代表 <abbr title="Hypertext Markup Language">HTML</abbr>。</p>

  <h3>加粗和斜体</h3>
  <p>可以使用`<b>`和`<i>`标签来分别表示加粗和斜体文本。例如：这是一个<b>加粗</b>的例子，而这是一个<i>斜体</i>的例子。</p>

  <h3>代码和变量</h3>
  <p>使用`<code>`和`<var>`标签来表示计算机代码和变量。例如：这是一个<code>console.log()</code>函数的示例，而<var>x</var>和<var>y</var>是变量。</p>

  <h3>键盘输入</h3>
  <p>使用`<kbd>`标签来表示键盘输入。例如：要保存文件，请按<kbd>Ctrl+S</kbd>。</p>

  <h3>引用</h3>
  <p>使用`<q>`标签来表示短引用。例如：她说：<q>今天天气真好！</q></p>

  <h3>删除线和下划线</h3>
  <p>使用`<s>`和`<u>`标签来表示删除线和下划线。例如：这个信息已经过时了<s>不再有效</s>，而<u>这个单词被下划线</u>。</u></s></p>

  <h3>高亮</h3>
  <p>使用`<mark>`标签来高亮显示文本。例如：请找到这段话中的<mark>关键词</mark>。</p>

  <h3>时间</h3>
  <p>使用`<time>`标签来表示时间和日期。例如：今天的日期是 <time datetime="2024-07-30">2024年7月30日</time>。</p>

  <h3>换行</h3>
  <p>使用`<br>`标签来进行换行。例如：第一行<br>第二行</p>

  <h3>数据</h3>
  <p>使用`<data>`标签来表示机器可读的数据。例如：产品编号 <data value="12345">12345</data>。</p>

  <h3>方向隔离</h3>
  <p>使用`<bdi>`标签来表示文本的方向隔离。例如：右对齐的文本 <bdi dir="rtl">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</bdi>。</p>

  <h3>内联容器</h3>
  <p>使用`<span>`标签作为通用的内联容器。例如：这是一个<span style="color:red;">红色</span>的文本。</p>

  <h3>小号文字</h3>
  <p>使用`<small>`标签来表示小号文字。例如：版权 © 2024 <small>版权所有。</small></p>

  <h3>上标和下标</h3>
  <p>使用`<sup>`和`<sub>`标签来表示上标和下标。例如：H<sub>2</sub>O 和 10<sup>2</sup>。</p>

  <h3>自动换行机会</hbr>
  <p>使用`<wbr>`标签来指定文本中的自动换行机会。例如：这是一个-很-长-的-词<wbr>-汇-。</p>

  <h2>总结</h2>
  <p>通过使用这些文本级元素，你可以创建结构丰富、内容多样的文档。每个元素都有其特定的用途和应用场景，合理使用它们可以使你的文档更具表现力和语义性。</p>

</body>
    </html>