在互联网中,超链接可谓是无处不在,它是各个网页之间的桥梁,使得网页能够进行跳转。一个网站之中的页面也必须通过超链接连接起来才能称之为网站。
当然,超链接除了指向另一个网页之外,还可以指向邮箱地址、图片、文件等。
1.a标签
向网页中添加a标签是实现超链接的重要方式,但不是唯一方式。本文后面所提到的超链接一般是指通过a标签添加的超链接。
<a href="https://gitee.com/HeavyLeaf">我的码云</a>
以上代码实现了一个超链接,指向一个网页。点击后可以访问连接指向的网页。
1.1 重要属性
在超链接中最主要的属性有三个,分别是:href、title、target。其他一些属性会在后面陆续出现。
1.1.1 href
href属性用于指示一个目标,该属性是a标签必不可少的,少了它超链接将不能跳转。href属性的值是一个链接,也就是网页或资源的地址。比如:href="https://gitee.com/HeavyLeaf",href的值是一个网页的地址。
链接可以是一个完整的地址,也可以是相对路径。对于外部连接通常使用完整的链接,链接必须包含所使用的协议(HTTP,HTTPS等),否则将是一个无效链接。
<a href="https://gitee.com/HeavyLeaf">我的码云</a>
<a href="gitee.com/HeavyLeaf">我的码云</a>
上例中,第一个超链接的地址是完整的地址,包含了https协议,因此该超链接是有效的;第二个超链接的地址个缺少协议类型,因此是无效的超链接。
对于内部链接,通常使用的是相对路径。
<a href="../src/index.html">我的主页</a>
1.1.2 title
title属性可以为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时,会显示title属性值的内容。设置了title不仅可以提升用户体验,还可以提升网页的SEO(搜索引擎优化)。
<a href="https://gitee.com/HeavyLeaf" title="欢迎访问我的码云">我的码云</a>
1.1.3 target
target属性用于控制链接网页打开的位置(相对于当前网页)。默认情况下,是刷新当前网页所在的窗口,加载新的页面。
target属性值及描述:
_self:默认状态。在当前页面所在窗口打开链接的网页。
_blank:在当前浏览器中打开一个新窗口加载链接的网页。
_parent:在父窗口打开链接的网页。(有些页面可以通过等方式打开一些子窗口)
_top:清除当前窗口中打开的所有框架(子窗口),并在整个窗口打开链接的网页。
framename:在指定的框架中打开链接的网页。
使用得最最频繁的属性值是_self和_blank。至于_parent、_top和framename基本已不再使用。
1.2 锚链接
锚链接可以链接到本页面的特定位置,也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。
当跳转到当前页面的特定位置时,直接将锚标记设为href属性的值。
<a href="#标记名">跳转到本页面的id标记处</a>
当跳转到另一个网页的特定位置时,将锚标记添加到链接地址的末尾。
<a href="http://www.baidu.com#标记名">跳转到另一个页面的标记处</a>
关于“#标记名”,它其实是页面中某一个标签的id属性值。也就是说,如果要跳转到网页的某个位置,就先在这个位置所在的标签设置id属性,然后就可以通过锚链接跳转到这个位置了。
<a href="#标记名">跳转</a>
<标签名 id="标记名"></标签名>
当href属性的值为一个“#”时,表示该链接是指向页面顶部的,点击后可直接跳转到本页面顶部。
<a href"#">返回顶部</a>
1.3 空链接
空链接的写法
<a href="#">空链接1</a>
<a href="JavaScript:;">空链接2</a>
列表:如果页面中,出现结构、样式,功能等都比较雷同的部分,
就可以用列表
2.列表标签
列表(list) 一组一组
1:有序列表 用ol创建列表,li表示列表项
2:无序列表 用ul创建列表,li表示列表项
3:定义列表 用dl创建列表,dt表示下定义,dd表示对定义的解释
类似:大列表里有很多的小列表,每个小列表里有标题,有对标题的解释
注意
1、 列表之间是可以互相嵌套的,ul,ol,li是块元素
2、 可以使用type属性 更改项目符号
ol 它的项目符号:1、a、A、I 等,默认项目符号是‘1’
ul 它的项目符号:
disc,默认值,实心的圆点
square,实心的方块
circle,空心的圆
3、默认样式,li前有项目符号,上下左右有间距
4、最常用ol、ul,在实际的使用中,一般不做有顺序或者无顺序区分
5.ol,li
ul,li
dl,dt,dd都是配套使用的,就像cp
3.图片的格式
JPEG(JPG)
- JPEG图片支持的颜色比较多,图片可以压缩,但是不支持透明
- 一般用来保存照片等颜色丰富的图片
GIF
- GIF支持的颜色少,只支持简单的透明,支持动态图
- 图片颜色单一或者是动态图时可以使用gif
PNG
- PNG支持的颜色多,并且支持复杂的透明,不支持动图
- 可以用来显示颜色复杂的透明的图片
专为网页而生的
webp
-谷歌新推出的专门用来表示网页的一种格式
-它具有其他图片格式的所有优点,而且文件格式还很小
-缺点:兼容性不好
base64
-讲图片使用base64编码,这样可以将图片转换为字符,通过字符形式来引入
-一般都是需要和网页一起加载的图片才会使用base64
图片的使用原则:
效果不一致,使用效果好的
效果一致,使用小的
4.行内元素与块元素
元素分类
块元素(block element) 用来布局
特点:
1、会独占一行
2、默认情况下,块元素的宽度是视口的100%
3、默认情况下,块元素的高度是被内容撑开的
常用块元素:div、p、h1-h6、header、main、footer、nav
行内元素(inline element) 用来包裹文字
特点:
1、不会独占一行
2、宽高是被内容撑开的,内容有多宽它就多宽
常用行内元素:span、strong、em、del等
行内块元素
特点:
兼具块元素和行内元素特点
常用行内块元素:img
注意
1、块元素主要是用来布局,里面可以放任何元素,块元素、行内元素、行内块元素
2、行内元素主要用来包裹文字的,一般情况下不能放块元素
3、p标签是个特殊的块元素,它里面不能放块元素
4、a标签是个特殊的行内元素,它里面什么都能放