日期:2014-05-17  浏览次数:20605 次

HTML小技巧
1、在新网页打开:
<a href="http://www.google.com.hk/" target="_blank">Google!</a>

2、跳转到某页的制定位置:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">
Jump to the Useful Tips Section
</a>

3、总是将正斜杠添加到子文件夹。假如你这样书写链接的话:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn /html/"

命名锚经常被用在长的文档中创建目录。可以为每个章节赋予一个命名锚,然后连接到这些锚的链接被置于文档的上部。

假如浏览器找不到已定义的命名锚,那么就会定位到文档的顶端。不会有错误发生。

4、colspan可以规定table里面的th或td跨多少行

5、单选按钮的name必须一样,在value里面写值,才能每次只选一个。

6、fieldset在内容外加边框,即传说中的定义域。其中<legend>可以在边框上面输出文字

7、<optgroup>是给option分类的,不可选

8、<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
给图片加map,可以在特定的位置点击

<map name="planetmap" id="planetmap">

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

具体例子:http://w3school.com.cn/tiy/t.asp?f=html_areamap

9、ismap的用法:在a标签里面(一定要有href值)<img="" ismap>,就可以在状态栏中显示光标所在图片的位置。

10、加横线可以用<hr>

11、分栏可以在text里面加上table,用tr和td来分

12、框架的使用:
<frameset cols="25%,50%,25%">竖的
<frameset rows="25%,50%,25%">横的

13、假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize"。
为不支持框架的浏览器添加 <noframes> 标签。

重要提示:不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。
例如:
<html>

<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>

</frameset>

</html>


14、在<head>中加入<base target="_blank">,则<a>都是在新窗口打开

15、鼠标事件
onclick 脚本 当鼠标被单击时执行脚本
ondblclick 脚本 当鼠标被双击时执行脚本
onmousedown 脚本 当鼠标按钮被按下时执行脚本
onmousemove 脚本 当鼠标指针移动时执行脚本
onmouseout 脚本 当鼠标指针移出某元素时执行脚本
onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本
onmouseup 脚本 当鼠标按钮被松开时执行脚本

16、应该在 "/" 符号前添加一个额外的空格,以使你的 XHTML 与当今的浏览器相兼容。

17、如果在某元素中使用 lang 属性,就必须添加额外的 xml:lang,像这样:
<div lang="no" xml:lang="no">Heia Norge!</div>


18、除了alert外,还有 confirm确认框(显示Yes和no,返回Boolean),可以用变量接然后判断;prompt提示框var name=prompt("请输入您的名字","Bill Gates"),其中Bill Gates是默认值,返回值是输入的值

19、一个简单的显示时间的例子:
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>



20、setTimeout(方法名,时间毫秒),设置的是过多少秒之后运行该方法
clearTimeout(t),其中t=setTimeout(方法名,时间毫秒)