HTML的一些知识点和HTML的新增特性

行内元素、块级元素、行内块元素？空元素有哪些？

行内元素：不会独自占用一行，会和其他的行内元素排在一行；不能设置宽高，默认的宽高是内容撑起来的。
常见的有 a、b、u、span、i、em、strong 等文字标签。、

块级元素：独自占用一行，有自己的宽度和高度。常见的有 div、table、tr、form、ul、li、ol、h1~h6、p。

行内块：有自己的宽高，不会独自占用一行。常见的有 img、input、select 等。
常见的空元素：img、hr、br、input、meta 等。

页面导入样式时，使用 link 和@import 的区别？

@import 是 css2.1 提出的，只能引入 CSS，并且@import 要等页面加载完才加载
link 不仅可以引入CSS还可以引入 RSS，并且Link 可以在页面加载的同时加载。

HTML5 的一些新的特性

1. 拖拽释放(Drap and drop)API ondrop，拖放是一种常见的特性，即抓取对象以后拖到另一个位置在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
2. 画布 canvas；getContext()方法返回一个用于在画布上绘图的环境Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
3. 自定义属性 data-id
4. 用于媒介播放的 video 和 audio，如果浏览器不支持自动播放可以在属性中添加 autoplay来解决
5. 新的语义化标签：article，header，nav，section，footer, aside；
6. 新的本地存储：localStorage（长期存储浏览器关闭后数据不丢失），sessionStorage；
7. 新的表单控件：calendar , date , time , email , url , search , tel , file , number
8. 新的技术：websocket，web worker，geoloacation（基于地理位置的应用）

优雅降级和渐进增强

优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不支持CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 ，而低级浏览器 只保证最基本的功能
关键的区别是他们所侧重的内容，以及这种不造成的工作流程的差异
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

前端页面的构成和作用

结构层：由 HTML 负责，负责搭建页面的结构
表示层：由 CSS 负责，负责页面的样式
行为层：由 JavaScript 负责，负责页面的交互

src 与 href 的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接
src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js脚本，img 图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部的原因

HTML5 的 input 增加的 type

1. color：用于指定颜色的控件
2. date：用于输入日期的控件（年，月，日，不包括时间）
3. datetime：基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）
4. datetime-local：用于输入日期时间控件，不包含时区
5. email：用于编辑 e-mail 的字段
6. month：用于输入年月的控件，不带时区
7. number: 用于输入浮点数的控件
8. range：用于输入不精确值控件
9. search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除
10. tel：用于输入电话号码的控件
11. time：用于输入不含时区的时间控件
12. url：用于编辑 URL 的字段
13. week：用于输入一个由星期-年组成的日期，日期不包括时区