HTML 基础（三）

本页对应 HTML 基础，共 7 段视频，约 1 小时 1 分。

学习目标

1. 能使用 a 标签的 href、target 属性创建页面跳转、空链接及新窗口打开链接，并说明其作用。
2. 能使用 audio 标签插入音频，正确设置 src、controls、autoplay、loop 属性，并说明属性名与属性值相同时的简写规则。
3. 能使用 video 标签插入视频，正确设置 src、controls、autoplay、loop、muted 属性，并区分音频与视频常用支持格式。
4. 能依据效果图，按“先整体后局部、从上到下”的思路完成“个人简介”页面，综合运用标题、段落、水平线、图片、加粗、下划线和超链接标签。
5. 能完成“Vue 简介”页面，使用相对路径实现两个页面之间的相互跳转，并在页面中插入视频且设置控制面板、自动播放和静音播放。

知识点

超链接的作用与基本写法

超链接的核心作用是：点击后跳转到其他页面。转写稿里说得很直白——“点去往新的页面”。所以我们在页面上看到一段可点击的文字，背后通常就是 a 标签在负责跳转。

为什么需要：网页不是孤立的，内容之间要能互相跳转，比如从首页跳到详情页、从当前页面跳到百度、从案例一跳到案例二。
怎么想：先明确“点哪里”和“跳到哪里”。点击的文字放在 a 标签内容里，跳转地址放在 href 属性里。
怎么做：

<a href="https://www.baidu.com">跳转到百度</a>

易错点：跳转地址用的是 href，不是图片里的 src。转写稿里也特意提醒“打开方式通过什么属性来设置，SRC还是其他之类的”，这里要区分清楚：src 是资源来源，href 才是超链接地址。

href 是超链接的必须属性

为什么需要：没有地址，浏览器不知道点击后去哪里。
怎么想：把 href 理解成“目标链接”。只要写超链接，就应先写 href。
怎么做：地址可以直接写完整网址，也可以写本地文件路径。笔记里给了本地文件示例：

<!-- 跳转到本地文件：相对路径查找 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

易错点：href 属性值要放在引号里；本地文件用相对路径时注意 ./ 表示当前目录。转写稿里反复说“链接去往哪个地方”，这个“地方”就是 href 的值。

target 控制打开方式

超链接默认在当前窗口跳转页面。如果希望新窗口打开，需要加 target="_blank"。转写稿里说：“你到底用什么方式打开呀？当前窗口还是新窗口，是不是有调整它就可以啦？”这里的“调整它”就是 target 属性。

为什么需要：有时不希望用户离开当前页面，比如从列表页点开详情页，保留原页面更方便返回。
怎么想：先判断打开方式：默认当前窗口；要新窗口就加 target="_blank"。
怎么做：

<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>

易错点：_blank 前面有下划线，不能写成 blank；target 不是 src。转写稿里提到“设置目标链接打开方式通过什么属性”，结论就是 target。

空链接 # 的使用

开发初期如果不确定跳转地址，可以把 href 写成 #，表示空链接。笔记说明：页面不会跳转，在当前页面刷新一次。转写稿里也提到：“不太确定去往哪个页面，一般喜欢在 href 里面写个什么符号？井号。”

为什么需要：页面结构先搭起来时，链接地址可能还没定，用 # 可以占位，保证 a 标签结构完整。
怎么想：先占位，后补真实地址；不要因为地址没定就不写 href。
怎么做：

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

易错点：# 是占位，不是最终地址；后续确定页面后要替换成真实路径。转写稿里“井号”就是 #，不要写成中文井号或漏写 href。

调试过程与完整示例

实际写的时候可以按这个顺序调试：先写 a 标签和文字，再补 href，保存后点击测试；如果发现当前窗口跳走，想保留原页面，就加 target="_blank"；如果地址还没确定，先把 href 写成 #，避免结构缺失。笔记完整代码如下：

