HTML5面试

HTML5介绍

HTML5指的是包括 HTML 、CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（ Plug-in-Based Rich Internet Application ， RIA ），例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle JavaFX 的需求，并且提供更多能有效加强网络应用的标准集。
HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。
HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。

元素

Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类

• 结构性元素
  • 主要负责web上下文结构的定义
  • section：在 web 页面应用中，该元素也可以用于区域的章节描述。
  • header：页面主体上的头部， header 元素往往在一对 body 元素中。
  • footer：页面的底部（页脚），通常会标出网站的相关信息。
  • nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。
  • article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
• 级块性元素
  • 主要完成web页面区域的划分，确保内容的有效分割。
  • aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
  • figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。
  • code：表示一段代码块。
  • dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。
• 行内语义性元素
  • 主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
  • meter：表示特定范围内的数值，可用于工资、数量、百分比等。
  • time：表示时间值。
  • progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
  • video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
  • audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
• 交互性元素
  • 主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
  • details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。
  • datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
  • menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
  • command：用来处理命令按钮。
• 新特性，新增元素
  • 内容元素：article、footer、header、nav、section
  • 表单控件：calendar、date、time、email、url、search、Telephone、Range(显示范围控制)、Number、Color
  • 控件元素：新的技术：webworker，websockt，Geolocation
  • 多媒体：video、audio、
  • 游戏：绘画canvas、webgl、
  • 存储：localstorage、sessonstorage、websql、indexedDB（使用对象进行存储数据，indexedDB.open()打开或新建某个数据库， database=indexedDB.open("mydatabase").result。对象存储空间-表，对象-表中的记录，使用keyPath指定键，使用add()，put()向对象存储空间中存储对象，当存储的对象相同时add报错。put则是更新，可以使用database.transaction("users")(即操作users表)进行读取和修改数据。）
• 移除元素
  • 显现层元素：basefont，big，center，font，s，strike，tt，u
  • 性能较差元素：frame，frameset，noframes
• HTML5中的datalist是什么：有助于提供文本框自动完成特性
• 处理兼容问题有两种方式
  • IE6/IE7/IE8支持通过document.createElement方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式
  • 使用是html5shim框架

<!--[if lt IE 9]>
  <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

输出元素

计算两个输入的和值到一个标签中的时候你需要输出元素。显示a+b

<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
  <input name="a" type="number"> +
  <input name="b" type="number"> =
  <output name="o" />
</form>
<output name="o" for="a b"></output>

区分 HTML 和 HTML5

DOCTYPE声明\新增的结构元素\功能元素
1）在文档类型声明上不同：
HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。
2）在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>

HTML与XHTML——二者有什么区别

1）所有的标记都必须要有一个相应的结束标记
2）所有标签的元素和属性的名字都必须使用小写
3）所有的XML标记都必须合理嵌套
4）所有的属性必须用引号""括起来
5）把所有<和&特殊符号用编码表示
6）给所有属性赋一个值
7）不要在注释内容中使“–”
8）图片必须有说明文字

Doctype

（1）Doctype作用？、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
（2）标准模式与兼容模式各有什么区别?、标准模式（严格模式）的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式（在混杂模式中）中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
（3）有多少种Doctype文档类型？、该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
- HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset
- XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
- Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML语义化

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

HTML5的优点与缺点

• 优点
  a、网络标准统一、HTML5本身是由W3C推荐出来的；
  b、多设备、跨平台；
  c、即时更新；
  d、提高可用性和改进用户的友好体验；
  e、有几个新的标签，这将有助于开发人员定义重要的内容；
  f、可以给站点带来更多的多媒体元素(视频和音频)；
  g、可以很好的替代Flash和Silverlight；
  h、涉及到网站的抓取和索引的时候，对于SEO很友好；
  i、被大量应用于移动应用程序和游戏。
• 缺点
  a、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
  b、完善性：许多特性各浏览器的支持程度也不一样。
  c、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
  d、性能：某些平台上的引擎问题导致HTML5性能低下。
  e、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

布局

水平居中布局

• margin+定宽：width: 100px;margin: 0 auto;
• table + margin：display: table;margin: 0 auto; (display: table 在表现上类似 block 元素，但是宽度为内容宽)
• inline-block + text-align

