HTML常见标签的使用

news2025/2/6 9:44:07

文章目录

- - 1. **文档结构标签**
  - 2. **文本内容标签**
  - 3. **图像标签**
  - 4. **链接标签**
  - 5. **列表标签**
  - 6. **表格标签**
  - 7. **表单标签**
  - 8. **其他常用标签**
  - 9. **注释标签**
- 案例展示

网页结构层主要通过HTML（HyperText Markup Language）标签来构建，这些标签定义了网页的各个组成部分及其结构关系。以下是HTML常见标签的使用概述，按照文档结构、文本内容、图像、链接、列表、表格、表单等类别进行分类：

1. 文档结构标签

<html>：根标签，标识整个HTML文档的开始和结束。
<head>：包含文档的元信息，如标题、样式表、脚本、字符集声明等，这些信息对用户不可见。
<title>：定义网页的标题，显示在浏览器标签页和收藏夹中。
<meta>：提供文档的元数据，如字符集（charset）、描述（description）、关键词（keywords）、 viewport设置（viewport）等。
<link>：用于链接外部资源，如CSS样式表、图标（favicon.ico）、预加载资源等。
<script>：包含或链接JavaScript代码，用于网页的动态功能。

2. 文本内容标签

<body>：文档的主体部分，所有可见内容均在此标签内。
<h1> 至 <h6>：定义六级标题，h1 最大，h6 最小。
<p>：定义段落。
<br>：插入换行符。
<hr>：插入水平线，用于分隔内容。
<strong> / <b>：加粗文本。
<em> / <i>：强调文本（通常表现为斜体）。
<u>：下划线文本。
<s>：删除线文本。
<blockquote>：定义块引用。
<abbr>：定义缩写词或首字母缩略词。
<cite>：定义引用作品的标题。
<code> / <pre>：分别表示内联代码和预格式化的代码块。

3. 图像标签

<img>：插入图像，需指定 src（源文件路径）、alt（替代文本）等属性。

4. 链接标签

<a>：定义超链接，href 属性指定链接地址，target 属性控制链接打开方式（如 _blank 新窗口打开）。

5. 列表标签

<ul>：无序列表，子元素用 <li> 标记。
<ol>：有序列表，子元素用 <li> 标记，并可指定 start 属性和 type 属性（数字、字母、罗马数字等）。
<dl>：定义列表，用于描述列表，包含 <dt>（定义项）和 <dd>（定义描述）。

6. 表格标签

<table>：定义表格，包含 <thead>（表头）、<tbody>（主体）、<tfoot>（表尾）部分。
<tr>：定义表格行。
<th>：定义表头单元格，通常含有粗体和居中样式。
<td>：定义常规单元格。

7. 表单标签

<form>：定义表单，包含 action（提交地址）和 method（提交方式，如 GET、POST）属性。
<input>：创建各种类型的输入控件，如文本输入、密码输入、单选按钮、复选框、提交按钮等，通过 type 属性指定类型。
<textarea>：多行文本输入区域。
<select>：下拉列表框，子元素 <option> 定义选项。
<optgroup>：在 <select> 中分组相关 <option>。
<label>：为表单控件提供文本标签，通过 for 属性关联控件。
<fieldset>：将相关表单控件分组，通常配合 <legend> 标签提供组标题。
<button>：定义可点击按钮，可作为表单提交按钮或普通操作按钮。

8. 其他常用标签

<div>：通用块级容器，用于布局和分组内容。
<span>：通用内联容器，用于布局和分组内联内容。
<header> / <footer> / <nav> / <main> / <section> / <article> / <aside>：HTML5语义标签，用于定义文档结构和内容分区。
<address>：定义联系信息，如作者、版权持有者等。
<time>：表示日期和时间。
<mark>：高亮文本。
<details> / <summary>：创建可展开/折叠的详细内容区域。
<figure> / <figcaption>：用于组合图像、图表、代码示例等独立内容及其说明。
<sup> / <sub>：上标和下标文本。

9. 注释标签

：用于在HTML代码中添加注释，浏览器不会显示注释内容。

以上标签构成了HTML文档的基本结构和内容，通过合理搭配使用，可以创建丰富多样、结构清晰的网页。随着HTML5的发展，更多语义化标签被引入以增强网页内容的可访问性和搜索引擎优化。在实际应用中，还需要结合CSS进行样式设计和JavaScript进行交互功能开发。

案例展示

以下是一个包含多种HTML常见标签使用的实例，展示了一个简单的博客文章页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Blog - A Sample Article</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1><a href="/">My Blog</a></h1>
    <nav>
      <ul>
        <li><a href="/about">About</a></li>
        <li><a href="/archive">Archive</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Exploring the Wonders of Nature: A Photographic Journey</h2>
      <p><time datetime="2023-0½-07">May 7, 2023</time> by <span itemscope itemtype="http://schema.org/Person"><span itemprop="name">John Doe</span></span></p>
      <figure>
        <img src="nature-photo.jpg" alt="A beautiful landscape with mountains and a lake">
        <figcaption>A stunning view from our recent trip</figcaption>
      </figure>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia, nisl vel bibendum malesuada, velit augue iaculis tellus, et ultrices sapien metus vel erat. Aliquam erat volutpat. In hac habitasse platea dictumst. Nam non tincidunt lectus. Morbi at mi auctor, facilisis quam eu, dignissim enim.</p>
      <p>Integer eget odio id est sollicitudin tristique. Nullam ac ex euismod, interdum justo nec, eleifend velit. Maecenas euismod, nulla eu congue faucibus, massa ex porttitor sapien, vitae efficitur risus turpis sed velit. Suspendisse potenti.</p>
      <hr>
      <p><strong>Tags:</strong> Nature, Photography, Travel</p>
    </article>

    <aside>
      <h3>Related Posts</h3>
      <ul>
        <li><a href="/article1">The Art of Landscape Photography</a></li>
        <li><a href="/article2">Top 10 Nature Destinations for 2023</a></li>
        <li><a href="/article3">Preserving Nature Through Conservation Efforts</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <address>
      © 2023 My Blog. All rights reserved.<br>
      Contact us: <a href="mailto:info@myblog.com">info@myblog.com</a>
    </address>
  </footer>
</body>
</html>

这个实例中使用了以下HTML标签：

文档结构标签：<html>, <head>, <title>, <link>, <body>, <header>, <nav>, <main>, <article>, <aside>, <footer>.
文本内容标签：<h1>, <h2>, <p>, <time>, <span>, <strong>, <hr>, <ul>, <li>, <a>, <abbr>, <cite>, <code>, <pre>.
图像标签：<img>.
链接标签：<a>.
列表标签：<ul>, <li>.
表格标签：未使用。
表单标签：未使用。
其他常用标签：<address>, <figure>, <figcaption>, <sup>, <sub>.
注释标签：未使用。