您的位置：首页 > 职场人生

前端面试题目答案整理之HTML

2017-03-09 17:22 633 查看

Doctype作用？严格模式与混杂模式如何区分？

答：DOCTYPE 位于文档的最前面，html标签之前，告诉浏览器以何种方式解析该文档。

不同的文档模式主要影响css的呈现，尤其是盒模型的解析。所谓的混杂模式指的是浏览器以相对宽松的方式向后兼容，模拟老式浏览器站点的行为。以防止老式站点无法工作；严格模式的js的运作模式和排版是以浏览器的最高标准来执行的。一般以标准模式呈现页面

浏览器根据doctype是否存在以及使用的哪种DTD来选择要使用的呈现方式，如果班阔完整的doctype则以标准模式呈现页面，不存在或者是形式不正确则会导致页面以混杂模式呈现。

HTML5 为什么只需要写？

答：h5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为。

html4.01基于SGML，所以需要对DTD的引用，才能让浏览器知道该文档所使用的引用类型。

行内元素有哪些？块级元素有哪些？行内元素与块级元素的区别？怎么转换？空(void)元素有那些？可变元素？

行内元素：span、a、img、input、b、strong、label、select、code、textarea、br

块级元素：div、p、h标签、ul、ol、dt、dd、dl、table、form、tr、th、tbody、thead、noscript、

可变元素：可以根据上下文语境决定是块元素还是行内元素 button、iframe、ins、map、object、script、del

页面导入样式时，使用link和@import有什么区别？

(1)link是xhtml标签，不存在兼容性的问题，@import是css2.1提出的，低版本（IE5以下）的浏览器不支持

(2)页面加载时，link引入的文件会同时加载，@import引入的文件会在页面加载完成之后再加载

(3)link支持js操控DOM改变样式，@import不支持

介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

浏览器内核包括两部分，渲染引擎和js引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，js引擎是解析执行js获取网页的动态效果。

IE：Trident

firefox：Gecko

chrom、safari：webkit

Opera：Presto

Microsoft Edge：EdgeHTML

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

h5新特性主要包括：

(1)用于网页绘图的Canvas，svg

(2)用于离线存储的localstorage和sessionstorage

(3)用于媒体播放的vedio和audio

(4)语义化标签：eg ： footer header、nav、code、section

(5)表单控件：calendar、date、time、email、url

(6)新技术：webSocket、webWorker、Geolocation

移除的元素举例：font、center、big、frame、noframe、frameset

IE9以下版本的浏览器不谦容h5标签，解决办法：

(1)IE支持document.createElement()创建的元素，所以可以通过document.createElement()创建h5标签。

(2)可以使用IE条件注释

<!--[if lt IE 9]><div class = "header"></div><![endif]-->

通过DOCTYPE区分html和H5

7. 简述一下你对HTML语义化的理解？

HTML语义化是让页面的内容结构化，有利于搜索引擎解析，在没有css的情况下页面也会以一种文档格式呈现。

8. HTML5的离线储存怎么使用，工作原理能不能解释一下？

h5的离线缓存，只要在html头部加一个manifest属性即可。

<html manifest="cache.manifest">

cache文件：

CACHE MANIFEST
#v1.1.0
CACHE：
js/app.js
css/style.css
NETWORK:
resource/log.jpg
FALLBACK:
//offline.html

原理是：h5的离线存储基于一个“.appache”的文件缓存机制，通过该文件上的清单存储资源，离线时，浏览器通过离线存储的资源进行页面显示。

9. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

在线时，如果发现html头部有manifest属性，会请求manifest文件，如果是第一次访问，会根据manifest文件下载相应资源并进行缓存，如果不是第一次访问，会使用离线存储的资源加载页面，同时对比新老资源，如果没有变化，不作操作，如果发现有变化，现在新的资源进行离线缓存。

10. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie：存储的数据量比较小，4kb左右，在与服务器通信时，携带在http请求头中，可以在同源的页面之间共享，有失效日期。

sessionStorage：只在当前会话窗口有效，窗口关闭sessionStorage清除，保存在客户端不与服务器进行通信。在不同浏览器的相同窗口也不会共享。

localStorage ：保存在客户端，不与服务器进行通信。只要不手动删除，长期有效。存储的数据量为5Mb或者是更大，可以在同源的页面之间共享。

11. Label的作用是什么？是怎么用的？

label通过for属性实现自身与其他表单控件的绑定，注意for属性要与相关元素的id属性相同。绑定之后，当选择label标签时，浏览器会自动把焦点放在与之绑定的控件上。

12. HTML5的form如何关闭自动完成功能？

<input autocomplete = "on">

如何实现浏览器内多个标签页之间的通信?

可以使用localStorage和cookie，localStorage和cookie在同源窗口之间可以共享，并且localStorage被修改、删除时都会触发storage事件，通过监听storage事件来控制值。

webSocket

实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

<div style = "height:1px;overflow:hidden;background:#000"></div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 前端面试答案

相关文章推荐

新的分享

章节导航