front-end-interview-questions-a

前端面试题解答一

Doctype作用？严格模式（标准模式）与混杂模式（怪异模式）如何区分？它们有何意义? HTML5 为什么只需要写 <!DOCTYPE HTML>？

由于历史的原因，各个浏览器在对页面的渲染上存在差异，直到W3C推出标准，试图改变这一切。
HTML4是由SGML（Standard Generalized Markup Language）标准通用标记语言定义的，在SGML中，DTD文档类型定义(Document Type Definition)用来描述文档的结构。比如，在HTML4.01中，我们如看到以下的DTD，浏览器会以标准模式渲染页面：

1
2
3
4
5
6
7
8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

HTML5不是由SGML定义的，Doctype只是作为传统保留了下来。但它不能舍弃，因为由于老旧的页面没有Doctype，所以浏览器对没有Doctype声明的网页采用quirks mode（怪异模式）解析。怪异模式正是为了解决兼容老旧网页的而存在的。
所以现在，我们只需要<!doctype html>，不用去考虑那些DTD之类，HTML5让一切变得很简单。
reference
w3c-doctype-declaration

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

事实上，W3C并没有官方把元素分为块级元素和行内元素，开发者发现块级元素和行内元素有很大差异，区分它们就是看它们的display的值，值为block是块级元素，inline为行内元素，它们的主要区别是：块级元素会独占一行而内联元素则都会在一行内显示。块级元素可以设置 width、height 属性，而内联元素设置无效。块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。我们可以改变display的值来转换元素为行内元素或块级元素。
没有内容的 HTML 元素被称为空元素。
行内元素有：a b span img input select strong 等
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 p 等
常见的空元素：
br hr img input link meta
不常用的空元素：
area base col command embed keygen param source track wbr

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

1.link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3.import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

介绍一下你对浏览器内核的理解？

浏览器功能主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？

  • Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
  • Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
  • Presto内核：Opera7及以上。 (Opera内核原为：Presto，现为：Blink)
  • Webkit内核：Safari,Chrome等。 (Chrome的：Blink（WebKit的分支）)

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

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

如何区分HTML5： DOCTYPE声明、新增的结构元素、功能元素

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

用正确的标签做正确的事情。
html语义化增加页面可读性，让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

原创文章 欢迎转载但请注明出处。http://beetle2013.github.io/blog/