摘要: <!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...
阅读全文
head区是指首页HTML代码的<head>和</head>之间的内容。
必须加入的标签
1.公司版权注释
<!--- The site is designed by Maketown,Inc 06/2000 --->
2.网页显示字符集
简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
3.网页制作者信息
<META name="author" content="hhlong.com">
4.网站简介
<META NAME="DESCRIPTION" CONTENT="xxxxxxxxxxxxxxxxxxxxxxxxxx">
5.搜索关键字
<META NAME="keywords" CONTENT="xxxx,xxxx,xxx,xxxxx,xxxx,">
6.网页的css规范
<LINK href="style/style.css" rel="stylesheet" type="text/css">
(参见目录及命名规范)
7.网页标题
<title>xxxxxxxxxxxxxxxxxx</title>
.可以选择加入的标签
1.设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
2.禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
3.用来防止别人在框架里调用你的页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
4.自动跳转。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.hhlong.com">
5指时间停留5秒。
5.网页搜索机器人向导.用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
6.收藏夹图标
<link rel = "Shortcut Icon" href="favicon.ico">
所有的javascript的调用尽量采取外部调用.
<SCRIPT LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>
附<body>标签：
<body>标签不属于head区，这里强调一下，为了保证浏览器的兼容性，必须设置页面背景<body bgcolor="#FFFFFF">
文章来源:
http://www.windsfly.cn/blog/default.asp?id=782
摘要: 随着越来越多的人开始接受web标准,一些和以往有些不太一样的地方也让许多新手痛苦不堪。以前可能简单设置一下甚至不用设置就能实现的样式,现在却始终搞不定,本文列举了一些常见问题和解决方法,相信对新手很有帮助。
1.超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A
程序代码
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
2.FireFox下如何使连续长字段自动换行
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的方法来解决
程序代码
<style type="text/css">
<!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
</style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<script type="text/javascript">
/* <![CDATA[ */
function toBreakWord(el, intLen){
var obj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</script>
3.ff下为什么父容器的高度不能自适应
在子容器加了浮动属性后,该容器将不能自动撑开,解决方法是在标签结束后加上一个清除浮动的元素。
程序代码
clear:both;
4.IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上
程序代码
display:inline
5. IE6下绝对定位的容器内文本无法正常选择的问题
此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。关于qurks mode的相关知识,请参考:
http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
6. IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
都可以解决.
7. IE6下两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
8. list-style-image无法准确定位的问题
list-style-image的定位问题也是经常有人问的,解决的办法一般是用li的背景模拟,这里采用相对定位的方法也可以解决。
9. LI中内容超过长度后以省略号显示的方法
此方法适用与IE与OP浏览器
程序代码
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>
10.web标准中定义id与class有什么区别吗
一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题
ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
11.如何垂直居中文本
将元素高度和行高设为一致。
程序代码
<style type="text/css">
<!--
div {
height:30px;
line-height:30px;
border:1px solid red
}
-->
</style>
12.如何对齐文本与文本输入框
加上 vertical-align:middle;
程序代码
<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>
13.为什么FF下面不能水平居中呢
FF下面设置容器的左右外补丁为auto就可以了
程序代码
<style type="text/css">
<!--
div {
margin:0 auto;
}
-->
</style>
14.为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
程序代码
{
height:auto!important;
height:200px;
min-height:200px;
}
15.为什么IE6下容器的宽度和FF解释不同呢
程序代码
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
-->
</style>
<div onclick="alert(this.offsetWidth)">web标准常见问题大全</div>
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:
http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true
16.为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>
17.为什么我定义的样式没有作用呢
这里你无法用.aa定义到li 遇到这种情况怎么解决呢？答案是提高.aa 的优先权 比如#aa ul li.aa
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#aa ul li {
color:red
}
.aa {
color:blue
}
-->
</style>
<div id="aa">
<ul>
<li class="aa">
web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全
</li>
</ul>
</div>
18.为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
19.为什么这个背景颜色无法显示
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
ul {
background:red
}
li {
float:left;
width:180px;
}
-->
</style>
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->
<ul class="gainlayout">
<li>web标准常见问题大全</li>
<li>web标准常见问题大全</li>
<li>web标准常见问题大全</li>
<li>web标准常见问题大全</li>
<li>web标准常见问题大全</li>
<div style="clear:both"></div>
</ul>
IE中设置有背景色的ul并没有显示出来,这个属于haslayout问题,解决的办法也很多参考
http://www.satzansatz.de/cssd/onhavinglayout.htm解决方法之一:
程序代码
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->
20.怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明
程序代码
<param name="wmode" value="transparent" />
21.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
程序代码
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
22 .图片垂直与容器内
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
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
}
-->
</style>
<div><p><img src="logo.gif" /></p></div>
或者使用背景图的办法:
程序代码
background:url("logo.gif") center no-repeat;
23.如何让div横向排列
横向排列DIV可以使用浮动的方式比如float:left,或者设置对象为内联,还可以绝对定位对象等等.
程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
float:left;
width:200px;
height:200px;
border:1px solid red
}
-->
</style>
<div>web标准常见问题大全</div>
<div>web标准常见问题大全</div>
<div>web标准常见问题大全</div>
文章来源:
http://www.windsfly.cn/blog/default.asp?id=776
CSS代码如下：
程序代码
/* 轮播图片 */
#oo_img {}
#oo_img a{display:none;}
#oo_img a.imgdefault{display:none;}
#oo_img a.imgthis{display:block;}
#oo_img img {width:350px; height:250px;}
#oo_num {padding:3px 0 0 6px; clear:both; margin-top:-21px; float:right}
#oo_num a {float:left; text-align:center; line-height:18px; display:block; width:28px; height:18px;border-right:1px solid #fff; background:#999; font-weight:bold;}
#oo_num a:link{color:#fff;}
#oo_num a:visited{color:#fff;}
#oo_num a:hover{color:#fff;}
#oo_num a:active{color:#fff;}
#oo_num a.linkdefault {background:#999;width:28px;height:18px;}
#oo_num a.linkthis:link {background:#F60;width:28px;height:18px;color:#FFF;}
#oo_num a.linkthis:visited {background:#F60;width:28px;height:18px;color:#FFF;}
首页调用代码如下：
程序代码
<div id="oo_img" >
{dede:arclist att='3' row='5' titlelen='24' orderby='pubdate' function='FormatScript(@me)'}
<a href="[field:arcurl/]" target="_blank" name="oo_img_name" onmouseover="change_s(false);" onmouseout="change_s(true);"><img src="[field:picname/]" alt="[field:title/]" /></a>
{/dede:arclist}
</div>
<div id="oo_num">
<a href="javascript:change_j(1);" name="oo_link_name" target="_self">1</a>
<a href="javascript:change_j(2);" name="oo_link_name" target="_self">2</a>
<a href="javascript:change_j(3);" name="oo_link_name" target="_self">3</a>
<a href="javascript:change_j(4);" name="oo_link_name" target="_self">4</a>
<a href="javascript:change_j(5);" name="oo_link_name" target="_self">5</a>
</div>
<script type="text/javascript">
<!--
var oo_img_name=document.getElementsByName("oo_img_name");
oo_img_name[0].className="imgthis";
var oo_link_name=document.getElementsByName("oo_link_name");
oo_link_name[0].className="linkthis";
var i=oo_img_name.length;
var j=0;
var s=true;
change_img();
function change_s(ss){s=ss;}
function change_j(ii){
j=ii-1;
oo_setFocus(ii-1);}
function change_img(){
if(j>=i) j=0;
if(j<i&s==true) oo_setFocus(j++);
setTimeout("change_img()",3000);}
function oo_setFocus(ii)
{
for(var tmp=0;tmp<i;tmp++) {
oo_img_name[tmp].className="imgdefault";
oo_link_name[tmp].className="linkdefault";
}
oo_img_name[ii].className="imgthis";
oo_link_name[ii].className="linkthis";
}
-->
</script>
文章来源:
http://www.windsfly.cn/blog/default.asp?id=755
1.数据库的设计
尽量把数据库设计的更小的占磁盘空间.
1).尽可能使用更小的整数类型.(mediumint就比int更合适).
2).尽可能的定义字段为not null,除非这个字段需要null.
3).如果没有用到变长字段的话比如varchar,那就采用固定大小的纪录格式比如char.
4).表的主索引应该尽可能的短.这样的话每条纪录都有名字标志且更高效.
5).只创建确实需要的索引。索引有利于检索记录，但是不利于快速保存记录。如果总是要在表的组合字段上做搜索，那么就在这些字段上创建索引。索引的第一部分必须是最常使用的字段.如果总是需要用到很多字段，首先就应该多复制这些字段，使索引更好的压缩。
6).所有数据都得在保存到数据库前进行处理。
7).所有字段都得有默认值。
8).在某些情况下,把一个频繁扫描的表分成两个速度会快好多。在对动态格式表扫描以取得相关记录时，它可能使用更小的静态格式表的情况下更是如此。
2.数据据优化
1).尽量使用长连接. (PHP开发这个最好不要使用, 占资源会死机的)
2).explain 复杂的SQL语句。
3).如果两个关联表要做比较话，做比较的字段必须类型和长度都一致.
4).LIMIT语句尽量要跟order by或者 distinct.这样可以避免做一次full table scan.
5).如果想要清空表的所有纪录,建议用truncate table tablename而不是delete from tablename.
6).能使用STORE PROCEDURE 或者 USER FUNCTION的时候.
7).在一条insert语句中采用多重纪录插入格式.而且使用load data infile来导入大量数据，这比单纯的indert快好多.
8).经常OPTIMIZE TABLE 来整理碎片.
9).还有就是date 类型的数据如果频繁要做比较的话尽量保存在unsigned int 类型比较快。
<label style="vertical-align:top">表单说</label>
<textarea name="textarea"></textarea>上面这个代码就可以了. 兼职IE6,IE7,FF 其他的没有试过.