一、HTML

1.HTML5有哪些新特性？新增的标签有哪些？

　　新特性：

语义标签——语义化标签使得页面的内容结构化，见名知义
增强型表单——拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证（包括取色器控件、日期时间控件等）
视频和音频——HTML5 提供了播放音频文件的标准，即使用 <audio> 、<video>元素
Canvas绘图——标签只是图形容器，必须使用脚本来绘制图形
SVG绘图——SVG是指可伸缩的矢量图形
地理定位——HTML5 Geolocation（地理定位）用于定位用户的位置
拖放API——拖放是一种常见的特性，即抓取对象以后拖到另一个位置
Web Worker——web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行
Web Storage——对本地离线存储有更好的支持，提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储
WebSocket——是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，实现了更有效的服务器推送技术。

　　新增标签：

多媒体：<audio>、<video>、<source>为媒介元素定义媒介资源、<embed>、<track>外部文本轨道[有字幕的视频]
新表单元素：<datalist>、<output>、<keygen>、<color>、<date>、<datetime>、<email>......
新文档节段和纲要：<header>页面头部、<section>章节、<aside>侧边栏、<article>文档内容、<footer>页面底部

2.HTML5语义化的好处？

易于用户阅读，提高了用户体验，比如：title、alt用于解释名词和图片信息，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重，和搜索引擎简历良好的关系，有利于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）
方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备，根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，有利于规范

3.浏览器标准模式和怪异模式？

　　在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式。以下是几点区别：

盒模型：

　　在怪异模式下，盒模型为IE盒模型　　　　　　　　　　　　　　　　　　　　　　　　　　而在W3C标准的盒模型中为

图片元素的垂直对齐方式：

对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom，因此在图片底部会有及像素的空间。

<table>元素中的字体：

　　CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素将不会从body等其他封装元素中继承得到，特别是font-size属性。

内联元素的尺寸：

　　标准模式下，non-replaced inline元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。

元素的百分比高度：

　　a：CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。

　　b：当一个元素使用百分比高度时，标准模式下，高度取决于内容变化，怪异模式下，百分比高度被正确应用。

元素溢出的处理：

　　标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。

4.CSS\JS引入的位置一般在哪里？为什么？

　　要解释放置位置就要依据网站加载的整个完整过程：

首先浏览器从服务器接收到html代码，然后开始解析html
构建DOM树（根据html代码自顶向下进行构建），并且在同时构建渲染树
遇到js文件加载执行，将阻塞DOM树的构建；遇到css文件，将阻塞渲染树的构建

script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后
script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行

综上所述，script标签最好放在</body>标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生。而css标签应该放在<head></head>标签之间，因为如果放在</body>标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。效率也不高。如果放在<head></head>之间，浏览器边构建边渲染，效率要高的多。

下面是BS标准模板：

<!DOCTYPE html>
<html>
  <head>
     <!--网页页面字符集-->
    <meta charset="utf-8">
  
    <!--让IE使用最新的渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
    <!--针对移动设备,网站显示宽度等于设备屏幕显示宽度,内容缩放比例为1:1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <!--将下面的 <meta> 标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：-->
    <meta name="renderer" content="webkit">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  
    <title>Bootstrap Basic Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <!--下面这一大块的注释是说:"为了让IE9以下的浏览器支持响应式和HTML5标签.需要引入下面两个JS文件"-->
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
    <!-- 英:jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!--中:必须在JS文件引入之前引入JQ文件,这里src引用的是本地.线上建议使用CDN引用)
    <script src="js/jquery-2.1.3.min.js"></script>
  
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

5.link和@inport引入CSS的区别？

适用范围不同
- @import可以在网页页面中使用，也可以在css文件中使用，用来将多个CSS文件引入到一个CSS文件中
- link只能将CSS文件引入到网页页面中
功能范围不同

@import是CSS提供的一种方式，只能用于加载CSS
link属于XHTML标签，除了可以加载CSS外，还可以定义RSS，定义rel连接属性等

加载顺序不同

当一个页面被加载的时候，@import引用的CSS会等到页面全部被下载完再被加载，所以有时候在浏览@import加载CSS的页面时开始会没有样式（闪烁），这种情况在网速慢的时候比较明显。
Link引用的CSS会同时被加载

兼容性的差别
- @import是有CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上才能识别
- link标签没有这个问题
控制样式的差别
- 使用link方式可以让用户切换CSS样式

html新特性的几个注意点(面试必问)