<a href="https://www.baidu.com/">跳转到百度</a>

<!-- 跳转到本地文件：相对路径查找 --> 
<!-- target="_blank" 新窗口跳转页面 --> 
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>

易错点总结：href 必须写；新窗口用 target="_blank"；空链接用 # 占位；不要把 href 和 src 混用。掌握这几点，超链接的基本跳转就能稳定写出来。

音频标签的基本结构

为什么需要：网页不仅能放文字和图片，也可以放声音。要让浏览器知道“这里要插入一段音频”，就需要使用 HTML5 的 audio 标签。

怎么想：先准备音频文件，再在页面中写 audio 标签，并通过 src 告诉浏览器音频文件在哪里。audio 是音频的意思，写法与图片类似，也要先解决“文件放哪里、路径怎么写”的问题。

怎么做：基本结构如下，src 中写音频的 URL 或本地路径：

<audio src="音频的 URL"></audio>

转写稿中的调试过程是：先把音频文件放到当前项目文件夹中，例如 media/music.mp3，再写 src="./media/music.mp3"。保存后如果页面上看不到内容，是正常的，因为还没有显示控制面板。

易错点：src 是必须写的，不写就不知道播放哪个音频；路径要写对，注意 ./、文件夹名和文件名的大小写；本节笔记中常见支持格式是 MP3、OGG、WAV，实际使用最多的是 MP3，不要随意拿不支持的格式测试。

常用属性与 controls 控制面板

为什么需要：只写 src 时，音频虽然被引入页面，但用户看不见播放按钮，也不方便控制播放和暂停。需要让用户能操作音频。

怎么想：控制面板用 controls 属性来实现。转写稿中先只写 src，页面没有明显变化；加上 autoplay 后能听到声音，但“关不掉”，于是再加 controls，页面上就出现播放、暂停、音量、进度等控件。

怎么做：常用属性可参考下图：

给 audio 加上 controls，保存后页面会出现控制面板：

<audio src="./media/music.mp3" controls></audio>

易错点：controls 拼写不要写错；控制面板是否显示取决于是否加上该属性；控制面板的具体样式由浏览器决定，不同浏览器可能略有差异。

loop 循环播放

为什么需要：有时希望一段背景音乐播放完后自动重新开始，而不是只播放一遍。

怎么想：循环播放用 loop 属性。转写稿中把它理解为“单曲循环”：播放结束后又回到开头继续播放。

怎么做：在 audio 标签中加 loop：

<audio src="./media/music.mp3" controls loop></audio>

易错点：loop 不是路径，不要写成文件地址；它的作用是循环播放，不是自动播放；如果不加 controls，用户仍然不方便控制。

autoplay 自动播放及调试过程

为什么需要：有时希望页面打开后音频自动开始播放，减少用户一次点击。

怎么想：自动播放用 autoplay。转写稿中的调试顺序是：先写 src，页面没声音；加 autoplay 后有声音，但无法关闭；再加 controls 后出现控制面板，才能暂停或调节。

怎么做：

<audio src="./media/music.mp3" controls autoplay></audio>

易错点：不同浏览器对自动播放的限制不一样。转写稿中提到，较早的浏览器可能即使写了 autoplay 也不自动播放；遇到这种情况，显示 controls 后让用户手动点播放即可。不要误以为写了 autoplay 就一定在所有浏览器中自动发声。

HTML5 属性简写与完整代码

为什么需要：HTML5 提倡代码尽量简洁。当属性名和属性值完全相同时，可以只写属性名，减少重复。

怎么想：例如 controls="controls"、loop="loop"、autoplay="autoplay" 中，属性名和属性值一样，所以可以简写为 controls、loop、autoplay。但 src 的值是具体路径，属性名和属性值不同，不能简写。

怎么做：笔记中的完整示例是：

<!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
<audio src="./media/music.mp3" controls loop autoplay></audio>

