HTML元素及路径2

约 1861 字大约 6 分钟

2026-03-14

手写笔记

一、路径的写法

1.1 绝对路径

定义：完整描述资源位置的路径，包含协议（或省略协议）、域名、文件路径，与当前文件位置无关。
写法分类：
1. 完整协议：https://www.example.com/images/logo.png
2. 省略协议：//www.example.com/images/logo.png（自动继承当前页面的 http/https 协议）
适用场景：引用外部网站、跨域的资源（非本地项目内的文件）。

1.2 相对路径

Q：什么是相对路径？
A：以当前 HTML 文件所在位置为基准，描述目标资源位置的路径，核心是“相对位置关系”。
核心规则（必记）：
1. ./：代表当前文件所在目录（可省略，直接写文件名等价于 ./文件名）
2. ../：代表当前文件所在目录的上一级目录
3. ../../：代表上两级目录，以此类推
写法示例：
- 同级文件：about.html（等价于 ./about.html，当前文件夹下的 about.html）
- 下级目录文件：./images/banner.jpg（当前文件夹下 images 子文件夹中的图片）
- 上级目录文件：../index.html（上一级文件夹下的首页文件）
适用场景：引用项目内部的本地资源（如本地图片、CSS/JS 文件、本地页面）。

二、图片元素（`<img>`）

2.1 核心属性（必掌握）

Q：<img> 元素的核心属性有哪些？分别有什么作用？
A：<img> 最核心的两个属性是 src 和 alt，缺一不可：
1. src 属性（source）：
  - 作用：指定图片资源的路径（支持绝对路径、相对路径）。
  - 注意：路径错误会导致图片加载失败，显示浏览器默认的裂图占位符。
  - 示例：<img src="./images/avatar.png" />
2. alt 属性（alternative text）：
  - 作用1：图片加载失败时，显示替代文字，提示用户图片内容；
  - 作用2：屏幕阅读器读取该文字，帮助视障用户理解图片，提升可访问性；
  - 作用3：搜索引擎抓取该文字，优化图片 SEO 排名。
  - 示例：<img src="avatar.png" alt="用户头像" />

2.2 与其他元素的联用场景

与 <a> 元素联用（点击图片跳转）：
- 用法：将 <img> 包裹在 <a> 标签内部，实现点击图片跳转到指定链接。
- 示例：
```
<a href="https://www.example.com">
  <img src="logo.png" alt="点击跳转至官网" />
</a>
```

与 <map> 元素联用（图片热点区域）：

作用：在一张图片上定义多个可点击区域，不同区域指向不同链接（如地图图片、产品示意图）。

示例：

<img src="map.png" alt="区域地图" usemap="#areaMap" />
<map name="areaMap">
  <area shape="rect" coords="0,0,100,100" href="north.html" alt="北区" />
  <area shape="rect" coords="100,0,200,100" href="south.html" alt="南区" />
</map>

与 <figure> 元素联用（语义化包裹）：
- 作用：用 <figure> 包裹图片 + <figcaption> 补充图片标题/描述，提升文档语义化。
- 示例：
```
<figure>
  <img src="chart.png" alt="年度销量图表" />
  <figcaption>图1：2026年产品年度销量趋势图</figcaption>
</figure>
```

三、多媒体元素（`<video>`）

3.1 核心属性（布尔属性为主）

Q：什么是布尔属性？
A：布尔属性是 HTML 特殊属性，只有“启用”和“禁用”两种状态，无需赋值：
- 禁用：不写该属性（默认状态）；
- 启用：仅写属性名即可（无需写 ="true"/="false"）。

<video> 共享布尔属性：

属性名	作用	注意事项
controls	显示播放控制栏（播放/暂停、音量、进度条、全屏等）	必加属性，否则无交互控件
autoplay	页面加载后自动播放	多数浏览器要求配合 `muted` 才能生效（静音自动播放）
muted	设置媒体静音播放	常与 `autoplay` 联用解决自动播放限制
loop	播放结束后自动循环播放	适用于背景音乐、循环展示的视频

