# 基础入门-第2章-2.2-基础标签与属性 ## 学习目标 - 掌握HTML基础文本标签的语义与用法 - 理解并正确使用通用属性（`class`、`id`、`style`） - 能够区分块级元素与行内元素的显示特性 ## 概念讲解 HTML标签是构建网页内容的基本单元，分为**文本标签**（用于组织内容）和**通用属性**（用于修饰标签）。根据显示特性，标签可分为**块级元素**（独占一行，可设置宽高）和**行内元素**（不独占一行，宽高由内容决定）。 ### 核心分类 | **类型** | **特点** | **示例标签** | |----------------|-----------------------------------|-----------------------------| | 块级元素 | 独占一行，默认宽度100%，可设置宽高 | `

`-`

`、`

`、`

` | | 行内元素 | 不独占一行，宽高由内容决定 | ``、``、`` | ## 语法参考 ### 1. 基础文本标签 #### 标题标签（`

`-`

`） 用于定义不同层级的标题，`

`级别最高（最大最粗），`

`级别最低。 ```html

一级标题（页面主标题）

二级标题（章节标题）

三级标题（小节标题）

``` #### 段落标签（`

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

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

``` #### 行内文本标签（``、``、``） - ``：无语义行内容器，用于局部样式修饰 - ``：表示重要文本（粗体显示） - ``：表示强调文本（斜体显示） ```html

这是一段包含红色文本的段落，其中重要内容被加粗，强调内容被倾斜。

``` ### 2. 通用属性 #### `class`属性（类选择器） 用于为标签定义一个或多个类名，实现样式复用（可多个标签共享）。 ```html

应用了"text-large"和"text-red"两个类的段落

``` #### `id`属性（唯一标识符） 为标签定义唯一ID，用于精准定位（同一页面内不可重复）。 ```html

这是页面头部（唯一标识）

// JavaScript通过ID获取元素 const header = document.getElementById("header"); ``` #### `style`属性（内联样式） 直接在标签上定义CSS样式，优先级最高（覆盖外部样式）。 ```html

这是应用了内联样式的段落

``` ## 实战示例 ### 示例1：基础文本结构实现 ```html

前端开发基础

HTML标签学习

HTML（超文本标记语言）是构建网页的基础，通过各种标签组织内容结构。

1. 文本标签

段落标签（

）用于展示正文，class属性可批量应用样式。

2. 通用属性

注意：id属性具有唯一性，常用于JavaScript定位元素。

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

这是块级元素（div），可设置宽高

这是块级元素（p），独占一行

这是行内元素（span） 这是行内元素（strong） ``` ## 注意事项 1. **语义优先**：避免滥用`

`和``，优先使用有语义的标签（如`

`表示段落，``表示重要内容）。 2. **属性规范**： - `class`值可多个（空格分隔），用于样式复用 - `id`值必须唯一，建议使用有意义的名称（如`header`、`nav`） - `style`内联样式仅用于局部特殊样式，大面积样式应使用外部CSS 3. **嵌套规则**： - 块级元素可包含行内元素或其他块级元素（如`

`包含`

`） - 行内元素通常不能包含块级元素（如``不能包含`

`） ## 自测题 1. 以下哪个标签是行内元素？（ ） A. `

` B. `

` C. `` D. `

` *答案：C* 2. `class`属性与`id`属性的主要区别是什么？ *答案：`class`可重复用于多个元素，实现样式复用；`id`在页面中唯一，用于精准定位元素* 3. 写出包含以下要求的代码：一个红色（`color: red`）、18px字体的段落，内容为“HTML基础学习”。 *答案：`

HTML基础学习

` 或 使用class属性结合CSS*

JavaScript 开发

1 分钟阅读 99 字

0

分享到

×

微信扫一扫分享

打开微信扫一扫，分享文章给朋友

如果文章对您有帮助，欢迎支持作者继续创作

请作者喝杯奶茶

×

扫码打赏