html5(二)

时间:2020-9-16 作者:admin

html5(二)

一、新特性

1.用于绘画的canvas元素
2.用于媒体回放的videoaudio 元素
3对本地离线存储的更好支持
4.新的特殊内容元素比如(articlefooterheadernavsection)
5.新的表单控件比如(calendardatetimeemailurlsearch)

二、HTML全局属性

1.accesskey 规定激活(使元素获得焦点) 元素的快捷键

<a href="http://www.w3school.com.cn/" accesskey="w">W3School</a><br /><!-- 复制可用-- >

2.class 规定元素的类名
3.contenteditable属性规定元素内容是否可编辑[true为可编辑/false为不可编辑]

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p><!-- 复制可用-- >

4.contextmenu 属性规定元素的上下文菜单
html5(二)
(仅支持火狐)
5.data-* 用于存储页面或应用程序的私有自定义数据.属性值somevalue

<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
</head>
<body>

<h1>物种</h1>

<p>点击某个物种来查看其类别:</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>  
</ul>

html5(二)

6.**dir **规定元素内容的文本放向
[ltr 默认从左向右的文本方向
rtl 自右向左的文本方向]
7.draggable 规定元素是否可拖动
[true 规定元素可拖动的
false 规定元素不可拖动
auto 使用浏览器默认行为]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
	ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
	ev.preventDefault();
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

</body>

html5(二)
html5(二)

8.hidden 规定元素仍未或不再相关
9.id规定HTML元素的唯一的id
10.lang 规定元素内容的语言
11.spellcheck 规定是否对元素进行拼写和语法检查
12. style 规定元素的行内样式
13. **tabindex ** 规定远胜于的tab键控制次序(当tab键用于导航时)
14. title 规定关于元素的额外信息
15. translate 规定是否翻译元素内容
yes 规定应该翻译元素内容
no 规定不翻译元素内容

三、video对象

1、video对象属性

1.audioTracks 返回表示可用音频轨道的AudioTrackList对象
2.autoplay 设置或返回是否在就绪(加载完成)后随即播放视频
3.buffered 返回表示视频已经缓冲部分的TimeRanges对象
4.controller 返回表示视频当前媒体控制器的MediaController对象。
5.controls 设置或返回视频是否应该显示控件(比如播放/暂停等)。
6.crossOrigin 设置或返回视频的CORS设置。
7.controls 设置或返回视频是否应该显示控件(比如播放/暂停等)。
8. crossOrigin设置或返回视频的CORS设置。
9.currentSrc 返回当前视频的URL。
10.currentTime 设置或返回视频中的当前播放位置(以秒计)。
11.defaultMuted 设置或返回视频默认是否静音。
9. defaultPlaybackRate设 置或返回视频的默认播放速度。
13.duration 返回视频的长度(以秒计)。
10. ended返回视频的播放是否已结束。
15.error 返回表示视频错误状态的MediaError对象。
11. height 设置或返回视频的height属性的值。
12. loop设置或返回视频是否应在结束时再次播放。
13. mediaGroup 设置或返回视频所属媒介组合的名称。
14. muted 设置或返回是否关闭声音。
15. networkState返回视频的当前网络状态。
16. paused 设置或返回视频是否暂停。
17. playbackRate 设置或返回视频播放的速度。
18. played返回表示视频已播放部分的TimeRanges对象。
19. poster设置或返回视频的poster属性的值。
20. preload设置或返回视频的preload属性的值。
26 readyState 返回视频当前的就绪状态。
21. seekable 返回表示视频可寻址部分的TimeRanges对象。
22. seeking返回用户当前是否正在视频中进行查找。
29.src 设置或返回视频的src属性的值。
23. startDate 返回表示当前时间偏移的Date对象。
24. textTracks 返回表示可用文本轨道的TextTrackList对象。
25. videoTracks 返回表示可用视频轨道VideoTrackList 对象。
26. volume 设置或返回视频的音量。
27. width 设置或返回视频的width属性的值。

