HTML所有标签的用法及示例（一）_html标签大全及用法-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45914609/article/details/142342128

文章目录

前言
一、HTML 所有标签的作用和示例
二、HTML 所有标签的具体使用示例
三、常用基础示例
附

前言

了解HTML所有标签的用法，并列出基础示例。

一、HTML 所有标签的作用和示例

1. 文档结构标签

<!DOCTYPE>: 声明文档类型
<html>: 根元素
<head>: 文档头部
<body>: 文档主体

<!DOCTYPE html>: 声明文档类型和HTML版本（不是HTML标签，但非常重要）。
<html>: 文档的根元素，所有其他HTML元素（除了<!DOCTYPE html>声明）都位于这个元素内部。
<head>: 包含了文档的元（meta）数据，如标题、字符集定义、链接到样式表和脚本等。
<body>: 包含了可见的页面内容，如文本、图片、视频、音频、表格、列表和链接等。

2. 元数据标签

<meta>: 元数据定义
<link>: 外部资源链接
<style>: 内部样式定义
<base>: 基础URL
<title>: 定义了文档的标题，显示在浏览器的标题栏或页面标签上

<meta>: 提供有关HTML文档的元数据，如页面描述、关键词、字符集等。
<link>: 定义文档与外部资源的关系，最常见的是链接到CSS样式表。

3. 内容分区（语义化）标签

<header>: 页眉
<footer>: 页脚
<nav>: 导航链接
<section>: 区段
<article>: 定义独立的、可复用的内容块（文章）
<aside>: 侧边栏
<main>: 主内容

4. 文本内容（格式）标签

<h1> to <h6>: 标题
<p>: 段落
<br>: 换行
<hr>: 水平线
<pre>: 预格式化文本
<blockquote>: 块引用

5. 内联文本语义标签

<a>: 超链接，用于从一个页面链接到另一个页面
<strong>: 重要文本（粗体显示）
<em>: 强调文本（斜体显示）
<mark>: 标记文本
<small>: 小号文本
<ins>: 插入文本
<del>: 删除文本
<sup>: 上标文本
<sub>: 下标文本

6. 多媒体标签

<img>: 图像
<audio>: 音频
<video>: 视频
<source>: 媒体源
<track>: 文本轨道

7. 嵌入内容标签

<iframe>: 内联框架
<embed>: 嵌入内容
<object>: 嵌入对象（如图像、视频、Java applets、ActiveX、PDF等）

8. 表格标签

<table>: 表格
<caption>: 表格标题
<thead>: 表头
<tbody>: 表体
<tfoot>: 表尾
<tr>: 表格行
<th>: 表头单元格
<td>: 表格单元格
<li>: 列表项
<ul>: 无序列表
<ol>: 有序列表

9. 表单标签

<form>: 表单
<input>: 输入字段
<textarea>: 多行文本输入
<button>: 点击按钮
<select>: 下拉选择菜单
<option>: 选项
<label>: 标签
<fieldset>: 表单分组
<legend>: 分组标题

10. 脚本标签

<script>: 脚本
<noscript>: 无脚本

11. 其他标签

<div>: 区块
<span>: 内联区块
<details>: 细节
<summary>: 细节摘要

<div>: 用作块级容器，以通过CSS进行布局和样式化。
<span>: 用作内联容器，以通过CSS对文档中的小块内容进行样式化。

二、HTML 所有标签的具体使用示例

1. 文档结构标签

<!DOCTYPE>: 声明文档类型
```
<!DOCTYPE html>
```
<html>: 根元素
```
<html lang="en">
</html>
```
<head>: 文档头部
```
<head>
</head>
```
<body>: 文档主体
```
<body>
</body>
```

2. 元数据标签

<meta>: 元数据定义
```
<meta charset="UTF-8">
```

<link>: 外部资源链接

<link rel="stylesheet" href="styles.css">

<style>: 内部样式定义

<style>
  body { font-family: Arial, sans-serif; }
</style>