易错点：只有“属性名和属性值相同”才能简写；路径不能简写；属性名必须拼写准确，例如 autoplay 不能少字母。实际测试时，先确认音频文件已放到正确目录，再检查 src 路径、controls、loop、autoplay 是否书写正确。

视频标签的基本写法

为什么需要：网页不仅能放文字和图片，也可以插入视频。视频标签用于把本地或网络上的视频放到页面中。

怎么想：视频英文是 video，所以标签名就是 <video>。和图片一样，必须先通过 src 告诉浏览器“视频来自哪里”。笔记给出的基本结构是：

<video src="视频的 URL"></video>

怎么做：把视频文件放到项目目录中，例如转写稿里放在 media 文件夹，然后在 src 中写路径。若视频 URL 是网络地址，也可以直接写 URL。

易错点：video 不要拼错；src 是视频地址，不是打开方式；本地文件路径要写对。转写稿中先写 <video src="./media/vue.mp4"></video> 后页面里可能“看不到”，原因是还没有显示控制面板，并不一定代表视频没引入成功。

常用属性：控制面板、循环与自动播放

为什么需要：只有 src 时，用户不一定能看到播放按钮，也不方便暂停、快进、调音量；自动播放和循环播放也需要属性控制。

怎么想：controls 表示显示控制面板；loop 表示循环播放；autoplay 表示自动播放；muted 表示静音。视频常配合 muted 实现自动播放，避免一打开页面就突然出声。

常用属性可参考下图：

怎么做：笔记示例把多个属性写在一起：

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>

易错点：转写稿中演示过，只加 autoplay 时浏览器可能仍不自动播放；再加上 muted 后，视频以静音方式自动播放。不要把 muted 写成 mute；controls、autoplay、loop、muted 这些属性名和属性值相同，可以只写属性名，但 src 的路径不能这样简写。

从“看不到”到“能播放”的调试过程

为什么需要：初学时最容易出现“代码写了但页面没反应”，需要按顺序排查。

怎么想：先确认视频路径是否正确，再确认是否显示控制面板，最后再测试自动播放和静音。转写稿的演示顺序是：先写 video src，保存后看不到画面；加 controls 后出现控制面板，可以播放、暂停、快进；加 autoplay 后发现不一定自动播放；再加 muted 后实现静音自动播放；加 loop 后循环播放。

怎么做：调试时可以先保留 controls，确认视频能手动播放；再逐步加 autoplay、muted、loop。如果视频文件较大，页面加载也会受影响，这是转写稿中提到第三方视频平台的原因之一。

易错点：音频标签和视频标签属性很像，但转写稿特别提醒：音频一般不要随便静音，否则就没声音了；视频为了自动播放常加 muted。另外，视频常见格式是 MP4，转写稿还提到 MOV、OGG，但实际练习优先用 MP4。

视频格式与第三方嵌入的补充

为什么需要：本地视频太大时，直接放在自己网站里会占用较大空间。转写稿提到可把视频上传到 B 站、腾讯视频等第三方平台，再复制“嵌入代码”放到页面中。

怎么想：本地小视频用 <video>；第三方平台通常给的是 <iframe> 嵌入代码，里面同样有 src，还可以调整宽高。

怎么做：在第三方视频页面选择“分享/嵌入代码”，复制后粘贴到 HTML 中，保存并刷新查看。

易错点：iframe 不是 video 标签，不要混写；嵌入代码里的 src 是第三方播放地址，不是本地 media 路径。初学练习仍以本地 <video> 为主，先掌握 src、controls、loop、muted、autoplay 这组核心属性。

制作流程：先整体再局部

