题目概览
- 元素的alt和title有什么区别？
- margin边界叠加是什么及解决方案
- 返回到顶部的方法有哪些？
题目解答
元素的alt和title有什么区别？
ALT 属性：
最常见用在
<img>标签上，那我们先来看下<img>标签的alt属性。alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像，alt属性可以为图像提供替代的信息：网速太慢，src属性中的错误，浏览器禁用图像，用户使用的是屏幕阅读器。<img>标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容注释和提示：
alt属性的值是一个最多可以包含 1024 个字符的字符串，其中包括空格和标点。这个字符串必须包含在引号中。这段alt文本中可以包含对特殊字符的实体引用，但它不允许包含其他类别的标记，尤其是不允许有任何样式标签。当用户把鼠标移动到img元素上时，Internet Explorer 会显示出alt属性的值。这种行为并不正确。所有其他的浏览器正在向规范靠拢，只要当图像无法显示时，才会显示出替代文本。如果需要为图像创建工具提示，请使用title属性用法：
alt属性只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。比如<input type="image" src="image.gif" alt="Submit" />语法：规定图像的替代文本，
alt文本的使用原则：- 如果图像包含信息 - 使用
alt描述图像 - 如果图像在
a元素中 - 使用alt描述目标链接 - 如果图像仅供装饰 - 使用
alt=""
- 如果图像包含信息 - 使用
TITLE 属性：
- 定义：
title属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。title属性常与form以及a元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是abbr和acronym元素的必需属性。当然title属性是比较广泛使用的，可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的 - 用法：
title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息
- 定义：
TITLE 标签：
- 定义：
<title>元素可定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。<title>标签是<head>标签中唯一要求包含的东西。 - 用户可以用任何顺序、独立地访问文档集中的每一个文档。所以，文档的标题不仅应当根据其他文档的上下文定义，而且还要显示其自身的特点。当自动为用户搜集链接的特殊软件在 Web 上越来越流行时，只有网页的标题才会作为与页面相关的描述性词语，被插入到庞大的链接数据库中
- 定义：
margin边界叠加是什么及解决方案
- 定义：
- 若是相邻块元素垂直外边距的合并，合并之后会取两者中的最大值。
- 若是嵌套块元素垂直外边距的合并，合并会形成一个外边距，合并到父元素的外边距并取其中的最大值（margin塌陷）
- 解决方案：
- 使用padding代替，但是父盒子要减去相应的高度
- 使用boder（透明）代替（不推荐，不符合书写规范，如果父盒子子盒子时有颜色的不好处理）
- 给父盒子设置overflow：hidden(如果有移除元素无法使用)
- 给父盒子设置1px的padding
- 给父盒子设置1px的透明border，高度减1px
- 子盒子使用定位position
- 子盒子浮动, 但是居中比较难以控制
- 给子盒子设置display: inline-block
- 子盒子上面放一个table标签
返回到顶部的方法有哪些？
利用
a标签的锚点。在顶部放一个a标签<a name="top">顶部</a>，在需要回到顶部的位置放置一个a标签，地址为top。<a href="#top">回到顶部</a>。要做成隐藏的锚点，可以把内部的内容去掉，name是必须的。<a name="top">顶部</a> <a href="#top" target="_self">回到顶部</a>利用
#，在 url 后增加#不会让页面刷新，并且可以回到顶部。可以对location.href进行设置location.href += '#'。当这个方法执行多次即有多个#时，页面不会有响应。<a href="#">返回顶部</a>利用
javascript设置scrollTop = 0，一般设置在最外层，即document.documentElement.scrollTop = 0就可以返回顶部<button @click="top()">返回顶部</button> <script> function top(){ document.documentElement.scrollTop = 0; } </script>