余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

认识W3C标准(w3c的理解与认识)

xiyangw 2022-11-25 12:50 73 浏览 0 评论

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的浏览器上直接显示出来。

<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、把所有特殊符号用编码表示

空格为 、小于号(<)<、大于号(>)>、和号(&)&等。

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等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版

相关推荐

数控系统常见术语详解,机加工人士必备资料
数控系统常见术语详解,机加工人士必备资料

增量编码器(Incrementpulsecoder)回转式位置测量元件,装于电动机轴或滚珠丝杠上,回转时发出等间隔脉冲表示位移量。由于没有记忆元件,故不能准...

2023-09-24 17:42 xiyangw

功、功率、扭矩的关系

功=功率×时间work=power×timeW=P×T功=力×距离work=force×lengthW=F×LP×T=F×LP=F×L/T=F×V(velocity)具体到电机输出轴上,圆...

Wi-Fi协议(802.11 )常见专业术语汇总
Wi-Fi协议(802.11 )常见专业术语汇总

Wi-Fi协议(802.11)常见专业术语汇总AP(Accesspoint的简称,即访问点,接入点):是一个无线网络中的特殊节点,通过这个节点,无线网络中的...

2023-09-24 17:41 xiyangw

不需要策略模式也能避免满屏if/else
不需要策略模式也能避免满屏if/else

满屏if/elsejava复制代码publicstaticvoidmain(String[]args){inta=1;if...

2023-09-24 17:41 xiyangw

喜极而泣,我终于干掉了该死的 if-else
喜极而泣,我终于干掉了该死的 if-else

推荐阅读:面试淘宝被Tomcat面到“自闭”,学习这份文档之后“吊打”面试官刷完spring+redis+负载均衡+netty+kafka面试题,再去面试BAT...

2023-09-24 17:40 xiyangw

Python中使用三元运算符简化if-else语句
Python中使用三元运算符简化if-else语句

Python是一种极简主义的编程语言,相比其他编程语言,在多个地方简化了代码的写法,可以让我们用更少的时间更简洁地完成工作。以赋值运算符为例:a=a+b简化...

2023-09-24 17:40 xiyangw

雅思课堂 | 雅思口语写作句型第二讲
雅思课堂 | 雅思口语写作句型第二讲

纯干货,无废话用最少的时间学最制胜的内容!泡图书馆泡不过学霸?碎片时间也能弯道超车!向着雅思8分行动起来吧!雅思口语写作句型1.Ipreferseeing...

2023-09-24 17:39 xiyangw

设计模式(三)——简单的状态模式代替if-else
设计模式(三)——简单的状态模式代替if-else

博主将会针对Java面试题写一组文章,包括J2ee,SQL,主流Web框架,中间件等面试过程中面试官经常问的问题,欢迎大家关注。一起学习,一起成长。前言大多数开...

2023-09-24 17:38 xiyangw

如何优化代码中大量的if/else,switch/case?

前言随着项目的迭代,代码中存在的分支判断可能会越来越多,当里面涉及到的逻辑比较复杂或者分支数量实在是多的难以维护的时候,我们就要考虑下,有办法能让这些代码变得更优雅吗?正文使用枚举这里我们简单的定义一...

优秀程序员早就学会用“状态模式”代替if-else了
优秀程序员早就学会用“状态模式”代替if-else了

2020年已经进入倒计时了,大家立好的flag完成了吗?2020实“鼠”不易,希望2021可以“牛”转乾坤。简介状态模式是行为型设计模式的一种。其设计理念是当对...

2023-09-24 17:37 xiyangw

用Select Case语句对执行多条件进行控制
用Select Case语句对执行多条件进行控制

今日的内容是"VBA之EXCEL应用"的第六章"条件判断语句(If...Then...Else)在VBA中的利用"。这讲是第三节...

2023-09-24 17:37 xiyangw

c#入门教程(四)条件判断if else

条件判断,是编程里常用的判断语句,比如某个代码如果满足条件就执行a代码块否则就执行b代码块。案例1:inti=2*5;if(a>0){执行a代码块}elseif(a<0){执行b代码块...

每日学编程之JAVA(十一)—条件语句(if……else)

一个if语句包含一个布尔表达式和一条或多条语句。如果布尔表达式的值为true,则执行if语句中的代码块,否则执行if语句块后面的代码。if语句后面可以跟else语句,当if语句...

不需要策略模式也能避免满屏if/else

除了使用策略模式以外,还可以使用其他设计模式来避免满屏if/else的问题。以下是一些可能的解决方案:工厂模式:将if/else语句移到工厂类中,由工厂类负责创建对象。这样可以将if/else语句从客...

围绕ifelse与业务逻辑的那些梗
围绕ifelse与业务逻辑的那些梗

ifelse很重要,几乎是程序员编程核心,业务逻辑与规则也通过ifelse体现出来,语句简单但是背后文章很大,先看几则幽默图:1.也许默认使用returnf...

2023-09-24 17:36 xiyangw

取消回复欢迎 发表评论: