w3c标准（w3c是物联网强制标准吗）

W3c的标准：

W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

它的目目的就是让我们的页面、我们的程序能够支持所有的浏览器、能够满足尽可能多的用户；

标准规范

1、需要声明（DOCTYPE）

DOCTYPE（document type）文档类型的简写，用来说明你用的XHTML或者HTML是什么版本。其中DTD叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和css都不会生效。有过度的（Transitional）、严格的（strict）、框架的（frameset）。

2、需要定义语言编码

注：如果忘记了定义语言编码，可能会出现页面乱码现象。

3、JavaScript定义

Js必须要这个用来开头定义，以保证在不支持js的浏览器上直接显示出来。

4、CSS定义

CSS必须要用这个开头来定义，为保证各浏览器的兼容性，在写CSS时请都写上数量单位。

错误：

.space_10{ padding-left:10 }

正确：

.space_10 { padding-left:10px }

5、使用注释

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

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

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

和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。7、所有属性值必须用引号括起来（）双引号或单引号8、把所有特殊符号用编码表示空格为、小于号（<）<、大于号（>）>、和号（&）&等。9、所有属性必须有属性值XHTML规定所有属性都必须有个值，没有值就是重复本身。10、所有的标记都必须有相应的结束标记双标记：<div></div> 单标记：<img />11、所有的标记都必须合理嵌套，a标签不允许嵌套div这种约束、属于语义嵌套约束比如a 不允许嵌套 a。严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。标签不可以嵌套交互式元素<a>、<button>、<select>p标签不可以嵌套块级元素<div>、h1~h6、、<ul><ol><li> <dl> <dt><dd>、<form>等必须修改为：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、role18、在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等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版</body></html>

免责声明：内容来自用户上传并发布，站点仅提供信息存储空间服务，不拥有所有权，本网站所提供的信息只供参考之用。

相关文章：

同类阅读