Html

作者: 岚平果 | 来源:发表于2021-04-17 09:59 被阅读0次

    0、什么是回流什么是重绘以及区别?

    1. 回流: 元素的大小或者位置发生改变(当页面布局和几何信息发生改变的时候),触发了重新布局
             导致渲染树重新计算布局和渲染
    
    2. 重绘: 元素样式的改变(但宽高、大小、位置等不变);
             如:outline、visibility、color、background-color等
             只改变自身样式,不会影响到其他元素
    
    3. 区别:
          回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不
          会引起回流,当页面布局和几何属性改变时就需要回流.
    

    0-1、浏览器是如何渲染页面的

    1. 浏览器将获取的HTML文档解析成DOM树。
    2. 处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)。
    3.将DOM和CSSOM合并为渲染树(rendering tree),代表一系列将被渲染的对象。
    4.渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法
    只需要一次绘制操作就可以布局所有的元素。
    5.将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting。
    
    构建对象模型(DOM,CSSOM)
    构建渲染树(RenderTree)
    布局
    渲染
    

    1. 简述一下你对 HTML 语义化的理解?

    1、在我们开发中,语义化让,页面结构更加清晰,便于后期的维护,便于浏览器,搜索引擎解析
    2、理由搜索引擎的爬取,利于seo
    

    2.标签上 title 与 alt 属性的区别是什么?

    1. alt 是给搜索引擎识别,在图像无法显示时的替代文本;
    2. title 是关于元素的注释信息,主要是给用户解读。
     当鼠标放到文字或是图片上时有 title 文字显示。(因为 IE 不标准)在 IE 浏览器中 alt 起到
    了 title 的作用,变成文字提示。
    在定义 img 对象时,将 alt 和 title 属性写全,可以保证在各种浏览器中都能正常使用。
    

    3. 说一下<label>标签的用法

    label标签主要是方便鼠标点击使用,扩大可点击的范围,增强用户操作体验:如下
    实现点击 “ 密码 ” 光标也能锁定输入框
    <label>密码: <input type="password" /></label>
    
    

    4. iframe的优缺点?

    优点:
    1.iframe能够原封不动的把嵌入的网页展现出来。
    2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,
    方便快捷。
    3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以
    增加代码的可重用。
    4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
    5.重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,
    增加了网页下载速度)
    
    缺点:
    1、页面样式调试麻烦,出现多个滚动条;
    2、浏览器的后退按钮失效;
    3、过多会增加服务器的HTTP请求;
    4、小型的移动设备无法完全显示框架;
    5、产生多个页面,不易管理;
    6、不容易打印;
    7、代码复杂,无法被一些搜索引擎解读。
    

    5. href 与 src?

    1. href (Hypertext Reference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性
    定义的需要的锚点或资源之间定义一个链接或者关系。(目的不是为了引用资源,而是为了建立联系,
    让当前标签能够链接到目标地址。)
    
    2. src source(缩写),指向外部资源的位置,指向的内容将会应用到文档中当前标签所在位置。
    
    3. href与src的区别
    1、请求资源类型不同:
        href 指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)
        之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中,
        比如 JavaScript 脚本,img 图片;
    
    2、作用结果不同:
        href 用于在当前文档和引用资源之间确立联系;src 用于替换当前内容;
    
    3、浏览器解析方式不同:
        当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,
        图片和框架等也如此,类似于将所指向资源应用到当前内容。
        这也是为什么建议把 js 脚本放在底部而不是头部的原因。
    

    6. 遍历A节点的父节点下的所有子节点

    <script>
        var b = document.getElementById("a").parentNode.children;
        console.log(b)
    </script>
    

    相关文章

      网友评论

          本文标题:Html

          本文链接:https://www.haomeiwen.com/subject/hhbmfltx.html