HTML常见标签及其基本属性讲解

HTML 是构建网页的基础语言，常见的 HTML 标签可以帮助我们对网页内容进行结构化设计和展示。今天我们详细讲解一些常用的 HTML 标签，包括 <div>, <span>, <h1> 等，结合实际代码案例帮助理解。

1. 块级元素：`<div>`

<div> 是 HTML 中的一个常见块级元素，主要用于作为容器，将相关内容或其他 HTML 元素分组，以便应用样式或布局。

基本用法

<div> 通常用于划分页面中的结构块，没有语义，仅仅是一个容器。

代码案例：

<!DOCTYPE html>
<html>
<head>
    <title>示例 - 使用 <div></title>
    <style>
        .container {
            border: 1px solid #000; /* 添加边框 */
            padding: 10px; /* 内边距 */
            margin: 10px; /* 外边距 */
        }
    </style>
</head>
<body>
    <div class="container">
        这是一个使用了 ``<div>`` 的内容块
    </div>
</body>
</html>

中文注释：

border: 1px solid #000; 设置边框的宽度为 1 像素，颜色为黑色。
padding: 10px; 为 <div> 的内容块增加 10 像素的内边距。
margin: 10px; 设置 <div> 的外边距为 10 像素。

2. 行内元素：`<span>`

<span> 是一个行内元素，主要用于在文本中标记某些部分，方便对这些内容单独应用样式或添加事件。

基本用法

<span> 本身不改变布局，仅在内容内部起标记作用。

代码案例：

<!DOCTYPE html>
<html>
<head>
    <title>示例 - 使用 <span></title>
    <style>
        .highlight {
            color: red; /* 设置字体颜色为红色 */
            font-weight: bold; /* 设置字体加粗 */
        }
    </style>
</head>
<body>
    <p>这是一个普通段落，其中的 <span class="highlight">重要内容</span> 使用了 ``<span>`` 标签标记。</p>
</body>
</html>

中文注释：

<span class="highlight"> 将段落中的部分文字标记为红色并加粗。
color: red; 指定文字颜色。
font-weight: bold; 将文字设置为加粗。

3. 标题元素：`<h1>` 至 `<h6>`

标题元素用于定义页面中的标题，从 <h1> 到 <h6>，依次表示从最高级到最低级的标题。通常 <h1> 是页面的主标题。

基本用法

标题标签可以定义页面层次结构，对搜索引擎优化（SEO）也非常重要。

代码案例：

<!DOCTYPE html>
<html>
<head>
    <title>示例 - 使用标题标签</title>
</head>
<body>
    <h1>这是主标题（<h1>）</h1>
    <h2>这是二级标题（<h2>）</h2>
    <h3>这是三级标题（<h3>）</h3>
    <h4>这是四级标题（<h4>）</h4>
    <h5>这是五级标题（<h5>）</h5>
    <h6>这是六级标题（<h6>）</h6>
</body>
</html>

中文注释：

<h1> 是页面的最高级标题，通常用于页面的主标题。
<h2> 至 <h6> 分别表示从二级到六级标题，重要性依次降低。

4. 通用属性

以上标签都可以使用一些通用属性，例如：

id：用于唯一标识一个 HTML 元素。
class：用于指定元素的类名称，可以与样式表配合使用。
style：用于为元素定义行内样式。
title：提供额外信息，当鼠标悬停在元素上时会显示。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>示例 - 通用属性</title>
</head>
<body>
    <div id="unique-id" class="highlight" style="background-color: yellow;" title="这是一个示例">
        使用了通用属性的 ``<div>`` 元素
    </div>
</body>
</html>

中文注释：