W3C标准及其规范

时间:2024-10-21 06:57:54

作为一名前端开发工程师,了解 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等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版