1.行内(inline)元素 设置`margin-top`和`margin-bottom` 是否起作用？对内联元素设置`padding-top`和`padding-bottom`是否会增加它的高度？
答：像span a这样的行内元素，没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
2.块级元素和内联元素有？
答：常见的块级元素有 div, form, table, p, pre, h1~h6, dl, ol, ul 等等。
常见的内联元素有 span, a, strong, em, label,input,select, textarea, img, br 等等。
3.设置p的`font-size:10rem`，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？
答: 不会。因为：`rem`是以`html`根元素中`font-size`的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。
4.`translate()`方法能移动一个元素在z轴上的位置？
答: 不能。`translate()`方法只能改变x轴，y轴上的位移。translate3d(x,y,z)都可以改变。
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
5. `overfloa:hidden` 是否形成新的块级格式化上下文？（Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)）
答：生成BFC：
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
6.浏览器CSS匹配顺序：
答：浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如`#divBox p span.red{color:red;}`，浏览器的查找顺序如下：先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
7.<keygen> 是正确的HTML5标签吗？
答: 是。 该标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。是HTML5 标签。
8.html5新增的标签：<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。该元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。使用<figcaption>元素为figure添加标题（caption）。
9.什么是SVG?
答：SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
10.<bdo> 标签是否可以改变文本方向？
答: 可以。
<bdo>标签覆盖默认的文本方向。写法如下：
<bdo dir="rtl">Here is some text</bdo>
11.哪种情况下应该使用<small>标签？当你想在h1 标题后创建副标题？还是当在footer里面增加版权信息？
答：<small>用来定义小型文本（和旁注），一般使用场景是在版权信息和法律文本里使用，也可以在标题里使用标注附加信息（bootstrap中可见），但不可以用来创建副标题。
12.seo是什么？
答：搜索引擎优化 （Search Engine Optimization）
13.h1标签为定义最大的标题，换句话说就是告诉别人一个页面的最重要的位置。对于seo的人来说h1标签的合理使用时最重要的，那么h1标签究竟用在哪里最合适呢？
答：目前最主要的h1使用说法有两种：
第一，h1出现在网站logo处（或者网站标题）。
第二，h1出现在文章标题中，即发布一篇文章的标题使用h1标签。要注意一个页面只能有一个h1。
14.如果你有一个搜索结果页面，你想高亮搜索的关键词。什么HTML 标签可以使用?
答：<mark> 标签表现高亮文本。
15. 在一个结构良好的web网页里，多个`h1`标签会不利于SEO吗？
答: 不影响。
16.下列代码中`scope` 属性是做什么的？
<article>
<h1>Hello World</h1>
<style scoped>
p {
color: #FF0;
}
</style>
<p>This</p>
</article>
<article>
<h1>This</h1>
<p>I</p>
</article>
答: scoped属性是一个布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。
17.HTML5 支持块级超链接吗？
答：支持的。 HTML5中<a> 元素表现为一个超链接，支持任何行内元素和块级元素。
18.必须知道的七个HTML5新特性？
答：特性一：draggable&dropzone
HTML5为元素新增了用于拖拽的属性draggable="true or false"，这个属性决定了元素是否能被拖拽，
dropzone=:copy 拖动数据会导致被拖数据产生副本。
move 拖动数据会导致被拖数据移动到新位置。
link 拖动数据会生成指向原始数据的链接。
特性二：正则表达式
通过使用HTML5的pattern属性，我们可以很方便的整合这个功能，代码如下：
<input type="email" pattern="正则表达式" value="" />
特性三：数据列表元素
在HTML5中，我们可以直接使用datalist元素，如下<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
特性四：下载属性
特性五：DNS的预先加载处理
要知道DNS的的解析成本很高滴，往往导致了网站加载速度慢。
如果你希望预先获取NDS，你可以控制你的浏览器来解析域名，例如：
<link rel="dns-prefetch" href="//www.camnpr.com">
特性六：链接网页的预先加载处理
使用如下HTML5的prefetch属性可以帮助你针对指定的地址预加载页面或者页面中的特定资源，这样用户点击的时候，会发现页面加载速度提高了。
<link rel="prefetch" href="http://camnpr.com/demo/list.html" />
或者可以使用prerender属性，这个属性能够帮助你提前加载整个页面，如下：
<link rel="prerender" href="http://camnpr.com/search.html" />
特性七：HTML5基本布局（语义化的标签）
其中的<section>和<article>标签值得注意，<section>标签用来分组相类似的信息，而<article>标签则应该是用来放置诸如一篇文章或是博客一类的信息，你可以在<artile>中嵌入<header>，<section>，<footer>等内容。<article>标签，正如它的名称所暗示的那样，提供了一个完整的信息包。相比之下，<section>标签包含的是有关联的信息，但这些信息自身不能被放置到不同的上下文中，因为这样的话其所代表的含义就会丢失。
19.html5的新功能：
classList API
提供了我们多年来一种使用JavaScript工具库来实现的控制CSS的基本功能：
ContextMenu API
这个新的ContextMenu API非常的有用：它并不会替换原有的右键菜单，而是将你的自定义右键菜单添加到浏览器的右键菜单里：
使用dataset API，程序员可以方便的获取或设置data-*自定义属性：
window.postMessage API
即使是IE8也对postMessage API支持多年了，postMessage API的功能是可以让你在两个浏览器窗口或iframe之间传递信息数据：
autofocus属性
能够让BUTTON, INPUT, 或 TEXTAREA元素在页面加载完成时自动成为页面焦点：