学习目标

  • 掌握HTML基础文本标签的语义与用法

  • 理解并正确使用通用属性（class、id、style）

  • 能够区分块级元素与行内元素的显示特性

概念讲解

HTML标签是构建网页内容的基本单元，分为文本标签（用于组织内容）和通用属性（用于修饰标签）。根据显示特性，标签可分为块级元素（独占一行，可设置宽高）和行内元素（不独占一行，宽高由内容决定）。

核心分类

类型

特点

示例标签

块级元素

独占一行，默认宽度100%，可设置宽高

<h1>-<h6>、<p>、<div>

行内元素

不独占一行，宽高由内容决定

<span>、<a>、<strong>

语法参考

1. 基础文本标签

标题标签（<h1>-<h6>）

用于定义不同层级的标题，<h1>级别最高（最大最粗），<h6>级别最低。

<h1>一级标题（页面主标题）</h1>
<h2>二级标题（章节标题）</h2>
<h3>三级标题（小节标题）</h3>
<!-- 以此类推至<h6> -->

段落标签（<p>）

用于包裹文本段落，自动在前后添加空白行。

<p>这是一个标准段落标签，用于展示正文内容。浏览器会自动处理段落间的间距。</p>

行内文本标签（<span>、<strong>、<em>）

  • <span>：无语义行内容器，用于局部样式修饰

  • <strong>：表示重要文本（粗体显示）

  • <em>：表示强调文本（斜体显示）

<p>这是一段包含<span style="color: red;">红色文本</span>的段落，其中<strong>重要内容</strong>被加粗，<em>强调内容</em>被倾斜。</p>

2. 通用属性

class属性（类选择器）

用于为标签定义一个或多个类名，实现样式复用（可多个标签共享）。

<p class="text-large text-red">应用了"text-large"和"text-red"两个类的段落</p>
<style>
  .text-large { font-size: 18px; }
  .text-red { color: red; }
</style>

id属性（唯一标识符）

为标签定义唯一ID，用于精准定位（同一页面内不可重复）。

<div id="header">这是页面头部（唯一标识）</div>
<script>
  // JavaScript通过ID获取元素
  const header = document.getElementById("header");
</script>

style属性（内联样式）

直接在标签上定义CSS样式，优先级最高（覆盖外部样式）。

<p style="font-size: 16px; color: blue; text-align: center;">
  这是应用了内联样式的段落
</p>

实战示例

示例1：基础文本结构实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>基础标签与属性示例</title>
  <style>
    .highlight { color: #ff6b6b; font-weight: bold; }
    .intro { line-height: 1.8; }
  </style>
</head>
<body>
  <h1>前端开发基础</h1>
  <h2>HTML标签学习</h2>
  
  <p class="intro">HTML（超文本标记语言）是构建网页的基础，通过各种标签组织内容结构。</p>
  
  <h3>1. 文本标签</h3>
  <p>段落标签（<code>&lt;p&gt;</code>）用于展示正文，<span class="highlight">class属性</span>可批量应用样式。</p>
  
  <h3>2. 通用属性</h3>
  <p id="important-note" style="background: #fff3cd; padding: 10px;">
    <strong>注意：</strong>id属性具有唯一性，常用于JavaScript定位元素。
  </p>
</body>
</html>

示例2：块级与行内元素对比

<!-- 块级元素示例 -->
<div style="width: 200px; height: 50px; background: #e3f2fd;">
  这是块级元素（div），可设置宽高
</div>
<p style="background: #ffebee;">这是块级元素（p），独占一行</p>

<!-- 行内元素示例 -->
<span style="color: #e91e63;">这是行内元素（span）</span>
<strong>这是行内元素（strong）</strong>
<!-- 行内元素不会独占一行，宽高由内容决定 -->

注意事项

  1. 语义优先：避免滥用<div>和<span>，优先使用有语义的标签（如<p>表示段落，<strong>表示重要内容）。

  2. 属性规范：

    • class值可多个（空格分隔），用于样式复用

    • id值必须唯一，建议使用有意义的名称（如header、nav）

    • style内联样式仅用于局部特殊样式，大面积样式应使用外部CSS

  3. 嵌套规则：

    • 块级元素可包含行内元素或其他块级元素（如<div>包含<p>）

    • 行内元素通常不能包含块级元素（如<span>不能包含<h1>）

自测题

  1. 以下哪个标签是行内元素？（ ）
    A. <div> B. <p> C. <span> D. <h2>
    答案：C

  2. class属性与id属性的主要区别是什么？
    答案：class可重复用于多个元素，实现样式复用；id在页面中唯一，用于精准定位元素

  3. 写出包含以下要求的代码：一个红色（color: red）、18px字体的段落，内容为“HTML基础学习”。
    答案：<p style="color: red; font-size: 18px;">HTML基础学习</p> 或 使用class属性结合CSS