2、video对象方法

1.addTextTrack() 向视频添加新的文本轨道
2.canPlayType() 检查浏览器是否能播放指定的视频类型
3. load() 重新加载视频元素
4. play() 开始播放视频
5. pause() 暂停当前播放的视频

三、HTML事件属性

1、Window事件属性,针对window对象触发时间

1.onafterprint 文档打印后运行的脚本
2. onbeforeprint 文档在打印后运行的脚本
3. onbeforeunload 文档在打印前运行的脚本
4. onerror 在错误发生时运行的脚本
5. onhaschange 在文档已发生改变时运行的脚本
6. onload 页面结束加载之后触发
7. onmessage 在消息被处罚是运行的脚本
8. ossline 当文档离线运行是的脚本
9. ononline 在文档上线时运行的脚本
10. onpagehide 当窗口隐藏时运行的脚本
11. onpageshow 当窗口成为可见运行的脚本
12. onpopstate 当窗口历史记录发生改变时运行的脚本
13. onredo 当文档执行撤销时运行的脚本
14. onresize 当浏览器窗口被调整大时触发
15. onstorage 在Web Storage 区域更新后运行的脚本
16. onundo 在文档执行undo时运行的脚本
17. onunload 一旦页面已下载时触发(或者浏览器窗口已被关闭)

2、from事件表单内的动作触发的事件

1.onblur 属性在元素失去焦点时触发
2.onchange 在元素值改变时触发
3.oncontextmenu 当上下菜单被触发时运行的脚本
4.onfocus 属性在元素获得焦点时触发
5.onformchange 在表单发生改变时运行的脚本
6.onforminput 当元素获得用户输入时运行的脚本
7.oninput 当元素获得用户输入时运行的脚本
8.oninvalid 当元素无效时运行的脚本
9.onreset 当表单中的重置按钮被点击时触发H5中不支持
10.onselect 属性在元素中的文本被选中时触发
11.onsubmit 属性在提交表单时触发

3、keyboard事件

1.onkeydown 属性在用户按下时触发
2.onkeypress 属性在按下抬起后触发
3.onkeyup 属性在用户释放按键时触发
html5(二)

4、Mouse(鼠标)事件 由鼠标或类似用户动作触发的事件

1.onclick 属性由元素上的鼠标点击触发
2.ondblclick 属性在鼠标双击时触发
3.ondrag 元素被拖动时运行的脚本
4.ondragend 元素被拖动操作末端运行的脚本
5.ondragenter 当元素被拖动到有效拖放区域时运行的脚本
6.ondragleave 当元素离开有效拖放目标时运行的脚本
7.ondragover 当元素在有效拖放目标上正在被拖动时运行的脚本
8.ondragstart 在拖动操作开端运行的脚本
9.ondrop 当被拖元素正在被拖放时运行的脚本
10.onmousedown 属性在鼠标按钮元素上按下时触发
11.onmouseup松开鼠标时触发
12.onmousemove 鼠标在元素内移动时触发
13.onmouseover 鼠标移入元素时触发
14. onmouseout 鼠标移出元素时触发
15. onmousewheel 当鼠标滚轮触发时运行脚本
16. onscroll 当元素滚动时运行的脚本

5、HTML5中的新属性,前面是属性,后面是属性值

1.controls controls如果出现该属性,则向用用户显示控件,比如播放按钮
2.heiget heiget=“240” 设置播放器的高度
3.loop 出现则文件播放完后再次播放
4.muted 规定视频的音频应该被静音
5.preload preload=“auto” 如果出现该属性,则视频在页面加载时进行加载.并预备播放/如果使用autoplay 则忽略该属性
6.poster poster= “/images/w3school.gif”日规定 视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
7.src src=“movie.ogg” 要播放的视频的url
8.width 设置视频播放器的宽度

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。