docs(web): 添加HTML列表与语义布局文档
添加关于HTML列表(ul/ol/li)和语义化标签(header/nav/main等)的详细文档，包含基础语法说明、代码示例和练习作业，帮助初学者掌握HTML结构化编写
This commit is contained in:
@@ -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/" },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -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"
|
||||
<ul>
|
||||
<li>学习笔记</li>
|
||||
<li>工具推荐</li>
|
||||
<li>友情链接</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
有序列表（数字）：
|
||||
```html title="index.html"
|
||||
<ol>
|
||||
<li>需求与原型</li>
|
||||
<li>API 设计</li>
|
||||
<li>联调与验收</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
**小案例：展示清单与步骤**
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>列表案例</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script defer src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>我的清单</h2>
|
||||
<ul>
|
||||
<li>学习笔记</li>
|
||||
<li>工具推荐</li>
|
||||
<li>友情链接</li>
|
||||
</ul>
|
||||
<h2>项目步骤</h2>
|
||||
<ol>
|
||||
<li>需求与原型</li>
|
||||
<li>API 设计</li>
|
||||
<li>联调与验收</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@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
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>今日任务清单</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>今天要做的事</h1>
|
||||
<ul>
|
||||
<li>阅读 30 分钟</li>
|
||||
<li>练习 1 个算法题</li>
|
||||
<li>整理房间</li>
|
||||
</ul>
|
||||
</body>
|
||||
</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"
|
||||
<header>
|
||||
<h1>我的网站</h1>
|
||||
<nav>
|
||||
<a href="/blog/">博客</a>
|
||||
<a href="/notes/">笔记</a>
|
||||
</nav>
|
||||
<!-- 注意：更复杂的导航通常配合 CSS/JS 做响应式菜单 -->
|
||||
<!-- 小提示：块级容器的外层仍可使用 <div> 来做网格或栅格布局 -->
|
||||
<!-- 例如 <div class="container"> 包裹全站 -->
|
||||
<!-- 只是这些语义标签会让搜索引擎更理解结构 -->
|
||||
<!-- 语义标签与 <div> 并不冲突，可以配合使用 -->
|
||||
<!-- 选择语义标签能让你的 HTML 更“有含义”而非只是分区 -->
|
||||
<!-- 如果仅用于布局、无明确语义，用 <div> 即可 -->
|
||||
<!-- 这段说明旨在帮助你建立语义化与布局之间的直觉 -->
|
||||
<!-- 逐步养成好的结构化写法 -->
|
||||
<!-- 让内容更可维护，更易被机器理解 -->
|
||||
<!-- （继续往下看，还会介绍 Article/Section 等） -->
|
||||
```
|
||||
|
||||
> 语义化标签的要点：这些标签表达了“这是什么内容”，而不是“怎么显示”。更容易被搜索引擎和读屏工具理解。
|
||||
|
||||
**小案例：语义化布局入门**
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>语义化布局案例</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script defer src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>我的网站</h1>
|
||||
<nav>
|
||||
<a href="#home">首页</a>
|
||||
<a href="#blog">博客</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>最新文章</h2>
|
||||
<article>
|
||||
<h3>用语义标签改造你的页面</h3>
|
||||
<p>示例段落：用 header/nav/main/section/article/aside/footer 组织结构。</p>
|
||||
</article>
|
||||
</section>
|
||||
<aside>
|
||||
<h2>侧栏</h2>
|
||||
<p>这里可以放导航、标签云或广告位。</p>
|
||||
</aside>
|
||||
</main>
|
||||
<footer>© 2025 祀梦</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@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
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>博客首页</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>博客名称</h1>
|
||||
<nav>
|
||||
<a href="#">首页</a>
|
||||
<a href="#">归档</a>
|
||||
<a href="#">关于</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<article>
|
||||
<h2>第一篇文章标题</h2>
|
||||
<p>摘要内容……</p>
|
||||
</article>
|
||||
<article>
|
||||
<h2>第二篇文章标题</h2>
|
||||
<p>摘要内容……</p>
|
||||
</article>
|
||||
</section>
|
||||
<aside>
|
||||
<h2>侧栏</h2>
|
||||
<p>分类、标签或个人简介。</p>
|
||||
</aside>
|
||||
</main>
|
||||
<footer>© 2025 你的名字</footer>
|
||||
</body>
|
||||
</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"
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>职业</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>祀梦</td>
|
||||
<td>开发者</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
小提示：表格样式通常用 CSS 来美化（边框、间距、对齐等）。
|
||||
|
||||
**小案例：信息表格**
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>信息表格案例</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script defer src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>姓名</th><th>职业</th><th>城市</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>祀梦</td><td>开发者</td><td>上海</td></tr>
|
||||
<tr><td>小李</td><td>产品经理</td><td>杭州</td></tr>
|
||||
<tr><td>小王</td><td>设计师</td><td>北京</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</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
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>课程表</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>时间</th><th>课程</th><th>教室</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>周一 9:00</td><td>数学</td><td>A101</td></tr>
|
||||
<tr><td>周三 14:00</td><td>英语</td><td>B302</td></tr>
|
||||
<tr><td>周五 10:00</td><td>计算机</td><td>C210</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@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"
|
||||
<audio src="bgm.mp3" controls loop></audio>
|
||||
|
||||
<video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
|
||||
<!-- 常用属性：controls / autoplay / loop / muted / poster（封面） -->
|
||||
```
|
||||
|
||||
补充说明：
|
||||
- `controls` 提供播放控制；一般不建议隐藏，保证可用性。
|
||||
- `autoplay` 可能被浏览器限制；若需自动播放，通常需同时设置 `muted`。
|
||||
- `preload` 控制预加载策略（`none`/`metadata`/`auto`），根据页面性能需求选择。
|
||||
- `poster` 为视频未播放时的封面图；音频没有封面属性。
|
||||
- 使用 `<source>` 指定多种格式与 MIME 类型，提升兼容性：`<source src="xxx.mp4" type="video/mp4">`。
|
||||
|
||||
**小案例：嵌入音视频**
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>媒体案例</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>背景音乐</h2>
|
||||
<audio src="bgm.mp3" controls loop></audio>
|
||||
<h2>介绍视频</h2>
|
||||
<video src="intro.mp4" controls width="480" poster="cover.jpg" muted></video>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@tab style.css
|
||||
```css
|
||||
video { display: block; margin-top: .5rem; }
|
||||
```
|
||||
:::
|
||||
|
||||
**小作业：添加一段你喜欢的音乐与视频**
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>我的媒体</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<audio src="music.mp3" controls></audio>
|
||||
<video src="movie.mp4" controls width="480" poster="cover.jpg"></video>
|
||||
</body>
|
||||
</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
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>全局属性案例</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script defer src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="likeBtn" class="btn" title="点赞一下" data-count="0" aria-label="点赞">👍 喜欢</button>
|
||||
<p id="msg" class="note" aria-live="polite">点击按钮试试。</p>
|
||||
</body>
|
||||
</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
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>计数按钮</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script defer src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="counter" class="btn" title="点击增加" data-count="0">点击我</button>
|
||||
<p id="status" class="note">当前计数：0</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@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
|
||||
Reference in New Issue
Block a user