From b28ed8ebfe5253e27a18bfc21c492788d254a327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=80=E6=A2=A6?= <3501646051@qq.com> Date: Sun, 2 Nov 2025 19:44:44 +0800 Subject: [PATCH] =?UTF-8?q?docs(web):=20=E6=B7=BB=E5=8A=A0HTML=E5=B8=B8?= =?UTF-8?q?=E7=94=A8=E6=A0=87=E7=AD=BE=E4=B8=8E=E5=B1=9E=E6=80=A7=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常用标签与属性的详细教程文档，包含基础标签使用、语义化布局、媒体元素等内容，并附带示例代码和练习作业 --- docs/.vuepress/notes.ts | 1 + .../web/basic-syntax/html-tags-attributes.md | 1183 +++++++++++++++++ 2 files changed, 1184 insertions(+) create mode 100644 docs/notes/programming/web/basic-syntax/html-tags-attributes.md diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index 7d46f4b..0747308 100644 --- a/docs/.vuepress/notes.ts +++ b/docs/.vuepress/notes.ts @@ -150,6 +150,7 @@ const web = defineNoteConfig({ { text: "基础知识", prefix: "/basic-syntax", items: [ { text: "Web 前端基础讲解", link: "/programming/web/basic-syntax/html-css-js/" }, + { text: "HTML 常用标签与属性", link: "/programming/web/basic-syntax/html-tags-attributes/" }, ], }, ] diff --git a/docs/notes/programming/web/basic-syntax/html-tags-attributes.md b/docs/notes/programming/web/basic-syntax/html-tags-attributes.md new file mode 100644 index 0000000..59de8f7 --- /dev/null +++ b/docs/notes/programming/web/basic-syntax/html-tags-attributes.md @@ -0,0 +1,1183 @@ +--- +title: HTML 常用标签与属性 +createTime: 2025/11/2 19:30:00 +permalink: /programming/web/basic-syntax/html-tags-attributes/ +--- + +## 开场：掌握这些标签，就能写出 80% 的网页 + +今天我们来认识**最常用的 HTML 标签**和它们的**常见属性**。 +把它们学会，你就能从零搭建出结构清晰、内容丰富的网页。语言风格延续上一课的节奏：轻松、直观、能马上上手。 + +想象一下： +- 网页是一座房子； +- 标签是房子里的“房间与家具”； +- 属性是“家具的颜色、大小、功能开关”。 + +## 一、页面骨架（Head / Body） + +网页的基本结构： +```html title="index.html" + + + + + + 仲夏夜之梦 + + + + + + +``` + +常用属性与标签说明： +- ``：声明页面语言，有利于无障碍与搜索引擎。 +- ``：统一编码，避免中文乱码。 +- ``：移动端适配必备。 +- ``：浏览器标签页的标题。 +- `<link rel="stylesheet" href="...">`：引入 CSS。 +- `<script defer src="...">`：引入 JS（`defer` 表示文档解析完再执行）。 + +补充说明： +- `<!DOCTYPE html>`：让浏览器以标准模式解析页面，避免兼容性怪异行为。 +- `<head>` 放“页面信息与资源引入”，`<body>` 放“实际可见内容”。不要把可见内容标签写进 `<head>`。 +- 资源引入推荐顺序：`meta` → `title` → `link`。脚本通常后置并非必需（本节示例不包含 JS）。 +- `lang` 与 `charset` 是无障碍与中文页面的基础配置，几乎必填；`viewport` 是移动端适配必备。 +- 开发实践：先搭骨架（结构正确），再补样式与交互，便于调试与定位问题。 + +**小案例：基础页面骨架** +::: code-tabs +@tab index.html +```html +<!DOCTYPE html> +<html lang="zh-CN"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>小案例：基础页面骨架 + + + +

你好，HTML！

+

这是一个最小可运行的页面骨架。

+ + +``` +@tab style.css +```css +body { font-family: system-ui, -apple-system, Segoe UI, Roboto; margin: 2rem; line-height: 1.6; } +h1 { color: #2b7; } +``` +::: + +**小作业：搭建你的个人主页** +::: code-tabs +@tab index.html +```html + + + + + + 我的个人主页 + + + +
+

+

+
+
+
+

关于我

+

写一段 2-3 句的自我介绍。

+
+
+

联系我

+

+
+
+ + + +``` +@tab style.css +```css +body { margin: 2rem; font-family: system-ui; } +header, footer { text-align: center; } +main { max-width: 720px; margin: 0 auto; } +h2 { margin-top: 1.5rem; } +``` +::: + +## 二、文本与标题（H/P/Span/Strong/Em） + +**标题**：从重要到不重要，`

` ~ `

`。 +```html title="index.html" +

我的网站

+

关于我

+

联系方式

+``` + +**段落与换行**： +```html title="index.html" +

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

+

这是另一个段落。
需要换行时用 <br>。

+
+``` + +**行内 vs 块级**： +- `
` 是块级元素（换行占整行），用于分区布局； +- `` 是行内元素（不换行），用于强调局部文字。 + +使用建议与解释： +- 语义优先：`` 表示“语义上的重点”，`` 仅表示“加粗外观”；`` 表示“语气强调”，`` 仅表示“斜体外观”。优先使用语义标签，样式交给 CSS。 +- 标题层级：通常一个页面只有一个 `

`，下面按层级组织为 `

/

...`。不要为求大小随意跳级或用标题替代普通文本。 +- 段落与换行：换行请优先使用分段（`

`），只有在同段内需要视觉换行时使用 `
`。`

` 适合用于内容分隔或主题切换。 + +**小案例：文本与标题** +::: code-tabs +@tab index.html +```html + + + + + 文本与标题案例 + + + +

我的网站

+

关于我

+

我是一名前端开发者，喜欢简洁的设计与清晰的结构。

+
+

联系方式

+

Email: hello@example.com

+ + +``` +@tab style.css +```css +body { font-family: system-ui; margin: 2rem; } +h1 { font-size: 2rem; margin-bottom: .5rem; } +h2 { margin-top: 1.5rem; } +p { margin: .5rem 0; } +``` +::: + +**小作业：写一段个人简介** +::: code-tabs +@tab index.html +```html + + + + + 个人简介 + + + +

你的名字

+

一句话介绍

+

用两段文字，分别写你现在在做什么、你感兴趣的方向。

+

使用 strong 与 em 做重点强调。

+ + +``` +@tab style.css +```css +body { font-family: system-ui; margin: 2rem; line-height: 1.8; } +p { max-width: 60ch; } +``` +::: + +## 三、链接与图片（A/IMG） + +**链接**： +```html title="index.html" +我的笔记网站 +``` +常用属性： +- `href`：目标地址； +- `target="_blank"`：新窗口打开； +- `rel="noopener"`：安全与性能（避免旧窗口被新页面控制）。 + +**图片**： +```html title="index.html" +我的头像 +``` +常用属性： +- `src`：图片地址； +- `alt`：图片替代文本（无障碍 & SEO 必备）； +- `width/height`：显示尺寸（建议配合 CSS 控制）。 + +补充说明： +- 链接安全：外链新窗口打开时同时设置 `rel="noopener"` 或 `rel="noreferrer"`，避免安全与性能问题。 +- 图片可使用 `loading="lazy"` 懒加载，减少首屏资源压力；`alt` 请写出图片用途或内容摘要。 +- 设定 `width/height` 可以预留占位，减少页面布局抖动（CLS）。复杂场景可考虑 `` + `` 做响应式图片。 +- 与图片相关的配套标签：`
` + `
` 用于图片与说明文字的组合。 + +**小案例：链接与图片** +::: code-tabs +@tab index.html +```html + + + + + 链接与图片案例 + + + + + 我的头像 + + +``` +@tab style.css +```css +nav { display: flex; gap: 1rem; margin-bottom: 1rem; } +nav a { color: #06c; text-decoration: none; } +nav a:hover { text-decoration: underline; } +img { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.1); } +``` +::: + +**小作业：做一个“友链”与头像区块** +::: code-tabs +@tab index.html +```html + + + + + 友链与头像 + + + +
+

友情链接

+

+ 祀梦笔记 + · + Vue.js +

+
+
+

头像

+ 你的头像 +
+ + +``` +@tab style.css +```css +section { margin-bottom: 1rem; } +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