Web技术模拟面试题A参考答案

考试时间:180分钟
    考试总分:100分
    及格分数:70分

一、HTML部分,共5题(10分)
    1、H5的语义化标签,至少写出5个?(2分)
        Header定义头部,可以多个
        Footer底部,不一定是文档最底部,可以多个
        Nav导航栏标签,定义导航栏
        Article独立内容区域,与session类似,用于文章等
        Aside面侧边栏所使用
        Time时间标签,主要用于搜索引擎和其它一些内容引擎特殊的解析和展示
        Ruby注释标签,跟rt和rp一起使用,可以看一下效果
        Details点击展开详情,可以试一下,可能在很多场景下可以使用
        Mark会给这个字段添加一个背景色,那个颜色还改不了
        Progress进度条,当做简易进度条使用,不够美观
        Section节的意思,主要是区分开内容,文档中的节或者是文章的节
        Video视频,不支持自动播放了,微信能处理,其他还没见过能自动播放
        Audio音频,也就是音乐,也不支持自动播放
        Datalist模糊查询,除了样式之外
        Embed插入多媒体内容,可以播放视频,但是那些属性都不生效
        Canvas画布,很强大很强大,值得研究
        Main主要内容
        
    2、简述px,em,rem的区别?(2分)
        1)px像素(Pixel).绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟长
            度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI.
        2)em是相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸
            未被人为设置,则相对于浏览器的默认字体尺寸.它会继承父级元素的字体大小,因此并不是一个固定的值.
        3)rem是CSS3新增的一个相对单位(rootem,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.
        4)浏览器无法调整那些使用px作为单位的字体大小,而em和rem可以缩放,rem相对的只是HTML根元素.
            
    3、网页的重绘、重排、重构?(2分)
        1)重绘是指一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观.触发重绘的条件:改变元素外观属性.如:color,background-color等.
        2)重排又称重构、回流、reflow,当渲染树中的一部分(或全部)因为元素的规模、尺寸、布局、隐藏等改变而需要重新构建,这就称为重排(reflow).
            每个页面至少需要一次回流,就是在页面第一次加载的时候.
        3)触发重排的条件:调整窗口大小、改变字体大小、样式表变动、CSS伪类激活、DOM操作等.
        4)重排必定会引发重绘,但重绘不一定会引发重排.
    4、简述一下src与href的区别?(2分)
        src用于替换当前元素,href用于在当前文档和引用资源之间确立联系.
    
    5、请描述一下cookies,sessionStorage和localStorage的区别?(2分)
        1)sessionStorage中的数据,这些数据只有在同一个会话中的页面才能访问,并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地存储,浏览器关闭数据就丢失.
        2)localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的.
        3)Cookie是一种用户追踪机制,其作用是与服务器进行交互,作为HTTP规范的一部分而存在.
        4)Storage的概念和Cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外Cookie还需要指定作用域,不可以跨域调用
        
二、CSS部分,共5题(10分)
    1、怎么让一个不定宽高的元素div,垂直水平居中,写出2种方案?(2分)
        1)在当前元素上使用定位和变形
            div{
                positon:absolute;
                top:50%;
                left:50;
                transform:translate(-50%,-50%);
            }
        2)在div的父级元素上使用flex布局
            div.parent{
                display:flex;
                align-items:center;
                justify-content:center;
            }
    2、css样式的优先级如何排列?(2分)
        1)!importent>id>class>标签
        2)!importent>行内>内部>外部
                
    3、清除浮动的几种方式?(2分)
        1)给浮动的元素的父级元素添加高度
        2)给父级元素设置overflow:hidden;
        3)在父级元素最后设置空div元素,设置属性clear:both;
        4)使用伪类元素:
            .clearFixed::after{
                display:block;
                content:"";
                clear:both;
            }
    4、Flex布局常用的属性及其默认值?(2分)
        1)flex-direction:row|row-reverse|column|column-reverse|initial|inherit设置主轴方向,默认值row
        2)flex-wr