<base>: 基础URL
```
<base href="https://www.example.com/">
```
<title>: 文档标题
```
<title>页面标题</title>
```

3. 内容分区（语义化）标签

<header>: 页眉

<header>
  <h1>欢迎来到我的网站</h1>
</header>

<footer>: 页脚

<footer>
  <p>这是页脚。</p>
</footer>

<nav>: 导航链接

<nav>
  <ul>
    <li><a href="#section1">部分1</a></li>
    <li><a href="#section2">部分2</a></li>
  </ul>
</nav>

<section>: 区段

<section id="section1">
  <h2>部分1</h2>
  <p>这是一个段落。</p>
</section>

<article>: 文章

<article>
  <h2>文章标题</h2>
  <p>文章内容。</p>
</article>

<aside>: 侧边栏

<aside>
  <p>这是一个侧边栏。</p>
</aside>

<main>: 主内容

<main>
  <h2>主内容</h2>
  <p>这是主内容区域。</p>
</main>

4. 文本内容（格式）标签

<h1> to <h6>: 标题

<h1>一级标题</h1>
<h2>二级标题</h2>

<p>: 段落
```
<p>这是一个段落。</p>
```
<br>: 换行
```
<br>
```
<hr>: 水平线
```
<hr>
```
<pre>: 预格式化文本
```
<pre>这是预格式化文本。</pre>
```

<blockquote>: 块引用

<blockquote>这是一个块引用。</blockquote>

5. 内联文本语义标签

<a>: 超链接，用于从一个页面链接到另一个页面
```
<a href="https://www.example.com">这是一个链接</a>
```
<strong>: 重要文本（粗体显示）
```
<strong>这是强调文本</strong>
```
<em>: 强调文本（斜体显示）
```
<em>这是斜体文本</em>
```
<mark>: 标记文本
```
<mark>这是标记文本</mark>
```
<small>: 小号文本
```
<small>这是小号文本</small>
```
<ins>: 插入文本
```
<ins>这是插入文本</ins>
```
<del>: 删除文本
```
<del>这是删除文本</del>
```
<sup>: 上标文本
```
<sup>这是上标文本</sup>
```
<sub>: 下标文本
```
<sub>这是下标文本</sub>
```

6. 多媒体标签

<img>: 图像

<img src="image.jpg" alt="示例图像">

<audio>: 音频

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素。
</audio>

<video>: 视频

<video controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频元素。
</video>

<source>: 媒体源

<source src="media.mp4" type="video/mp4">

<track>: 文本轨道

<track kind="subtitles" src="subtitles.vtt" srclang="en" label="English">

7. 嵌入内容标签

<iframe>: 内联框架

<iframe src="https://www.example.com"></iframe>

<embed>: 嵌入内容

<embed src="file.pdf" type="application/pdf">

<object>: 嵌入对象

<object data="file.pdf" type="application/pdf"></object>

8. 表格标签

<table>: 表格

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

<caption>: 表格标题
```
<caption>示例表格</caption>
```

<thead>: 表头

<thead>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
</thead>

<tbody>: 表体

<tbody>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</tbody>

<tfoot>: 表尾

<tfoot>
  <tr>
    <td>页脚1</td>
    <td>页脚2</td>
  </tr>
</tfoot>

<tr>: 表格行

<tr>
  <td>数据1</td>
  <td>数据2</td>
</tr>

<th>: 表头单元格
```
<th>标题1</th>
```
<td>: 表格单元格
```
<td>数据1</td>
```

9. 表单标签

<form>: 表单

<form action="/submit" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
  <textarea id="message" name="message">请输入您的信息...</textarea>
  <button type="submit">提交</button>
</form>

<input>: 输入控件

<input type="text" id="name" name="name">

<textarea>: 多行文本输入

<textarea id="message" name="message">请输入您的信息...</textarea>

<button>: 按钮
```
<button type="submit">提交</button>
```

<select>: 下拉列表

<select id="options" name="options">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

