html常用标签2

超链接

定义 2个功能，2个属性，1个补充

html 超文本标记语言    超：超链接

css  层叠样式表

 超链接：可以是一个字，可以是图片，可以是表格，或者音视频等等

      是行内标签，特殊的行内标签，它里面什么都能放，除了它自己

 超链接：

      功能:

        1、从一个页面跳到另一个页面

        2、在当前页面进行跳转（锚点功能），一般可以用来做“楼梯导航”

        3、下载

      属性：

        href属性  指向超链接跳转的地址

          跳转的路径：

            绝对路径：是一个完整的地址，无论你在哪里，只要地址不写错，就可以实现跳转

            相对路径：不是一个完整的地址，路径写法跟你所在位置相关

                ./   你（超链接）所在位置跟你要跳转的位置在同一目录下  ，默认就是./开始

                ../  你所在的位置跟你要跳转的位置不在同一目录下，

                          跳出当前目录来到上一级目录寻找,如果上一级目录下还未寻找到，

                          那就再../，直到找到为止

        target属性：设置超链接的打开方式

            可选值：

              _self  在当前页面打开超链接   默认值   一般情况下，国外的网站喜欢_self

              _blank  新开一个页面打开超链接           国内的网站 常用_blank

      空链接写法（2种写法）       

 <a href="#">空链接写法1</a>
 <a href="javascript:;">空链接写法2</a>

   锚点功能实现：

        第一步：给你要跳转的位置打一个标记

                id=‘XXX’

                id属性值：不能以数字开头，最好不要是汉字

        第二步：在超链接href属性值里：#id属性值

      特殊情况：回到顶部  <a href="#">回到顶部</a>

                会刷新页面，滚动条回到最开始的位置

图片标签

   使用img标签来向网页中引入一个外部图片，  img这种元素属于替换元素，行内块标签（基于块和行内元素之间，具有两种元素的特点）

          4个属性

          src  指向图片的引入路径

            绝对路径：完整的地址

            相对路径：不完整的地址，./或者../

          alt  对图片的文字描述，正常情况下，是不显示，当图片引入不成功的时候会显示

                对seo推广有好处

          width  设置图片的宽度

          height  设置图片的高度

            注意：一般情况下，我们不会同时设置宽度，和高度

                只会设置其一，另外一个浏览器会自适应调整

eg：

<img src="../0228常用标签/hg.gif" alt="胡歌" height="300" />

  <img src="../0228常用标签/hg.gif" alt="胡歌" height="300" />

图片格式

        面试题：你常用的图片格式有哪些？说一下它的主要特点？和油漆是一个道理，不同的图片格式特性不一样，使用场合也有所不同。

            图片的格式

                JPEG(JPG)

                    - JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

                    - 一般用来保存照片等颜色丰富的图片

                GIF

                    - GIF支持的颜色少，只支持简单的透明，支持动态图

                    - 图片颜色单一或者是动态图时可以使用gif   

                PNG

                    - PNG支持的颜色多，并且支持复杂的透明，不支持动图

                    - 可以用来显示颜色复杂的透明的图片

                      专为网页而生的

                webp

                   -谷歌新推出的专门用来表示网页的一种格式

                   -它具有其他图片格式的所有优点，而且文件格式还很小

                   -缺点：兼容性不好            

                base64

                   -讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

                   -一般都是需要和网页一起加载的图片才会使用base64

            图片的使用原则：

                效果不一致，使用效果好的

                效果一致，使用小的

         网页加载流程

               第一次请求：加载网页本身，网页的结构，字符

               第二次之后请求，加载外部资源  ，例如图片，外部css文件，js文件等

音视频

   src  引入音视频的路径

          相对路径，绝对路径

      controls   控制用户是否可以播放  ,默认是用户不可以播放

      loop     循环播放

audio标签 用来向页面中引入一个外部的音频文件

eg:

  <audio src="./source/达拉崩吧.mp3" controls loop></audio>

video标签来向页面中引入一个视频，使用方式跟音频基本上一样的

eg:

<video src="./source/绝地逢生.mp4" controls loop></video>