Html_Day_003

2024-03-27 20:47:22

十一、超链接

（1）作用：超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他位置。

（2）用法：

<a href="http://www.baidu.com">www.baidu.com</a>

超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。

（3）属性：

href：指定跳转的目标路径。值可以是一个外部网站的地址，也可以是一个内部页面的地址。

11.1 相对路径

（1）说明：当我们需要跳转到一个服务器内部的页面时，一般我们都会使用相对路径。相对路径都会使用.、..、./、../开头。

./：可以省略不写，如果不写./也不写../则相当于写了./。
./：表示当前文件所在的目录。
../：表示当前文件所在目录的上一级目录。

（2）用法：

<a href="./文件名.html">超链接</a>
<a href="文件名.html">超链接</a>

<a href="../文件名.html">超链接</a>

11.2 超链接的其他用法

（1）用法：

target：用来指定超链接打开的位置。
- _self：默认值，在当前页面中打开超链接。
- _blank：在一个新的页面中打开超链接。

< a href="http://www.baidu.com" target="_blank">超链接</a>

回到顶部：可以直接将href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部位置。

<a href="#">回到顶部</a>

跳转到页面任意位置：可以跳转到页面的指定位置，只需将href属性设置#目标元素的id属性值。
- id属性（唯一）：每一个标签都可以添加一个id属性。id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

<a href="#bottom">去底部</a>

<a id="bottom" href="#">回到顶部</a>

在开发中可以将#作为超链接的路径的占位符使用。也可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生。

<a href="#">这是一个新的超链接。</a>

<a href="javascript:;">这是一个新的超链接。</a>

十二、图片标签

图片标签用于向当前页面中引入一个外部图片。

12.1 img标签

（1）说明：使用img标签来引入外部图片，img标签是一个自结束标签。

img属于替换元素（基于块和行内元素之间，具有两种元素的特点）。

（2）属性：

src：用来指定外部图片的路径（路径规则和超链接相同）。

<img src="图片路径">

alt：用来对图片进行描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示。如果不写alt属性则图片不会被搜索引擎所收入。

<img src="图片路径" alt="图片描述">

width：指定图片的宽度（像素）。
height：指定图片的高度（像素）。
- 宽度和高度如果只修改一个值，则另一个会等比例缩放。
- 注意：一般情况下，在PC端不建议修改图片的大小，需要多大的图片就裁多大。但是在移动端，进场需要对图片进行缩放（主要是大图缩小）。

<img width="200" height="100" src="图片路径">

12.2 图片的格式

（1）网页中常见的格式：

jpeg（jpg）：支持的颜色比较丰富，不支持透明效果，不支持动图。
- 一般用来显示照片。
gif：支持的颜色比较少，支持简单透明，支持动图。
- 一般用来显示单一的图片、动图。
png：支持的颜色丰富，支持复杂透明，不支持动图。
- 一般用来显示颜色丰富，复杂透明图片（专为网页而生）。
webp：这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式。它具备其他图片格式所有的优点，并且文件还特别的小。
- 缺点：兼容性不好。
base64：将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片。
- 一般都是一些需要和网页一起加载的图片才会使用base64。

（2）说明：效果显示一样，用小的；效果不一样，用效果好的。

十三、内联框架

（1）说明：用于向当前页面中引入一个其他页面。

<iframe ser="http://www.qq.com" width="800" height="600" frameborder="0">

</iframe>

（2）属性：

src：指定要引入的网页路径。
framborder：指定内联框架的边框。
- 0：没有
- 1：有

（3）问题：在内联框架中引入的网页不会被搜索引擎检索到。

十四、音频和视频文件

音视频文件在引入时，默认情况下不允许用户自己控制播放和停止

14.1 audio标签

（1）说明：用来向页面中引入一个外部的音频文件。

（2）格式：

<audio src=""></audio>