资讯专栏INFORMATION COLUMN

前端面试汇总(html+css)

Carbs / 3241人阅读

摘要:前端页面有哪三层组成分别是什么有什么作用前端页面由结构层,表示层,行为层组成。作用标准模式与兼容模式有什么区别声明位于文档的第一行,处于标签之前,告知浏览器的解析器用什么文档标准解析这个文档,不存在或者格式不正确会导致文档以兼容模式存在。

HTML:

1、前端页面有哪三层组成?分别是什么?有什么作用?

前端页面由结构层HTML,表示层CSS,行为层JS组成。

2、HTML5为什么只用写?

HTML5不是基于SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.0基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

3、Doctype作用?标准模式与兼容模式有什么区别?

!DOCTYPE声明位于HTML文档的第一行,处于HTML标签之前,告知浏览器的解析器用什么文档标准解析这个文档,DOCTYPE不存在或者格式不正确会导致文档以兼容模式存在。

4、HTML5有哪些新特性?移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

1)新特性:
        HTML5现在已经不是SGML的子集,主要是关于图像、位置、存储、多任务等功能的增加;
        绘画canvas;
        用于媒介回放的video和audio元素;
        本地离线存储localstorage长期存储数据,浏览器窗口关闭数据不丢失;
        sessionStorage的数据在浏览器窗口关闭后自动删除;
        语义化标签,footer、header、nav、section等;
        表单控件data、email、time、url、search等;
        新增了地理定位功能,getCurrentPosition();
2)移除的元素:
        big、center、font、s等;
3)支持HTML5新标签:
        IE8/IE7/IE6支持通过document.createElement方法创建的标签,可以利用这一特性让浏览器支持性标签。
4)区分HTML和HTML5:
        HTML5会声明DOCTYPE;
        标签的使用;
        h5新增的功能使用;

CSS

1.div水平垂直居中

不确定宽高:
    方法一:绝对定位+translate;
    父级 position:relative; 
    子级 position:absolute; 
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
    
    方法二:flex布局;
    父级 display: flex;
        vertical-align: middle; //垂直
        text-align: center; //水平
    子级 margin: auto;

    方法三:表格样式
    父级 display: table-cell;
        vertical-align: middle;
        text-align: center;
    子级 display: inline-block;

确定宽高
    方法一:定位+margin负值居中
    父级 position:relative;
    子级 width:300px; 
         height:400px; 
         position:absolute; 
         top:50%; 
         left:50%; 
         margin-left: -150px; 
         maegin-top:-200px;
    
    方法二:绝对定位下top left right bottom 都设置0
    父级 position:relative;
    子级 position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    



















文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114905.html

相关文章

  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • 前端面试汇总(html+css)

    摘要:前端页面有哪三层组成分别是什么有什么作用前端页面由结构层,表示层,行为层组成。作用标准模式与兼容模式有什么区别声明位于文档的第一行,处于标签之前,告知浏览器的解析器用什么文档标准解析这个文档,不存在或者格式不正确会导致文档以兼容模式存在。 HTML: 1、前端页面有哪三层组成?分别是什么?有什么作用? 前端页面由结构层HTML,表示层CSS,行为层JS组成。 2、HTML5为什么只用...

    wangjuntytl 评论0 收藏0
  • 前端面试汇总(html+css)

    摘要:前端页面有哪三层组成分别是什么有什么作用前端页面由结构层,表示层,行为层组成。作用标准模式与兼容模式有什么区别声明位于文档的第一行,处于标签之前,告知浏览器的解析器用什么文档标准解析这个文档,不存在或者格式不正确会导致文档以兼容模式存在。 HTML: 1、前端页面有哪三层组成?分别是什么?有什么作用? 前端页面由结构层HTML,表示层CSS,行为层JS组成。 2、HTML5为什么只用...

    hiyang 评论0 收藏0
  • 前端面试每日3+1(周汇总2019.08.25)

    摘要:前端面试每日题,以面试题来驱动学习,每天进步一点让努力成为一种习惯,让奋斗成为一种享受相信坚持的力量项目地址前端面试每日推荐欢迎跟一起折腾前端,系统整理前端知识,目前正在折腾,打算打通算法与数据结构的任督二脉。 《论语》,曾子曰:吾日三省吾身(我每天多次反省自己)。 前端面试每日3+1题,以面试题来驱动学习,每天进步一点! 让努力成为一种习惯,让奋斗成为一种享受!相信 坚持 的力量...

    Java3y 评论0 收藏0
  • 前端面试每日3+1(周汇总2019.08.25)

    摘要:前端面试每日题,以面试题来驱动学习,每天进步一点让努力成为一种习惯,让奋斗成为一种享受相信坚持的力量项目地址前端面试每日推荐欢迎跟一起折腾前端,系统整理前端知识,目前正在折腾,打算打通算法与数据结构的任督二脉。 《论语》,曾子曰:吾日三省吾身(我每天多次反省自己)。 前端面试每日3+1题,以面试题来驱动学习,每天进步一点! 让努力成为一种习惯,让奋斗成为一种享受!相信 坚持 的力量...

    付伦 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<