为什么需要：个人简介页面元素多，如果一上来就抠链接、加粗、下划线，很容易漏结构。先按“从上到下”搭骨架，再回头修细节，页面才稳。
怎么想：把任务拆成“分析内容 → 写代码 → 保存 → 刷新浏览器看效果”。先看效果图，判断标题、水平线、段落、图片、小标题分别对应什么标签。
怎么做：先把笔记中的文字整体复制到 HTML 文件里，用 Alt+Z 自动换行；然后从上往下套标签：h1、hr、p、img、h2。结构搭完，再补 a、strong、ins。
易错点：不要先纠结空链接和强调标签；否则容易把段落切碎。保存后要刷新浏览器确认，不能只改代码不看效果。

标题、水平线与段落：先分大块

为什么需要：标题告诉浏览器“这是页面主题”，水平线做视觉分隔，段落把成段文字包起来。没有这些结构，文字会挤成一坨。
怎么想：案例顶部“尤雨溪”是主标题，用 h1；下面一条分隔线用 hr；简介正文用 p；“学习经历”“主要成就”“社会任职”是同级小标题，用 h2 或 h3 均可，但三者要一致。
怎么做：选中“尤雨溪”改成 <h1>尤雨溪</h1>；在标题后写 <hr>；把简介文字放入 <p>...</p>；三个小标题统一用 <h2>。
易错点：小标题层级不要乱跳；hr 是单标签，不写结束标签；段落没闭合会导致后续结构嵌套错误。

链接：先占位，再补真实地址

为什么需要：简介里“Vue.js、HTML5、JavaScript”等需要可点击。开发初期地址不确定时，可先用空链接占位，保证结构完整。
怎么想：转写稿中强调“先整体再局部”，所以先把文字段落分好，再回头把关键词用 a 包起来。真实地址明确时再写 href。
怎么做：如 <a href="#">HTML5</a>；案例代码中“Vue.js”指向 ../17-综合案例二/vue简介.html。保存后刷新，鼠标变成手型说明链接生效。
易错点：href 不要写成 src；路径写错会 404；空链接用 # 占位，别忘了后续替换。

图片：路径、alt 与 title

为什么需要：人物照片能增强页面信息；alt 是图片替代文本，title 可做鼠标悬停提示。
怎么想：先确认图片和 HTML 文件的位置关系。案例中图片是 ./photo.jpg，表示当前目录下的 photo.jpg。
怎么做：写 <img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪">。保存刷新，若图片不显示，先查文件名、扩展名和路径。
易错点：img 是单标签；路径大小写要一致；alt 不要空着，中文描述要准确。

加粗与下划线：强调重点信息

为什么需要：案例中“大学专业并非是计算机专业”需要加粗，“正是在读硕士期间……”需要下划线，用来突出重点。
怎么想：先完成段落，再局部选中文字套标签。加粗用 strong，下划线用 ins。
怎么做：<strong>大学专业并非是计算机专业</strong>；<ins>正是在读硕士期间……</ins>。保存刷新看强调效果。
易错点：不要用 b、u 代替语义标签；标签要包住完整文字，避免交叉嵌套。

完整代码与调试

为什么需要：完整代码便于对照检查标签闭合、路径和层级。
怎么想：按笔记代码逐段核对；浏览器与编辑器并排，用 Ctrl+滚轮 缩放对照，Ctrl+0 复原。
怎么做：保存后右击用 Live Server 打开；若结构乱，先查 p、h2 是否闭合；若图片或链接失效，查 src、href 路径。
易错点：同音字要写对：尤雨溪、Vue.js、HTML5、JavaScript；不要写成“有雨锡”“AT码5”“GS”。

<h1>尤雨溪</h1>
<hr>
<p>尤雨溪，前端框架<a href="../17-综合案例二/vue简介.html">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。

</p>
<img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪">
<h2>学习经历</h2>
<p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p>
<h2>主要成就</h2>
<p>尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士， <ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯</ins> 。</p>
<p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p>
<h2>社会任职</h2>
<p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>

案例目标与页面结构

本节做“综合案例二：Vue简介”，目标是把今天学的标题、段落、超链接、图片、视频标签串起来。转写里反复强调：先把整段文字复制进 HTML，页面会“一坨一坨”的，不要急；按“先整体、再局部”的顺序，从上到下套标签，最后再修链接、加粗、下划线、视频等细节。

为什么需要：综合案例不是背标签，而是练习“看到效果能拆结构”。怎么想：先分大块——大标题、说明段落、作者行、小标题、功能段落、视频。怎么做：新建 14-综合案例二.html，把笔记文字粘贴进去，先套 h1/h2/p，再处理链接和视频。易错点：不要一开始就抠链接和样式，否则结构容易乱；标题层级要统一，“主要功能”比“Vue.js”小，用 h2 或 h3 均可，但同级标题要一致。

<h1>Vue.js</h1>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
<p>其作者为<a href="../16-综合案例一/个人简介.html" target="_blank">尤雨溪</a></p>
<h2>主要功能</h2>
<p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
<p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
<p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p>
<video src="../media/vue.mp4" controls></video>

标题与段落：先整体再局部

为什么需要：Vue 简介文字多，直接堆在页面里没有层次。怎么想：标题用标题标签，正文用段落标签，作者行单独成段。怎么做：转写中先剪切文字，写 h1 或 h2 再粘贴；作者“其作者为尤雨溪”从大段中拆出来，单独放一个 p；“主要功能”用 h3，下面三个说明各用 p。易错点：不要把作者行塞在上一段里；不要用多个 <br> 代替段落；标题不要跳级混乱。

链接：从空链接到页面跳转

为什么需要：案例里“尤雨溪”要能跳到综合案例一，两个页面要互相跳转。怎么想：开发初期不确定地址，先写 href="#" 占位；确定文件后再改相对路径。怎么做：课堂同目录演示时写 ./13.html 这类相对路径；笔记代码中按目录写 ../16-综合案例一/个人简介.html，并保留 target="_blank"。易错点：路径按自己文件实际位置写，不要照抄；两个页面互跳时，A 链到 B、B 链回 A，不要把自己链到自己；同目录用 ./文件名，上一级用 ../。

视频标签：controls、autoplay 与 muted

为什么需要：页面要展示 Vue 视频。怎么想：先 video src 引入视频，看不到画面就加控制条；想自动播放再加 autoplay；怕一打开有声音就加 muted 静音。怎么做：转写中先写 video src="./media/vue1.mp4"，加 controls 出现播放/暂停和进度条；加 autoplay 自动播放；再加 muted 静音播放。笔记代码保留 controls，路径为 ../media/vue.mp4。易错点：只写 src 不一定看见控制条；浏览器可能限制有声自动播放，加 muted 更稳；素材名和路径要以实际文件为准，controls、autoplay、muted 拼写不能错。

调试与检查

为什么需要：综合案例最容易错在路径和标签闭合。怎么想：用 Live Server 打开，先看结构，再点链接，最后看视频。怎么做：标题、段落先成型；作者链接点击测试是否跳到综合案例一；视频检查是否有控制条、能否播放、是否静音。易错点：链接 # 忘记改；视频路径少写 media/；<video> 忘闭合；把“渐进式”“视图层”“单页应用”等同音字写错。按转写思路，先整体后局部，案例就能稳稳完成。

课件图示

代码示例

示例一：超链接 + 音频 + 视频（多媒体标签综合）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>超链接、音频、视频</title>
</head>
<body>
  <!-- 超链接：href 属性值是跳转地址，是超链接的必须属性 -->
  <a href="https://www.baidu.com/">跳转到百度</a>

  <!-- 跳转到本地文件：相对路径查找 -->
  <!-- target="_blank" 新窗口跳转页面 -->
  <a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>

  <!-- 开发初期，不知道超链接的跳转地址，href 属性值写 #，表示空链接，不会跳转 -->
  <a href="#">空链接</a>

  <!-- 音频：src 是音频的 URL -->
  <!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 -->
  <audio src="./media/music.mp3" controls loop autoplay></audio>

  <!-- 视频：在浏览器中，想要自动播放，必须有 muted 属性 -->
  <video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>
