5.1 a标签
5.1.1 超链接属性:
1)Href 用于指示链接的目标
2)Title 当用户的鼠标移入超链接时,会显示title属性的具体属性值。
3)Target 用于控制链接页面的打开位置。`
值 | 描述 |
_blank | 浏览器总在一个新打开、未命名的窗口中载入目标文档 |
_self | 默认状态,在当前页面、目标中打开被链接文档 |
_parent | 使得文档载入父窗口或者包含来自超链接引用的框架的框架集 |
_top | 清除所有被包含的框架并在整个窗口中打开被连接文档 |
Framename | 在指定的框架中打开被链接文档 |
5.1.2 锚链接
锚链接是一种特殊的连接方式,它是在原有的链接基础上,添加锚标记的后缀,通常用于实现调整到当前网页中的某一位置,或跳转到其他网页的某一位置。
1)需要跳转的地方添加代码:<a href=”#命名”>文字</a>
2)需要在:被转到位置添加代码;<标签名 id=“命名”></标签名>
需要注意的是,标签中的id属性值与之前a标签中的命名完全相同。
5.1.3 超链接的基本样式
1)伪类选择器
由于伪类选择器是对标签某种状态的控制,不能够单独使用,需要和其他选择器一起使用,普通选择器和伪类选择器组合在一起,就可以选择到“某种标签的某种状态”。
伪类选择器 | 描述 |
:link | 超链接还未被访问的状态,也是超链接的默认状态,可以不设置 |
:visited | 超链接已被访问 |
:hover | 光标悬停在标签上的状态,不局限于a标签 |
:active | 光标在标签按下时(标签被鼠标单击但还没有释放鼠标按键时)的状态,不局限于a 标签 |
A标签的伪类选择器的顺序为:link->:visited->:hover->:active
A标签有四种不同的状态,也可以对应四种不同的样式。但是,并不代表开发中的这四种状态需要进行设置,默认样式如下:
常规-link状态 | 访问后-visited状态 | 光标移入-hover状态 | 鼠标按下-active状态 |
蓝色;有下划线 | 紫色;有下划线 | 和hover前一致 | 红色;有下划线 |
5.2 光标样式
5.2.1 cursor相关属性
光标样式主要通过cursor这个属性来进行控制
值 | 描述 |
Cursor:crosshair | 十字准心 |
Cursor:pointer/hand | 小手 |
Cursor:wait | 等待、沙漏 |
Cursor:no-drop | 无法释放 |
Cursor:text | 文字光标、编辑 |
Cursor:move | 可移动对象 |
Cursor:n-resize | 向上改变大小(north) |
Cursor:s-resize | 向下改变大小(south) |
Cursor:e-resize | 向右改变大小(east) |
Cursor:w-resize | 向左改变大小(west) |
Cursor:auto | 自动 |
Cursor:not-allowed | 禁止 |
Cursor:default | 系统默认 |
Cursor:progress | 处理中 |
Cursor:url(‘../images/cursoe.ani’) | 自定义光标样式 |
自定义光标样式的支持程度:
所有主流浏览器虽然都支持cursor属性。但是对于自定义光标样式的支持不尽相同:Firefox、chrome支持JPG、cur、PNG、GIF等文件,不支持ani;IE只支持cur、ani;opera不支持自定义图标。IE6-IE8对图标的大小有限制,最佳尺寸为32x32(小尺寸会被拉伸,大尺寸会被压缩。)
5.2.2 数据图与背景图
数据图,指的是从后台传递过来的图片,比如:列表页当中与每一个列表项相匹配的图片、文章页具体内容中的图片等。
背景图,指的是不需要从后台传递的图片。比如:各类从小图标、logo图片等。
1、img中Alt与title的区别
具体含义方面:
Img标签Alt属性:当图片不存在时或加载失败时的替代文字(进行显示)
Img标签title属性:当图片的描述与进一步说明。
5.2.3 href与src的区别
含义角度:
Src属性仅嵌入当前资源到当前文档元素定义的位置。
Href指定网络资源的位置,从而在“当前元素或者当前文档”和“href属性定义的锚点或资源”之间定义一个“链接或者关系”。
解析角度:
当浏览器找到<img src=“html布局之路.JPG” Alt=“布局之路”>标签之后,会读取src的路径,之后浏览器进行图像的下载、提取和加载,在此之前,页面的加载和处理后被暂停。
对于href,如:<link href=“style.css” rel=”stylesheet”/>,此时浏览器解读出当前资源师一个样式表,页面解析并不会暂停。使用link标签href属性导入样式这种方式,能够加快网站的加载速度。
5.3 后台维护对前端的影响
5.3.1 图像加载对页面布局的影响
1) 图像需要控制宽度
2) 数据图像变形的责任归属
3) 只设置img标签一个方向的尺寸值是什么效果
该方向会按照指定的尺寸值渲染,而另一个方向会根据指定方向的值等比例放大。
5.3.2 文字超出造成的页面混乱
如果不设置具体高度,元素的高度是由内容撑开的。如果设置具体高度,当内容高度小于设置的高度的时候,剩余高度区域留白;当内容高度大于设置高度的值时,内容会溢出,但是元素的盒模式保持不变。
5.4 网页中哪里需要控制高度或超出隐藏
5.4.1 不同页面的不同需求
1)首页和二级页
网站的首页和二级页大都是由各个模块组成的,对于这种页面中的固定模块都为其设置固定的大小,虽然父级元素的高度会随着内容而撑开,但是设置高度会相对保险些,不会因为内容改变而影响布局。
2)列表页
列表页一般在网页的右侧,需要明确两个部分的高度。第一是,包含列表的父级元素的高度;第二,每个列表项的高度。
一般来说,父级元素的高度默认为由内容撑开,每个列表项的高度一般来说需要设置固定高度。
3)内容页
文章内容页存在的主要目的在于“完整地”展示信息,无论是文章的标题、关键词,还是文章的具体内容,都应当让其尽可能完整地展示出来,因此,在这里并不能够限制内容页的具体内容区域,既不针对内容区设置高度。
5.5 内容的超出处理——overflow
属性功能:设置文本超出容器(标签)时的显示方式。
基本语法:overflow:hidden
代码解析:设置当文本超出元素的显示范围时隐藏。
Overflow的属性
值 | 描述 |
Visible | 默认值,内容不会被修改,会呈现在元素框之外 |
Hidden | 内容会被修改,并且其余内容是不可见的 |
Scroll | 内容会被修改,但是浏览器会显示滚动条以便查看其余的内容。 |
Auto | 如果内容被修改,则浏览器会显示滚动条以便查看其余的内容。 |
Inherit | 规定应该从父元素继承overflow的属性。 |
X和y两个方向的控制:
Overflow属性的设置是针对水平、垂直两个方向的,如果只针对其中一个方向设置隐藏方式,可以使用overflow-x和overflow-y,这两种属性的取值和overflow的取值相同。