深入了解W3C标准及规范

81 阅读 0 评论 54 点赞

我是靠谱客的博主感动朋友，最近开发中收集的这篇文章主要介绍深入了解W3C标准及规范，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

引言

合格的前端工程师必须深入理解W3C标准和规范，很多前端招聘要求中也常常提到W3C标准和规范。许多新手或项目并不太遵循或忽略掉W3C标准和规范，这就不利于前端工程化和标准化。

概述

万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。从开发者角度来说，网页主要有三部分组成：HTML,CSS和JS，分别对应着结构，表现和行为。

HTML发展历史

在深入W3C标准和规范之前很有必要先了解HTML,XTML和HTML5的定义与区别。这里也简单总结一下它们间的区别。

1.HTML
HTML截止至目前为止经历了HTML 1，HTML 2.0,HTML 3.2,HTML 4.0,HTML4.01和HTML 5的发展历史。
HTML3.2以前标签书写及其宽松如：

<ul>
 <ol>苹果
 <ol>葡萄
 <ol>香蕉
<ul>

2.XHTML

为了消除HTML自由宽松额标签书写方式，XHTML就严格规定了HTML必须XML的基本规则：
1.1.整个文档只能有且必须包含一个根元素，即<html>；
1.2.每个标签都要有开始和结束标签，如<div></div>,除非使用呢空元素的标签如<br/>,<hr/>;
1.3.标签必须严格嵌套，一一对应,如<ul><li></li></ul>;
1.4.标签的属性必须有属性值，如<input type="text" disabled="disabled"/>;
1.5.标签的属性值必须使用单引号或双引号。错误的如：<input type=text;

3.HTML5

HTML5是“妥协式”的规范，所以并不需要严格遵循XML的规则：
1.标签不区分大小写
2.可以省略结束标签：
2.1.空元素语法的标签：
area,base,br,col,command,embed,hr,img,input,keygen,link,mata,param,source,wbr
正确的示范：<br>,<br/>
错误的示范：<br></br>,<br>
2.2.可以省略结束标签的语法：
colgroup,dt,dd,li,optgroup,option,p,rt,rp,thead,tbody,tfooter,tr,td,th
<p>段落
这种写法属于向以前的HTML页面‘妥协’，在实际开发中不推荐省略结束标签。
2.3.可以省略所有标签，如:html,head,body,tbody，但实际开发中不建议省略
3.标签的属性可以不需要属性值：如<input type="text" disabled/>
4.标签的属性值可以不使用引号：如<input type=text/>,但是开发中也还是不建议省略掉引号，可能会因空格或特殊字符引起意想不到的情况发生。

规范

1.文档DOCTYPE
DOCTYPE（document type）标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。 XHTML定义了三种文件类型声明：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。其中使用最普遍的是过渡的(Transitional)。严格模式包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets）。过渡模式包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets）；框架模式等同于过渡模式，但允许框架集内容。

1.0.文档类型声明详解
DOCTYPE的语法： HTML 顶级元素可用性 “注册组织//类型标签//定义语言”"URL” ,以下面的类型声明进行详解

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

根元素：html
注册组织：W3C
类型标签：HTML 4.01 Transitional
定义语言：EN
URL:http://www.w3.org/TR/html4/loose.dtd

1.1. HTML4.0.1

过渡的DTD写法如：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

严格的DTD写法如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

框架的DTD写法如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

1.2. XHTML

过渡的DTD写法如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格的DTD写法如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的DTD写法如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

1.3. HTML5
HTML 5 不基于 SGML，因此不需要对 DTD 进行指定，文件头输入<!DOCTYPE HTML >即可。

总结：不使用HTML5时应尽量指明HTML文档类型，否则可能导致浏览器的怪异模式。
关于怪异模式和严格模式（标准模式）可以参考如下：

1.盒模型不同
严格模式下，其高宽代表一个元素内容的高宽。混杂模式下，其高宽代表content+padding+border。
2. 设置行内元素的高宽
严格模式下，不能给span等行内元素设置width和height。混杂模式下，可以设置。
3.设置百分比
严格模式下，一个元素的高度由其内容来决定。如果父元素没有设置高度，子元素设置百分比是无效的。
4.水平居中
严格模式下：使用margin：0 auto.混杂模式下，用text-align。
5.混杂模式下，无法设置图片的padding，table字体不能继承上层设置，quirk模式下white-space:pre会失效

2.命名空间 namespace
如果需要使用符合 XML 规范的 XHTML 文档，则应该在文档中的标签中至少使用一个 xmlns 属性，以指定整个文档所使用的主要命名空间。

