什么是W3C标准？
什是W3C标准： 不是一个标准，而是万维网联盟制定的一系列标准
网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
目的
用一个程序的语言说，我们是转换器，目的就是让我们的页面、我们的程序能够支持所有的浏览器、能够满足尽可能多的用户；
标准规范
1、需要声明（DOCTYPE）
DOCTYPE（document type）文档类型的简写，用来说明你用的XHTML或者HTML是什么版本。其中DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和css都不会生效。 有过度的（Transitional）、严格的（strict）、框架的（frameset）。
2、需要定义语言编码
注：如果忘记了定义语言编码，可能会出现页面乱码现象。
3、JavaScript定义
Js必须要这个用来开头定义，以保证在不支持js的浏览器上直接显示出来。
<script language="javascript" type="text/javascript">
4、CSS定义
CSS必须要用这个开头来定义，为保证各浏览器的兼容性，在写CSS时请都写上数量单位。
<style type=“text/css”>
错误示范：
.box { margin:10 }
正确示范：
.box { margin:10px }
5、使用注释
正确的应用等号或者空格替换内部的虚线。
<!--这里是注释============这里是注释-->
6、所有标签的元素和属性名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的。
<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。
7、所有属性值必须用引号括起来（”” ”）双引号或单引号
8、把所有特殊符号用编码表示
空格为 、小于号（<）<、大于号（>）>、和号（&）&等。
9、所有属性必须有属性值
XHTML规定所有属性都必须有个值，没有值就是重复本身。
10、所有的标记都必须有相应的结束标记
双标记：
<div></div> 单标记：<img />
11、所有的标记都必须合理嵌套，a标签不允许嵌套div这种约束、属于语义嵌套约束比如a 不允许嵌套 a。
严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。
标签不可以嵌套交互式元素
<a>、<button>、<select>
p标签不可以嵌套块级元素
<div>、h1~h6、<p>、<ul><ol><li> <dl> <dt><dd>、<form>等
<p><b></p></b>
必须修改为：
<p><b></b></p>
12、图片添加有意义的alt属性
图片加载失败时可以用alt属性表明图片内容。同理添加文字链接的title属性，帮助显示不完整的内容显示完整
13、在form表单中增加label，以增加用户友好度
14、HTML自闭和标签无需闭合、闭合标签需要闭合。
15、尽量减少标签的数量。
16、class和id单词字母小写、多个单词组成用-分隔。
17、标签的属性应该按照特定的顺序出现以保证可读性。
id->class->name->data-xxx->src、for、type、href、title、alt->aria-xxx、role
18、在HTML5规范当中disabled、checked、selected等属性不用设置值。
19、css以组件为单位组织代码段、组件块和子组件块以及声明块之间用一空行分隔、子组件块之间三行空格
20、如果使用了多个css文件，使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线，避免选择器嵌套层级过多，尽量少于 3 级。
21、媒体查询的位置
将媒体查询放在尽可能相关规则的附近，不要将他们打包放在一个单一样式文件或者放在文档底部。
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (max-width: 768px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
不要使用@inport 与link相比 @import要慢很多 不光增加额外请求数 这还会导致不可预料的问题
链接的样式顺序
a:link->a:visted->a:hover->a:active
无需添加浏览器厂商前缀
当我们的css代码超过了1000行怎么办？
我们会想到组件化的思想 Components(组件)
将网站的模块都作为一个独立的Components
组件命名 最少以两个单词命名 通过-分离
点赞按钮 .like-button
搜索框 .sreach-form
文章卡片 .article-card
组件中的元素Elements的类名尽可能仅有一个单词
.search-form {
> .field { /* ... */ }
> .action { /* ... */ }
}
如果需要两个或两个以上的单词表达elements类名,不应该使用中划线和下划线连接 应该直接连接
.profile-box {
> .firstname { /* ... */ }
> .lastname { /* ... */ }
> .avatar { /* ... */ }
}
任何时候尽量用classnames 标签选择器在使用上没有问题 但是其性能上稍弱 表意不明
中划线和下划线都可以作为css的class前缀 中划线比下划线更容易输出
头像 logo这些元素的应该设置固定的尺寸（宽度、高度…）
如果你需要为你的组件设置定位 则应该在组件的（父元素）中处理
使用总结
1、标签规范可以提高搜索引擎对页面的抓取效率，对SEO（搜索引擎优化）很有帮助。
2、尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
3、样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
