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

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

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

W3c的标准:

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

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

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

标准规范

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

相关推荐

参加郑州Java编程培训四个月能学会吗(参加郑州java编程培训四个月能学会吗)
参加郑州Java编程培训四个月能学会吗(参加郑州java编程培训四个月能学会吗)

Java是编程语言界的老大哥,是IT市场上人才需求最多的职位之一。很多人看好Java的发展前景,想要通过参加培训班快速入行。那么参加郑州Java编程培训四个月能...

2023-03-21 19:05 xiyangw

学习Web前端开发去培训机构有必要吗?自学能行吗?
学习Web前端开发去培训机构有必要吗?自学能行吗?

想要学web前端,当然不一定要去培训机构,如果自学能力足够强的话也可以,但对于普通人来说肯定还是去培训机构学web前端比较划算,小科给你分析一下:零基础学Web...

2023-03-21 19:04 xiyangw

学web前端找不到工作吗?学前端到底要多久?(web前端自学能找到工作吗)
学web前端找不到工作吗?学前端到底要多久?(web前端自学能找到工作吗)

学前端到底要多久呢?这个问题的答案因人而异,不过我们可以了解前端就业有哪些必备的技能和知识,下面我们就一起来看看吧!阶段一:前端基础。学完前端的基础知识,大...

2023-03-21 19:04 xiyangw

web前端好找工作吗?——汉码未来(web前端好不好找工作)
web前端好找工作吗?——汉码未来(web前端好不好找工作)

一、看看2020年的招聘需求,我们可以归纳出以下几个关键要点:1.前端基础稳固(如js原型/继承、闭包、作用域链、js遍历,js基本算法,es6的新特性掌握,c...

2023-03-21 19:04 xiyangw

web前端培训开发技术前景怎么样好不好(web前端 培训)
web前端培训开发技术前景怎么样好不好(web前端 培训)

前端开发培训总体还是比较不错,很多人通过培训的方式已经完成了工作就业的目的。而且现在市面上对于前端开发培训的需求也比较多,所以不敢是培训本身的发展还是对于学员的...

2023-03-21 19:04 xiyangw

前端开发培训课程需要学什么语言?上海web前端开发学习

1、html语言网页的基本标记语言,最基础的语言,掌握起来比较简单。2、css语言css又作层叠样式表,css大部分是自动生成的,很难理解,需要学习基本的css知识,是步入高手的必经之路。css控制着...

前端开发培训学习班真的有用吗?事实证明确实很有用!
前端开发培训学习班真的有用吗?事实证明确实很有用!

现在,在越来越多的领域,互联网的发展已经成为促使各行业各层次人员技能提升的必不可少的平台。其中,前端开发行业已经成为非常热门的技术工种。越来越多的人选择通过前端...

2023-03-21 19:03 xiyangw

我是如何从零开始自学前端一个月就找到理想工作的?

我是怎么走上前端开发这条路?首先,我是个文科生,大学里只学过vb,觉得计算机编程这东西太玄乎,不是我玩得转的。后来机缘巧合去做了一家互联网创业公司的HR,阅了上千份程序员的简历,面了上百个不同水平不同...

如何快速入行Web前端开发 参加培训靠谱吗(web前端培训哪里)
如何快速入行Web前端开发 参加培训靠谱吗(web前端培训哪里)

如何快速入行web前端开发?北京哪些机构的web前端培训靠谱?零基础小白经过培训容易就业吗?想来,各位关注前端开发的各位朋友都有这样的疑惑!大家对web...

2023-03-21 19:03 xiyangw

前端培训费用大概多少?只需15秒解决你的所有疑惑
前端培训费用大概多少?只需15秒解决你的所有疑惑

前端培训费用大概多少?这篇文章只要花费你15秒,就可以解决你的所有疑惑。面授线下课、视频课、线上课、所有课程的价格统统交代清楚。前端培训费用大概多少?先说面授线...

2023-03-21 19:03 xiyangw

武汉Web前端开发培训门槛高吗?学习难度大吗?
武汉Web前端开发培训门槛高吗?学习难度大吗?

相比于其他的IT语言,Web前端绝对算是门槛低的,但依然会有很多人在学习前会担忧学习的难度。武汉Web前端培训班学习难度大吗?根据这个问题,千锋武汉Web前端培...

2023-03-21 19:02 xiyangw

初生程序员-入门篇(初级程序员要学什么)
初生程序员-入门篇(初级程序员要学什么)

浙江优就业杭州it培训的老师帮大家搜集了一位新入门程序员的心路历程,帮助大家更好的认识程序员,踏上it高薪之路。我是一个应届生,也是一个前端开发,算上实习期不到...

2023-03-21 19:02 xiyangw

学java一般多久(学java得多久)
学java一般多久(学java得多久)

学java一般多久?今天小编来说说,其实学java一般多久?因人而异,每个人学习情况不一样,学习效率也不一样,例如一个零基础的小白自学java,每天学习按8个小...

2023-03-21 19:02 xiyangw

web前端代码学习计划详解,自学还是报班?(web前端基础代码总结)
web前端代码学习计划详解,自学还是报班?(web前端基础代码总结)

  前端对于想入行互联网开发的初学者来说是非常友好的选择,简单易上手,知识结构理解起来也相对容易,但仍然需要详细的学习计划。本文,小编给大家说说web前端代码学...

2023-03-21 19:02 xiyangw

前端开发是什么?前端培训都要学哪些内容?(web前端开发需要掌握什么技术)
前端开发是什么?前端培训都要学哪些内容?(web前端开发需要掌握什么技术)

  如今互联网行业迅猛发展,而且听说前端开发薪资非常可观,找工作也相对容易。那么,前端开发是什么?对于没有接触过这个行业的零基础小白适合转行做前端开发吗?前端培...

2023-03-21 19:01 xiyangw

取消回复欢迎 发表评论: