1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？HTML5 为什么只需要写 <!DOCTYPE HTML>？

<!DOCTYPE>的作用<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html>标签之前。<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。//经常见到的两种声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
//浏览器会认为他是html4.01，在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。<!DOCTYPE html>
//这是html5，HTML5 不基于 SGML，所以不需要引用 DTD。
还有一些常用的声明，具体参照W3S这里的表格列出了所有的 HTML5/HTML 4.01/XHTML 元素，以及它们会出现在什么文档类型 (DTD) 中：所有html标签

什么是标准模式与混杂模式？它们有何意义？（1）、严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。（2）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（3）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。（4）、当前环境下所有的DOCTYPE全部这样写： <!DOCTYPE html>就当没有其他写法，完毕。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

doctype是document type（文档类型）的简写，在页面中，用来指定页面所使用的xhtml（或者html）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就 是doctype声明。只有确定了一个正确的doctype，xhtml里的标识和css才能正常生效。html 告诉浏览器这个文件是html格式网页文件。两个合起来就是 html5标准网页声明,原先的是一串很长的字符串,现在是这个简洁形式,支持html5标准的主流浏览器都认识这个声明。

2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

//行内元素：
a -锚点，
em-强调，
strong-粗体强调，
span-定义文本内区块，
i-斜体，
img-图片，
b-粗体，
label-表格标签，
select-项目选择，
textarea-多行文本输入框，
sub-下标，
sup-上标，
q-短引用，块元素：
div-常用块级，
dl-定义列表，
dt-标签定义了定义列表中的项目（即术语部分）。，
dd-定义列表中的内容，//<dl>//<dt>计算机</dt>//<dd>用来计算的仪器 ... ...</dd>//<dt>显示器</dt>//<dd>以视觉方式显示信息的装置 ... ...</dd>//</dl>
ul -非排序列表，
li-列表项目，
ol-排序表单，
p-段落，
h1，h2，h3，h4，h5-标题，
table-表格，
fieldset-form控制组，
form-表单，//空元素（void）
br -换行，
hr- 水平分割线

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

//两种写法
<style type="text/css" media="screen">@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");</style> <link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css" media="all" /> 本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。差别1：老祖宗的差别。
link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。差别2：加载顺序的差别。
当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。差别3：兼容性的差别。
由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。差别4：使用dom控制样式时的差别。
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。差别5：@import可以在css中再次引入其他样式表。比如可以创建一个主样式表，在主样式表中再引入其他的样式表。大致就这几种差别了（如果还有什么差别，大家告诉我，我再补充上去），其它的都一样，从上面的分析来看，还是使用link标签比较好。

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

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎渲染引擎 ：负责取得网页的内容（HTML、）、XML、整理讯息（例如加入CSS、、图像、），以及计算网页的显示方式，后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会拥有不同，所以渲染的效果也不相同。 所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核JS引擎则 ：解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎常见浏览器的内核：Trident：　IE6、IE7、IE8（Trident4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）； 360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3及以后版本为Trident+Blink）猎豹极轻浏览器，傲游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）、百度浏览器（早期版本）、世界之窗浏览器[2]  （最初为IE内核，2013年采用Chrome+IE内核）、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器（1.x为Trident，2.0及以后版本为Trident+Webkit）、阿云浏览器（早期版本）、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器（12 之前版本）、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器（iPhone/iPad/Android）、UC浏览器（Blink内核+Trident内核）等。Gecko：Firefox内核，这是个开源内核。Webkit：Safari内核,Chrome内核原型,开源。Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式也使用Webkit作为内核。Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器在国内还是很安全的。WebKit内核常见的浏览器：傲游浏览器3、[1]  Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。移动端都是webKit内核。
QQ浏览器X5内核，也就是说微信、手机QQ内置浏览器都是腾讯的QQ浏览器。

