其实很多小白在学h5和css3的时候会和我一样，傻傻的分不清楚h5中的新标签和css3中的新方法。。。原因其实很简单，我没有经历过html和css的变迁唉。什么功能用什么标签和属性虽然都知道，但是说句实话，不看文档，其实我已经搞混了，只有html和css了。所以我现在想花点时间整理一下前端最基础的html和css。可能小伙伴们在看这个的时候会觉得我的思路缺乏逻辑，但是没有关系，慢慢看完，说不定能帮你解决理解一些底层原理问题呢。

最近在面试的时候被问到什么是html5的时候，讲讲新增的属性的时候表示一脸茫然。。。因为稍微正常点的，有水平有经验的前端面试官都是不会这么问的，他们问的大多是一些底层实现原理和你的编程思维。但是h5的新属性还是要去了解的，因为在浏览器的兼容问题上，我们要考虑到是不是应该用h5和css3的新属性，令人头痛的IE浏览器在IE9以下的版本是不兼容h5和css3的，所以我们在考虑到浏览器兼容性问题的时候可以采取优雅降级或者渐进增强的方法，IE9以下版本不用h5和css3.。

哪什么是H5？

很多人把h5=html5，认为它们是相同的，h5是html5的缩写是html的第五代版本。。。怎么说在中国大部分人脑海中是没有错的，但是稍微有一些工作经验的人就表示完全茫然。你要说h5=html5的话，那么h5小游戏呢？所以很明显，h5包括html5但是不等于html5，实际上，h5只是2014年html5出来后所有相关技术的总称。包含面就特别广了，css3属于h5，js属于h5技术，包括微信小程序啊，移动app，甚至后面出来的vue和react相关的框架也可以称作h5技术。

所以个人就参考众多的文献和网址之后认为，h5不单单是指html的第五代版本，也是一种泛指，泛指自h5出现之后众多前端相关技术。

这里我们总结的是普通的html5的新增属性方法：

1，<article>定义一个文章区域

2，<aside>定义一个页面侧边栏的内容

3，<audio>定义一个音频的内容

4，<bdi>允许定义一个字段，使之不受父元素的文本方向的影响

5，<canvas>非常熟悉的一个幕布，用于定义图形表格。

6，<command>定义一个命令按钮，如单选按钮或者是多选按钮

7，<datalist>定义一个选项列表

8，<details>用于描述文档或文档某方面的细节

9，<dialog>用于定义对话框

10，<embed>定义嵌入的内容，例如插件。

11，<figcaption>定义<figure>元素的标题

12，<figure>规定独立的流内容（图像、图表、照片、代码等等）

13,<footer>定义section或者document的页脚，底部

14，<header>定义文档的头部

15，<keygen>用于规定用于表单的密钥对生成器字段

16，<mark>定义带有标记的文本

17，<meter>定义度量衡，但时在用之前我们必须已经知道了min和max值

18，<nav>定义导航链接的地方

19，<output>定义不同类型的输出，例脚本的输出

20，<progress>定义运行中的进度，常用在进度条中

21，<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容

22， <rt> 标签定义字符（中文注音或字符）的解释或发音。

23，<ruby>标签定义 ruby 注释（中文注音或字符）.

24,<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

25,<sourse> 标签为媒介元素（比如 <video>和<audio>

26,<summary>标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

27,<time>标签用于定义时间和日期

28，<track>标签为诸如 video 元素之类的媒介规定外部文本轨道

29，<video>闻名知义，就是插入视频用的标签

30，<wbr>规定在文本中的何处适合添加换行符。

有点多，一共总结出来的就有30个。。。大家记住几个常用的就好。。。

css3的常见属性总结如下；

选择器

盒模型

背景和边框

文字特效；

2D/3D转换：transform

动画：animation

多列布局：column

用户界面：

大概就是这么一些。具体的css3和html5的用法可以去参考：http://www.runoob.com/css3/css3-tutorial.html

菜鸟教程上有非常详细的html5和css3的教程，建议如果初学者可以去看看练习一下。