好久不见
有一段时间没有写博客了。最近一段时间准备Web前端面试,刷了好多题。在这里和大家分享下,这一期主要分享一些HTML类型的面试题,大家赶快拿起纸和手。。。敲键盘吧
文档类容出自https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers
- Doctype作用?标准模式与兼容模式各有什么区别?
- Doctype用于向浏览器申明使用标准模式来解析文档
- 标准模式是以浏览器最高级别来解析文档,而兼容模式是以向后兼容的方式来解析文档
- HTML5 为什么只需要写 ?
- 因为HTML5不是SGML的子集,所以不需要DTD引用,但是需要DOCTYPE来规范行为。
- 而HTML4.01是基于SGML,所以需要DTD引用,来告诉浏览器文档所使用的文档类型。
- 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
在CSS规范中,每个元素都有display属性。display属性值为block的是块级元素,display属性值为inline的是行内元素
- 行内元素有:span input a b strong i em small 等等
- 块级元素有:div section main footer header p ul li ol 等等
- 空元素有(自闭合标签):img input hr br meta link。还有一些少见的空元素:embed base command keygen param track wbr col area source等等
- 页面导入样式时,使用link和@import有什么区别?
- Link 在浏览器页面的时候并行加载,而@import需要等页面加载完成后才会加载
- Link 是 XHML标签不存在兼容问题,而@import是css2.1提出的,IE5以上才支持
- Link 还可以加载RSS和使用rel属性,而@import只能加载CSS
- Link 加载的样式可以通过JS更改,而@import加载的样式不可以被JS更改
- 介绍一下你对浏览器内核的理解?
- 浏览器内核一般被分为两个部分:渲染引擎和JS引擎
- 渲染引擎:负责取得网页的内容(HTML,XML,图像等等),整理讯息(引入CSS等),通过计算来显示出网页(这个过程也称为回流),然后输出至显卡,最后渲染为网页(这个过程称为重绘)
- JS引擎:获取网页的JS部分用来解析和执行以实现网页的动态效果
- 最开始渲染引擎和JS引擎没有太大的区别,但是随着JS的发展并独立,内核就只指渲染引擎了
- 常见的浏览器内核有哪些?
- Trident:IE 360浏览器等
- Gecko:Firefox等
- Presto:Opera7及以上,现为blink内核
- Webkit:Chrome,safari(现Chrome使用blink内核)
- blink:Chrome , opera(blink内核由谷歌和opera公司共同研发,是Webkit分支)
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
- 新特性
- HTML5已经不是SGML的子集
- 新增关于图像,地理位置,缓存,多任务等多个功能
- 用于媒体回放的Video和Audio
- 语义化更好的标签,利于SEO优化
- 新的表单控件
-
- 移除的元素
- 纯表现的元素 basefont font big s strike tt u
- 影响页面的元素 frame frameset noframe
-
- 如何处理HTML5新标签的浏览器兼容问题
- 对于浏览器不支持的标签可以使用document.createElement方法产生标签,但是需要自己填写默认样式
- 使用成熟的技术框架比如html5shim
-
- 如何区分html和HTML5?
- 根据文档DOCTYPE申明
- 查看有无新增元素
- 简述一下你对HTML语义化的理解?
- 正确的标签做正确的事情
- 爬虫可以根据文档结构来确定上下文,有利于SEO优化
- 在无网络情况下不至于排版过于混乱
- 结构化代码便于开发人员的开发和维护
- 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
- 在线的情况下:首先判断是否是第一次访问网页,如果是就缓存。如果不是就比对新的manifest文件看看是不是发生过更改,发生则替换
- 离线的情况下读取manifest文件使用离线资源
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
- Cookie 有大小限制,一般来说是4k。随着http请求一起发送至服务器端,可以设置过期时间,不设置的情况下在浏览器关闭的时候会清空
- SessionStorage可以保存较多数据,在浏览器关闭的时候会被清空,同时浏览主域名下不同子域名内容不会共享
- LocalStorage可可以保存较多数据,可以永久保存数据除非用户主动删除或清除缓存
- iframe有那些缺点?
- 在iframe里的域名的资源也会同时并行下载,影响浏览器加载速度
- iframe里面的内容搜索引擎搜索不到,不利于SEO优化
- 会阻塞页面的Onload事件
如果需要使用iframe,可以使用js动态生成,给予Src属性。可以解决1,3问题
- Label的作用是什么?是怎么用的?
- label标签用来定义表单控制间的关系,当用户点击label标签时候,浏览器焦点会自动跳转到对应的表单控件上
- 给label的for属性设置表单控件的id属性即可
- HTML5的form如何关闭自动完成功能?
- 给form添加autocomplete=off属性
- 如何实现浏览器内多个标签页之间的通信? (阿里)
- 使用LocalStorage,cookies等存储方式
- WebSocket、SharedWorker;
LocalStorage另一个浏览上下文里被添加、修改或删除时,都会触发一个事件,通过监听该事件来进行页面之间的通信
注意,在safari浏览器无痕模式使用LocalStorage会出现QuotaExceededError 异常
- webSocket如何兼容低浏览器?(阿里)
- Adobe Flash Socket
- ActiveX HTMLFile(IE)
- 基于Multipart编码发送XHR
- 基于长轮询的XHR
- 页面可见性(Page Visibility API) 可以有哪些用途?
- 通过visibilityState 的值检测页面当前是否可见,以及打开页面的时间等
- 在页面被切换到后台的时候,自动暂停音乐或者视频
- 如何在页面上实现一个圆形的可点击区域?
- SVG或Canvas
- border-radius属性
- 实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。
- 网页验证码是干嘛的,是为了解决什么安全问题。
- 用于区分用户是人还是机器人,可以防止论坛灌水,恶意破解密码,刷票等
- 防止暴力破解用户帐号密码
- title与h1的区别、b与strong的区别、i与em的区别?
- title表示网页标题,h1表示段落标题
- b表示文本加粗没有强调效果,strong表示文本加粗有强调效果
- i表示文本斜体没有强调效果,em表示文本斜体有强调效果