--- title: Web 前端基础第二课 createTime: 2025/11/2 18:25:48 permalink: /programming/web/basic-syntax/html2/ --- ## 认识div标签 **什么是
？**
是 "division"（分区）的缩写，可以理解为网页中的"容器"或"盒子"。 想象一下搬家时的纸箱： * 网页 = 整个房间 *
= 一个个纸箱 * 箱子里 = 可以放各种物品（文字、图片、按钮等） ##
的基本特点 1. 块级元素
是块级元素，这意味着： * 默认会占据整行的宽度 * 前后会自动换行 * 就像段落一样，每个
都会从新的一行开始 **
本身没有特定含义，它只是用来分组和布局。** ## 为什么要使用
？ 没有
的情况： ```html title='index.html' 仲夏夜之梦

我的网站

欢迎来到我的个人网站！

我的照片

这是我的个人介绍...

``` 所有元素都堆在一起，很难分别控制样式。 使用
的情况： ```html title='index.html' 仲夏夜之梦

我的网站

欢迎来到我的个人网站！

我的照片

这是我的个人介绍...

``` 这样我就可以分别控制每个部分的样式啦！ 这个时候又有聪明的小朋友问了：这个class是什么呀？难道说？！是**起的名字！！** 太好了，恭喜你答对了，那么我们为什么要用class呢？ ## Class Class 可以理解为给 HTML 元素起的"组名"或"类别名"，让 CSS 能够精确地找到并美化特定的元素。 想象一个学校： * HTML 元素 = 学生 * Class = 学生的身份（如"三年级一班"、"篮球队员"） * CSS = 老师，根据身份给学生安排不同的任务和服装 class基本用法此处就不举例了，详情参照上面的代码。 如果没有class的情况： ```html title='index.html' 仲夏夜之梦

我的网站

普通段落

个人介绍

重要提示

``` 如果我们想给"重要提示"和"重要按钮"设置特殊样式，很难精确选择！像之前我教的一样css直接用p或者h1来选择的话就无法区分具体每一段的区别了。 这时候就可以用class了！ ::: code-tabs @tab index.html ```html 仲夏夜之梦

我的网站

普通段落

个人介绍

重要提示

``` @tab style.css ```css .warning { color: red; font-weight: bold; } .important-btn { background-color: red; color: white; } ``` **现在自己动手尝试一下**