HTML5重点知识小结——整体布局（可用性与扩展性）

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的取值相同。