HTML5中不支持。
定义预格式文本。
4
Window事件属性
window对象触发的事件。
适用于
标签:属性
值
描述
onafterprint
script
在打印文档之后运行脚本
onbeforeprint
script
在文档打印之前运行脚本
onbeforeonload
script
在文档加载之前运行脚本
onblur
script
当窗口失去焦点时运行脚本
onerror
script
当错误发生时运行脚本
onfocus
script
当窗口获得焦点时运行脚本
onhaschange
script
当文档改变时运行脚本
onload
script
当文档加载时运行脚本
onmessage
script
当触发消息时运行脚本
onoffline
script
当文档离线时运行脚本
ononline
script
当文档上线时运行脚本
onpagehide
script
当窗口隐藏时运行脚本
onpageshow
script
当窗口可见时运行脚本
onpopstate
script
当窗口历史记录改变时运行脚本
onredo
script
当文档执行再执行操作(redo)时运行脚本
onresize
script
当调整窗口大小时运行脚本
onstorage
script
当文档加载加载时运行脚本
onundo
script
当文档执行撤销操作时运行脚本
onunload
script
当用户离开文档时运行脚本
表单事件
由HTML表单内部的动作触发的事件。
适用于所有HTML5元素,不过最常用于表单元素中:
属性
值
描述
onblur
script
当元素失去焦点时运行脚本
onchange
script
当元素改变时运行脚本
oncontextmenu
script
当触发上下文菜单时运行脚本
onfocus
script
当元素获得焦点时运行脚本
onformchange
script
当表单改变时运行脚本
onforminput
script
当表单获得用户输入时运行脚本
oninput
script
当元素获得用户输入时运行脚本
oninvalid
script
当元素无效时运行脚本
onreset
script
当表单重置时运行脚本。
HTML5不支持。
onselect
script
当选取元素时运行脚本
onsubmit
script
当提交表单时运行脚本
键盘事件
由键盘触发的事件。
适用于所有HTML5元素:
属性
值
描述
onkeydown
script
当按下按键时运行脚本
onkeypress
script
当按下并松开按键时运行脚本
onkeyup
script
当松开按键时运行脚本
鼠标事件
由鼠标货相似的用户动作触发的事件。
适用于所有HTML5元素:
属性
值
描述
onclick
script
当单击鼠标时运行脚本
ondblclick
script
当双击鼠标时运行脚本
ondrag
script
当拖动元素时运行脚本
ondragend
script
当拖动操作结束时运行脚本
ondragenter
script
当元素被拖动至有效的拖放目标时运行脚本
ondragleave
script
当元素离开有效拖放目标时运行脚本
ondragover
script
当元素被拖动至有效拖放目标上方时运行脚本
ondragstart
script
当拖动操作开始时运行脚本
ondrop
script
当被拖动元素正在被拖放时运行脚本
onmousedown
script
当按下鼠标按钮时运行脚本
onmousemove
script
当鼠标指针移动时运行脚本
onmouseout
script
当鼠标指针移出元素时运行脚本
onmouseover
script
当鼠标指针移至元素之上时运行脚本
onmouseup
script
当松开鼠标按钮时运行脚本
onmousewheel
script
当转动鼠标滚轮时运行脚本
onscroll
script
当滚动元素滚动元素的滚动条时运行脚本
媒介事件
由视频、图像以及音频等媒介触发的事件。
适用于所有HTML5元素,不过在媒介元素(诸如audio、embed、img、object以及video)中最常用:
属性
值
描述
onabort
script
当发生中指事件时运行脚本
oncanplay
script
当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythrough
script
当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchange
script
当媒介长度改变时运行脚本
onemptied
script
当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本
onended
script
当媒介已抵达结尾时运行脚本
onerror
script
当在元素加载期间发生错误时运行脚本
onloadeddata
script
当加载媒介数据时运行脚本
onloadedmetadata
script
当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstart
script
当浏览器开始加载媒介数据时运行脚本
onpause
script
当媒介数据暂停时运行脚本
onplay
script
当媒介数据将要开始播放时运行脚本
onplaying
script
当媒介数据已开始播放时运行脚本
onprogress
script
当浏览器正在取媒介数据时运行脚本
onratechange
script
当媒介数据的播放速率改变时运行脚本
onreadystatechange
script
当就绪状态(ready-state)改变时运行脚本
onseeked
script
当媒介元素的定位属性[1]不再为真且定位已结束时运行脚本
onseeking
script
当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled
script
当取回媒介数据过程中(延迟)存在错误时运行脚本
onsuspend
script
当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate
script
当媒介改变其播放位置时运行脚本
onvolumechange
script
当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting
script
当媒介已停止播放但打算继续播放时运行脚本
随着3G的普及,越来越多的人使用手机上网。
手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是136...2014/04/02
随着3G的普及,越来越多的人使用手机上网。
手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。
同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。
于是,网页设计师不得不面对一个难题:
如何才能在不同大小的设备上呈现同样的网页?
很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本。
这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。
于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?
一、"自适应网页设计"的概念
2010年,EthanMarcotte提出了"自适应网页设计"(ResponsiveWebDesign)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。
如果屏幕宽度大于1300像素,则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。
如果屏幕宽度在400像素以下,则6张图片分成三行。
mediaqueri.es:
http:
//mediaqueri.es/上面有更多这样的例子。
这里还有一个测试小工具:
二、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的?
其实并不难。
首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。
对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
--[ifltIE9]>
//css3-mediaqueries-
[endif]-->
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。
这一条非常重要。
具体说,CSS代码不能指定像素宽度:
width:
xxxpx;
只能指定百分比宽度:
width:
xx%;
或者
width:
auto;
四、相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body{
font:
normal100%Helvetica,Arial,sans-serif;
}
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1{
font-size:
1.5em;
}
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small{
font-size:
0.875em;
}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
五、流动布局(fluidgrid)
"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main{
float:
right;
width:
70%;
}
.leftBar{
float:
left;
width:
25%;
}
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
另外,绝对定位(position:
absolute)的使用,也要非常小心。
六、选择加载CSS
"自适应网页设计"的核心,就是CSS3引入的MediaQuery模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
media="screenand(max-device-width:
400px)"
href="tinyScreen.css"/>
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width:
400px),就加载tinyScreen.css文件。
media="screenand(min-width:
400px)and(max-device-width:
600px)"
href="smallScreen.css"/>
如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
@importurl("tinyScreen.css")screenand(max-device-width:
400px);
七、CSS的@media规则
同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
@mediascreenand(max-device-width:
400px){
.column{
float:
none;
width:
auto;
}
#sidebar{
display:
none;
}
}
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:
none)、宽度自动调节(width:
auto),sidebar块不显示(display:
none)。
八、图片的自适应(fluidimage)
除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码:
img{max-width:
100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img,object{max-width:
100%;}
老版本的IE不支持max-width,所以只好写成:
img{width:
100%;}
此外,windows平台缩放图片时,可能出现图像失真现象。
这时,可以尝试使用IE的专有命令:
img{-ms-interpolation-mode:
bicubic;}
或者,EthanMarcotte的imgSizer.js。
addLoadEvent(function(){
varimgs=document.getElementById("content").getEle
展开阅读全文
相关搜索