From 799551073cc9e0440567164778d769877351f551 Mon Sep 17 00:00:00 2001 From: Kawaxxxsaki <1111@123.com> Date: Sun, 2 Nov 2025 19:13:40 +0800 Subject: [PATCH] =?UTF-8?q?docs(web):=20=E6=B7=BB=E5=8A=A0HTML=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E8=AF=AD=E6=B3=95=E7=AC=AC=E4=BA=8C=E8=AF=BE=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增HTML基础语法第二课文档，介绍div标签和class属性的基本概念及用法 --- .../programming/web/basic-syntax/html2.md | 144 ++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 docs/notes/programming/web/basic-syntax/html2.md diff --git a/docs/notes/programming/web/basic-syntax/html2.md b/docs/notes/programming/web/basic-syntax/html2.md new file mode 100644 index 0000000..310f9a7 --- /dev/null +++ b/docs/notes/programming/web/basic-syntax/html2.md @@ -0,0 +1,144 @@ +--- +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; +} +``` +**现在自己动手尝试一下** \ No newline at end of file