首页 关于我们 成功案例 网站建设 电商设计 新闻中心 联系上品
QQ联系
电话联系
手机联系
QQ联系
电话联系
手机联系

前端面试必备(html,css)

发布时间:2020-06-08 06:00
发布者:admin

DOCTYPE 是 html5 标准网页声明,且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。2、HTML、XHTML、XML 有什么区别?

HTML(超文本标记语言): 在 html4.0 之前 HTML 先有实现再有标准,导致 HTML 非常混乱和松散XML(可扩展标记语言): 主要用于存储数据和结构,JSON作用类似,但更加轻量高效XHTML(可扩展超文本标记语言): 基于上面两者而来3、HTML 语义化的理解?

语义化:指使用恰当语义的 html 标签,如 header 标签 代表头部,article 标签代表正文等好处:增强了可读性、有利于SEO优化4、常用的 meta 标签?

http-equiv,相当于http 的文件头作用,比如下面的代码就可以设置 http 的缓存过期日期<meta http-equiv=expires content=Wed, 20 Jun 2019 22:33:00 GMT>

viewport,控制视口的大小和比例meta name=viewport content=width=device-width, initial-scale=1, maximum-scale=1

defer:script 被异步加载后并不会立刻执行,而是等待文档被解析完毕后执行。async:脚本加载完毕后立即执行6、前端储存的方式?

cookies: 兼容性好,请求头自带 cookie 方便,缺点是大小只有4k,自动请求头加入 cookie 浪费流量,每个 domain 限制20个 cookie,使用起来麻烦需要自行封装localStorage:HTML5 加入的以键值对(Key-Value)为标准的方式,优点是操作方便,永久性储存(除非手动删除),大小为5M,兼容IE8+sessionStorage:与 localStorage 基本类似,区别是 sessionStorage 当页面关闭后会被清理,而且与 cookie、localStorage 不同,他不能在所有同源窗口中共享,是会话级别的储存方式IndexedDB:NoSQL 数据库,用键值对进行储存,可以进行快速读取操作,非常适合 web 场景,同时用 JavaScript 进行操作会非常方便。二、CSS 篇

标准模型:宽高计算不包含 padding 和 border ;通过 box-sizing: content-box; 来设置(浏览器默认)。

是一个独立的容器,里面的元素和外面的元素互不影响;BFC垂直方向的边距会发生重叠;BFC 区域不会与浮动元素区域重叠;计算 BFC 高度时,浮动元素也参与计算。创建方式:

float 值不为 none;position 的值不为 static 或 relative;display 为 inline-box, table, table-cell 等;overflow 不为 visible作用:

结构上:display:none 会从渲染树中消失,元素不占据空间且无法点击;visibility: hidden 不会从渲染树中消失,元素继续占据空间但无法点击;opacity: 0 不会从渲染树消失,元素占据空间且可点击。继承性:display: none 和 opacity: 0 是非继承属性;父元素设置了 display:none 或 opacity: 0,子元素无论怎么设置都无法显示;visibility: hidden 会被子元素继承,并且子元素可以通过设置设置 visibility: visible; 来取消隐藏。性能:display: none 会引起重排,性能消耗较大;visibility: hidden 会引起重绘,性能消耗相对较小; opacity: 0 会重建图层,性能较高5、 link 标签和 import 标签的区别

link 属于html 标签,而 @import 是 css 提供的;页面被加载时,link 会同时被加载,而 @import 引用的 css 会等到页面加载结束后加载;link 方式样式的权重高于 @import 的;link 可以使用 js 动态引入,@import不行;link 此没有兼容性要求,而 @import 要求 IE5 以上才能识别。6、移动端 Retina 1px 像素问题的解决方案

viewport + rembackground-image伪元素 + transform scale()box-shadow更多内容可参考:7 种方法解决移动端 Retina 屏幕 1px 边框问题

transition:用于做过渡效果,没有帧概念,只有开始和结束状态,性能开销较小animate:用于做动画,有帧的概念,可以重复触发且有中间状态,性能开销较大10、实现一个扇形