Web前端HTML5+CSS3知识点（4）超链接和相对路径

1. 超链接

页面跳转。使用<a>标签。也是行内元素。在a标签中可以嵌套它自身外的任何元素。

-href属性，用来指定跳转的路径。
-href的值可以是外部网页的一个地址，也可以写一个内部页面的地址。
2.跳转到当前页面其他位置
-最好使用相对路径

2. 相对路径

1.一般当我们需要跳转到一个服务器的内部页面时，都会使用相对路径
2.相对路径都会使用./或…/开头，当没有写./或…/时，默认使用了. 表示当前文件所在的目录，表示当前文件所在目录的上一级目录。

3. 超链接属性

1.target
-用来指定超链接打开的位置
-可选值：_self，也叫默认值，就是在当前页面中打开超链接。 _blank，指在一个新的链接中打开超链接。
2.#
-当把href的属性设置成#时，这时点击超链接不会发生跳转，而是会返回页面的顶部。
-在开发中，可以将#作为超链接的占位符使用。
3.id
-id属性是唯一不重复的，每一个标签都可以添加一个id属性，id属性是唯一的，同一个页面中不能出现重复的id属性。
4.javascript:void(0);
-还可以使用javascript:;当做占位符，当点击这个超链接时，什么都不会发生
 

4.图片标签

1.作用
-图片标签的作用是引入一个外部图片。
2.img标签
-使用img标签（自结束标签)，src属性指定的是外部图片的路径（相对路径规则）
-img属于替换元素
-img基于块元素和行内元素之间。
3.alt属性
-默认情况下不会显示，但有些浏览器无法显示图片时会显示。
-搜索引擎主要根据alt中的内容来识别图片。如果不写alt属性，那么这个图片则不会被搜索引擎找到。
4.width
-图片的宽度，单位为像素
5.height
-图片的高度，单位为像素
6.如果宽度和高度中只修改了一个，那么另一个则会等比例缩放。
-一般情况下，不建议在PC端修改图片大小，小图放大容易失真，大图缩小浪费内存，需要多大的图片就裁多大。
-在移动端，经常需要对图片进行缩放(主要是大图缩小）。

5. 图片的格式

1.常见的格式
-jpeg(jpg):支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来显示照片。
-gif：支持的颜色比较少，支持简单透明，支持动图。一般用来显示颜色单一的图片和动图。
-png:支持的颜色丰富，支持复杂透明，不支持动图。一般用来显示颜色丰富、复杂透明的图片（专为网页而生的）
-webp:这种格式是谷歌新推出的专门用来表示网页中图片的一种格式。它支持了其他格式的所有优点，同时还特别小。
webp的缺点，兼容性不好。
-base64：图片使用base64编码，可以将图片转换为字符，然后通过字符的形式来引入到网页中。一般都是需要和网页一起加载的图片才会使用base64（可以利用网上的图片转换器进行转），优点是不会存在延迟。

1.效果一样，用小的
2.效果不一样，用效果好的

6. 内联框架

1.iframe

和图片类似，引入。

内联，用于向当前页面引入一个其他页面。

-内联框架，用于向当前网页引入一个外部其他的页面，src表示需要引入的网页的路径。
-frameborder指定内联框架有没有边块。
-内联框架不会被搜索引擎搜索，所以一般来说不会使用。