01-HTML5
1前言
1.1认识HTML5
前面我们学习的html是什么?
Html4.0
网页开发:html 结构 4.0
Css ->样式 2.0
Js 行为用户交互
HTML5 是html4.0升级版
结构 Html5、样式css3、行为:API都有所
增强
HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等,可以帮助开发者创建富互联网应用,还提供了一些JavascriptAPI,如地理定位、重力感应、硬件访问等,可以在浏览器内实现类原生应用,甚至结合Canvas我们可开发网页版游戏。
广义概念:HTML5代表浏览器端技术的一个发展阶段。在这个阶段,浏览器呈现技术得到了一个飞跃发展和广泛支持,它包括:HTML5, CSS3, Javascript, API在内的一套技术组合
H5范称
HTMl + CSS3 + JS
优点:
http://www.intertid.com/school/2014/595568.shtml
1.2 语法规范
HTML5在语法规范上也做了比较大的调整,去除了许多冗余的内容,书写规则更加简洁、清晰。
见代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<P>我是一段文本,我闭合标签用了大写
</P>
<Img src="1.jpg" alt="">
</body>
</html>
特点:
1、更简洁
2、更宽松
单标签不用写关闭特号
双标签省略结束标签
html、head、body、colgroup、tbody可以完全省略
实际开发中应规范书写,不建议太随意!
2语义标签
语义标签对于我们并不陌生,如<p>表示一个段落、
<ul>表示一个无序列表<h1>~<h6>表示一系列标题等,
在此基础上HTML5增加了大量更有意义的语义标签,更
有利于搜索引擎或辅助设备理解HTML页面
传统的做法我们或许通过增加类名如class=header"、class="footen”,使HTML页面具有语义性,但是不具有通用性。
HTML5则是通过新增语义标签的形式来解决这个问题,例如<header></header>、<footer></footer>等,这样就可以使其具有通用性。
此章节学习目的为了解增加语义标签的目的,以及各语义标签所表达的意义,在网页布局中能够合理使用标签。
传统网页布局:
<!-- 头部 -->
<div class="header">
<ul class="nav"></ul>
</div>
<!“主体部分 -->
<div class="main">
<!-- 文章 -->
<div class="article"></div>
<!-- 侧边栏 -->
<div class="aside></div>
</div>
<!-- 底部 -->
<div class="footer"></div>
H5 经典网页布局:
<!-- 头部>
<header>
<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
<!-- 文章想L
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>
<!-- 底部 -->
<footer></footer>
2.1常用新语义标签
<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章如文章、评论、帖子、
博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组 与 ul > li
做个比较
<mark> 表示标记(文本有背景颜色,表示标
记)
<progress> 表示进度
<time> 表示日期( 包裹时间 )
本质上新语义标签与<div>、<span>没有区别,R 是其具有表意性,使用时除了在HTML结构上需要注意外,其它和普通标签的使用无任何差别,可以理解成<div class="nav“> 相当于<nav>。不要好奇,它只是一个标签!
尽量避免全局使用header 、footer、aside等语义标签。
2.2兼容处理
(我们在测试ie的兼容的时候,有一个叫做ietest的
软件,这个软件可以模拟ieb-ie11)
在不支持HTML5新标签的浏览器里,会将这些新
的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement(’tagName)创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(’tagName')来创建一遍,这样E低版本也能正常解析HTML5新标签了,在实际开发中我们更多采用的是通过检测E浏览器的版本来加载三方的一个JS库来解决兼容问题。
<!--[if lte IE 8]>
<script>
src="./js/html5shiv.min.is">
</script>
<! [endif]-->
3表单
伴随着互联网富应用以及移动开发的兴起,传统的Web表单已经越来越不能满足开发的需求,所以HTML5在Web表单方向也做了很大的改进,如拾色
器、日期时间组件等,使表单处理更加高效。此章节学习目的,了解HTML5表单的新增的特性,以及PC和移动设备间的差异,其兼容性较差。
3.1输入类型(表单类型,表单元素,
表单属性,表单事件)
email 输入email格式
tel 手机号 码
url 只能输入url格式
number 只能输入数字
search 搜索框
range 范围 滑动条
color 拾色器
time 时间
date 日期 不是绝对的
时间日期
month 月份
week 星期
部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。
3.2表单元素(标签)
智能表单(输入指定文本提供备选)
<datalist> 数据列表
与input 配合使用
<input type="text" list="car
<datalist id="car
<option>宝马</option>
<option>宝骏</option>
<option>宝强</option>
<option>宝宝</option>
<option>奥迪</option>
<option>奥迪奥</option>
<option>迪奥</option>
</datalist>
<!--进度条 -->
<progress value="60" max="100"></progress>
<!--度量器 -->
<meter value="50" min="0" max="100" low="60" high="80"></meter>
3.3表单层性
placeholder 占位符
autofocus 获取焦点(打开页面焦点自动锁定
在当前目标)
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成,用于表单元素,也可用于表单自身(on/off) 需要放在表单内,同时加上name属性,同时成功提交,默认是autocomplete="on” 关闭
autocomplete="off"
(记录上次输入的信息,e-mail默认不会记录)
form 指定表单项属于哪个form,处理复杂表
单时会需要
novalidate 关闭验证,可用于<form>标签
(写在form,不会对表单进行验证)
required 必填项(不填写无法提交表单)
pattern 正则表达式 验证表单
手机号:<input type="tel" name="tel"
required="required'"
pattern="^(\+86)?1[3, 5, 8](\df9子)$">
<form action="" autocomplete="on'"
id="form">
<fieldset>
<legend>表单属性</legend>
<label for="">
autofocus: <input
type="text" autocomplete="on'"
name="autofocus" autofocus
required>
</label>
<label for="">
placeholder:<input
type="text" pattern="\D+"placeholder="这是一个占位符"novalidate>
</label>
<label for="">
multiple: <input
type="file" multiple>
</label>
<input type="submit"
value="提交">
</fieldset>
</form>
<label for="">
表单外的一个元素:
<input type="text" name="outer"
form="form">
</label>
3.4表单事件
oninput 用户输入内容时触发,可用于移动端输入字
数统计(js直接调用)
oninvalid验证不通过时触发(is直接调用)
<form action="" autocomplete="on'"
id="form">
<fieldset>
<legend>表单属性</legend>
<label for="">
oninput: <input
type="email" id="input">
</label>
<input type="submit
value="提交">
</fieldset>
</form>
<sCript>
var input =
document.getElementById("input");
input.oninvalid = function ()
this.setCustomValidity("请输
入正确的邮箱地址")
子
</script>
4多媒体
在HTML5之前,在网页上播放音频/视频的通用方法是利用Flash来播放,但是大多情况下,并非所有用户的浏览器都安装了Flash插件,由此使得处理音频/视频播放变的非常复杂,并且移动设备的浏览器并不支持Flash插件。
Media palyer
此章节学习目的,了解如何通过HTML5播放音频/视频,以及针对不同浏览器所支持的格式,做多浏览器兼容处理。
4.1 音顿
HTML5通过<audio>标签来解决音频播放的问题。
使用相当简单,如下图所示
<!--通过src指定音频文件路径即可--><audio src="./music/xxx.mp3"></audio>
并且可以通过附加属性可以更友好控制音频的播放,t如:
autoplay 如果出现该属性,则视频在就绪后马上播放controls如果出现该属性,则向用户显示控件,比如播放按钮。
loop 循环播放
preload 预加载同时设置autoplay时些属性失效
多测览器支持的方案
<audio controls>
<!--通过source标签指定多格式音频文
件-->
<source src="./music/xxx.mp3"><source src="./music/xxx.wav"><source src="./music/xxx.ogg">您的浏览器不支持HTML音频播放功能
</audio>
4.2视频
HTML5通过<video>标签来解决音频播放的问题。
同音频播放一样,<video>使用也相当简单,如下图
<!--通过src属性指定视频文件的路径--><video src="./video/movie.mp4"controls="controls"></video>
同样,通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload预加载,同时设置 了autoplay, 此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度
由于版权等原因,不同的浏览器可支持播放的格式是不
一样的
多测览器支持的方案
<video controls="controls">
<!--通过source标签指定多格式视频文
件-->
<source src="./video/xxx.ogg"><source src="./video/xxx.mp4">您的浏览器不支持HTML视频播放功能
</video>
5 D0M扩展
5.1获取元素
1、document.getElementsBuClassName(class')通过类名获取元素,以类数组形式存在。
2、document.querySelector(‘#box')通过CSS选择器获取元素,特合匹配条件的第1个元素。
3、document.querySelectorAll('selector')通过CSS选择器获取元素,以类数组形式存在。
5.2类名操作
1、Node.classlist.add(’class)添加class
2、Node.classlist.remove('class')移除class
3、Node.classlist.toggle('class')切换class,有则移除,
无则添加
4、Node.classlist.contains(’class)检测是否存在class Node指一个有效的0OM节点,是一个通称。
5.3自定义属性
在HTML5中我们可以自定义属性,其格式如下data-
*=”,例如
data-info=“我是自定义属性”,通过Node.datasett'info']我们便可以获取到自定义的属性值。
Node.dataset是以类对象形式存在的
当我们如下格式设置时,则需要以驼峰格式才能正确获取
data-my-name="itcast”,获取Node.dataset['myName']
6新增API
6.1多媒体
方法:load()加载、play()播放、pause) 暂停
属性:currentTime 视频播放的当前进度(播放的当前时
间)
duration:视频的总时间paused:视频播放的状态.
事件:
oncanplay:事件在用户可以开始播放视频/音频( audio/video)时触发。
ontimeupdate:通过该事件来报告当前的播放进度
(播放时一直触发)
(当拖动进度条时触发该事件bncanplay
onended:播放完时触发
当浏览器能够开始播放指定的音频/视频时,发生 canplay 事件。吃会当音频/视频处于加载过程中时,会依次发生以下事件:
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough
全屏:video.webkitRequestFullScreen();
var btn = document.querySelector(".switch")
var video = document.querySelector("video")
var totalTime = document.querySelector(".total-time")
var currTime = document.querySelector(".curr-time")
var currPro = document.querySelector(".curr-progress")
var extend = document.querySelector(".extend")
btn.onclick = function() {
if (video.paused) {
video.play()
this.classList.remove("icon-play")
this.classList.add("icon-pause")
} else {
video.pause()
this.classList.remove("icon-pause")
this.classList.add("icon-play")
}
}
//当视频可以播放时
video.oncanplay = function() {
time = video.duration //获取视频时长
console.log(time);
var h = Math.floor(time / 3600)
var m = Math.floor(time % 3600 / 60)
var s = Math.floor(time % 60)
h = h > 10 ? h : "0" + h
m = m > 10 ? h : "0" + m
s = s > 10 ? h : "0" + s
totalTime.innerHTML = h + ":" + m + ":" + s
}
//当视频播放时
video.ontimeupdate = function() {
var cTime = video.currentTime
var h = Math.floor(cTime / 3600)
var m = Math.floor(cTime % 3600 / 60)
var s = Math.floor(cTime % 60)
h = h > 10 ? h : "0" + h
m = m > 10 ? h : "0" + m
s = s > 10 ? h : "0" + s
var value = cTime / time
console.log(value);
currTime.innerHTML = h + ":" + m + ":" + s
currPro.style.width = value * 100 + "%"
}
extend.onclick = function() {
console.log(1)
video.webkitRequestFullScreen()
}
6.2拖搜
在HTML5的规范中,我们可以通过为元素增加
draggable="true”来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启的。
6.2.1拖搜元素
页面中设置了draqgable="true"属性的元素
6.2.2目标元素
页面中任何一个元素都可以成为目标元素
6.2.3事件监听
拖搜元素
ondrag 应用于拖搜元素,整个拖拽过程都会调用
ondragstart 应用于拖搜元素,当拖搜开始时调用
ondragleave 应用于拖搜元素,当鼠标离开拖拽元素
时调用
ondragend 应用于拖搜元素,当拖拽结束时调用
目标元素
ondragenter 应用于目标元素,当拖搜元素进入时调
用
ondragover 应用于目标元素,当停留在目标元素上时调
用
preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情。
6.3历史
提供window.history,对象我们可以管理历史记录,可用于单页面应用,Single Page Application, 可以无刷新改变网页内容。
旧版本浏览器..
history.back) 回退
history.forward()前进
6.4 Web存储
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以
document.cookie来进行存储的,但是由于其存储大小只有k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案。
Storage 存储
window.sessionStorage
window.localStorage
(向本地保存数据,有可能在浏览器内存里面,有可能在
硬盘上面.)
6.4.1 特性
1、设置、读取方便
2、容量较大,sessionStorage约5M、localStorage约
20M
3、只能存储字符串,可以将对象JSON.stringify()编码
后存储
window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
window.localStorage
1、永久生效,除非手动刪除
2、可以多窗口共享
方法详解
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内
容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容