</html>

要点解释 / 易错点

• href 是 <a> 的必须属性，写的是跳转地址；target="_blank" 才是“新窗口打开”，不要把它当成 href 的属性。
• 本地文件用相对路径（./ 当前目录，../ 上一级），不是绝对路径。
• 空链接写 href="#"，页面不会跳转，只在当前页面刷新一次。
• HTML5 中属性名和属性值相同才能简写成一个单词（controls、loop、autoplay、muted）；src="..." 这种属性名和值不同，不能简写。
• 音频、视频都必须先有 src，且素材文件要放在当前文件夹下（如 media 文件夹），路径错了页面上什么都看不到。
• 视频想自动播放必须加 muted（静音），否则浏览器不让你自动播放；音频不要加 muted，加了就没有声音了。
• 只加 autoplay 不加 controls，播放起来后关不掉，所以一般 controls 要一起写上。

---

示例二：综合案例一 —— 个人简介

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>尤雨溪简介</title>
</head>
<body>
  <h1>尤雨溪</h1>
  <hr>
  <p>尤雨溪，前端框架<a href="../17-综合案例二/vue简介.html">Vue.js</a>的作者，<a href="#">HTML5</a>版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目<a href="#">JavaScript</a>，最后自己也走上了开源之路，现全职开发和维护<a href="#">Vue.js</a>。</p>

  <img src="./photo.jpg" alt="尤雨溪的照片" title="尤雨溪">

  <h2>学习经历</h2>
  <p>尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。</p>

  <h2>主要成就</h2>
  <p>尤雨溪<strong>大学专业并非是计算机专业</strong>，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士， <ins>正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯</ins> 。</p>
  <p>2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。</p>

  <h2>社会任职</h2>
  <p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。</p>
</body>
</html>

要点解释 / 易错点

• 制作思路：从上到下、先整体再局部——先把文字全部粘进来、套好大块标签（h1/hr/p/img），再回头修细节（加链接、加粗、下划线）。
• <hr> 是水平线，是单标签，不需要结束标签。
• 标题层级要合理：大标题用 h1，下面的“学习经历”“主要成就”“社会任职”用 h2（比大标题小一级），不要都用 h1。
• 段落里的链接是把文字用 <a> 包起来，href 先写 # 占位即可，别急着乱写地址。
• 加粗用 <strong>，下划线用 <ins>；注意 <ins> 是下划线，不要和 <em>（倾斜）混淆。
• 图片必须有 src（路径 ./photo.jpg，图要和 html 在同一层文件夹），alt 是图片不显示时的替代文字，title 是鼠标悬停显示的提示文字，两个别搞混。
• 中英文混排时，<a> 标签要紧贴文字、不要多敲空格，否则链接会出现多余空白。

---

示例三：综合案例二 —— Vue 简介（含视频与页面互跳）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue简介</title>
</head>
<body>
  <h1>Vue.js</h1>
  <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>

  <p>其作者为<a href="../16-综合案例一/个人简介.html" target="_blank">尤雨溪</a></p>

  <h2>主要功能</h2>
  <p>Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
  <p>Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。</p>
  <p>Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。</p>

  <video src="../media/vue.mp4" controls></video>
</body>
</html>

要点解释 / 易错点

• 页面间互跳：在综合案例二里点“尤雨溪”跳到综合案例一，地址写 ../16-综合案例一/个人简介.html；反过来在案例一里点“Vue.js”跳回案例二，地址写 ../17-综合案例二/vue简介.html。两个页面的链接地址是相反的，不要写成同一个。
• 跳转地址写的是文件名（含后缀 .html），不是文件夹名；文件名和你实际保存的名字要完全一致（自己起名不同就按自己的名字写）。
• “主要功能”属于小标题，要比 h1 小一级，用 h2；标题层级看效果图的字号大小来定，别凭感觉乱用。
• 视频这里只写了 controls，所以不会自动播放，需要手动点播放；若要自动播放必须再加 muted（静音）和 autoplay。
• 视频路径 ../media/vue.mp4 是上一级目录的 media 文件夹，路径写错（少写 ../）视频区域就是一片空白。
• 三个大段落要分别用三个 <p> 包起来，不要全塞进一个 <p>，否则文字会连成一大坨没有段落间距。