<option>: 选项
```
<option value="1">选项1</option>
```
<label>: 标签
```
<label for="name">姓名:</label>
```

<fieldset>: 表单分组

<fieldset>
  <legend>分组标题</legend>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
</fieldset>

<legend>: 分组标题
```
<legend>分组标题</legend>
```

10. 脚本标签

<script>: 脚本
```
<script src="script.js"></script>
```

<noscript>: 无脚本

<noscript>您的浏览器不支持JavaScript。</noscript>

11. 其他标签

<div>: 区块

<div>
  <p>这是一个区块。</p>
</div>

<span>: 内联区块

<span>这是一个内联区块。</span>

<details>: 细节

<details>
  <summary>细节摘要</summary>
  <p>这是细节内容。</p>
</details>

<summary>: 细节摘要
```
<summary>细节摘要</summary>
```

三、常用基础示例

示例 1: 简单的HTML文档结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单的HTML页面</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>这是一个段落。</p >
</body>
</html>

示例 2: 包含无序列表的HTML页面

<!DOCTYPE html>
<html>
<head>
    <title>无序列表示例</title>
</head>
<body>

<h2>我的爱好</h2>
<ul>
    <li>阅读</li>
    <li>编程</li>
    <li>旅行</li>
    <li>摄影</li>
</ul>

</body>
</html>

示例 3: 表格示例

<!DOCTYPE html>
<html>
<head>
    <title>表格示例</title>
</head>
<body>

<h2>学生信息表</h2>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>专业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>计算机科学</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>22</td>
        <td>软件工程</td>
    </tr>
</table>

</body>
</html>

示例 4: 表单示例

<!DOCTYPE html>
<html>
<head>
    <title>表单示例</title>
</head>
<body>

<h2>注册表单</h2>
<form action="/submit_form" method="post">
    <label for="name">姓名:</label><br>
    <input type="text" id="name" name="name"><br>
    <label for="email">邮箱:</label><br>
    <input type="email" id="email" name="email"><br>
    <input type="submit" value="提交">
</form>

</body>
</html>

示例 5: 语义化标签示例

<!DOCTYPE html>
<html>
<head>
    <title>语义化标签示例</title>
</head>
<body>

<header>
    <h1>我的网站</h1>
    <nav>
        <ul>
            <li>首页</li>
            <li>关于我们</li>
            <li>服务</li>
        </ul>
    </nav>
</header>

<section>
    <h2>最新文章</h2>
    <article>
        <h3>文章标题</h3>
        <p>这里是文章的内容...</p >
    </article>
    <aside>
        <h4>相关文章</h4>
        <ul>
            <li>文章1</li>
            <li>文章2</li>
        </ul>
    </aside>
</section>

<footer>
    <p>版权所有 &copy; 2023</p >
</footer>

</body>
</html>

这些示例展示了HTML的一些基本用法，包括文档结构、文本格式化、列表、表格、表单以及语义化标签。

附

一、表格标签：`<li>`（列表项）、`<ul>`（无序列表）和`<ol>`（有序列表）的使用示例

HTML中表格标签：<li>（列表项）、<ul>（无序列表）和<ol>（有序列表）标签的使用示例，这些示例将展示如何创建基本的列表结构。

无序列表 (<ul>)

无序列表用于表示一组无需排序的项目。每个项目前都会有一个默认的圆点作为标记，但你可以通过CSS来自定义这个标记。
```
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>葡萄</li>
</ul>
```
有序列表 (<ol>)

有序列表用于表示一组需要按特定顺序排列的项目。每个项目前都会有一个默认的编号（通常是数字），但你可以通过CSS来自定义编号的样式（如罗马数字、字母等）。
```
<ol>
  <li>打开冰箱门</li>
  <li>把大象放进去</li>
  <li>关上冰箱门</li>
  <li>（注意：这只是一个笑话，实际上你不能把大象放进冰箱）</li>
</ol>
```

嵌套列表

