From b7c97d0f179aefc697c21fd00552974c9f2772c9 Mon Sep 17 00:00:00 2001 From: Kawaxxxsaki <1111@123.com> Date: Sun, 2 Nov 2025 20:21:36 +0800 Subject: [PATCH] =?UTF-8?q?docs(web):=20=E6=B7=BB=E5=8A=A0div=E6=A0=87?= =?UTF-8?q?=E7=AD=BE=E5=92=8Cclass=E5=B1=9E=E6=80=A7=E7=9A=84=E8=AF=A6?= =?UTF-8?q?=E7=BB=86=E8=AF=B4=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 扩展HTML文档，新增关于div标签和class属性的详细解释和使用示例，包括： - div标签的基本特点和用途 - class属性的作用和实际应用场景 - 相关代码示例和练习作业 --- .../web/basic-syntax/html-tags-attributes.md | 1173 ++++------------- 1 file changed, 261 insertions(+), 912 deletions(-) diff --git a/docs/notes/programming/web/basic-syntax/html-tags-attributes.md b/docs/notes/programming/web/basic-syntax/html-tags-attributes.md index 73c438a..27f9050 100644 --- a/docs/notes/programming/web/basic-syntax/html-tags-attributes.md +++ b/docs/notes/programming/web/basic-syntax/html-tags-attributes.md @@ -4,7 +4,7 @@ createTime: 2025/11/2 19:30:00 permalink: /programming/web/basic-syntax/html-tags-attributes/ --- -## 文本与标题（H/P/Span/Strong/Em） +## 文本与标题（H/P/Span/Strong/Em/Div） **标题**：从重要到不重要，`

` ~ `

`。 ```html title="index.html" @@ -13,6 +13,184 @@ permalink: /programming/web/basic-syntax/html-tags-attributes/

联系方式

``` +### 认识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; +} +``` +::: +**现在自己动手尝试一下** + +## 动手练习：小作业 + +运用所学的 HTML 和 CSS 知识，创建一个美观的个人名片页面。不确定的时候翻翻文档 + +```html title='index.html' + + + + + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + + +``` + +css样式自定，发挥自己的创作力，创建一个独特的个人名片页面。 + **段落与换行**： ```html title="index.html"

这是一个段落，里面可以有加粗和强调。

@@ -87,24 +265,94 @@ p { max-width: 60ch; } ## 三、链接与图片（A/IMG） -**链接**： -```html title="index.html" -我的笔记网站 +### 什么是 标签 + + 标签用于在网页中插入图片，它是自闭合标签（不需要结束标签）。 + +### 标签的基本属性 + +* src：指定图片的路径（必填） +* alt：指定图片的替代文本（必填，用于图片加载失败时显示） +* width：指定图片的宽度（可选） +* height：指定图片的高度（可选） + +基本语法： +```html title='index.html' +我的照片 ``` + +### HTML 超链接 + +HTML 链接（Anchor）是网页之间跳转的核心部分。 + +HTML 使用链接与网络上的另一个文档相连。 + +HTML中的链接是一种用于在不同网页之间导航的元素。 + +链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。 + +链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。 + +HTML 链接 通过 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。 + +超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 + +当把鼠标指针移动到网页中的某个链接上时，箭头会变为**一只小手**。 + +## 标签的基本属性 + +* href：指定链接的目标 URL（必填） +* target：指定链接在何处打开（可选） + * _blank：在新窗口或标签页中打开链接 + * _self：在当前窗口或标签页中打开链接（默认） + * _parent：在父框架中打开链接 + * _top：在顶部框架中打开链接 + +基本语法： +```html title='index.html' +链接文本 +``` +- 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。 +- href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。 + +**这里还有一个target 属性**： +- _blank：在新窗口或标签页中打开链接 +- _self：在当前窗口或标签页中打开链接（默认） +- _parent：在父框架中打开链接 +- _top：在顶部框架中打开链接 + +```html title='index.html' + + + + target属性示例 + + +

target属性示例

