关于W3C标准之你不得不知道的那些事儿

我在找工作的时候，经常看到招聘信息有一条是熟悉W3C标准
那么，W3C标准到底是什么？我们作为前端开发人员怎么样修改我们原来的编码习惯才能算作是符合W3C标准？今天，我就来简单的跟大家讲一讲。当然，肯定会有一些遗漏的地方，欢迎大家补充！

什么是W3C标准

万维网联盟（外语缩写：W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）
想必看这篇文章的旁友多少知道HTML,CSS,JS这三个前端开发最最基本的工具。以上三个就对应网页的三个部分，针对这个三个部分，提出了许多标准，真是折腾我们前端宝宝们啊。

我们到底要遵循哪些基本标准

要一条一条的列出来肯定是很多而且必然有遗漏的，但是经过我几天的摸索，我发现学习XHTML的一些标准就基本能符合。
XTML是以XML格式编写的HTML，在更严格更纯净的HTML版本，是2001年1月发布的W3C推荐标准，可想而知了吧，旁友们。
下面我就列举一些XTML必须遵循的标准，当然你也可以直接点击这里

文档结构
XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的
需要定义语言编码

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

元素语法
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
属性语法
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的、
XHTML 元素必须合理嵌套

在 HTML 中，一些元素可以不互相嵌套，像这样：
<b><i>粗体和斜体文本</b></i>
在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：
<b><i>粗体和斜体文本</i></b>

XHTML 元素必须有关闭标签

错误示例：
<p>这是一个段落
<p>这是另外一个段落
正确示例：
<p>这是一个段落</p>
<p>这是另外一个段落</p>

空元素必须包含关闭标签

错误示例：
分行:<br>
水平线: <hr>
图片: <img src="happy.gif" alt="Happy face">
正确示例：
分行:<br />
水平线: <hr />
图片: <img src="happy.gif" alt="Happy face" />

XHTML 元素必须是小写

错误示例:

<BODY>
<P>这是一个段落</P>
</BODY>
正确示例：

<body>
<p>这是一个段落</p>
</body>

属性名称必须是小写

错误示例：

<table WIDTH="100%">
正确示例:

<table width="100%">

属性值必须有引号

错误示例：

<table width=100%>
正确示例：

<table width="100%">

不允许属性简写

错误示例：

<input checked>
<input readonly>
<input disabled>
<option selected>
正确示例：

<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">

以上我觉得大部分前端开发人员应该一开始学习的时候就会避免的，下面要说的是可能会忽略的一些方面

图片标签必须要有alt属性
把所有特殊符号用编码表示
空格为、小于号（<）&lt、大于号（>）&gt、和号（&）&amp
等
尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块
样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属
性命名要做到见文知义

遵循这些标准之后对我们到底有什么好处呢

避免页面乱码现象
签规范可以提高搜索引擎对页面的抓取效率，对SEO（搜索引擎优
化）很有帮助
提高页面渲染速度，提高用户的体验
标签越少，加载越快，用户体验提高，代码维护简单，便于改版
达到部分兼容各大浏览器的目的

如果你不知道你的代码是否完全符合W3C标准，可以将网页放到W3C验证器中检查一下。验证器地址

以上内容来自菜鸟学习，w3cschool

最后编辑于：2018.09.09 11:30:57