5、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？（讲一下你对html5的理解？）

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。(1)绘画 canvas;(2)用于媒介回放的 video 和 audio 元素;(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;(4)sessionStorage 的数据在浏览器关闭后自动删除;(5)语意化更好的内容元素，比如 article、nav、footer、header、section;(6)表单控件，calendar、date、time、email、url、search;input的type属性添加。(7)新的技术webworker, websocket, Geolocation;(8)拖拽释放(Drag and drop) API ;移除的元素纯表现的元素：basefont，big，center，font, s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；* IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。*当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 
* 如何区分： DOCTYPE声明\新增的结构元素\功能元素

6、简述一下你对HTML语义化的理解？

1、什么是HTML语义化？*<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
*根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？*为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；*用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；*有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；*方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；*便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。3、写HTML代码时应注意什么？*尽可能少的使用无语义的标签div和span；*在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；*不要使用纯样式标签，如：b、font、u等，改用css设置。*需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；*使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；*表单域要用fieldset标签包起来，并用legend标签说明表单的用途；*每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。4、 HTML5新增了哪些语义标签，详述之。详细请看
主要常用到的：
header元素：header 元素代表“网页”或“section”的页眉。footer元素：footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。hgroup元素：hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。
eg：<hgroup><h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1><h2>HTML 5</h2>
</hgroup>
nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。aside元素：aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）
eg：<article><p>内容</p><aside><h1>作者简介</h1><p>小北，前端一枚</p></aside>
</article>
section元素：section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。
eg:<section><h1>section是啥？</h1><article><h2>关于section</h1><p>section的介绍</p><section><h3>关于其他</h3><p>关于其他section的介绍</p></section></article>
</section>
article元素：article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）
除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。HTML5节元素标签包括body article nav aside section header footer hgroup ，还有h1-h6 address。address代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。
h1-h6因为hgroup，section和article的出现，h1-h6定义也发生了变化，允许一张页面出现多个h1。

7、HTML5的离线储存怎么使用，工作原理能不能解释一下？浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？请描述一下 cookies，sessionStorage 和 localStorage 的区别？

8、关于iframe？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
在 HTML4.1 Strict DTD 和 XHTML 1.0Strict DTD 中，不支持 iframe 元素。
您可以把需要的文本放置在<iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
缺点：*在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面。当“蜘蛛”程序遇到由数个框架组成的网页时，它们只看到框架而无法找到链 接，因此它们会以为该网站是个死站点，并且很快转身离去。*重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)。*方便制作导航栏。*iframe会阻塞主页面的Onload事件；

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
注意：使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
优点：*会产生很多页面，不容易管理*不容易打印*浏览器的后退按钮无效*代码复杂,无法被一些搜索引擎索引到*多数小型的移动设备（PDA 手机）无法完全显示框架*多框架的页面会增加服务器的http请求*由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃 

提示: 目前框架的所有优点完全可以使用Ajax实现，因此已经没有必要使用框架了。

9、webSocket的实现，以及如何兼容低版本的浏览器？

10、网页验证码是干嘛的，是为了解决什么安全问题？

防止恶意注册和暴力破解
所谓恶意注册和暴力破解都是用软件进行的。人工注册再快，也需要一项一项输入资料，速度很慢，对服务器基本没有影响。如果没有验证码可以使用软件注册的话，可以同时运行成千上万个线程，一次能注册成千上万个用户，让服务器的数据库很快变得臃肿不堪，运行效率下降。 如果一个无聊的人或竞争对手对某网站怀有敌意，那么这种方法很容易就能让对方瘫痪。

转载于:https://www.cnblogs.com/changyangzhe/p/5706761.html

