w3c标准(w3c是物联网强制标准吗)

时刻小站 137

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要求所有的标签和属性的名字都必须使用小写。</p><p id="fb720530-d406-4b14-be1e-bfcfab27e449">7、所有属性值必须用引号括起来( )双引号或单引号</p><p id="a1553943-2cca-4450-9d69-466dce75dc58">8、把所有特殊符号用编码表示</p><p id="97753059-cfa1-402d-908c-c071f26a33f2">空格为 、小于号(<)<、大于号(>)>、和号(&)&等。</p><p id="830f6341-b9f5-4467-8867-5c3438d12d54">9、所有属性必须有属性值</p><p id="d35a6046-ace3-4d10-9715-e0c8f0af5a6d">XHTML规定所有属性都必须有个值,没有值就是重复本身。</p><p id="7eca56f3-9d1d-407a-9136-72ee391d64ff">10、所有的标记都必须有相应的结束标记</p><p id="2d7201c8-c915-4894-872b-23fb20b690fc">双标记:</p><p id="24c0448a-bff8-41a6-8fd7-c838d487d861"><div></div> 单标记:<img /></p><p id="82b6f21b-30a6-4790-bd31-e5e859201b3d">11、所有的标记都必须合理嵌套,a标签不允许嵌套div这种约束、属于语义嵌套约束比如a 不允许嵌套 a。</p><p id="2ab586f1-18bc-46cb-97ef-4ea81c2a2045">严格嵌套约束在所有的浏览器下都不被允许;而语义嵌套约束,浏览器大多会容错处理,生成的文档树可能相互不太一样。</p><p id="762ab127-7749-4297-ad1c-a3011ba3ecc6">标签不可以嵌套交互式元素</p><p id="76237358-2408-4c9a-9c7d-e5c0389bbfbc"><a>、<button>、<select></p><p id="bcbabe2b-6a10-4a97-b170-b6727f90c58b">p标签不可以嵌套块级元素</p><p id="38fae595-9263-4104-94e8-d5ed847d6142"><div>、h1~h6、<p>、<ul><ol><li> <dl> <dt><dd>、<form>等</p><p id="0763f1a8-952c-46d3-ba9e-c143df7551b9">必须修改为:</p><p id="110d588f-bda5-4d8a-a797-d2b3844a28dc">12、图片添加有意义的alt属性</p><p id="4af80388-35c4-4335-8d2d-671f2d6ce140">图片加载失败时可以用alt属性表明图片内容。同理添加文字链接的title属性,帮助显示不完整的内容显示完整</p><p id="e4949fed-f5ca-4b85-afe2-49dbb127aa2a">13、在form表单中增加label,以增加用户友好度</p><p id="73cb81bd-a588-41f9-9555-f867e0be429b">14、HTML自闭和标签无需闭合、闭合标签需要闭合。</p><p id="22b58b4e-ba3f-468b-af3d-259a521a6e7b">15、尽量减少标签的数量。</p><p id="473bbde0-f665-422b-81a5-33ad084e818a">16、class和id单词字母小写、多个单词组成用-分隔。</p><p id="54c0dd18-1fab-4e96-9b3d-536092c4e4fa">17、标签的属性应该按照特定的顺序出现以保证可读性。</p><p id="db37d8c5-1fc5-4940-bd9f-ad8ae3976a65">id->class->name->data-xxx->src、for、type、href、title、alt->aria-xxx、role</p><p id="e65bbcf8-056a-4edf-96e8-7180a2ae7c20">18、在HTML5规范当中disabled、checked、selected等属性不用设置值。</p><p id="f58853c6-cb16-4d6b-b5b5-3620df279d03">19、css以组件为单位组织代码段、组件块和子组件块以及声明块之间用一空行分隔、子组件块之间三行空格</p><p id="fd8af174-3f6a-4338-97b9-cd16bd989b36">20、如果使用了多个css文件,使用连字符 - 作为 ID、Class 名称界定符,不要驼峰命名法和下划线,避免选择器嵌套层级过多,尽量少于 3 级。</p><p id="3415e1a5-4141-4bb4-b3d7-0d75893cede0">21、媒体查询的位置</p><p id="56acff01-8587-4324-a2f1-e8af221f210f">将媒体查询放在尽可能相关规则的附近,不要将他们打包放在一个单一样式文件或者放在文档底部。</p><p id="59e7809a-f72d-4cff-8f55-1384bbfb600d">.element { ... }</p><p id="760e1c3e-ead4-412f-b7ba-4012ba6973e2">.element-avatar { ... }</p><p id="fa225901-d1d3-4e21-8962-4a5ae37e4221">.element-selected { ... }</p><p id="904d8283-393e-4d4c-8fc1-4c09aa0a917c">@media (max-width: 768px) {</p><p id="802e13a3-36fa-4284-b61a-280f90ce34d8">.element { ...}</p><p id="67ed205f-fd8f-4996-9333-f4bbf5004d89">.element-avatar { ... }</p><p id="70a79122-3499-439f-8497-c2f0550cf227">.element-selected { ... }</p><p id="33a9f145-4bf5-4c5f-8a64-d0d53704a2a9">}</p><p id="0b8b8562-6f20-4186-acb3-aee336beee15">不要使用@inport 与link相比 @import要慢很多 不光增加额外请求数 这还会导致不可预料的问题</p><p id="47a93945-54e3-4615-81bb-d915f15e7ea3">链接的样式顺序</p><p id="8ffb3e25-c6ef-4065-8114-059f04b629b4">a:link->a:visted->a:hover->a:active</p><p id="af5e0740-eff9-4b59-8e4f-e1cabd7f45cb">无需添加浏览器厂商前缀</p><p id="0f5d43ec-a418-4cad-aef3-a436a1ce6c78">当我们的css代码超过了1000行怎么办?</p><p id="ad097a78-5863-4008-aef7-ad94b0374b36">我们会想到组件化的思想 Components(组件)</p><p id="4727ed38-011d-4e0b-accd-7ea865ce93aa">将网站的模块都作为一个独立的Components</p><p id="488ef9f8-8732-4f72-b72a-8d5bdc551b4f">组件命名 最少以两个单词命名 通过-分离</p><p id="b287e61a-2960-4a6e-bacc-1cfd07a985fe">点赞按钮 .like-button</p><p id="54edc1c2-d991-41dd-840e-effbd758f5fe">搜索框 .sreach-form</p><p id="24bf3355-0ebf-430d-83c2-ef9295286bbc">文章卡片 .article-card</p><p id="36ca3158-288c-473a-a05d-1ae70e421576">组件中的元素Elements的类名尽可能仅有一个单词</p><p id="206b5c0e-af14-4efa-84bb-6c15670d5232">.search-form {</p><p id="1884c452-52b9-4ee7-a77f-f97243b17ab3">> .field { /* ... */ }</p><p id="6aa22e72-5684-4f14-82b4-be4a67d8e2d9">> .action { /* ... */ }</p><p id="fc26e255-1396-49ff-b98c-511d23414d19">}</p><p id="1c6dbb8f-9a40-4119-9145-736da0d9e7cc">如果需要两个或两个以上的单词表达elements类名,不应该使用中划线和下划线连接 应该直接连接</p><p id="f27bd911-6f7f-4bb6-bde2-88b278a7d109">.profile-box {</p><p id="c45533c8-3455-4f76-9234-40631be8982b">> .firstname { /* ... */ }</p><p id="ddfe81e8-bbee-468d-a5f3-d5251dc3d8c0">> .lastname { /* ... */ }</p><p id="a65fd06e-c824-4821-a592-89149e2c4e15">> .avatar { /* ... */ }</p><p id="00dc2e92-6a88-42b3-97f4-ec58635d397b">}</p><p id="32f6f9d6-5382-4bb3-b5ae-681e5fb3f341">任何时候尽量用classnames 标签选择器在使用上没有问题 但是其性能上稍弱 表意不明</p><p id="3115226e-d953-449b-b97b-4f7093299ac9">中划线和下划线都可以作为css的class前缀 中划线比下划线更容易输出</p><p id="b4ae1052-bb15-4b57-b849-e4998d1a771b">头像 logo这些元素的应该设置固定的尺寸(宽度、高度…)</p><p id="39b4fd26-5d4d-44a9-9541-266e1be52b18">如果你需要为你的组件设置定位 则应该在组件的(父元素)中处理</p><p id="771a9552-f910-46e3-b981-2d5bf6a30018">使用总结</p><p id="38b2cc6f-a5f8-41fe-a6be-0d085b0625eb">1、标签规范可以提高搜索引擎对页面的抓取效率,对SEO(搜索引擎优化)很有帮助。</p><p id="c91cb832-df20-4d0e-9b21-9db6489f7fa9">2、尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。</p><p id="48005c5a-4f8a-43c4-afb2-73c6455ce875">3、样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版</p></body></html>

上一篇:

下一篇:

  同类阅读

分享