WEB标准,即网站标准。目前通常所说的WEB标准一般指网站建设采用基于XHTML语言的网站设计语言,WEB标准中典型的应用模式是"div+css",一定程度上说web标准即我们认为的div+css标准化。这里div+css网站将介绍web标准的需要注意地方,让你了解开发网页时候应该多多考虑W3C标准,及html语言语法标准。
注意规范您的css命名的大小写
注意css命名大小写的规范
这里指的CSS命名大小写是指的css属性选择器命名以英文半角方式小写。
如正确的#yanshi{..},不正确#YANGSHI{...}、#YangShi{...}。
为什么要注意这点了,因为css hack就是从这些点滴做起的,形成良好的书写习惯非常重要。
首先举例说明下
英文浏览器版本、操作系统、浏览器品牌不同会导致对读取大小写非常过敏,加入你在命名CSS的是用#YangShi来命名,而在html中使用yanshi全小写来调用,这样在有些标准浏览器将不能解释,就意味着css无效。
当然可以css命名及html中调用时注意大小写统一,如命名以全大写方式命名,html就要以全大写方式调用css样式。但是在代码写多了,忘记了css里某些样式命名大写还是小写(虽然可以再查看css样式,但是浪费时间),这样将会出现伪css hack 。
总结所以我们统一命名css样式的css命名的时候全部用半角小写英文方式命名。
html标准主要注意重点
注意html的web标准
标准html符合w3c的源代码如下
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
- Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>html标准源代码-www.divcss5.com</title>
- <meta name="keywords" content="关键字" />
- </head>
- <body>
- 第一行<br />
- 第二行
- <p>第二段</p>
- <p>第三段</p>
- </body>
- </html>
符合w3c标准的html标准需要注意的地方
1、首先要DOCTYPE声明
2、以<html>就要以</html>结束
3、注意一对组合型标签如<title>就要以</title>结束,
常见的一对组合型标签有div、p、title、head、html、table、tr、td、span、style、b、strong、ul、ol、li、dl组合(dl、dt、dd)、body
扩展知识:div与span区别、css li
4、单独型标签如换行标签br等标签就要以<br />标签来表示
单独型标签有br、meta 、link
根据html标准、web标准、w3c标准都需要执行遵循以上要点来符合标准。
怎么知道什么时候需要一对型标签方式、什么时候需要单独型呢,这个需要大家在开发div+css的时候多注意记住,还有就是使用Dreamweaver软件来简单判断。
使用Dreamweaver来判断标签方法如下
可以在Dreamweaver软件中“代码”中手写代码方式来,一般Dreamweaver软件在写到以“>”结束一个标签时候,如果是单独型标签Dreamweaver软件将自动转换为“/>”如“<br />”,如果是对应一对型标签时候将不会转换写“>”标签将显示“>”标签而不会变化为“/>”,这个时候你就需要在结束的时候再以“</”加标签名加“>”结束标签,如“<div>”就要以“</div>”结束。
接下来我们来了解下css属性里的样式。
首先我们来看一段css文件代码
.logo{ float:left; padding-top:5px;}这是一段随便找来的一个css选择器-css样式,这里要说的是float:left;与padding-top:5px;后面结束都是以分号“;”来结束,不能以中文的分号或者全角输入法的分号。
怎么区分分号是否正确
1、看分号大小及占用的位置宽度小写半角分号“;”大小的分号“;”可以明显的看出吧
2、可以使用软件,这里用Dreamweaver演示
使用错误的分号或者在前面样式的后面没有加上分号会有什么结果呢
无论是错误分号或者在一个选择器里前面样式结束没有加分号,都会导致后面的样式失效,这也可以说是css hack吧。
1、XHTML 元素必须被正确地嵌套。
例子:
一般html网页可以“<b><i>主要内容</b></i>”这是个不严格,在XHTML是错误的;正确的在xhtml标准中就必须要求这样“<b><i>主要内容</i></b>”。
2、XHTML 元素必须被关闭。
exp:
1、一个HEAD里的例子,“<meta name="keywords" content="关键字" > ”像这个标签在html是可行的,但是为了xhtml的标准所以必须关闭如“<meta name="keywords" content="关键字" /> ”
2、如在一般html使用 “ <p> ”这个换大行标签时候很多人直接在需要换行的段落加个“ <p> ”标签就完了,但是在XHTML CSS标准中就必须是这样的 “ <p>段落文字</p> ” 意思就是必须由“ <p> 这个换行标签开始与文章文字段前,并在该段文字文字后以“ </p> ”标签结束。
3、如很多在做html页面时候用到小换行标签“ br ”,很多人不知道这个标签需要以关闭的样式来换行,如:一段文字后要换行 很多CSS制作这就在需要换行的地方加了个“ <br> ”就好了 ,但是告诉大家这也是不标准,在XHTML验证时候是通不过的,必须用“ <br /> ”自关闭结束。
3、标签名必须用小写字母。
在以前的网页中对于很多标签通常使用大写或大小写的编排方式,但是在为了WEB标准现在标签都要求小写统一。
exp:
以前很多“<html>、<body> ”等都用大写或大小写混用如“ <HTML>、<BODY> ”或“<Html>、<Body> ”排版,但是XHTML统一要求需要用“ <html>、<body> ”小写。
4、XHTML 文档必须拥有根元素。
意思就是一什么标签开始就要用什么标签结束,如<body>开始就要在内容结束用</body>来关闭。
5、对于图片需添加alt属性
以前很多时候在网页里显示图片img标签里都可加可不加alt属性,但是现在xhtml要求必须加上alt属性,不然xhtml验证将提示错误,哪怕alt的值为空都可以。
exp:
错误 <img src="图片地址" />
正确<img src="图片地址" alt=“图片说明" />
那加了alt有什么好处?答:加上alt可以对图片进行文字说明,可让搜索引擎辨别图片内容,是优化网页好地方。
其实在我们平时做DIV+CSS时候,多注意标签使用及规范,很快就会掌握与不必特意注意xhtml标准。希望本CSS网站提供整理的资料对你有用。
文章点评