HTML5新特性
标签:nav article footer header aside.....
表单新特性:input type取值date time week email number
表单属性required readonly disabled
表单控件标签:progress datalist ...
(一)、html5的新增特性
1.语义化标签:header article footer section nav
2.表单控件:number date time email url search
3.音频和视频:audio video
4.本地离线存储:localStorage sessionStorage cookies
5.画布:canvas
(二)、对html语义化标签或者语义化的理解
1.使页面内容结构化、便于浏览器、搜索引擎解析
2.即使没有css样式也以一种文档格式显示,并且容易阅读
3.有利于搜索引擎优化
4.便于阅读、维护、理解
(三)、src和href的区别
href是超文本引用,它是指向资源位置,建立与目标文件的联系;
src目的是把资源下载到页面中;
script src="https://wwww.b;
一、H5API(HTML5中的js部分)
在HTML5问世之前,要在网络上展示视频,音频,动画,除了使用第三方自主开发的播放器之外,使用得最多的工具就是Flash,但是需要在浏览器上安装各种插件,并且有时速度很慢。HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容,这两个标签是 <audio> <video>
媒体(音频视频)
画布
拖拽
前端存储
webSocket
(一)、自定义数据属性
data-xxx 是一类被称为自定义数据属性的属性,它赋予我们在所有HTML元素上嵌入自定义数据属性的能力和可以通过HTML和DOM进行专有数据的交换。所有的属性都可以通过HTMLElement.prototype.dataset来访问.自定义属性都可以保存到dataset中。
获取属性
<script>
window.onload = function () {
var div = document.querySelector('div');
// 读取自定义属性 dataset 对象{}
console.log(div.dataset.id);
}
</script>
</head>
<body>
<div id="one" data-id="1001">我是一个div</div>
</body>
(二)、媒体元素
1.video
在video标签出现之前,如果想在网页中播放视频或者音频数据是非常困难的。H5中的video标签可以向使用img显示图片一样简单去播放视频。
video提供了很多属性和方法,我们可以通过直接设定或者通过js控制视频的显示
读写属性 src autoplay poster loop constrols width height 宽高一般不一起使用
constrols是控制条 loop是循环播放 autoplay是自动播放poster='' 封面 放封面地址 muted静音
方法 play播放 pause暂停 paused切换,是否是暂停状态 volume控制音量 currentTime当前播放秒数 playbackRate倍速播放
1.1属性
进度条:controls
自动播放:autoplay
封面:post
循环播放:loop
静音:muted
1.2方法
<script>
$(function () {
// 获取视频标签
var video = $('video')[0]
// 给这一类按钮事件绑定
$('button').click(function () {
if ($(this).text