十一、超链接

（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>


（3）属性：

  • controls：是否允许用户控制播放，不需要进行赋值，存在即允许，不存在即不允许。
  • autoplay：是否自动播放，不需要进行赋值，存在即允许，不存在即不允许。
  • 如果设置了autoplay则音乐在打开页面时会自动播放，但目前来讲大部分浏览器都不会对音乐进行自动播放。
  • loop：是否循环播放。
  • source：除了通过src来指定外部文件的路径外，还可以通过source来指定文件路径。source可以同时指定多个文件。
<audio controls>
<source src="">
<source src="">
<!--兼容ie8-->
<embed src="" type="adudio/mp3" width="300">
</audio>


14.2 video标签

（1）说明：使用video标签来向网页中引入一个视频

<video controls>
<source src="">
<!--兼容ie8-->
<embed src="" type="video/mp4">
</video>


  • 使用方式和audio基本相同