The role of DOCTYPE
DOCTYPE 是 html5 标准网页声明，DOCTYPE是document type(文档类型)的简写,必须声明在HTML文档的第一行。用来告诉浏览器的解析器使用哪种HTML或XHTML规范解析页面。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。
The difference between standard mode and compatibility mode (weird mode)
Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（兼容）模式（也就是松散呈现模式或者怪异模式）用于呈现为传统浏览器而设计的网页。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。简单说就是尽可能的显示能显示的东西给用户看。
具体区别：
1.盒模型
在严格模式中 ：width是内容宽度 ，元素真正的宽度 = width;
在兼容模式中 ：width则是=width+padding+border
2.兼容模式下可设置百分比的高度和行内元素的高宽
在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在兼容模式下，则会生效。
在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
3.用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中，但在兼容模式下却会失效（用text-align属性解决）
body{text-align:center};#content{text-align:left}
4.兼容模式下Table中的字体属性不能继承上层的设置，white-space:pre会失效，设置图片的padding会失效
Difference between HTML, XML, SGML, XHTML
SGML：(Standard Generalized Markup Language，标准通用标记语言)，在web为发明之前就已经存在了，SGML是国际上定义电子文件结构和内容描述的标准。SGML具有非常复杂的文档结构，主要用于大量高度结构化数据的访问和其他各种工业领域，在分类和索引数据中非常有用。但是它不适用于Web数据描述。
HTML：(Hyper Text Markup Language)，超文本标记语言，1989年，html诞生了，他继承了SGML的很多优点，但是html是一种界面技术，他只使用了SGML中很少的一部分标记，为了便于在计算机上实现，HTML规定的标记是固定的，即HTML语法是不可扩展的。html是一种标记语言，不是一种编程语言。
XML：随着Web应用的不断发展，HTML的局限性也越来越明显地显现了出来，如HTML无法描述数据、可读性差、搜索时间长等。人们又把目光转向SGML，再次改造SGML使之适应现在的网络需求。随着先辈的努力，1998年2月10日，W3C(World WideⅥiebConsortium，万维网联盟)公布XML 1.0标准，XML诞生了。可以说xml是在html和sgml的基础上诞生的。
XML使用一个简单而又灵活的标准格式，为基于Web的应用提供了一个描述数据和交换数据的有效手段。但是，XML并非是用来取代HTML的。HTML着重如何描述将文件显示在浏览器中，而XML与SGML相近，它着重描述如何将数据以结构化方式表示。
How to understand the semantics of HTML5 new tags
简单来说就是可以让你一眼看上去就知道他代表的模块是那一部分,用正确的标签做正确的事.
What HTML 5 tags have you used?
<!DOCTYPE> 定义文档类型 <a> 定义超链接
<abbr> 定义缩写 <address> 定义地址元素
<area> 定义图片地图的某区域 <b> 定义加粗文字
<base> 定义整个页面的基础URL <bdo> 定义文本显示的方向
<blockquote> 定义一个长引用 <body> 定义主体元素
<br> 插入单个的换行 <button> 定义按钮
等等
What does meta viewport do? how to write?
meta viewport 是用于适配移动设备的，为了使不管是什么宽度的页面都能在移动设备端得到完美适配（不需要用户缩放和滚动横向滚动条并且字体图片等显示正常）。
如果不知道设备的理想宽度就用特殊值 device-width，同时 initial-scale=1 来的到一个理想的 viewport (ideal viewport)。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
The function of this meta tag is to make the width of the current viewport equal to the width of the device, while not allowing the user to zoom manually. Of course maximum-scale=1.0, user-scalable=0 is not necessary. Whether users are allowed to play manually is determined according to the needs of the website, but it is basically necessary to set width to width-device to ensure that no horizontal scroll bars will appear .
Empty element definition
In HTML, all codes from the start tag to the end tag are called HTML elements.
Because the content of the HTML element is the content between the start tag and the end tag. And some HTML elements have empty content. (Empty content), those HTML elements with empty content are empty elements. The empty element is closed in the opening tag.
Generally speaking, those without closing tags are empty elements.
For example in HTML, these are
1.<area>
2.<base>
3.<br>
4.<col>
5.<colgroup> when the span is present
6.<command>
7.<embed>
8.<hr>
9.<img>
10.<input>
11.<keygen>
12.<link>
13.<meta>
14.<param>
15.<source>
16.<track>
17.<wbr>
When importing styles on a page, what is the difference between using link and @import
The difference in loading order: When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading.
Compatibility difference: Since @import is proposed by CSS2.1, old browsers do not support it. @import can only be recognized in IE5 and above, and the link tag has no such problem.
The difference when using dom to control the style: When using javascript to control dom to change the style, you can only use the link tag, because @import is not controllable by dom.
The css introduction method is different: the
link style
uses the link tag to introduce css.
<link rel="stylesheet" type="text/css" href="style.css"></link>
Import style
Use @import to import css
<style>
@import url(style.css);
<style>
What is the role of Label? How is it used?
The label label defines the relationship between the form controls. When the user selects the label, the browser will automatically turn the focus to the form control related to the label. `
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>>
Please write what label elements will be included under the table tag
caption, col, colgroup, thead, tfoot, and tbody elements.