常见错误

1. 空链接写成 href="" 或干脆不写 href

• 现象：点一下页面"闪一下"或跳到文件顶部；不写 href 时文字变蓝但没有下划线、鼠标不是小手、Tab 键也选不中。
• 原因：href="" 等价于"当前页面 URL"，浏览器会重新加载；没有 href 的 <a> 只是"锚的名字"，不具备链接语义。
• 修法：占位统一写 href="#"。要区分三者：href="#" 是空链接（不跳转、回到顶部）、href="" 是刷新当前页、无 href 是纯文本锚点。

2. target 值漏写或写错

• 现象：以为会新窗口打开，结果覆盖了当前页；或有的浏览器新开、有的不开，行为不一致。
• 原因：写成了 target="blank"、target="new"、target=_blank（缺引号）等。_blank 的下划线是关键字的一部分，不是装饰。
• 修法：统一 target="_blank"，引号写全。给外部链接再加 rel="noopener noreferrer"，避免新页面通过 window.opener 反向操作你的页面。

3. 给 autoplay 加了却没反应，或加了有声音但关不掉

• 现象：<audio autoplay> 打开页面一片安静；<video autoplay> 有时能播有时不能。
• 原因：不是代码错，是浏览器的自动播放策略——有声媒体默认禁止自动播放。视频可以用 muted 绕过限制，音频没有"静音还有意义"的场景，所以基本绕不过。
• 修法：视频写 autoplay muted controls；音频不要指望 autoplay，老老实实给 controls 让用户点。凡是"我加了 autoplay 没声音"的疑问，先怀疑策略，再怀疑路径。

4. 把"可简写属性"的规则套到 src/href 上

• 现象：<img src="src">、<a href="href"> 之类的写法，资源 404；或者把 controls 写成 controls="true"、loop="yes"。
• 原因：简写的成立条件是属性名与属性值完全相同（controls="controls" → controls）。src 的值是路径，永远不等于 "src"；布尔属性的值也只能是自身，写 "true" 反而出错。
• 修法：只有 controls / loop / autoplay / muted / checked / disabled 这类布尔属性可简写；带路径、带文本的属性一个字符都不能省。

5. 媒体路径对不上：控制面板出来了，但点了不播/黑屏

• 现象：<audio controls> 显示了播放条，一按没声音；<video> 是一片黑或加载转圈。
• 原因：控制面板是标签本身渲染的，跟文件找没找到无关——所以"有面板"不代表"路径对"。常见根因是素材被拖到了工作区根目录而不是当前 HTML 文件所在目录，或漏了子文件夹名、扩展名大小写不符（Music.MP3 vs music.mp3）。
• 修法：相对路径的参照点是当前 HTML 文件所在目录，不是 VS Code 打开的项目根。把素材和 html 放同级或放 media/ 子目录，写 ./media/xxx.mp3；文件名直接从资源管理器复制，别手打。排查时先去掉所有属性只留 src，看能不能加载。

6. 两个页面互跳时链接写成绝对路径或文件名对不上

• 现象：点"尤雨溪"跳到 404 或 file:/// 根目录。
• 原因：写了 href="/13-个人简介.html"（开头斜杠代表盘符根目录），或引用的文件名与实际文件名差一个字/多个空格/大小写不同。
• 修法：同目录用 ./13-个人简介.html，上一级用 ../文件夹/文件名.html。改完文件名后，所有引用它的地方都要跟着改；链接地址最保险的做法是从资源管理器拖文件到编辑器里自动生成路径。

