Web开发学习笔记（5）-HTML5（一）

传统的技术相比，HTML5 的语法特征更加明显，可以更加便捷地处理多媒体内容，而且 HTML5 中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

HTML5 的优势

1. 解决了跨浏览器问题

在 HTML5 之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准。使用不同的浏览器，常常看到的页面效果也不同。在 HTML5 中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式 IE 浏览器，只需简单地添加 JavaScript 代码就可以使用新的元素。

2. 新增了多个新特性

HTML 语言从 1.0 到 5.0 经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。 HTML5 新增的特性如下。

新的语义标签，比如 header、nav、section、article、footer。
新的表单元素，比如 calendar、date、time、email、url、search。
用于绘画的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
对本地离线存储的更好支持。
地理位置、拖曳、摄像头等 API。

3. 用户优先的原则

HTML5 标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突时，规范会把用户放在第一位。另外，为了增强 HTML5 的使用体验，还加强了以下两方面的设计。

安全机制的设计

为确保 HTML5 的安全，在设计 HTML5 时做了很多针对安全的设计。HTML5 引入了一种新的基于来源的安全模型，该模型不仅易用，而且对不同的 API（Application Programming Interface ，应用程序编程接口）都通用。使用这个安全模型，不需要借助于任何不安全的 hack 就能跨域进行安全对话。

表现和内容分离

表现和内容分离是 HTML5 设计中的另一个重要内容。实际上，表现和内容的分离早在 HTML4.0 中就有设计，但是分离得并不彻底。为了避免可访问性差、代码复杂度高、文件过大等问题，HTML5 有了更加明晰的规范。但是考虑到 HTML5 的兼容性问题，一些陈旧的内容还是可以兼容使用的。

4. 化繁为简的优势

作为当下流行的通用标记语言，HTML5 尽可能地简化，严格遵循了简单至上的原则，主要体现在这几个方面：

简化的字符集声明;
简化的 DOCTYPE;
简单而强大的 HTML5 API;
以浏览器原生能力替代复杂的 JavaScript 代码。

从新增的标签来看，HTML5 有以下几个特点：

HTML5 的文档类型可以简写为 <!DOCTYPE html>。
HTML5 的字符编码可以简写为 <meta charset=“utf-8”/>。
标签不分大小写，但实际开发中，建议所有标签都使用小写。
允许属性值不加引号。
允许部分属性值可以省略。

随着 HTML 的不断发展，其经历了“从 HTML4 的宽松到 XHTML 的严格再到 HTML5 宽松”的发展路程。

相比较 HTML4 和 XHTML 的结构标签而言，HTML5 对结构标签进行了较大简化，精简了声明部分标签的定义过程，使得结构标签更加的简洁。

语义化标签

在引入语义化标签之前，我们常常采用 DIV + CSS 来布局，这样的布局方式使得文档的结构不清晰。为了解决这个问题，在 HTML5 中新增了一些标签，来帮助我们更清晰地展现文档的结构。

所谓语义化标签就是一看标签名，我们就知道该标签里内容的作用。

语义标签的优点：

在样式丢失的情况下，页面也能呈现出很好地内容结构、代码结构。
比 <div> 标签有更加丰富的含义，方便开发与维护。
有利于 SEO，提高搜索引擎的有效爬取。
方便其他设备解析（如移动设备）。

在我们的课程中会给大家讲解如下所示的语义化标签：

header 标签
nav 标签
section 标签
article 标签
aside 标签
footer 标签

特性
1.语意特性,添加<header><header/><nav><nav>等标签
2.多媒体，用于媒介回放的 video 和 audio 元素
3.图像效果，用于绘画的 canvas 元素，svg元素等
4.离线 & 存储,对本地离线存储的更好的支持,local Store,Cookies等
5.设备兼容特性，HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，
6.连接特性，更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能
7.性能与集成特性，HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作
新增标签
1.多媒体：<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表单元素：<datalist> ,<output> , <keygen>
3.新文档节段和纲要:<header>页面头部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部、<section>章节、<aside>边栏、<article>文档内容、<footer>页面底部等
使用html5shiv可以解决ie低版本不兼容的问题，只需要在head中加上,当版本低于IE9时，浏览器会加载html5.js脚本，使得支持html5的新功能，也可以将脚本文件下载到本地
```
<head> </head>
```

