本文介绍了前端开发中CSS3和H5的关键概念，包括关注点分离、渐进增强、浏览器兼容性检查、文档声明、语义化标签以及新的HTML5元素。强调了通过caniuse.com查询浏览器支持性、使用@supports检测CSS特性、理解ARIA角色和微格式等提高代码质量和可访问性的重要性。
总结：讲了一些关于CSS3和H5的概念，这些概念某种程度上是一种指导思想，在后面的开发中要注意，这样才能优化前端界面本身。
1.关注点分离：将一个应用分成一个一个模块，然后模块之间松散组合起来
2.CSS3：所谓CSS3不是一个确定的CSS版本，而是一个模糊的集合，像CSS Backgrounds and Borders Level 3,Selectors Level 4 和 CSS Grid Layout Level 1，这些都属于这个集合，也就是对CSS2改进到了一个地步，就是CSS3，没有明确的规范，但也有一部分已经被推荐为标准，有些还在推荐起草阶段。
3.可以浏览caniuse.com来查看CSS，DOM，Js api浏览器支持性。
4.渐进增强：也就是保证主要内容大部分浏览器都支持，然后在支持新特性的浏览器上添加更多优化。这就意味着，浏览器遇到未知元素和属性时不报错，而是进行回退处理，比如：
<input type='email'></input>
<input type='text'></input>
假如浏览器不支持email，那么就退回text。
5.H5中<!DOCTYPE html>对H4和XHTML中的文档声明进行了优化，h5就只有一种，h4有3种：
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
H4基于SGML（标准通用置标语言）所以要引用DTD（文档类型定义，可定义合法的XML文档构建模块），而H5不基于SGML不引用DTD。
顺便一提，下面黄色的是H5新增标签，主要用于语义化。
6.厂商前缀，用于兼容浏览器厂商自己的实验特性，-webkit-开头适用于Safari，Opera和Chorme基于Blink开发，Blink最初也是基于Webkit开发的所以这个前缀以上三个浏览器都能用。
-moz-适用于Mozilla浏览器，比如FireFox
-ms-适用于IE浏览器，IE目前已经说拜拜了。
还要记得不加前缀的声明，避免有漏网之鱼。
在上面说的caniuse.com里面可以查询兼容性。
7.用CSS @support块可以检测浏览器支不支持某特性，支持才运行：
@support (display:grid){
/*支持网格布局才会用*/
}
8.语义化：
我们用特定的标签表达特定的意思，就是语义化，比如h1表示一级标题，strong表示强调。
9.结构化：
语义化的一部分，我们用特定的标签，去表示一种特定的网页结构，比如：
- section
- header
- footer
- nav
- article
- aside
- main
and so on
div和span主要用于单独添加样式，而整体的架构一定要语义化。
这样的好处：
- 代码有更好的维护性，全屏都是div被称为‘div麻疹’
- 搜索引擎可以根据语义化标签的内容来判断网页的内容，这样你的网页更有可能被搜到。
id和class准确来说，不算语义化，只是方便了对DOM操作。
10.对语义的拓展：
ARIA的role属性
ARIA是无障碍富因特网应用，使用role属性，可以无障碍访问语义化标签，比如：
role="navigation"表示这个元素是导航元素。
其他还有：
- banner
- form
- main
- search
- complementary
- contentinfo
- application
等等，可以参考ARIA的文档。
微格式：一种语义化的命名规范，基于vCard和iCalendar等已有的数据格式，了解一下就行了。
微数据：添加结构化数据的方式，指定itemprop来指明数据是什么数据。同样了解一下就行了。
扫一扫
920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
