学废HTML标签下篇

雷迪斯and the乡亲们  欢迎你们来到 奇幻的编程世界 

回顾 上一篇 我们学习了

排版标签： 1.    标题标签 2.    段落标签 3.    换行标签 4.    水平线标签

在这里补充一下，我们本期的学习目标为：学习HTML 排版、媒体、链接 等基础标签，完成基础网页的开发.

那么好！废话不多说，教学走一波。

二、文本格式化标签

那么什么是文本格式化标签呐？

需要让文字加粗、下划线、倾斜、删除线等效果

咱们直接上个图吧！（一目了然）这样的话是不是好理解多了

温馨提示：

哎，有人就会问了，为什么 一个说明有两个标签啊？那么应该用哪个呢，或者是在什么样的情况下用图一标签，什么样的情况下用图二标签？

其实啊！这两种标签都可以随意使用，都可以 表达出 同样的效果！

语义：突出重要性的强调语境

 好处：

•      对人：好理解，好记忆

•      对机器：有利于机器解析，对搜索引擎（SEO）有帮助

 推荐：

•      strong、 ins、em、del，表示的强调语义更强烈！

第三节媒体标签

1.图片标签

场景：在网页中显示图片

 代码： <img src="" alt=""> 

效果展示

在浏览器中点击f12键可以打开开发者工具

   特点：

•      单标签

•      img标签需要展示对应的效果，需要借助标签的属性进行设置！

标签的完整结构图：

 属性注意点：

1.    标签的属性写在开始标签内部

2.    标签上可以同时存在多个属性        

3.    属性之间以空格隔开

4.    标签名与属性之间必须以空格隔开

5.    属性之间没有顺序之分

图片标签的src属性

属性名：  src       

属性值：目标图片的路径       

注意点：       

当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名)

路径的情况有很多，稍后会详细介绍   

图片标签的alt属性        

属性名：  alt       

属性值：替换文本

•      当图片加载失败时，才显示alt的文本

•      当图片加载成功时，不会显示alt的文本       

图片标签的title属性          

属性名：  title       

属性值：提示文本

•      当鼠标悬停时，才显示的文本       

注意点：  title属性不仅仅可以用于图片标签，还可以用于其他标签

图片标签的width和height属性 

属性名：  width和height     

 属性值：宽度和高度（数字）         

注意点：

•      如果只设置width或height中的一个， 另一个没设置的会自动等比例缩放（此时图片不会变形）

•      如果同时设置了width和height两个， 若设置不当此时图片可能会变形

 图片标签总结（ img标签）

2.路径

场景：页面需要加载图片，需要先找到对应的图片

类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到！       

同理：页面需要找到图片，也是需要通过路径才能找到       

路径可分为：

•      绝对路径（了解）

•      相对路径（常用）

绝对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置， 通常从盘符开始的路径

例如：

•      盘符开头：   D:\day01\images\1.jpg

•      完整的网络地址：   https://www.baidu.com/2222czgw/images/logo.gif （了解）

相对路径

概念普及：

•      当前文件：当前的html网页

•      目标文件：要找到的图片       

相对路径：从当前文件开始出发找目标文件的过程       

相对路径分类：

•      同级目录

•      下级目录

•      上级目录    

相对路径-同级目录 

同级目录：当前文件和目标文件在同一目录中

类似于：我（当前文件）和你（目标文件） 都在大厅（一个文件夹中）

•      生活中：两个人独处一室，我想找你， 直接喊名字即可！

代码步骤：直接写目标文件的名字即可

•      方法一： <img src=" 目标图片.gif">

•      方法二：  <img src="./目标图片.gif">

VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！

相对路径-下级目录

下级目录：目标文件在下级目录中

类似于：我在大厅，你累了去卧室休息了， 我现在要找到你！

1.    先知道你去了哪一个房间 → 房间名：卧室

2.    进入这个房间 → 进入

3.    此时又独处一室 → 直接喊你名字

代码步骤：

1.    先知道在哪个文件夹里面 → 文件夹名字

2.    进入这个文件夹 → /

3.    此时看到目标文件直接喊她 → 直接写目标文件名字

VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，  直接一层层选择即可！

相对路径-上级目录

上级目录：目标文件在上级目录中

类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！

1.    先要出卧室，来到大厅 → 出去

2.    此时又独处一室 → 直接喊你名字

 代码步骤：

1.    先出当前文件夹，到上一级目录 → ../

2.    此时看到目标文件直接喊她 → 直接写目标文件       

VS Code快捷操作：直接敲../后，会自动提示上级目录下有文件，直接选择即可！

温馨提示：

相对路径有哪三种情况：

•      同级目录：直接写：目标文件名字！

•      下级目录：直接写：文件夹名/目标文件名字！

•      上级目录：直接下：  ../目标文件名字！

 VSCode中路径的快捷操作

•      同级和下级目录：  ./ 之后选择即可

•      上级目录：   ../ 之后选择即可

3.音频标签

场景：在页面中插入音频

 常见属性：

注意点：

•      音频标签目前支持三种格式： MP3、Wav、Ogg

4.视频标签

 场景：在页面中插入视频

 常见属性：

注意点：

•      视频标签目前支持三种格式： MP4 、WebM 、Ogg

第四节链接标签

超链接

场景：点击之后，从一个页面跳转到另一个页面

称呼：   a标签、超链接、锚链接

特点：

•      双标签，内部可以包裹内容

•      如果需要a标签点击之后去指定页面， 需要设置a标签的href属性

 链接标签的href属性

属性名：  href

属性值：点击之后跳转去哪一个网页（目标网页的路径）

•      外部链接：<a href="https://www.baidu.com/">自度一下</a

•      内部链接： <a  href="./目标网页.html">目标网页</a>

链接标签的显示特点（了解）

显示特点：

•      a标签默认文字有下划线

•      a标签从未点击过，默认文字显示蓝色

•      a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

链接标签的target属性

属性名：  target       

属性值：目标网页的打开形式

<a href="htts://.baidu.com/" target="_blank">百度一下</a>

空链接（拓展补充）

 代码： <a  href="#">空链接</a> 

功能：

•      点击之后回到网页顶部

•      开发中不确定该链接最终跳转位置，用空链接占个位置

到这里呐！我们本期的学习目标就完结了，下面我来总结一下