3.input 有哪些新增类型？

color,选择颜色
date 选择日期
email 用于检测输入的是否为email格式的地址
month 选择月份
number 用于应该包含数值的输入域，可以设定对输入值的限定
range 用于定义一个滑动条，表示范围
search 用于搜索，比如站点搜索或 Google 搜索
tel 输入电话号码
-time 选择时间
url 输入网址
week 选择周和年

4.浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。

共同点：sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
区别
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，localStorage不会自动把数据发给服务器，仅在本地保存
2.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。localStorage不会自动把数据发给服务器
3.cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据
4.localStorage支持事件通知机制，可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好，需要程序员自己封装
HTML5中提供了localStorage对象可以将数据长期保存在客户端，除非人为清除，localStorage提供了几个方法:
1.存储:localStorage.setItem(key,value)如果key存在时，更新value
2.获取 localStorage.getItem(key)如果key不存在返回null
3.删除 localStorage.removeItem(key)一旦删除，key对应的数据将会全部删除
4.全部清除 localStorage.clear() 使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
注意：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。

天小编将分享前端开发中必学的知识点，HTML5中关于音视频处理

视频处理

基本内容：目前国内的视频网站 - Flash技术，HTML5的视频处理首先替换Flash技术，支持的视频格式有：

1.MP4 - .mp4 目前比较主流的视频格式。

2.OGG - .ogv 手机端的视频格式。

3.WebM - 目前唯一一个支持超高清视频格式，该视频格式出自Goggle公司。

问：如何处理视频？

答：<video>元素 - 引入单个格式视频文件，它由自己的属性组成。 src属性 - 指定视频文件的地址， width属性 - 设置视频宽度， height属性 - 设置视频高度。语法规范：<video src="视频文件路径" width=“100px”>

！！需要注意的是：视频的宽高比不会改变，在video元素内定义不支持的提示内容。

如果要想在<video>元素引入多个格式视频文件，那么就使用<source/>，使用这种方式能够实现各个浏览器的兼容性，语法规范：

<video>

</video>

<video>元素的属性

autoplay属性 - 自动播放

controls属性 - 提供控制面板

loop属性 - 循环播放

poster属性 - 播放之前显示一张图片

preload属性 - 预加载(视频)

none - 不加载

auto - (默认值)自动(尽快加载完毕)

metadata - 只加载除视频之外的信息(宽和高)

video的高级用法方法

play() - 播放视频

pause() - 暂停视频

load() - 加载视频

canPlayType() - 判断是否支持该格式

事件

play - 播放视频时触发

pause - 暂停视频时触发

ended - 结束播放时触发

error - 播放错误时触发

canplay - 可播放时触发(不考虑整体)

canplaythrough - 整体播放顺利时触发

progress - 下载进度

属性

paused - 判断视频当前是否暂停，如果暂停状态,返回true

ended - 判断视频当前是否结束播放，如果结束播放,返回true

duration - 当前视频的总时长

currentTime - 获取或设置当前视频播放的位置

音频处理

基本内容：目前HTML页面实现音频处理，将Windows Media Player播放器,内置页面中，使用Flash技术实现音频处理，HTML5实现音频处理支持的音频格式有：

1.mp3 - 感谢百度(MP3)

2.ogg

3.wav

问：如何使用音频？

答： audio元素 - 引入一种音频格式。

<audio>元素的属性

src属性 - 引入音频文件，作用 - 实现页面背景音乐播放

audio元素 - 引入多种音频格式

source元素

autoplay - 自动播放

controls - 提供控制面板

loop - 循环播放

preload - 预加载

audio的高级用法

事件

play - 播放音频时触发

方法

play() - 播放音频

pause() - 暂停音频

属性

paused - true,表示暂停状态

！！需要特别注意，IE 8及之前的版本都不支持

在线咨询

上一篇：后台产品设计规范-Ant Design实践到落地
下一篇：.Net 5分钟搞定网页实时监控

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商