基础用法示例：

<!-- 视频：带控制栏 + 静音自动播放 + 循环 -->
<video src="./video/bg.mp4" controls autoplay muted loop></video>
<!-- 音频：仅显示控制栏 -->
<audio src="./audio/music.mp3" controls>

四、列表元素（三类核心列表）

4.1 有序列表（`<ol>` + `<li>`）

标签含义：
- <ol>（Ordered List）：定义有序列表，列表项默认按数字（1、2、3…）排序；
- <li>（List Item）：列表项，必须嵌套在 <ol> 内部，不可单独使用。
使用场景：内容有明确顺序、步骤、排名的场景（如教程步骤、操作流程、排行榜）。

示例：

<ol>
  <li>打开浏览器</li>
  <li>输入网址</li>
  <li>按下回车访问</li>
</ol>

4.2 无序列表（`<ul>` + `<li>`）

标签含义：
- <ul>（Unordered List）：定义无序列表，列表项默认显示圆点符号；
- <li>（List Item）：列表项，必须嵌套在 <ul> 内部。
使用场景：内容无固定顺序的场景（如导航菜单、商品列表、标签集合、功能列表）。

示例：

<ul>
  <li>首页</li>
  <li>产品中心</li>
  <li>关于我们</li>
</ul>

4.3 定义列表（`<dl>` + `<dt>` + `<dd>`）

标签含义：
- <dl>（Definition List）：定义描述/术语列表；
- <dt>（Definition Title）：定义术语/标题；
- <dd>（Definition Description）：定义对术语的描述/解释。
使用场景：术语解释、名词定义、词条说明等需要“标题+描述”的场景。

示例：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于构建网页结构</dd>
  <dt>CSS</dt>
  <dd>层叠样式表，用于控制网页样式与布局</dd>
</dl>

五、容器元素

5.1 无语义容器（`<div>`）

作用：通用块级容器，无任何语义，仅用于布局分组，包裹其他元素实现样式或结构划分。
特点：默认独占一行，可通过 CSS 调整宽高、边距、浮动等布局属性。

示例：

<div class="container">
  <div class="header">头部区域</div>
  <div class="content">内容区域</div>
  <div class="footer">底部区域</div>
</div>

作用：语义化布局容器，明确标识页面不同区域，提升代码可读性、可访问性和 SEO 效果。

常见语义容器：

标签名	作用
`<header>`	页面/区域的头部（导航栏、标题、logo 等）
`<footer>`	页面/区域的底部（版权信息、备案号等）
`<nav>`	导航栏区域（包含页面主要导航链接）
`<article>`	独立文章内容（可独立于页面其他部分存在）
`<section>`	页面中的独立章节/模块

示例：

<header>
  <nav>
    <ul>
      <li>首页</li>
      <li>产品</li>
      <li>联系我们</li>
    </ul>
  </nav>
</header>
<article>
  <h1>核心功能介绍</h1>
  <section>
    <h2>功能1：数据展示</h2>
    <p>支持多维度数据可视化展示</p>
  </section>
</article>
<footer>
  <p>© 2026 某某科技有限公司 版权所有</p>
</footer>

六、核心总结

路径：绝对路径用于跨域/外部资源，相对路径基于当前文件位置引用本地资源，核心规则是 ./（当前）和 ../（上级）。
图片元素：src 指定路径、alt 做替代文字，可与 <a>/<map>/<figure> 联用实现交互和语义化。
多媒体元素：<video>/`` 核心是布尔属性（controls/autoplay 等），布尔属性无需赋值，写属性名即启用。
列表元素：有序列表（<ol>）用于有顺序内容，无序列表（<ul>）用于无序内容，定义列表（<dl>）用于术语解释。
容器元素：<div> 是通用无语义容器，<header>/<footer> 等是语义化容器，优先使用语义化容器提升代码可读性。