大家在设计网站的时候尽量要遵循W3C代码规范,这将对网站的优化,网站的推广,搜索引擎的友好有很大帮助的。以下是W3C XHTML 1.0代码规范需要主要的几点。
1. img标签的alt属性
img标签的alt属性是当src属性所指向的地址无效时用来代替图片显示的文字。缺少alt属性将无法通过XHTML标准验证,无论如何我们在写img标签时一定要加上alt属性,使用者也能在图片无效时知道这张图片的作用。
2. 同一页面内标签id属性值不得重复
同一页面内标签id属性值应是唯一的,如果需重复使用请用class属性代替。
3. 所有标签元素属性都使用小写
XHTML建议标签名称及其属性都使用小写。所有属性都必须有值。比如“checked”和“selected”属性值就为它自己本身。
<input type=”checkbox” checked=”checked” />
<option selected=”selected”>123</option>
阅读全文»
1. 什么是javascript?
javaScript 是根据 “ECMAScript” 标准制定的网页脚本语言。
2. javascript的运行平台
javascript是运行在客户端浏览器上的客户端脚本语言。现在基本所有浏览器都支持javascript。
3. javascript的特点
javaScript 使网页增加互动性。javaScript 使有规律地重复的HTML文段简化,减少下载时间。javaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由服务器端验证。javaScript 的特点是无穷无尽的,只要你有创意。
阅读全文»
当我们在给某个元素定义了样式float属性为left或right时,此元素会变为浮动层,浮动在它的父级元素。如果要清除浮动,就要使用样式的clear属性。但是IE6浏览器与其它浏览器清除方法有些不同。IE6浏览器清除浮动需要在浮动层的父级元素使用clear:both和zoom:1两个属性,IE7和IE8和其它浏览器清除浮动需要在浮动层的父级元素使用clear:both和overflow:hidden两个属性。clear:both属性会清除浮动层的父级元素的浮动,overflow:hidden属性会清除浮动层本身,致使浮动层和浮动层父级元素处于同一层空间,IE6浏览器的zoom:1属性和其它款浏览器overflow:hidden属性效果相同,zoom:1触发IE6隐藏私有属性Layout清除浮动层本身,IE6浏览器上使用overflow:hidden属性是不能够清除浮动的,相应效果请自行查看演示页面。最后清除浮动的样式组合如下:
clear: both;
overflow: hidden;
zoom: 1;
演示:http://demo.joyfulboy.cn/css/clearFloat/
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
javascript 在不同浏览器下取区域高度宽度方法
<script type=”text/javascript”>// <![CDATA[
function getInfo(){
var s = “”;
s += “网页可见区域宽:”+ document.body.clientWidth;
s += ” 网页可见区域高:”+ document.body.clientHeight;
s += ” 网页可见区域宽:”+ document.body.offsetWidth + ” (包括边线和滚动条的宽)”;
s += ” 网页可见区域高:”+ document.body.offsetHeight + ” (包括边线的宽)”;
s += ” 网页正文全文宽:”+ document.body.scrollWidth;
s += ” 网页正文全文高:”+ document.body.scrollHeight;
s += ” 网页被卷去的高(ff):”+ document.body.scrollTop;
s += ” 网页被卷去的高(ie):”+ document.documentElement.scrollTop;
s += ” 网页被卷去的左:”+ document.body.scrollLeft;
s += ” 网页正文部分上:”+ window.screenTop;
s += ” 网页正文部分左:”+ window.screenLeft;
s += ” 屏幕分辨率的高:”+ window.screen.height;
s += ” 屏幕分辨率的宽:”+ window.screen.width;
s += ” 屏幕可用工作区高度:”+ window.screen.availHeight;
s += ” 屏幕可用工作区宽度:”+ window.screen.availWidth;
s += ” 你的屏幕设置是 “+ window.screen.colorDepth +” 位彩色”;
s += ” 你的屏幕设置 “+ window.screen.deviceXDPI +” 像素/英寸”;
alert (s);
}
// ]]></script>
javascript控制css中style.height和style.width时应注意px单位问题
1、document.getElementById(‘div’).style.height=100; //这样写以IE里会正确执行,把ID为div元素高改为100象素。
2、但是读的时候,alert(document.getElementById(‘div’).style.height + 10); //这样将会出错,因为读取style.height的时候,会以”100px”的形式出现。
3、到了FF里,不光读出来的是”100px”,写的时候,也必须是document. getElementById(‘div’).style.height=’100px’;这样才能有效果。
在IE中一般用js:obj.onselectstart=function(){return false;}
firefox用CSS:-moz-user-select:none
IE下面用JS
<script type=”text/javascript”>
document.onselectstart = function(){
return false;
}
</script>
FF下面CSS
<style type=”text/css”>
body {
-moz-user-select: none;
}
</style>
今天遇到一个问题,就是有一个 div 拥有 float 属性,它的上一层 div 高度为 100% ,此时在IE下面显示正常,上一层 div 高度没有问题,但是在FF下出错,FF下没有计算 float 的高度。就是说在IE下面 float 相当于移动,在FF下面 float 相当于浮动是不计算高度。所以,需要在它的上一层清除这个 float ,清除代码使用 overflow: auto; 详细请看演示。
演示地址:http://demo.joyfulboy.cn/css/overflow-clean-float.html
演示地址:http://demo.joyfulboy.cn/js/choice/
JS调用说明:
函数调用方法:
choice(参数1, 参数2, 参数3, ……, 参数n);
参数说明:
参数1 = this; 当前对象;
参数2 = “你需要显示的 DIV ID”; 字符串类型;
参数3 – 参数n = “你需要隐藏的 DIV ID”; 字符串类型;
参数顺序不允许颠倒;
例如:onmouseover = ‘choice(this, “show1”, “show2”);’;
此时当鼠标移动到此上面时ID为show1的DIV显示,ID为show2的DIV隐藏;
例如:onmouseout = ‘choice(this);’;
此时当鼠标移开此上面时className=choice
在线演示地址1:http://demo.joyfulboy.cn/js/tagswitch/1/
在线演示地址2:http://demo.joyfulboy.cn/js/tagswitch/2/
看演示,两种方法,显示效果都一样。
演示1所用的方法是把不需要显示的内容所在的DIV块用CSS样式隐藏了,好处是任何被隐藏的内容也会被搜索引擎识别并抓取,坏处是样式如果不加载的话被隐藏的内容就会显示出来。
演示2所用的方法是利用JS把所显示的内容动态写进DIV块内,DIV块永远是那一个DIV,内容是动态变的,好处是不受CSS样式的影响,坏处就是搜索引擎不会抓取动态改变的内容。
JS调用方法自己参考演示页面源码或查看JS文件注释,这里不想多说了,个人推荐应用第二中方法。
在线演示地址:http://demo.joyfulboy.cn/js/loader/
JS调用方法:
<script type=”text/javascript” src=”http://www.joyfulboy.cn/demo/js/loader/js/loader.js”></script>
<script type=”text/javascript”>
<!–
开启载入效果(“载入中…”);
//–>
</script>
在线演示地址:http://demo.joyfulboy.cn/js/openlink/2/
此JS应用可以使点击鼠标即可点击某个链接,目前只兼容IE浏览器。
函数调用方法:
GetImageLink(12, “imagelinks”, “counter”, 0, document.getElementById(“image1”), document.getElementById(“image2”), document.getElementById(“image3”));
参数说明:第一个参数“12”是设置 cookie 过期时间,从当前起12小时后过期,第二个参数“imagelinks”是设置 cookie 存储链接过期时间时使用的名字,第三个参数“counter”是设置 cookie 存储的计数器名字,第四个参数“0”是否同步打开所有链接,0为不同步,1为同步。第五至第N个参数为图片链接节点的上一个父节点对象。具体查看演示HTML页面。
详细的参数说明:第2和第3个参数必须是字符串类型,如果有多个页面调用此方法必须每个页面这两个参数不同,否则会出错。第4个参数为同步打开,即点击一下鼠标打开所设置的所有链接。第5至第N个参数可以为对象也可以为元素节点上的ID名字,也就是字符串。还可以为数组,但是数组内元素必须全部为DOM对象,否则会报错。