+ + + 当前窗口打开 + + + 新窗口打开 + + + 父窗口打开 + + + + 外部网站（安全的新窗口） + + + +``` +复制代码到自己的html文件中，尝试一下不同的target属性值。 + 常用属性： - `href`：目标地址； - `target="_blank"`：新窗口打开； - `rel="noopener"`：安全与性能（避免旧窗口被新页面控制）。 -**图片**： -```html title="index.html" -我的头像 -``` -常用属性： -- `src`：图片地址； -- `alt`：图片替代文本（无障碍 & SEO 必备）； -- `width/height`：显示尺寸（建议配合 CSS 控制）。 - 补充说明： - 链接安全：外链新窗口打开时同时设置 `rel="noopener"` 或 `rel="noreferrer"`，避免安全与性能问题。 - 图片可使用 `loading="lazy"` 懒加载，减少首屏资源压力；`alt` 请写出图片用途或内容摘要。 @@ -174,902 +422,3 @@ img { border: 2px solid #eee; border-radius: 50%; } ``` ::: -## 四、列表（UL/OL/LI） - -无序列表（圆点）： -```html title="index.html" -
    -
  • 学习笔记
    • -
  • 工具推荐
    • -
  • 友情链接
    • -
-``` - -有序列表（数字）： -```html title="index.html" -
    -
  1. 需求与原型
    2. -
  2. API 设计
    3. -
  3. 联调与验收
    4. -
-``` - -**小案例：展示清单与步骤** -::: code-tabs -@tab index.html -```html - - - - - 列表案例 - - - - -

我的清单

-
    -
  • 学习笔记
    • -
  • 工具推荐
    • -
  • 友情链接
    • -
-

项目步骤

-
    -
  1. 需求与原型
    2. -
  2. API 设计
    3. -
  3. 联调与验收
    4. -
- - -``` -@tab style.css -```css -ul, ol { margin: .5rem 0 1rem; padding-left: 1.5rem; } -li { margin: .25rem 0; } -``` -@tab app.js -```js -document.querySelectorAll('li').forEach(li => li.addEventListener('click', () => li.classList.toggle('done'))); -``` -::: - -**小作业：做一个“今日任务清单”** -::: code-tabs -@tab index.html -```html - - - - - 今日任务清单 - - - -

今天要做的事

-
    -
  • 阅读 30 分钟
    • -
  • 练习 1 个算法题
    • -
  • 整理房间
    • -