7. 结构靠 <br> 堆出来

• 现象：页面能看，但标题大小全靠猜，改一处全乱。
• 原因：跳过了"先整体再局部"——没有先分好 h1/h2/p/hr 的骨架，直接边排版边堆换行。
• 修法：先把纯文字全量粘进来，只做一件事：切分出标题、段落、水平线；骨架定完再回头加链接、加粗、下划线、图片。标题层级递进（h1 → h2 → h3），一页只用一个 h1。

练习

练习 1｜三种链接一锅端 在一个页面里放三个 <a>：①跳到百度（新窗口）②跳到同目录下你昨天写的 01-标签的写法.html（当前窗口）③空链接占位。要求：三个链接文字分别写清用途。 验收：点①不覆盖当前页；点②地址栏变成 01-标签的写法.html；点③页面不刷新（对比改成 href="" 看差异）。

练习 2｜音频播放器（含失败复现） 把一首 mp3 放进 media/ 子目录，用 <audio> 引入。先只写 src，观察页面；再加 controls；再加 loop。 验收：能说出"只有 src 时页面为什么什么都没变"；并解释为什么这道题里你不加 autoplay。

练习 3｜视频自动播放三连 用 <video> 引入 media/ 下的 mp4，依次尝试：autoplay → autoplay controls → autoplay muted controls loop。 验收：记录三种写法的实际表现，用一句话说明哪种能自动播放以及原因；再把这行代码改成简写形式，确认结果不变。

练习 4｜路径排错 给你一段代码：<video src="media/vue.mp4" controls></video>，但视频黑屏。请列出至少 3 个可能原因，并逐个给出验证方法（提示：文件在哪、文件名对不对、有没有写 ./）。 验收：能自己造出一个"控制面板在、但视频加载失败"的例子，再修好它。

练习 5｜双页互跳（综合） 做 13-个人简介.html 和 14-Vue简介.html 两个文件，放在同一目录。13 里的 "Vue.js" 跳到 14，14 里的 "尤雨溪" 跳到 13，其中一个用新窗口打开。 验收：从 13 跳到 14 再跳回 13，全程地址栏正确、无 404；两个页面的 h1/h2/段落层级清晰，页面里有图片（带 alt 和 title）。

原视频对照

#	视频	时长
1	音频标签	12:36
2	视频标签	12:45
3	综合案例1介绍	06:52
4	综合案例1实现	05:04
5	综合案例2实现	07:19
6	复习	09:18
7	作业布置	07:20

小结

1. "有控制面板" ≠ "文件加载成功"。面板由标签渲染，路径错也照样出面板。判断媒体是否真的加载，要看能不能播放，不是看有没有按钮。
2. 自动播放是浏览器策略问题，不是代码问题。视频靠 muted 换自动播放权，音频没有这条后门。以后遇到"autoplay 不生效"，先别改代码。
3. 属性简写只有一条判据：名与值完全相同。controls、loop、autoplay、muted 可简写；src、href、alt、title 永远不可简写。
4. 相对路径的参照点是 HTML 文件所在目录，不是项目根目录。素材"拖错位置"是这类 bug 的第一大来源，比写错字符更常见。
5. href="#"、href=""、无 href 是三件不同的事。占位一律用 #，别用空字符串，否则每次点击都在重新加载页面。
6. 链接的两个维度要分开想：href 决定"去哪"，target 决定"在哪开"。写错 _blank 的下划线，症状是"有时新窗口有时不新窗口"。
7. 综合案例的正确顺序是先整体后局部：先切骨架（标题/段落/水平线），再补细节（链接、加粗、下划线、图片、媒体）。反过来做，改一处崩一片。
8. 大视频不进自己的仓库。本地调试用 video，真正上线走第三方平台的嵌入代码（iframe），否则容量成本压不住。