第一章 HTML5概述
1.1 HTML历史
说HTML历史之前,我们先介绍一个人,三个组织:
ü Tim Berners Lee Web之父,20种标签,可以说是HTML的发明者
ü IETF (Internet Engineering Task Force) 互联网工程任务组 HTML2.0
ü W3C (World Wide Web Consortium ) 万维网联盟 web领域中,最具权威和影响力的国际中立性技术标准机构 HTML3.2 HTML4.0 HTML4.01
ü WHATWG(Web HypertextApplication Technology Working Group) 超文本应用技术工作组 由各大浏览器厂商组成的
五大浏览器,四大内核:
历史:
1.2 认识HTML5
1.2.1 什么是HTML5
HTML5是WHATWG和W3C博弈的结果,它的牵头人是WHATWG。
HTML5简称为:H5
我们现在通常所说的HTML5:
ü 狭义来说:html5就是新的语义化标签,表单元素等,或说是h4的一个升级版本。
ü 广义来说:html5 = html升级版 + css升级版 + js升级版,说白来,就是一个平台。在这个平台上各种技术百花齐放,百家争鸣。
Ø 行业角度:html5就是个标准(规范), 是WEB前端的一个规范。HTML5并不仅仅是HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言。
1.2.2 HTML5和HTML4有什么区别?
ü 语法的改变
ü 新增的标签和废除的标签
ü 新增属性和废除的属性
ü 全局属性
ü 新增的事件(JS API)
语法的改变
1,HTML4的语法是在SGML(Standard Generalized Markup Language)语言的基础上建立起来的。但是SGML语法非常复杂,要开发能够解析SGML语法的程序也很不容易,因此很多浏览器都不包含SGML的分析器。因此,虽然HTML基本上遵从SGML的语法,但是对于HTML的执行在各浏览器之间并没有一个统一的标准。这个时候HTML5为了统一标准,开发出了自已的分析器,各大浏览器厂商陆续地将这个分析器封装到自己的浏览器中,使得HTML5的标准统一化指日可待。
2,DOCTYPE声明的变化
由:
或
变化为:
3,指定字符编码的变化
由:
变化为:
新增的标签和废除的标签,新增属性和废除的属性,全局属性,新增的事件
对于新增的标签和废除的标签,后面我们会重点学习,属性,全局属性,事件也一样。
总之就一句话:HTML5相比于HTML4,是在HTML4的基础上修改了一些内容,增加了一些内容,删除了一些内容,但是这些内容又不只限于标签。
第二章 语义化标签
什么是标签语义化?什么是主义化? 你如何去理解主义化?
所谓的标签语义化就是赋予标签意义,用合适标签描述WEB结构,让什么标签做什么事,如p标签表示段落,h1标签是用来表示标题的,不能用其它标签代替它们。有利于搜索引擎优化。
新的标签是如何选取的?
google分析上百万个网站,发现头部的class或id几乎都用header,导航部分的class或id几乎都nav,页面脚部几乎都用footer, 文章区域都用article, 侧边栏都用aside。 就是衍生出一个问题,为什么不把上面这些常见的属性值固定成标签呢,HTML5的维护都就从这上万个网站中,拿出来了一些标签,使用HTML5中新增的标签。
使用语义化标签的好处:
对搜索引擎(百度,google,360...)友好。就是平常我们所说的SEO(Search Engine Optimizer)。再说的详细一点:就是有了良好的结构和语义的网页内容更容易被搜索引擎抓取,且可以获取更高的权重。在用户搜索相关内容时,排名会靠前,自然会获得更多的流量。
2.1 常用语义化标签
ü header 头部标签
ü nav 导航标签
ü section 区域标签
ü article 文章标签(独立的内容)
ü aside 侧边栏标签
ü footer 页脚标签
header 部分标签
header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,例如数据表格、搜索表单或相关的LOGO图片。
nav 导航标签
nav元素是一个可以用来作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。
section 区域标签
section元素用来对网站或应用程序中页面上的内容进行分块,一个section元素通常由内容及其标题组成。
article 文章标签
article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件,或者其他任何独立的内容。
aside 侧边栏标签
aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。
footer 页脚标签
footer元素可以作为其上层父级内容区块或一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接以及版权信息等。
2.1.1 传统网页布局
结构:
样式:
效果:
2.1.2 HTML5网页布局
结构:
样式:
效果:
2.2 兼容性处理
我们把上面的代码放到IE8浏览器中进行测试,出现结果如下:
这是由于IE8不支持HTML5中的新标签,新的标签是从IE9开始才支持的。
那么如何去解决个问题?
在IE中,留了一个hack?
<!--[if lte IE8]>
<![endif]-->
lte--> less than or equal to 小于等于
在不支持HTML5中新的标签浏览器中,我们需要将标签创建出来,创建出的标签就会被解析:
由于在HTML5中新增的标签不是一两个,在实际开发中,我们通常通过引入一个第三方js库来做兼容处理,它的本质也是创建出HTML5中的对应的元素,使用如下:
HTML5中其它的一些常用标签:
ü time 时间标签
ü figure 媒体(图片,音频,视频....)区域标签
ü figurecaption 媒体区域的标题标签
ü mark 标记标签
ü progress 进度条标签
ü meter 计量标签
time时间标签
格式:<time>2017年3月23日</time>
<time datatime=”2010-09-09”>情人节</time>
figure媒体(图片,音频,视频....)区域标签
用来表示媒体(图片,音频,视频...)
figurecaption媒体区域的标题标签
媒体区域的标题
mark标记标签
表示标记标签,会产生荧光效果
progress进度条标签
progress案例练习:
meter计量标签
第三章 表单
HTML4.01中的表单已经不能满足实际开发需求了,所以在HTML5中又添加了一些新的表单元素和表单元素类型。
讲表单之前,先学习两个标签:
fieldset
legend
3.1 新的表单元素类型
type | 说明 |
| 电子邮箱,如果格式不对,则无法提交 |
color | 拾色器 |
url | 网址, 需带上http:// |
number | 数字类型,只能输入数字 |
range | 范围 |
search | 搜索框 目前和text基本一样 |
tel | 电话号码 目前和text基本一样 |
date | 日期 |
time | 时间 |
datetime | 日期和时间 (通常浏览器不支持) |
week | 周数 |
month | 月 |
datatime-local | 本地的日期和时间 |
具体代码看当日代码......
3.2 新的表单元素
datalist 数据列表
基本使用:
效果如下:
注意点:
1,如果写value属性的话,那么value值不能为空
output 输出
基本使用:
效果如下:
3.3 新的表单属性
属性 | 说明 |
autofocus | 自动获得焦点 |
required | 必选项 |
autocomplete | 自动完成 |
autocomplete=”off” | 禁止自动完成 |
placehorder | 占位符 |
pattern | 正则表达式 |
multiple | 多个, 多个邮箱,上传多个文件 |
form | 表单域之外新增加的表单元素可以通过form进行绑定 |
3.4 新的表单事件
oninput事件 用户输入的时候就触发
oninvaild事件 表单元素验证不通过时,触发
代码如下:
注意:输入框中的内容一旦变化,就立马触电发input事件。
oninput和onchange有什么区别?
ü oninput在用户一输入时就触发,onchange是用户输入完后,并且在失去焦点时触发。
ü oninput只能作用于input和textarea,onchange可以作用于input,textarea和select等。
ü oninput的兼容性,没有onchange的兼容性好。
第四章 多媒体
传统的视频音频播放都是通过flash插件完成的,不是所有的浏览器都默认装了flash插件,而且手机也不支持flash插件,所以h5中增加了关于多媒体相关的标签。
4.1 视频
video 视频的意思
第一步:通过video标签的src属性引入视频文件
第二步:给视频添加控制面板
第三步:给视频添加海报
第四步:允许视频循环播放
第五步:视频预加载:
第六步:允许视频自动播放
因为版权原因,同一个视频,不可能得到所有浏览器的支持。这个时候,我们用另一个标签来优化视频播放,这个标签就是source, 它是写在video中,source可以有多个,浏览器去自动进行解析。
video向js暴露了几个API
方法:
play()播放
pause()暂停
属性:
paused用来判断视频是否处于暂停状态,如果是,返回true, 否则返回false
currentTime返回视频播放的当前位置
duration返回视频的总长
playbackRate返回当前视频播放的速度,1表示正常播放
muted 如果它为true表示静音,否则不静音
volume表示视频的音量 最大为1 最小为0
代码就当日课程代码主行,不截图了....
4.2 音频
我们可以认为视频是图片的一个升级版,那么音频我们可以认为它是视频的一个降级版,只有声音,没有图像。
音频标签是:audio
ü controls 显示控制面板
ü loop 允许循环播放
ü autoplay 自动播放
ü preload 预加载
基本使用:
兼容处理:
背景音乐:
第五章 DOM拓展
DOM: Document Object Model 文档对象模型
5.1 获取元素
ü getElementsByClassName(‘类名’) 通过类名获取元素,返回一个类数组
ü querySelector(“css选择器”) 通过CSS选择器来选择元素,返回的是满足条件的第一个元素
ü querySelectorAll(“css选择器”) 通过CSS选择器来选择元素,返回的是满足条件的所有元素组成的类数组
注意:上面所说的获取元素的方法,在现代浏览器中可以使用,没有问题,但是老式的浏览器中使用还是有一些问题,慎重使用。在移动端开发时,可以放心使用,没有问题。
基本使用如下:
看当日的代码。
5.2 类名操作
Class ClassName
在HTML5中又增加了个增强版的ClassName, 就是ClassList。
ClassList有4个方法:
ü element.classList.remove(‘class’) 去掉某个类
ü element.classList.add(‘class’) 添加某个类
ü element.classList.toggle(‘class’) 开关 有则去掉,没有则添加
ü element.classList.contains(‘class’) 判断该元素中有无这个类,如果有则返回true, 如果没有则返回false
基本使用如下:
看当日的代码。
5.3 自定义属性
我们前面所学的HTML中,每个标签多少都有几个属性,这些属性都是标签自己的属性,当这些属性不够用时,在HTLM5中提供了自定义属性。自定义属性是以data-打头。例如:
data-info = “自定义属性值”。在JS访问它时,应该是ele.dataset.info。如果说data-后面还-,需要转化成驼峰命名法。例如:data-her-name,需要转化成ele.dataset.herName。
5.4 tab栏练习
HTML结构:
CSS样式:
JS行为:
第六章 新增API
6.1 拖拽
6.1.1 拖拽元素
我们只需要给元素添加一个属性 draggalbe= “true” , 图片和超链接默认都是可以拖拽的。
6.1.2 目标元素
任何元素都可以作为目标元素
6.1.3 拖拽事件
拖拽的几个事件:
ondrag 拖拽时触发这个事件
ondragstart 拖拽开始时触发
ondragend 拖拽结束时触发
目标元素的事件:
ondragenter 当拖拽元素拖进目标元素时触发
ondragleave 当拖拽元素离开目标元素时触发
ondragover 当拖拽元素在目标元素上拖拽时触发,默认的,拖拽元素是不允许放在其它元素上面,如果想让拖拽元素放到目标元素上面,我们就应该去阻止默认事件:就是在事件处理函数后面加上return false;
ondrop 当拖拽元素在目标元素上面松开鼠标时触发。
6.1.4 拖拽中的数据传递
拖拽过程中,我们可以从拖拽元素向目标元素传递数据。
是通过事件对象中的dataTransfer属性来实现的。
设置数据:
在拖拽元素的ondragstart中加入evt.dataTransfer.setData(‘参数名’,’值’);
获取数据:
在目标元素的ondrop, 通过evt.dataTransfer.getData(‘参数名’);就可以获取传递过来的数据。
6.2 地理定位
在HTML5规范中,增加了获取用户地理信息的API,这样使得我们可以基于用户位置开发互联网应用。
6.2.1 获取地理定位的方式
获取地理信息方式
1、IP地址
2、三维坐标
GPS(Global Positioning System,全球定位系统)
Wi-Fi
手机信号
优缺点对比:
浏览器会自动以最优方式去获取用户地理信息。
6.2.2 隐私
HTML5制定了一套保护用户隐私的机制,必须得到用户明确允许时,才会获取该用户的地理位置。
6.2.3 Geolocation API详解
基本使用:
对于这里面的三个参数使用如下:
测试时,需要使用IE浏览器进行测试:
<!-- 先引入百度javascript版 API -->
<scriptsrc="http://api.map.baidu.com/api?v=2.0&ak=0A5bc3c4fb543c8f9bc54b77bc155724"></script>
代码看课堂代码.....