.child {
	display: inline-block;
}
.parent {
	text-align: center;
}

兼容性佳（甚至可以兼容 IE 6 和 IE 7）

• absolute + margin-left

.parent {
	position: relative;
}
.child {
	position: absolute;
   	left:50%;
        width: 100px;
    	margin-left: -50px;  /* width/2 */
}

宽度固定
相比于使用transform ，有兼容性更好

• absolute + transform

.parent {
    	position: relative;
}
.child {
  	position: absolute;
   	left: 50%;
   	transform: translateX(-50%);
}

绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform 为 CSS3 属性，有兼容性问题

• flex + justify-content

.parent {
	display: flex;
	justify-content: center;
}

只需设置父节点属性，无需设置子元素
flex有兼容性问题

垂直居中

垂直居中：vertical-align:middle;
父元素高度不确定的文本，图片，块级元素的竖直居中：给父元素设置相同的上下边距实现
父元素高度确定的单行文本垂直居中：line-height值与父元素的高度值相同

• table-cell + vertical-align

.parent {
	display: table-cell;
	vertical-align: middle;
}

兼容性好(IE 8以下版本需要调整页面结构至 table)

• absolute + transform
  强大的absolute对于这种小问题当然也是很简单的

.parent {
	position: relative;	
}
.child {
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
}

绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
transform 为 CSS3 属性，有兼容性问题
同水平居中，这也可以用margin-top实现，原理水平居中

• flex + align-items
  如果说absolute强大，那flex是最强的。但它有兼容问题

.parent {
 	display: flex;
	align-items: center;
}

水平垂直居中

• absolute + transform

.parent {
	position: relative;
}
.child {
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%, -50%)
}

绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform 为 CSS3 属性，有兼容性问题

• inline-block + text-align + table-cell + vertical-align

.parent {
    	text-align: center;
   		display: table-cell;
    	vertical-align: middle;
}
.child {
   	display: inline-block;
}

兼容性好

• flex + justify-content + align-items

.parent {
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center; /*垂直居中*/
}

只需设置父节点属性，无需设置子元素
兼容性问题

• jQuery

$(window).resize(function(){ 
    $(".mydiv").css({ 
         position: "absolute", 
         left: ($(window).width() - $(".mydiv").outerWidth())/2, 
         top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });        
 }); 

此外在页面载入时，就需要调用resize()。

 $(function(){ 
	$(window).resize(); 
 }); 

一列定宽，一列自适应

• float + margin

<div class="parent">
 	 <div class="left">
  	 </div>
    	 <div class="right">
  	 </div>
 </div>
<style>
.left {
	float: left;
    width: 100px;
}
.right {
    margin-left: 100px
   	/*间距可再加入 margin-left */
}
</style>

IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：

<div class="parent">
 	<div class="left">
  	</div>
  	<div class="right-fix">
    		<div class="right">
    		</div>
  	</div>
</div>
<style>
.left {
    	float: left;
    	width: 100px;
}
.right-fix {
    	float: right;
    	width: 100%;
    	margin-left: -100px;
 }
.right {
    	margin-left: 100px
    	/*间距可再加入 margin-left */
}
</style>

此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。

• float + overflow

<div class="parent">
  	 <div class="left">
  	 </div>
  	 <div class="right">
  	 </div>
</div>
 <style>
.left {
    	float: left;
    	width: 100px;
}
.right {
    	overflow: hidden;
}
</style>

设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。BFC是什么呢。用通俗的来讲就是，随便你在BFC 里面干啥，外面都不会受到影响 。此方法样式简单但不支持 IE 6

• table

<div class="parent">
  	<div class="left">
  	</div>
  	<div class="right">
  	</div>
</div>
<style>
.parent {
  	display: table;
 	width: 100%;
	table-layout: fixed;
}
.left {
	display: table-cell;
	width: 100px;
 }
.right {
	display: table-cell;
	/*宽度为剩余宽度*/
 }
</style>

table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距

• flex

<div class="parent">
  <div class="left">
  </div>
  <div class="right">
  </div>
</div>
<style>
  .parent {
   display: flex;
  }
  .left {
	width: 100px;
   	margin-left: 20px;
  }
  .right {
    	flex: 1;
  }
