html5笔记

第一章 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	说明
email	电子邮箱，如果格式不对，则无法提交
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>

 

代码看课堂代码.....