第一部分 VScode进阶使用
一、相对路径
1、定义：以引用文件所在位置为参考基础，而建立出的目录路径。也就是，图片相对于HTML页面的位置。
2、相对路径的分类：
①同一级路径：处于同一个文件夹下。
例如图片.jpg就和06同一级路径.html在同一级路径
②下一级路径：在当前目录的下一个目录中。
例如图片1.jpg就在06同一级路径.html下一级路径
③上一级路径：和下一级路径同理。
二、绝对路径
指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
如：E:\网页\图像标签.jpg或完整的网页绝对路径https://i0.hdslb.com/bfs/feed-admin/10641bbc5189591221c00958f3458f33798c7caa.png
三、超链接标签
1、链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
其中两个属性的作用如下：
target_self为取代当前页面打开链接，target_blank为新窗口打开
2、链接的分类：
①外部链接
点击后成功进入腾讯界面
②内部链接：网站内部页面之间的相互链接，直接链接内部网页名称即可。<a herf="案例测试.html">案例测试</a>
target="blank"在新的页面打开链接网页
③空连接：如果当时没有确定链接目标时，<a herf="#">空链接</a>。
④下载链接：如果herf里面地址是一个文件或者压缩包，会下载这个文件。
⑤网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加到超链接。
格式：
<h4>网页</h4>
<a href="http://www.baidu.com"><img src="图片名称.jpg"></a>
⑥锚点链接：点击链接后，可以快速定位到页面中的某个位置。
首先，在链接文本的herf属性中，设置属性值为#名字，例如<a herf="#two">第二部分</a>
之后找到目标位置标签，里面添加一个id属性=刚才的名字，例如<h3 id="two">第二集介绍</h3>
第二部分 HTML中的注释标签和特殊字符
一、注释标签
1、定义：如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释字，就需要用到注释标签。
2、注释标签：<!-- --> 快捷注释：Ctrl+/
添加注释是为了更好的解释代码的功能，便于相关开发人员的理解和阅读，程序是不会执行注释内容的。
二、特殊字符
1、为什么存在特殊字符：在HTML中，一些特殊的符号很难或者不方便直接使用，此时我们就可以用一些字符来代替。
2、特殊字符表
其中，重点字符为空格、大于号、小于号这三个，其余字符使用较少。
三、综合案例
1、命运石之门.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>命运石之门</title>
</head>
<body>
<h1>命运石之门 （WHITE FOX公司制作电视动画）</h1>
1、<a href="剧情.html" target="_blank">剧情简介</a><br>
2、<a href="#juese">角色介绍</a><br>
3、<a href="#yinyue">动画音乐</a><br>
<h2 id="juese">角色介绍</h2>
<h5>冈部伦太郎（おかべ りんたろう）</h5>
<img src="图片/图片4.jpg">
<p>1991年12月14日出生，18岁。本作的主人公。东京机电大学1年级生。
自称狂妄的疯狂科学家，抱着作为恶人般目中无人的态度。时常穿着白大褂。
日常生活中，常唐突地听电话并说着“机关的阴谋”之类的话，他的设定几乎就是所谓的“中二病”。在秋叶原成立了“未来道具研究所”，发明用途不明的道具。不识气氛，本质上是个好人。非常重视实验室的伙伴们。
第二个名字是“凤凰院凶真（ほうおういん きょうま）”。但是，桥田跟真由里直呼本名“冈伦（オカリン）”。喜欢喝被称作“智慧饮料”的Dr Pepper。</p>
<h5>牧濑红莉栖（まきせ くりす）</h5>
<img src="图片/图片3.jpg">
<p>1992年7月25日出生，18岁。哥伦比亚大学脑部科学研究所的研究员。
仅18岁就跳级大学毕业。更在美国的著名学术期刊发表论文的才女。一见到未知事物，就提起兴趣埋头钻研。属于不太直率的类型，不善于称赞对方。尽管如此，对于自己认可的人，虽然会嘴硬，但还是会抱着尊敬的态度。
冈部称她为“助手“、“克莉丝汀娜（Christina）”。而本人并不接受。
也是所谓的傲娇。</p>
<h5>椎名真由理（しいな まゆり</h5>
<img src="图片/图片2.jpg">
<p>1994年2月1日出生，16岁。私立花浅葱大学附属高中2年级生。冈部的青梅竹马，爱称“真由氏（まゆしぃ☆）”。
总是微笑着按照自己的步调行事，口癖是“嘟嘟噜—♪”的天然呆。小时候祖母经常背着她一起去看夜空。受到这个影响，有了时常会仰望天空并把手伸向空中的癖好。这个癖好会在突如其来之际（说话的中途）体现。有制作COSPLAY服饰的兴趣。
在冈部身边充当“人质”。</p>
<h2 id=yinyue>动画音乐</h2>
<h5>OP《Hacking to the Gate》</h5>
作词、作曲：志仓千代丸<br>
编曲：矶江俊道<br>
歌：伊藤香奈子<br>
<h5>ED《刻司ル十二ノ盟约》（第1－21话、第23话（β））</h5><br>
作词：志仓千代丸<br>
作曲、编曲：林达志<br>
歌：PHANTASM(FES cv.榊原由依)<br>
<h5>ED《スカイクラッドの観测者》（第23话）</h5><br>
作词、作曲：志仓千代丸<br>
编曲：矶江俊道<br>
歌：伊藤香奈子<br>
<h5>ED《Another Heaven》（第24话）</h5><br>
作词：漆野淳哉<br>
作曲：须田悦弘<br>
编曲：矶江俊道<br>
歌：伊藤香奈子<br>
<h5>IN《ワタシ☆LOVEな☆オトメ!》（第2、9话）</h5><br>
作词、作曲：桃井晴子<br>
编曲：上野浩司<br>
歌：Afilia Saga East<br>
<h5>IN《My White Ribbon》（第9话）</h5><br>
作词、作曲：志仓千代丸<br>
编曲：矶江俊道<br>
歌：Afilia Saga East<br>
<h3>更多内容可以<a href="http://www.baidu.com" target="_blank">百度一下</a></h3>
</body>
</html>2、其中用到的剧情.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>剧情</title>
</head>
<body>
<h2>剧情简介</h2>
<p>舞台是2010年夏的秋叶原。
无法摆脱中二病的大学生冈部伦太郎，成立了“未来道具研究所”，每天都生产出用途不明的发明。但是，某日，偶然间发明出可以把电子讯息传送过去的时间机器。
抑制不住对世纪发明的兴奋，纯粹由于感兴趣而不断对过去进行干涉。结果，席卷世界的大悲剧降临在冈部等人的身上……
为了避免悲剧的发生，冈部的孤独的战斗开始了。
而他到底能否克服命运呢！？</p>
<img src="图片/图片1.jpg">
</body>
</html>3、案例文件
4、网页实现
学习内容来源于：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili
8889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