你可以在列表内部嵌套另一个列表，以表示层级关系。这既可以在无序列表中嵌套有序列表，也可以在有序列表中嵌套无序列表，或者嵌套相同类型的列表。

无序列表内嵌套有序列表：

<ul>
  <li>购物清单
    <ol>
      <li>牛奶</li>
      <li>鸡蛋</li>
      <li>面包</li>
    </ol>
  </li>
  <li>烹饪步骤
    <ol>
      <li>加热锅</li>
      <li>加入油</li>
      <li>翻炒食材</li>
    </ol>
  </li>
</ul>

有序列表内嵌套无序列表：

<ol>
  <li>准备阶段
    <ul>
      <li>收集材料</li>
      <li>清洁工作区域</li>
      <li>预热烤箱</li>
    </ul>
  </li>
  <li>烹饪阶段
    <ul>
      <li>按照食谱混合材料</li>
      <li>将混合物倒入烤盘</li>
      <li>放入烤箱</li>
    </ul>
  </li>
  <li>完成阶段
    <ul>
      <li>从烤箱取出</li>
      <li>冷却</li>
      <li>享用美食</li>
    </ul>
  </li>
</ol>

这些示例展示了如何在HTML文档中创建和使用基本的列表结构。你可以通过CSS进一步自定义列表的样式，包括项目符号、编号样式、列表缩进等。

二、使用HTML标签`<li>`、`<ul>`、`<ol>`的注意事项

使用HTML标签<li>、<ul>、<ol>时，需要注意以下几个关键事项，以确保网页的语义正确性和用户体验：

1. 标签的正确嵌套

<li>标签不能单独使用：<li>（列表项）标签必须嵌套在<ul>（无序列表）或<ol>（有序列表）标签内部。单独使用<li>标签是不符合HTML规范的，并且可能导致浏览器解析错误或显示不一致。
嵌套规则：<ul>和<ol>标签内部只能包含<li>标签作为直接子元素，而<li>标签内部则可以包含其他任何HTML元素，如文本、图片、链接、甚至另一个<ul>或<ol>列表（实现列表的嵌套）。

2. 列表的语义性

无序列表（<ul>）：适用于表示一组无需特定顺序的列表项，如导航菜单、文章中的要点列表等。
有序列表（<ol>）：适用于表示一组需要按特定顺序排列的列表项，如步骤说明、排名列表等。
定义列表（<dl>、<dt>、<dd>）：虽然不直接涉及<li>标签，但定义列表（<dl>）用于表示术语及其定义或描述的列表，其中<dt>表示术语，<dd>表示定义或描述。注意，这里提到定义列表是为了强调HTML中还有其他类型的列表结构，但在直接使用<li>、<ul>、<ol>时，应关注它们的语义区别。

3. 样式与可访问性

默认样式：浏览器会为<ul>和<ol>列表项提供默认的样式（如圆点或数字标记），但建议通过CSS来自定义这些样式，以满足网页的整体设计需求。
可访问性：确保列表的语义清晰，有助于屏幕阅读器等辅助技术正确解析和呈现网页内容。

4. 内容规范

避免重复内容：确保每个列表项的内容都是独一无二的，避免在列表中重复相同的信息。
内容准确性：确保列表项中的信息准确无误，避免误导用户。
清晰表达：列表项的内容应表达清晰、语句通顺，使用丰富的词汇来准确描述相关信息。

5. 兼容性

HTML版本：注意HTML版本之间的差异，某些属性（如<ol>的start、type和compact属性）在HTML5中可能不再支持或已被废弃，应使用CSS来实现类似的效果。
浏览器兼容性：虽然现代浏览器对HTML和CSS的支持已经非常完善，但在使用某些较新的CSS属性或特性时，仍需注意不同浏览器之间的兼容性差异。

综上所述，使用HTML标签<li>、<ul>、<ol>时，需要关注标签的正确嵌套、列表的语义性、样式与可访问性、内容规范以及兼容性等方面的问题。