</style>

低版本浏览器兼容问题
性能问题，只适合小范围布局
我们在学会一列定宽，一列自适应的布局后也可以方便的实现 多列定宽，一列自适应 多列不定宽加一列自适应

等分布局

• float

<div class="parent">
	<div class="column">
	</div>
	<div class="column">
 	</div>
 	<div class="column">
 	</div>
 	<div class="column">
 	</div>
</div>
<style>
  .parent {
	margin-left: -20px;
  }
  .column {
	float: left;
	width: 25%;
	padding-left: 20px;
	box-sizing: border-box;
  }
</style>

此方法可以完美兼容 IE8 以上版本

• flex

<div class="parent">
	<div class="column">
	</div>
	<div class="column">
 	</div>
 	<div class="column">
 	</div>
 	<div class="column">
 	</div>
</div>
<style>
  .parent {
   display: flex;
  }
  .column {
	flex: 1;
  }
  .column+.column { /* 相邻兄弟选择器 */
	margin-left: 20px;
  }
</style>

强大简单，有兼容问题

• table

<div class='parent-fix'>
  	<div class="parent">
    		<div class="column">
    		</div>
    		<div class="column">
    		</div>
    		<div class="column">
   		 </div>
    		<div class="column">
    		</div>
  	</div>
</div>
<style>
.parent-fix {
	margin-left: -20px;
  }
.parent {
	display: table;
	width: 100%;
	/*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
	table-layout: fixed;
}
.column {
	display: table-cell;
	padding-left: 20px;
}
</style>

等高布局

• table table 的特性为每列等宽，每行等高可以用于解决此需求

<div class="parent">
	<div class="left">
	</div>
	<div class="right">
	</div>
</div>
<style>
.parent {
	display: table;
	width: 100%;
	table-layout: fixed;
}
.left {
	display: table-cell;
	width: 100px;
}
.right {
	display: table-cell
	/*宽度为剩余宽度*/
}
</style>

• flex

<div class="parent">
	<div class="left">
	</div>
	<div class="right">
	</div>
</div>
<style>
.parent {
	display: flex;
}
.left {
	width: 100px;
	margin-left: 20px;
}
.right {
	flex: 1;
}
</style>

注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch 3. float

<div class="parent">
	<div class="left">
	</div>
	<div class="right">
	</div>
</div>
<style>
.parent {
	overflow: hidden;
}
.left,.right {
	padding-bottom: 9999px;
	margin-bottom: -9999px;
}
.left {
	float: left;
	width: 100px;
	margin-right: 20px;
}
.right {
	overflow: hidden;
}
</style>

此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性，目前flex兼容性较差

flex基础

flex 的核心的概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴

父容器

• 设置子容器沿主轴如何排列：justify-content
  justify-content: flex-start | flex-end | center | space-between | space-around;
  flex-start：起始端对齐；flex-end：末尾端对齐；center：居中对齐；space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半；space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。

• 设置子容器沿交叉轴如何排列：align-items
  align-items: flex-start | flex-end | center | baseline | stretch;
  有flex-start：起始端对齐；flex-end：末尾段对齐；center：居中对齐；stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

• 设置换行方式：flex-wrap（决定子容器是否换行排列）
  flex-wrap: nowrap | wrap | wrap-reverse;
  nowrap：不换行；wrap：换行（沿着交叉轴的正方向换行）；wrap-reverse：逆序换行（沿着交叉轴的反方向换行）

• align-content：当子容器多行排列时，设置行与行之间的对齐方式。
  沿交叉轴对齐，属性值和justify-content相同只是相对交叉轴，如果项目只有一根轴线，该属性不起作用

子容器

• 在主轴上如何伸缩：flex
  flex属性是flex-grow（放大比例）, flex-shrink（缩小比例） 和 flex-basis的简写，默认值为0 1 auto，该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 flex 即弹性，会自动填充剩余空间，子容器的伸缩比例由 flex属性确定。

• 单独设置子容器如何沿交叉轴排列：align-self
  如果子容器和父容器同时设置了该值，以子容器为准。该属性允许单个子容器有与其他子容器不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch，其他属性值和align-items的属性值一样

• order属性定义项目的排列顺序
  数值越小，排列越靠前，默认为0

