首页 > 其他 > 详细

每日思考(2019/12/23)

时间:2019-12-23 23:52:18      阅读:150      评论:0      收藏:0      [点我收藏+]

题目概览

  • 元素的alt和title有什么区别?
  • margin边界叠加是什么及解决方案
  • 返回到顶部的方法有哪些?

题目解答

元素的alt和title有什么区别?

  • ALT 属性:

    • 最常见用在 <img> 标签上,那我们先来看下 <img> 标签的 alt 属性。alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息:网速太慢,src 属性中的错误,浏览器禁用图像,用户使用的是屏幕阅读器。<img> 标签的 alt 属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容

    • 注释和提示:alt 属性的值是一个最多可以包含 1024 个字符的字符串,其中包括空格和标点。这个字符串必须包含在引号中。这段 alt 文本中可以包含对特殊字符的实体引用,但它不允许包含其他类别的标记,尤其是不允许有任何样式标签。当用户把鼠标移动到 img 元素上时,Internet Explorer 会显示出 alt 属性的值。这种行为并不正确。所有其他的浏览器正在向规范靠拢,只要当图像无法显示时,才会显示出替代文本。如果需要为图像创建工具提示,请使用 title 属性

    • 用法:alt 属性只能用在 imgareainput 元素中(包括 applet 元素)。对于 input 元素,alt 属性意在用来替换提交按钮的图片。比如

      <input type="image" src="image.gif" alt="Submit" />
    • 语法:规定图像的替代文本,alt 文本的使用原则:

      • 如果图像包含信息 - 使用 alt 描述图像
      • 如果图像在 a 元素中 - 使用 alt 描述目标链接
      • 如果图像仅供装饰 - 使用 alt=""
  • TITLE 属性:

    • 定义:title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。title 属性常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbracronym 元素的必需属性。当然 title 属性是比较广泛使用的,可以用在除了basebasefontheadhtmlmetaparamscripttitle 之外的所有标签。但是并不是必须的
    • 用法: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>

每日思考(2019/12/23)

原文:https://www.cnblogs.com/EricZLin/p/12088861.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!