前端工程师面试题汇总（我的解析，可能不一定对）（HTML部分）相关推荐

  1. Web前端工程师面试题汇总（一）

    前端工程师面试题汇总 本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链. HTML • Doctype作用?严格模式与混杂模式如何区 ...

  2. 前端的c语言面试题,前端工程师面试题汇总（选择题）

    前端工程师面试题汇总(选择题) 时间:2017-12-05     来源:前端工程师面试题推荐 作为一名前端工程师,我们必不可少的就是参加面试,面试过程中会遇到各类奇葩的问题,今天小编为大家汇总了一些 ...

  3. 前端工程师面试题汇总

    HTML Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 <!DOCTYPE HTML>? 行内元素有哪些?块级元素有哪些? 空(void)元素 ...

  4. 前端工程师面试题汇总--技术

    为什么80%的码农都做不了架构师?>>>    HTML Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 <!DOCTYPE HTM ...

  5. python爬虫面试题-扣丁学堂解析Python爬虫工程师面试题汇总

    扣丁学堂解析Python爬虫工程师面试题汇总 2018-08-20 11:24:39 1629浏览 今天,扣丁学堂的小编来给大家总结一下Python爬虫的面试技巧,希望给参加Python培训的同学一点 ...

  6. python面试题网站有哪些_扣丁学堂解析Python爬虫工程师面试题汇总

    扣丁学堂解析Python爬虫工程师面试题汇总 2018-08-20 11:24:39 1664浏览 今天,扣丁学堂的小编来给大家总结一下Python爬虫的面试技巧,希望给参加Python培训的同学一点 ...

  7. 【无标题】前端工程师面试题手册-有点长但是很有用

    不是原作者-想想要获取更多前端开发相关学习资料,请加微信1124692领取 前端工程师面试题手册 目录 1 | 前端基础........................................ ...

  8. web前端兼容性面试题汇总！

    web前端兼容性面试题汇总 一.html部分 1.H5新标签在IE9以下的浏览器识别 html5shiv.js下载地址 2.ul标签内外边距问题ul标签在IE6\IE7中,有个默认的外边距,但是在IE ...

  9. 面经 |算法工程师面试题汇总分享

    面经 |算法工程师面试题汇总分享 来源:https://github.com/PPshrimpGo/AIinterview 0 导读 本文汇总了 深度学习(模型评估方法.基本方法.优化方法.深度学习基 ...

  10. Web前端工程师-优秀简历汇总

    Web前端工程师-优秀简历汇总 1. http://www.linqing07.com/resume.html 2.  http://www.flqin.com/#page2 3.  http://c ...

最新文章

  1. Java异常以及继承的一些问题
  2. 利用samba实现网络文件共享
  3. 《Python Cookbook 3rd》笔记（2.19）：实现一个简单的递归下降分析器
  4. 简单解释什么是 依赖注入 和 控制反转
  5. php聊天室禁止提交,phpcms v9禁止提交信息到官网方法详解
  6. [Bzoj3262]陌上花开(CDQ分治树状数组||树套树)
  7. Java 并发编程之美：线程相关的基础知识
  8. excel转置怎么操作_excel怎么做日历?使用Excel制作日历的操作方法
  9. html5标题居中怎么设置,标题居中怎么设置
  10. 众包专访：开源中国众包，让未来多一种可能
  11. CCF 201312-2 ISBN号码 C++语言实现
  12. NOTA-NHS ester，1338231-09-6，双功能配体的大环化合物
  13. Golang中使用Qt库(therecipe/qt)+QtDesigner + Goland (二) UI继承
  14. 5G关键技术之波束成型
  15. 如何成为虾皮的优选卖家-扬帆际海
  16. 微信小程序开发之城市选择器 城市切换
  17. 山特UPS不间断电源的主要技术参数
  18. poj 4084:拓扑排序
  19. java面板的大小_JAVA编程上我定义了几个面板和一个Frame,怎么设置面板的大小???用setSize怎么没用啊？...
  20. 20、蓝牙和RFID（介质访问控制子层）

热门文章

  1. Codelf 命名神器
  2. 要点初见：Stable Diffusion NovelAI模型优质文字Tag汇总与实践【魔咒汇总】
  3. mongo上云迁移同步mongoshake
  4. PHP基础学习第十四篇（了解和使用PHP的数据类型、常量、字符串变量、运算符）
  5. 显示器分辨率一直跳_常见屏幕比例与显示器分辨率详解
  6. illegal multibyte sequence
  7. 【操作系统】30天自制操作系统--(1)虚拟机加载最小操作系统
  8. Redis “max number of clients reached“的分析过程
  9. windows未能启动计算机,电脑开机windows未能启动是怎么回事
  10. 【OpenGrok代码搜索引擎】一、OpenGrok简介