web前端-03超链接和图片标签

标签：web 元素 03 标签 页面 超链接 图片 属性

超链接

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

2. 属性：             href属性                  指定跳转的目标路径                  值可以是一个外部网站的地址                  也可以写一个内部页面的地址
            target属性                  用来指定超链接打开的位置                  可选值：                     _self 默认值 在当前页面中打开超链接                     _blank在一个新的页面中打开超链接
3. 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径              相对路径都会使用.或者..开头               ./  或 ../              （ ./可以省略不写，如果不写./也不写../则就相当于写了./ ）               ./表示当前文件所在的目录   4.     

• 回到顶部超链接：

         将href属性设置为#，这样直接点击超链接就能直接回到顶部

• 可以跳转到页面的指定位置

         将href属性设置为#，和目标元素的id属性值

         id属性（唯一不重复）              每一个标签都可以添加一个id属性              id属性就是元素的唯一标识

• 在开发中可以将#作为超链接的路径的展位符使用 

• 可以使用JavaScript来作为href的属性，此时点击这个超链接什么都不会发生

 

图片标签

1.用于向当前页面引入一个外部图片   2.使用img标签来引入外部图片，img标签是一个自结束标签    img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）

• 属性：

                 src 属性指定的是外部图片的路径

                 alt 属性是对图片的描述，这个描述在默认情况下不会显示，有些浏览器会在图片无法加载时显示                （搜索引擎会根据alt中的内容来识别图片，如果不写，就不会被搜索引擎搜索）                                    width 图片的宽度                  height 图片的高度                （宽度和高度中如果只修改了一个，另一个会根据比例缩放）                              注意：                      一般情况在pc端不建议修改图片的大小，需要多大的图片就裁多大                      但是在移动端，经常需要对图片进行缩放

• 图片格式：

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

标签：web,元素,03,标签,页面,超链接,图片,属性
From： https://www.cnblogs.com/xiaowu4347/p/16939359.html