From 474f335e94e3a4b23887f6daa42dc3e0fcdc8057 Mon Sep 17 00:00:00 2001 From: Kawaxxxsaki <1111@123.com> Date: Sun, 2 Nov 2025 20:50:33 +0800 Subject: [PATCH] =?UTF-8?q?docs(web):=20=E6=B7=BB=E5=8A=A0HTML=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E4=B8=8E=E8=AF=AD=E4=B9=89=E5=B8=83=E5=B1=80=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列表(ul/ol/li)和语义化标签(header/nav/main等)的详细文档，包含基础语法说明、代码示例和练习作业，帮助初学者掌握HTML结构化编写 --- docs/.vuepress/notes.ts | 1 + .../html-lists-and-semantic-layout.md | 468 ++++++++++++++++++ 2 files changed, 469 insertions(+) create mode 100644 docs/notes/programming/web/basic-syntax/html-lists-and-semantic-layout.md diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index 0747308..799c163 100644 --- a/docs/.vuepress/notes.ts +++ b/docs/.vuepress/notes.ts @@ -151,6 +151,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/" }, + { text: "HTML 列表与语义布局", link: "/programming/web/basic-syntax/html-lists-and-semantic-layout/" }, ], }, ] diff --git a/docs/notes/programming/web/basic-syntax/html-lists-and-semantic-layout.md b/docs/notes/programming/web/basic-syntax/html-lists-and-semantic-layout.md new file mode 100644 index 0000000..236e2ef --- /dev/null +++ b/docs/notes/programming/web/basic-syntax/html-lists-and-semantic-layout.md @@ -0,0 +1,468 @@ +--- +title: test +createTime: 2025/11/02 20:47:50 +permalink: /programming/web/basic-syntax/html-lists-and-semantic-layout/ +--- +## 四、列表（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 + + + + + 今日任务清单 + + + +

今天要做的事

+ + + +``` +@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 组织结构。

+
+
+ +
+ + + +``` +@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 + + + + + 博客首页 + + + +
+

博客名称

+ +
+
+
+
+

第一篇文章标题

+

摘要内容……

+
+
+

第二篇文章标题

+

摘要内容……

+
+
+ +
+ + + +``` +@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