<html  xmlns="http://www.w3.org/1999/xhtml" >

如果需要在一个 div 元素中显示一串数学公式，则可以为该 div 元素定义一个数学命名空间。比如这样：

<div  xmlns="http://www.w3.org/1999/Math/MathMl">x3/x</div>

3.定义语言编码
不定义语言编码可能导致浏览器解析乱码，使用开发中使用最普遍的语言编码是UTF-8,GB2312。
GB2312和UTF-8的主要区别：

关于字库规模： UTF-8 > GB2312（UTF-8字全而GB2312只有汉字）
关于保存大小： UTF-8> GB2312 （UTF-8更臃肿、加载更慢，GB2312更小巧，加载更快）
**关于适用范围：**GB2312主要在中国大陆地区使用，是一个本地化的字符集，UTF-8包含全世界所有国家需要用>到的字符，是国际编码，通用性强。UTF-8编码的文字可以在各国支持UTF8字符集的浏览器上显示。
如何选择在项目开发时的编码？
这就需要大家根据自身的需求结合不同编码的优势来进行选择。
比如，网站内容数据很多，并且只针对国内用户，推荐使用GB2312编码。
如果网站英文内容较多或者内容少的企业站，推荐使用UTF-8编码。
这个主要是根据GB2312和URF-8编码的数据库存储空间不同来选择的。

普遍使用：

<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” />

HTML5下：

<meta charset="UTF-8">

4.Javascript
Js必须要用<script language="javascript" type="text/javascript">来开头定义，而不是原来的<script language=javascript>或干脆直接<script>，并且需要加个注释符，以保证不在不支持js的浏览器上直接显示出代码来。

<script language="javascript" type="text/javascript"> 
//<![CDATA[ 
alert('正确的JS')
//]]> 
</script>

外部JS,和网页内JS不能写在一块。开发时尽量使用外部JS,以使结构，表现和行为相分离。

<script language="javascript" type="text/javascript" src="http://www.demo.com/demo.js">alert('不能执行网页内JS')</script>

5.CSS
CSS必须要用<style type=“text/css”>开头来定义，而不是原来的直接<style>，也不建议直接写在内容代码里如：<div style=”padding-left:20px;”></div>，并需要加个注释符。

<style type="text/css" media="screen"> 
<!-- 
body {margin:0px;padding:0px;font-size:12px;text-align:center} 
--> 
</style>

同时写CSS时，都需要指定单位。开发时也尽量使用外部CSS,以使结构，表现和行为相分离。
使用外部CSS原因有很多，如：
1.有利于CSS复用与维护；
2.外部CSS可以缓存到本地，减轻服务器负担；
3.HTML代码与结构更清晰；
但是对于一些高级框架，如Vue,React是把JS,CSS,HTML写在一块的，这并不违背结构，表现和行为相分离，因为最终会通过打包工具把CSS,JS,HTML分离出来。

6.不要在注释内容中使用“–,如
7.标签和属性名字都必须小写
8.所有的属性值都要使用引号
9.把所有<和&特殊符号用编码表示,常用在属性值，URL等
10.标签的属性必须要属性值，遵循XHTML规则,没有值的就重复本身
11.标签必须合理结束
12.标签必须合理嵌套

错误的嵌套：

<p><b>标签不对称</p></b>
<ul><span>语义化不合理</span></ul>
<a href="#"><button>容易导致事件冲突</button></a>
<button><a href=“#”>容易导致事件冲突</a></button>

13.合理使用alt和title

alt和title可以帮助显示不完整的内容显示完整，同时有利于SEO。

14. 在form表单中增加lable，以增加用户友好度

不规范的书写

<p>标签名大写不一致</P>
<span>没有书写结束标签
<button type="text" disabled>属性没有指定值</button>
<button type=text>属性值没有指定双引号</button>
<br>
<hr>
 <p><b>标签不对称</p></b>
 <ul><span>语义化不合理</span></ul>
 <a href="#"><button>容易导致事件冲突</button></a>
 <button><a href=“#”>容易导致事件冲突</a></button>
<script language="javascript" type="text/javascript" src="http://www.demo.com/demo.js">alert('不能执行网页内JS')</script>

参考资料

[ 1 ] 百度百科 https://baike.baidu.com/item/DOCTYPE/1334811?fr=aladdin#reference-[1]-73768-wrap
[ 2 ] W3SCHOOL http://www.w3school.com.cn/index.html
[ 3 ] 简书 https://www.jianshu.com/p/d221fe208ae9
[ 4 ] PHP中文网 http://m.php.cn/article/411342.html