网页制作标准

Posted 2020-09-26 另一种感觉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页制作标准相关的知识，希望对你有一定的参考价值。

网页制作标准概要

（程序员适用）

本文讨论的网页设计标准为WEB标准中典型的应用模式 “DIV+CSS”。希望大家只把这种应用模式当成结构表现分离，代码规范严格的优秀思想即可。建议大家要去消化而不是模仿，不管什么技术，什么口号，什么方法，我们的目的只有一个——我们要做到网页的最优化。

备注：“DIV+CSS”只是具体的实现技术手段，并不能涵盖web标准。

一、实施目的与效果

对于网站浏览用户

1、文件下载与页面显示速度更快。

2、内容能被手机访问到。

3、用户能够通过样式选择定制自己的表现界面。

4、用户普遍使用的浏览器（IE\FireFox）查看页面时显示效果一致。

5、所有页面都能提供适于打印的版本。

对于开发者

1、避免网站代码臃肿、繁杂。从而节省了我们大量的带宽。

这只是web标准附带的好处，因为DIV的结构本身就比TABLE简单，TABLE布局的层层嵌套造成代码臃肿，文件尺寸膨胀。通常情况下，相同表现的页面用DIV+CSS比用TABLE布局的节省2/3的代码。这是web标准天生的好处。特别是中大型网站，类似新浪、网易这样的站点。一个新闻首页从500K缩小到170k，假设一天的pageview是3000万(保守数字)，那么节省的服务器流量就是330k*30000000=9440G，这个成本的节约是可观的。

2、代码简洁，对搜索引擎更加“透明”，因为良好清晰的结构使得搜索引擎能够方便的判断与评估信息，从而建立更精确的索引。

3、实现网页结构化，方便程序员嵌入代码美工人员修改页面，可以这样说如果设计良好，改版时可以只改样式表而不需要变动页面内容。

4、提供打印版本而不需要复制内容。

二、实施办法

1、文件结构部署

统一的站点结构，有助于开发和维护时迅速找到所需的文件。

一般情况下理想的站点部署结构如下：

CSS样式表一般存放在网站根目录的style或css文件夹中，在网页头部引入。样式表文件主要分成三个大类，一类是存储页面的布局结构（本例中文件名以structure_开头），二类是存储页面的样式（本例中文件名为模板的文件名），三类是存储公共的样式（本例中文件名为common）。结构和样式混写到一个文件也是常见的一种法，这种做法能节省美工的切图时间，但是同样加大了我们修改样式的风险与时间。

特殊情况：

对于像网站首页这种访问量超高的页面，CSS和JS脚本的调用可以突破上面所描述的外部引入的做法而采用在页面头部包含代码的方式，这样不但可以减少大量HTTP请求，还能防止CSS文件加载失败导致的页面变形。

2、 页面的头文件

A、文档源第一行应该包含符合XHTML1.0规范中所描述的强制性规定 DOCTYPE 的声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

B、声明 XHTML命名空间

3、 页面的排版布局

A、 何时使用<TABLE>?

首先要澄清一个概念：web标准并不是不允许用TABLE标签，TABLE也是XHTML1.0中的标准标签。我们只是提倡用DIV+CSS布局来替代传统的table布局。原因是：原来的TABLE布局将表现和内容混杂在一起，结构不清晰、内容不完整，不利于内容的重用。而且从语义上讲，TABLE标签只是用它来做表格结构定义的，文档中如果有表格，那么就应该用TABLE。而排版、定位这些表现的东西应该由CSS来控制。

B、关于DIV排版

DIV排版不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“<div>文字块一</div><div>文字块二</div><div>文字块三</div>”，而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>” 更合适。

DIV排版就是应用了CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。每个盒子里面都放着网页的内容。盒子的嵌套不应该是为了页面样式而嵌套尔是为了内容的结构清晰去嵌套。在谈结构部署的时候我建议把页面的布局样式单拿出来做一个文件是因为我们程序员在修改样式的时候很少也不应该去修改页面的布局，我们改动的往往只是页面的样式。

4、 图片的引入方式

对于有意义的图片，应把说明写上，这样操作的好处是对搜索引擎友好，更容易被搜寻引擎搜索到。

5、 FLASH的引入方式

FLASH的嵌入应采用目前比较流行的FlashObject模块，FlashObject模块特点：
A、支持所有flash内置参数设置。且设置更简单方便。
B、内嵌flash player升级探测器，并提示升级。
C、完全通过XHTML 1.0 Strict验证。
D、可以解决IE升级对flash的影响，支持绝大部分浏览器版本。

E、采用直接插入的方式在FLASH文件中如果有按钮的话，IE会产生ACTIVEX虚框，按钮需点两次才能点到，用FlashObject模块则不会出现这种问题

三、代码书写规范

基本原则：

* 不使用只有IE支持而firefox不支持的样式

* 定义尽可能少的样式表，不定义使用不频繁的样式（这些样式可以通过样式表的嵌套实现），如果文字样式的颜色差异很小请与设计师（或者ue）沟通是否可以使用统一样式

* 使用小写字母

1、关于页面某一元素的样式的引用，属于该元素特有的样式，应用该元素标签的ID来引用，属于公共样式则可以用CLASS来引用。

2、保持代码结构的完整性，每个标签都要有关闭。

a标签成对出现

错误：<div>
正确：<div></div>

b标签记得关闭

以前的做法： <br>
现在的标准做法：<br />

3、属性都应当有值

以前的做法： <input type="checkbox" name="shirt" value="medium" checked>

现在的标准做法：<input type="checkbox" name="shirt" value="medium" checked="checked" />

4、属性值应当使用双引号

错误：<table width=100%>
正确：<table width="100%">

5、把所有的特殊符号编码化，例如：

符号名称	编码	符号名称	编码
空格		<	<
上标	<sup></sup>	>	>

6、<table>标签不建议加“height=”””可以在<td>中添加

7、保持代码结构的可扩充性，比如在一个<DIV>中嵌入一个表单<FORM>时，页面不应变型。

8、开发中注意事项：增加javascript代码或给页面加标签时，不要影响原布局。比如，为了在javascript中控制某标签内内容，通常会加个div或span标签，只是要考虑增加的该标签是否调用了样式而导致页面变形。

附录：(UE研究室人员编写)

搜索引擎的优化建议

1、宝贵的mate元标签

尽量给你的网页写上特定的标签，标签里要包含你所做的关键字词。对于不同的网页内容，你需要自己琢磨出合适的标签以提高搜索引擎的机器人对你网站的覆盖范围，并通过此分辨出你网站的有效主题。最好是每一页有不同的标签来支撑。

2、你网站url的结构
对于你网站URL的结构应当谨慎的考虑。尽量少使用带有?号以及其他字符的长元素出现，这样搜索引擎可能会理解为不友好的一种表现。最好使用带有明显倾向的字母来出现，或者使用国际上现在比较流行的一种标题－版权的写法。当然，这只是个建议。

3、建立对外有效的链接和导入高质量的链接
相信这一点不用我过多的重复叙述，大家都能体会到他的好处。我需要重新强调一点的是：不要完全将外部链接导入到一个页面上，这样会导致搜索引擎的机器人在搜索的时候重复的过多搜索你的某一个页面。

4.关键字词的密度和出现的位置
你的整体内容内应该包含有你内容关键字词。最好的法则是尽量使用语句和短语来包含你的关键字词，请记住在你的内容里注意你关键字词的密度。如果你是拷贝的别人的内容，也仔细的检查一遍，适当的修改有可能你获得的流量比他都多。

5.图片的alt属性

当图片无法显示, 或被禁用的时候.可以显示对该图片的描述. 这些描述也会被搜索引擎收录.

Div+css问题汇总

1 web标准中定义id与class有什么区别吗

a) web标准中是不容许重复ID的，比如 div id="font" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.。

b) 属性的优先级问题：
ID 的优先级要高于class

c) 方便JS等客户端脚本，如果在页面中要对某个对象进行脚本操作，那么可以给他定义一个ID，否则只能利用遍历页面元素加上指定特定属性来找到它，这是相对浪费时间资源，远远不如一个ID来得简单.

2 最近优先原则

如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先。

3 如何让div横向排列：

横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联，还可以绝对定位对象等等

div {
float:left;
width:200px;
height:200px;
border:1px solid red

}

4 不同的浏览器默认值可能不同，先定义所有元素的margin和padding值都为0：

* {
margin:0;
padding:0;

}

注：“ * ” 为全部元素

5 使用子选择器：

子选择器可以帮助你节约大量的class定义
例如：

div #subnav ul li.subnavitem {

/* Some styling */

}
可以写为：

#subnav li {

/* Some styling */

}

6 不需要给背景图片路径加引号：

正确：background:url(images/***.gif) #333;

7 组选择器：

h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;

}

8 超链接访问过后hover样式就不出现的问题：

被点击访问过的超链接样式不在具有hover和active，解决方法是改变CSS排列顺序: L-V-H-A

</style>

9 用正确的顺序指定链接的样式：

当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。

10 清除浮动：

一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。
常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。

11 如何横向居中问题：

你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;

text-align:center; /* IE5/Win情况下考虑这样做 */

}

12 如何垂直居中文本：

将元素高度和行高设为一致。

div {
height:30px;
line-height:30px;
border:1px solid red

}

13 调试技巧：层有多大？

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

14 LI中内容超过长度后以省略号显示的方法：

此方法适用与IE与oprea浏览器

li {
width:200px;

    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
}

15 ul标签有默认值，应该先清空

ul {
margin:0;
padding:0;

}

16 如何对齐文本与文本输入框：

加上 vertical-align:middle;

.input {
     width:200px;
     height:30px;
     border:1px solid red;
     vertical-align:middle;
}

17 FireFox下文本无法撑开容器的高度：

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

.file {

height:auto!important;
height:200px;
min-height:200px;

}

18 图片垂直与容器内

这是CSS定义

div {

width:500px;

height:500px;

border:1px solid #ccc;

position:relative;

display:table-cell;

text-align:center;

vertical-align:middle

}

div p {

position:static;

+position:absolute;

top:50%

}

img {

position:static;

+position:relative;

top:-50%;left:-50%;

width:276px;

height:110px

}

这是页面内容：

或者使用背景图的办法：

background:url("logo.gif") center no-repeat;

19 怎样使一个层垂直居中于浏览器中

div {
     position:absolute;
     top:50%;
     left:50%;
     margin:-100px 0 0 -100px;
     width:200px;
     height:200px;
     border:1px solid red;
}

20 怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

21 二级定义的背景颜色无法显示

IE中设置有背景色的ul并没有显示出来，解决方法之一：增加高度

．gainlayout {

height: 1px;

}

ul {
     background:red
}
li {
     float:left;
     width:180px;
}

html页面内容：

<ul class="gainlayout">
<li>web标准常见问题大全</li>

</ul>

22 为什么无法定义1px左右高度的容器