轴

• flex-direction 属性决定主轴的方向，交叉轴的方向由主轴确定。
  flex-direction: row | row-reverse | column | column-reverse;
  row，向右，column,向下，row-reverse，向左，column-reverse,向上,主轴沿逆时针方向旋转 90° 就得到了交叉轴

• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
  默认值为row nowrap

总结

flex的作用是能够按照设置好的规则来排列容器内的项目，而不必去计算每一个项目的宽度和边距。甚至是在容器的大小发生改变的时候，都可以重新计算，以至于更符合预期的排版。
（1） display：flex|inline-flex；flex：相当于block；inline-flex：相当于inline-block
（2） flex-direction（流动布局的主轴方向）
（3） flex-wrap如果轴线放不下，应该如何换行。
（4） flex-flow（“flex-direction”和“flex-wrap”属性的缩写），row nowrap为其默认属性值，分别表示flex-direction和flex-wrap属性。
（5） justify-content（主轴方向内容对齐方式）；
（6） align-content（多个主轴沿侧轴方向的内容堆栈对齐方式）
（7） align-items（侧轴方向的内容对齐方式）
（8） order(排序，项目按照order值从小到大排列)
（9） flex-grow(空白空间分配比例)
（10）flex-shrink(项目空间的分配比例)

标签

常见的meta标签

• 指定字符集 <meta charset="utf-8">
• 向搜索引擎说明你的网页的关键词<meta name="keywords" content="">
• 告诉搜索引擎你的站点的主要内容<meta name="description" content="">
• 告诉搜索引擎你的站点的制作的作者<meta name="author" content="your name">
• 响应式页面<meta name="viewport" content="width=device-width, initial-scale=1.0">
• 定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。)<meta http-equiv="refresh" content="3" url=https://www.mozilla.org"\>
• 如果安装了GCF (Google Chrome Frame)，则使用GCF来渲染页面 (“chrome=1”), 如果没有安装GCF，则使用最高版本的IE内核进行渲染 (“IE=edge”)。X-UA-Compatible(浏览器采取何种版本渲染当前页面)<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
• 浏览器的内核控制 <meta name="renderer" content="webkit|ie-comp|ie-stand">

媒介查询

html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位。这样页面在不同设备下就能保持一致的网页布局。但是从工作量和复杂度方面来考虑，确有不足。
简单的解决办法是：文字流式布局，控件弹性布局，图片等比缩放。 一些网站的做法：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 通过document.documentElement.clientWidth获得deviceWidth，然后通过js动态设置html的font-size。
布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
对于容器的font-size，需要通过媒介查询设置font-size：

@media screen and (max-width:321px){
.m-navlist{font-size:15px}
}
@media screen and (min-width:321px) and (max-width:400px){
.m-navlist{font-size:16px}
}
@media screen and (min-width:400px){
.m-navlist{font-size:18px}
}

HTML5 为什么只需要写

Html5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。XHTML创建于XML，他被使用在HTML4.0中。

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

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

FOUC（无样式内容闪烁）？如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
<style type="text/css" media="all">@import "../fouc.css";</style> 而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法简单的出奇，只要在<head>之间加入一个<link>或者<script>元素就可以了。

对浏览器内核的理解？

主要分成两部分：渲染引擎(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的分支）]

Label的作用

label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>
<input type=“tex e" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

页面可见性（Page Visibility API） 可以有哪些用途

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

HTML5的form如何关闭自动完成功能

给不想要提示的 form 或某个 input 设置为 autocomplete=off。

如何在页面上实现一个圆形的可点击区域

1）、map+area或者svg
2）、border-radius
3）、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

title与h1的区别、b与strong的区别、i与em的区别

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：<strong>会重读，而<B>是展示强调内容。
i内容展示为斜体，em表示强调的文本；
Physical Style Elements – 自然样式标签
b, i, u, s, pre
Semantic Style Elements – 语义样式标签
strong, em, ins, del, code
应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签

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

行内元素：span a b img input select strong i em
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素：<br> <hr> <img> <link> <meta>
鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

document.write和 innerHTML的区别

• document.write只能重绘整个页面；innerHTML可以重绘页面的一部分
• document.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。
• document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
• innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。