- - -``` -@tab style.css -```css -body { font-family: system-ui; margin: 2rem; } -li { cursor: pointer; } -.done { text-decoration: line-through; color: #888; } -``` -::: - -## 五、语义化布局（Header/Nav/Main/Section/Article/Aside/Footer） - -语义化标签让结构更清晰，搜索引擎更友好： -```html title="index.html" -
-

我的网站

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -> 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被搜索引擎和读屏工具理解。 - -**小案例：语义化布局入门** -::: code-tabs -@tab index.html -```html - - - - - 语义化布局案例 - - - - -
-

我的网站

- -
-
-
-

最新文章

-
-

用语义标签改造你的页面

-

示例段落：用 header/nav/main/section/article/aside/footer 组织结构。

-
-
- -
-
© 2025 祀梦
- - -``` -@tab style.css -```css -body { font-family: system-ui; margin: 0; } -header, footer { padding: 1rem 2rem; background: #f7f7f7; } -nav { display: flex; gap: 1rem; } -main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; } -article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; } -aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; } -``` -@tab app.js -```js -document.querySelectorAll('nav a').forEach(a => a.addEventListener('click', () => { - document.querySelectorAll('nav a').forEach(x => x.classList.remove('active')); - a.classList.add('active'); -})); -``` -::: - -**小作业：用语义标签搭一个博客首页** -::: code-tabs -@tab index.html -```html - - - - - 博客首页 - - - -
-

博客名称

- -
-
-
-
-

第一篇文章标题

-

摘要内容……

-
-
-

第二篇文章标题

-

摘要内容……

-
-
- -
-
© 2025 你的名字
- - -``` -@tab style.css -```css -/* 与案例类似的栅格布局样式 */ -main { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; padding: 1rem 2rem; } -article { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; } -aside { background: #fff; padding: 1rem; border: 1px solid #eee; border-radius: 8px; } -``` -::: - -## 六、表格（Table/TR/TH/TD） - -```html title="index.html" - - - - - - - - - - - - - -
姓名职业
祀梦开发者
-``` -小提示：表格样式通常用 CSS 来美化（边框、间距、对齐等）。 - -**小案例：信息表格** -::: code-tabs -@tab index.html -```html - - - - - 信息表格案例 - - - - - - - - - - - - - -
姓名职业城市
祀梦开发者上海
小李产品经理杭州
小王设计师北京
- - -``` -@tab style.css -```css -table { border-collapse: collapse; width: 100%; } -th, td { border: 1px solid #ddd; padding: .5rem .75rem; text-align: left; } -thead th { background: #f7f7f7; } -tbody tr:nth-child(odd) { background: #fafafa; } -``` -@tab app.js -```js -document.querySelectorAll('tbody tr').forEach(tr => tr.addEventListener('click', () => tr.classList.toggle('highlight'))); -``` -::: - -**小作业：制作“课程表”** -::: code-tabs -@tab index.html -```html - - - - - 课程表 - - - - - - - - - - - - -
时间课程教室
周一 9:00数学A101
周三 14:00英语B302
周五 10:00计算机C210
- - -``` -@tab style.css -```css -table { border-collapse: collapse; width: 100%; } -th, td { border: 1px solid #ddd; padding: .5rem .75rem; } -thead th { background: #f0f0f0; } -``` -::: - - -## 七、媒体（Audio/Video/Source） - -```html title="index.html" - - - - -``` - -补充说明： -- `controls` 提供播放控制；一般不建议隐藏，保证可用性。 -- `autoplay` 可能被浏览器限制；若需自动播放，通常需同时设置 `muted`。 -- `preload` 控制预加载策略（`none`/`metadata`/`auto`），根据页面性能需求选择。 -- `poster` 为视频未播放时的封面图；音频没有封面属性。 -- 使用 `` 指定多种格式与 MIME 类型，提升兼容性：``。 - -**小案例：嵌入音视频** -::: code-tabs -@tab index.html -```html - - - - - 媒体案例 - - - -

背景音乐

- -

介绍视频

- - - -``` -@tab style.css -```css -video { display: block; margin-top: .5rem; } -``` -::: - -**小作业：添加一段你喜欢的音乐与视频** -::: code-tabs -@tab index.html -```html - - - - - 我的媒体 - - - - - - - -``` -@tab style.css -```css -audio, video { display: block; margin: .5rem 0; } -``` -::: - - -## 八、全局常用属性（任何标签几乎都能用） - -- `id`：唯一标识，用于 JS/CSS 精确选择。 -- `class`：分组与样式选择（上一课已讲）。 -- `style`：内联样式（不推荐大量使用，建议写到 CSS 文件）。 -- `title`：悬停提示文字。 -- `data-*`：自定义数据属性（如 `data-user-id="42"`）。 -- `aria-*`：无障碍相关属性，帮助读屏工具理解（如 `aria-label`）。 - -**小案例：使用 id/class/data/title/aria** -::: code-tabs -@tab index.html -```html - - - - - 全局属性案例 - - - - - -

点击按钮试试。

- - -``` -@tab style.css -```css -.btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; } -.note { color: #555; } -``` -@tab app.js -```js -const btn = document.getElementById('likeBtn'); -const msg = document.getElementById('msg'); -btn.addEventListener('click', () => { - const count = Number(btn.dataset.count || 0) + 1; - btn.dataset.count = String(count); - msg.textContent = `已点赞 ${count} 次`; -}); -``` -::: - -**小作业：做一个带计数的按钮** -::: code-tabs -@tab index.html -```html - - - - - 计数按钮 - - - - - -

当前计数：0

- - -``` -@tab style.css -```css -.btn { padding: .5rem .75rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; } -.note { margin-top: .5rem; } -``` -@tab app.js -```js -const counter = document.getElementById('counter'); -const statusEl = document.getElementById('status'); -counter.addEventListener('click', () => { - const count = Number(counter.dataset.count || 0) + 1; - counter.dataset.count = String(count); - statusEl.textContent = `当前计数：${count}`; -}); -``` -::: - -## 结尾：先结构清晰，再上样式与交互 - -写网页像搭房子：先把房间（结构标签）安排好，再选家具颜色（CSS），最后加智能设备（JS）。 - -建议你先用这些常用标签做一个“个人名片页”，含标题、段落、头像图片、导航链接和一个简单表单。练熟后再加样式与交互。 - -**延伸阅读**： -- HTML 规范与参考（MDN）：https://developer.mozilla.org/en-US/docs/Web/HTML -- 无障碍与语义化：https://developer.mozilla.org/en-US/docs/Glossary/Semantics \ No newline at end of file