一、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.CSSJS引入的位置一般在哪里？为什么？
要解释放置位置就要依据网站加载的整个完整过程：
- 首先浏览器从服务器接收到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样式