HTML5的设计目的是为了在移动设备上支持多媒体；
HTML5 简单易学；
HTML5 是下一代 HTML 标准；
HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变；
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持；
HTML5新特性
用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search
HTML5的新增标签> canvas 新元素
canvas标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
新多媒体元素
audio定义音频内容video定义视频（video 或者 movie）source定义多媒体资源 video和 audioembed定义嵌入的内容，比如插件track为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。
新表单元素
datalist 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。keygen 规定用于表单的密钥对生成器字段。output 定义不同类型的输出，比如脚本的输出。
新的语义和结构元素
header 定义了文档的头部区域footer 定义 section 或 document 的页脚。nav 定义导航链接的部分。section 定义文档中的节（section、区段）。article 定义页面独立的内容区域。figure 规定独立的流内容（图像、图表、照片、代码等等）。figcaption 定义figure元素的标题aside 定义页面的侧边栏内容。time 定义日期或时间。command 定义命令按钮，比如单选按钮、复选框或按钮details 用于描述文档或文档某个部分的细节dialog 定义对话框，比如提示框summary 标签包含 details 元素的标题mark 定义带有记号的文本。meter 定义度量衡。仅用于已知最大和最小值的度量。progress 定义任何类型的任务的进度。bdi 允许您设置一段文本，使其脱离其父元素的文本方向设置。ruby 定义 ruby 注释（中文注音或字符）。rt 定义字符（中文注音或字符）的解释或发音。rp 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。wbr 规定在文本中的何处适合添加换行符。
HTML5浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性;
video标签的详解
audio标签的详解
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color 从拾色器中选择一个颜色date 类型允许你从一个日期选择器选择一个日期datetime datetime 类型允许你选择一个日期（UTC 时间）datetime-local 类型允许你选择一个日期和时间 （无时区）。email 用于应该包含 e-mail 地址的输入域month 类型允许你选择一个月份number 类型用于应该包含数值的输入域range 用于应该包含一定范围内数字值的输入域。search 类型用于搜索域tel 定义输入电话号码字段time 类型允许你选择一个时间url 类型用于应该包含 URL 地址的输入域week 类型允许你选择周和年
placeholder属性的详解
设置对象文字占位符的样式， 除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder;
placeholder多套兼容写法
datalist标签的详解
datalist: 元素规定输入域的选项列表，属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项；
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域;
width: 控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。height: 和width相对应，指定高度。initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。maximum-scale：允许用户缩放到的最大比例。minimum-scale：允许用户缩放到的最小比例。user-scalable：用户是否可以手动缩放
项目常用设计稿尺寸一： 640 * 1136 （iPhone5 ）
项目常用设计稿尺寸二： 750 * 1334 （iPhone6 ）
项目常用设计稿尺寸三： 1242 * 2208 （iPhone6Plus ）
物理分辨率和显示分辨率> iPhone5 ： 分辨率 320 * 568，物理像素 640 * 1136， DPR: 2.0
iPhone6： 分辨率 375 * 667，物理像素 750 * 1334， DPR: 2.0
iPhone6P：分辨率 414 * 736，物理像素1242 * 2208，DPR: 3.0
dpr（device pixel ratio）：设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系，在JS中可以通过 window.devicePixelRatio 获取；
计算公式：逻辑分辨率 = 物理分辨率 / devicePixelRatio
响应式布局，Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
响应式设计的步骤
设置 meta标签，让浏览器窗口和设备宽度保持一致；通过媒介查询来设置样式 Media Queries；
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery