W3C标准及其规范

作为一名前端开发工程师，了解 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”>

错误：

.space_10{ padding-left:10 } 

正确：

.space_10 { padding-left:10px }

5、使用注释

正确的应用等号或者空格替换内部的虚线。

<!--这里是注释============这里是注释-->

6、所有标签的元素和属性名字都必须使用小写

与HTML不一样，XHTML对大小写是敏感的。

<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。

7、所有属性值必须用引号括起来（”” ”）双引号或单引号

8、把所有特殊符号用编码表示

空格为&nbsp; 、小于号（<）&lt、大于号（>）&gt、和号（&）&amp等。

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等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版