请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员web前端培训分享HTML5常见面试题集锦

[复制链接]
  好程序员web前端培训学习路线分享HTML5常见面试题集锦,接下来将会持续为大家分享几篇HTML5常见面试题。
1.布局 左边20% 中间自适应 右边200px 不能用定位
答案:圣杯布局/双飞翼布局或者flex
2.什么叫优雅降级和渐进增强?
渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IEMozilla 等)的前一个版本。
在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable) 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
3.简述一下srchref的区别。
src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。srcsource的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。<script src =js.js></script>当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
hrefHypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加<link href=common.css rel=stylesheet/>那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。
4.z-index是什么?在position的值是什么时可以触发?
答案:absolute,relative,fixed, sticky
5.什么是标准文档流?
文档流指的是元素排版布局过程中,遵循于从上向下,从左向右的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。
分为两种等级:块级元素和行内元素;
块级元素:
1).霸占一行,不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度,那么宽度将默认变为父亲的100%,即和父亲一样宽
行内元素:
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度
HTML中,标签分为:文本级和容器级;
文本级:pspanabiuem
容器级:divh系列、lidtdd
6.简述选择器~+的区别。
答案:都是层级选择器
相邻兄弟选择器: E + F, 选中的仅是一个元素。同级并且F元素在E元素的后面。
通用兄弟选择器:E ~ F   选中的是与E相邻的后面的兄弟元素f
7.flex中元素的margin是否会合并?
答案:不会合并
8.<div class="parent"><div class="child"></div></div>,父元素和子元素宽高不固定,如何实现水平垂直居中。
答案:
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8" />
                <title></title>
                <style>
                        *{
                                margin: 0;
                                padding: 0;
                        }
                        html,body{height: 100%;}
                        body{
                                display: flex;
                        }
                        section{
                                background: pink;
                                display: flex;
                                flex: 1;
                                align-items: center;
                                justify-content: center;
                               
                        }
                       
                        article{
                                background: blue;
                               
                        }
                       
                </style>
        </head>
        <body>
                <section>
                        <article>123</article>
                </section>
               
        </body>
</html>
9.简述titleh1的区别,bstrong的区别,iem的区别。
1title是网站header部分的内容是网站的标题,而h表示body内的标题
2、但从视觉上效果观看bstrongiem是没有区别的,唯一区别是搜索引擎检索的时候搜索引擎可以识别strongem标签、而不能识别bi标签
好程序员web前端培训官网:http://www.goodprogrammer.org/html5_class.shtml

精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启