2016最新H5面试题（及答案）

最新推荐文章于 2024-08-14 16:21:25 发布

娶个村姑当大妾

最新推荐文章于 2024-08-14 16:21:25 发布

阅读量3.6k

点赞数

本文链接：https://blog.csdn.net/Bug_money/article/details/52967682

版权

本文详细解析了HTML5的相关面试题目，涵盖DOCTYPE的作用、HTML5的新特性、浏览器内核、离线存储、标签的语义化、CSS3新伪类、页面通信、性能优化方法等方面，还提供了编程题示例，如品字布局、元素移动和三栏布局的实现，以及Bootstrap模态框的两种调用方式。

摘要由CSDN通过智能技术生成

1. HTML5 为什么只需要写 <!DOCTYPE HTML>？
    HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
    而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

2. 页面导入样式时，使用link和@import有什么区别？
    （1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
    （2）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

3. 浏览器的内核分别是什么?
    IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

4. html5有哪些新特性? 移除了那些元素? 如何处理HTML5新标签的浏览器兼容问题? 如何区分 HTML 和HTML5？
    1) 新特性
       HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
       绘画 canvas
       用于媒介回放的 video 和 audio 元素
       本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
       sessionStorage 的数据在浏览器关闭后自动删除

       语意化更好的内容元素，比如 article、footer、header、nav、section
       表单控件，calendar、date、time、email、url、search
       新的技术webworker, websockt, Geolocation

    2) 移除的元素
       纯表现的元素：basefont，big，center，font, s，strike，tt，u；

        对可用性产生负面影响的元素：frame，frameset，noframes；

    3) 支持HTML5新标签：

       IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：

       当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
        
    4) 如何区分： DOCTYPE声明\新增的结构元素\功能元素

5. html语义化的理解？
   用正确的标签做正确的事情！
   html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
   在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
   搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
   使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

6. 什么是HTML5的离线储存？如何使用？
       LocalStorage    长期存储数据，浏览器关闭后数据不丢失；
    sessionStorage 数据在浏览器关闭后自动删除。

7. HTML5的form如何关闭自动完成功能？
   给不想要提示的 form 或下某个input 设置为 autocomplete=off。
8. 如何实现浏览器内多个标签页之间的通信? (阿里)
   调用localstorge、cookies等本地存储方式

9. CSS3新增伪类举例：
:first-of-type     p:first-of-type    选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:last-of-type       p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:only-of-type     p:only-of-type    选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。