html5笔记

太过爱你忘了你带给我的痛 2022-06-08 12:54 255阅读 0赞

# 第一章 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>

** **

**figure媒体（图片，音频，视频....）区域标签**

用来表示媒体（图片，音频，视频...）

**figurecaption媒体区域的标题标签**

媒体区域的标题

** **

**mark标记标签**

表示标记标签，会产生荧光效果

**progress进度条标签**

progress案例练习：

** **

**meter计量标签**

** **

# 第三章 表单 #

HTML4.01中的表单已经不能满足实际开发需求了，所以在HTML5中又添加了一些新的表单元素和表单元素类型。

讲表单之前，先学习两个标签：

fieldset

legend

## 3.1 新的表单元素类型 ##

<table> 
 <tbody> 
 <tr> 
 <td style="background:#F79646"> type </td> 
 <td style="background:#F79646"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> email </td> 
 <td style="background:#BEBEBE"> 电子邮箱，如果格式不对，则无法提交 </td> 
 </tr> 
 <tr> 
 <td> color </td> 
 <td> 拾色器 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> url </td> 
 <td style="background:#BEBEBE"> 网址， 需带上http:// </td> 
 </tr> 
 <tr> 
 <td> number </td> 
 <td> 数字类型，只能输入数字 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> range </td> 
 <td style="background:#BEBEBE"> 范围 </td> 
 </tr> 
 <tr> 
 <td> search </td> 
 <td> 搜索框&nbsp; 目前和text基本一样 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> tel </td> 
 <td style="background:#BEBEBE"> 电话号码&nbsp; 目前和text基本一样 </td> 
 </tr> 
 <tr> 
 <td> date </td> 
 <td> 日期 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> time </td> 
 <td style="background:#BEBEBE"> 时间 </td> 
 </tr> 
 <tr> 
 <td> datetime </td> 
 <td> 日期和时间 （通常浏览器不支持） </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> week </td> 
 <td style="background:#BEBEBE"> 周数 </td> 
 </tr> 
 <tr> 
 <td> month </td> 
 <td> 月 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> datatime-local </td> 
 <td style="background:#BEBEBE"> 本地的日期和时间 </td> 
 </tr> 
 </tbody> 
</table>

具体代码看当日代码......

## 3.2 新的表单元素 ##

**datalist  数据列表**

基本使用：

效果如下：

**注意点：**

1，如果写value属性的话，那么value值不能为空

** **

**output   输出**

基本使用：

效果如下：

## 3.3 新的表单属性 ##

<table> 
 <tbody> 
 <tr> 
 <td style="background:#F79646"> 属性 </td> 
 <td style="background:#F79646"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> autofocus </td> 
 <td style="background:#BEBEBE"> 自动获得焦点 </td> 
 </tr> 
 <tr> 
 <td> required </td> 
 <td> 必选项 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> autocomplete </td> 
 <td style="background:#BEBEBE"> 自动完成 </td> 
 </tr> 
 <tr> 
 <td> autocomplete=”off” </td> 
 <td> 禁止自动完成 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> placehorder </td> 
 <td style="background:#BEBEBE"> 占位符 </td> 
 </tr> 
 <tr> 
 <td> pattern </td> 
 <td> 正则表达式 </td> 
 </tr> 
 <tr> 
 <td style="background:#BEBEBE"> multiple </td> 
 <td style="background:#BEBEBE"> 多个， 多个邮箱，上传多个文件 </td> 
 </tr> 
 <tr> 
 <td> form </td> 
 <td> 表单域之外新增加的表单元素可以通过form进行绑定 </td> 
 </tr> 
 </tbody> 
</table>

## 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浏览器进行测试：

<scriptsrc="http://api.map.baidu.com/api?v=2.0&ak=0A5bc3c4fb543c8f9bc54b77bc155724"></script>

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

html5笔记

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html5——前端笔记

相关 HTML5--笔记--2

相关 HTML5--笔记--1

相关 HTML5——CSS学习笔记（13）HTML5基础

相关 HTML5笔记二

相关 HTML5笔记一

相关 HTML5笔记

相关 html5笔记

相关 HTML学习笔记5-HTML标题

相关 HTML5学习笔记