第一部分 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

HTML学习的第三天相关推荐

菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
python学习之第三课时--基本数据类型及区别，变量
python学习之第三课时--基本数据类型及区别,变量基本数据类型及区别 1. 数字类型(int) 数字型--变量值直接是数字,没有双引号"" 整数 2. 浮点数(float ...
HTML5 Canvas 学习日志（三）
2019独角兽企业重金招聘Python工程师标准>>> HTML5 Canvas 学习日志(三) Canvas的11种合成蓝色为destination,粉色为source 1 ...
Linux学习之CentOS(三十四)--配置域主DNS服务器
在上一篇随笔里 Linux学习之CentOS(三十三)--DNS基础及域名系统架构,讲解了DNS的一些基础知识以及域名系统架构,在本篇随笔里将详细地讲解主DNS服务器的配置... 一.DNS服务器的类 ...
Java NIO 学习笔记（三）----Selector
目录: Java NIO 学习笔记(一)----概述,Channel/Buffer Java NIO 学习笔记(二)----聚集和分散,通道到通道 Java NIO 学习笔记(三)----Select ...
拒绝从入门到放弃_《鸟哥的 Linux 私房菜 — 基础学习篇(第三版)》必读目录
目录目录前言关于这本书必看知识点最后前言相信部分刚进入这个行业的新同学会对一个问题感到疑惑,为什么从培训学校出来的学员不被欢迎? 这里记录下一些我个人的看法(博主也曾有面试新员工的经历) ...
UFLDL深度学习笔记（三）无监督特征学习
UFLDL深度学习笔记 (三)无监督特征学习 1. 主题思路 "UFLDL 无监督特征学习"本节全称为自我学习与无监督特征学习,和前一节softmax回归很类似,所以本篇笔记会比较 ...
学习javascript数据结构(三)——集合
前言总括: 本文讲解了数据结构中的[集合]概念,并使用javascript实现了集合. 原文博客地址:学习javascript数据结构(三)--集合知乎专栏&&简书专题:前端进击者 ...
嵌入式培训学习历程第三天
一晃,一天有去了.感觉自己越来越适应现在的生活了..好吧,废话不多说.继续 1.tar [主选项 + 辅选项] 文件或目录 tar可以为文件和目录创建档案. 注意 : 主选项是必须要有的,辅选项是辅 ...
ASP.NET Core 2 学习笔记（三）中间件
原文:ASP.NET Core 2 学习笔记(三)中间件之前ASP.NET中使用的HTTP Modules及HTTP Handlers,在ASP.NET Core中已不复存在,取而代之的是Middl ...

HTML学习的第三天