HTML5学习-day01【悟空教程】

公众号演示无法呈现建议在pc上打代码实现

概述

HTML5 ?

Web Development to the next level

Web 技术发展时间线

• 1991 HTML

• 1994 HTML2

• 1996 CSS1 + JavaScript

• 1997 HTML4

• 1998 CSS2

• 2000 XHTML1

• 2002 Tableless Web Design

• 2005 AJAX

• 2009 HTML5

• 2014 HTML5 Finalized

Review of HTML

什么是HTML？

Hyper Text Markup Language

什么是超文本标记？

用标记表示比普通文本牛X一点的文本

e.g.

SO ~

HTML5是HTML的最新一代版本

HTML5是用来表示更NB一点的文本 ？

NO ！！！

这个仅仅可以理解为H5的狭义概念

What is HTML5

H5草案前身

Web Application

提出 by WHATWG @2004

接纳 by W3C @2007

发布HTML5第一个草案 by W3C @2008-01-22

HTML5 ≠ HTML next version

WHATWG

网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

WHATWG成立的原因是W3C意图放弃HTML，而力图发展XML（可扩展标记记语言下的一个子集）技术。WHATWG邮件列表公布于2004-6-4 , 在Opera–Mozilla宣布加入后的2天 便否决了由万维网联盟（W3C）成员在W3C工作室的Web标准

2007-7-10 , Mozilla Foundation, Apple, Opera Software 建议 W3C跟随WHATWG’的HTML5，将新的HTML（标准通用标记语言下的一个应用）命名为"HTML5".2007-4-7, 新的HTML工作组采纳了他们的建议。

W3C 

万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，

如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，

有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

主要工作

W3C 最重要的工作是发展 Web 规范（称为推荐，

Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。

每项 W3C 推荐的发展是通过由会员和受邀专家组成的工作组来完成的。工作组的经费来自公司和其他组织，并会创建一个工作草案，最后是一份提议推荐。一般来说，为了获得正式的批准，推荐都会被提交给 W3C 会员和主任。

HTML5规范

万维网联盟宣布，HTML5和Canvas 2D规范的制定已经完成，尽管还不能算是W3C标准，但是这些规范已经功能完整，企业和开发人员有了一个稳定的执行和规划目标。

W3C首席执行官Jeff Jaffe表示：“从今天起，企业用户可以清楚地知道，他们能够在未来依赖HTML5。”

HTML5是开放Web标准的基石，它是一个完整的编程环境，适用于跨平台应用程序、视频和动画、图形、风格、排版和其它数字内容发布工具、广泛的网络功能等等。

为了减少浏览器碎片、实现在所有HTML工具的应用，W3C开始着手W3C标准化的互操作性和测试。和之前宣布的规划一样，W3C计划在2014年完成HTML5标准。

HTML工作组还发布了HTML5.1、HTML Canvas 2D Context、Level 2以及主要元素的草案，让开发人员能提前预览下一轮标准。

What is HTML5

HTML5 ≈ HTML↑ + CSS↑ + JavaScript API↑

广义上：新一代开发Web富客户端应用程序整体解决方案

Structure → Style → Interactive

全包了！！！

What is Rich Client

指具有很强交互性和体验的客户端程序

十年之前网页

just for 内容，没有交互

想要交互、绚丽的效果

Flash

e.g. Moodstream、 Waterlife、 monoface、 etc.

被封杀 and 孤芳自赏

link: 关于H5和Flash

Moodstream：https://www.gettyimages.cn/
Waterlife：http://waterlife.nfb.ca/#/

monoface：https://mono-1.com/

When HTML5

让Web开发重新回归富客户端的时代

HTML5 的应用场景

• 极具表现力的网页

• 案例非常多

• 网页应用程序

• PC端：iCloud、百度脑图、Office 365···

• APP端：淘宝、京东、美团···

• WeChat端：淘宝、京东、美团···

• 混合式本地应用

• PC端：网易云音乐、有道词典···

• APP端：淘宝、京东、美团···

• 简单的游戏

HTML5 到底多了点啥？

复制链接查看https://www.w3.org/TR/html5-diff/

我个人将这些变化大体分为三类：

• HTML

• JavaScript

• CSS

HTML

• 标签

• 更语义化标签

• 应用程序标签

• 属性

• 链接关系描述

• 结构数据标记

• ARIA

• 自定义属性

• 智能表单

• 新的表单类型

• 虚拟键盘适配

• 网页多媒体

• 音频

• 视频

• 字幕

• Canvas

• 2D

• 3D (WebGL)

• SVG

JavaScript API

• 核心平台提升

• 新的选择器

• Element.classList

• 访问历史API

• 全屏API

• 网页存储

• Application Cache

• localStorage

• sessionStorage

• WebSQL

• IndexedDB

• 设备信息访问

• 网络状态

• 硬件访问

• 设备方向

• 地理围栏

• 拖放操作

• 网页内拖放

• 桌面拖入

• 桌面拖出

• 文件

• 文件系统API

• FileReader

• 网络访问

• XMLHttpRequest

• fetch

• WebSocket

• 多线程

• 桌面通知

CSS

• New Selector

• Web Fonts

• Text Styles

• Opacity

• HSL Color

• Rounded Corners

• Gradients

• Shadows

• Background Enhancements

• Border Image

• Flexible Box Model

• Transforms

• Transitions

• Animations

• etc. 后面详细讨论

HTML

标签

更具有语义化的标签

就让HTML代码符合内容的结构化，标签语义化

以前我们可能是这样的：

以后我们一定是这样的：

为什么要有语义化标签

能够便于开发者阅读和写出更优雅的代码，代码如诗

同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容

更好地搜索引擎优化

切记

• HTML的职责是描述一块内容是什么（或其意义）

• 而不是它长的什么样子，它的外观应该由CSS来决定。

应用程序标签

• DataList(数据列表)

• Progress(进度条)

• Meter(数值显示器)

• Menu(右键菜单)

• Details(明细)

• View Demo

语义化标签 学习目标

• 掌握语义化标签的重要性

• 可以正确使用语义化标签

属性

链接关系

rel

用来描述指定链接与当前文档的关系，便于机器理解文档结构

常见的链接关系表

alternate	文档的可选版本（例如打印页、翻译页或镜像）
stylesheet	文档的外部样式表
start	集合中的第一个文档
next	集合中的下一个文档
prev	集合中的前一个文档
contents	文档目录
index	文档索引
glossary	文档中所用字词的术语表或解释
copyright	包含版权信息的文档
chapter	文档的章
section	文档的节
subsection	文档的子段
appendix	文档附录
help	帮助文档
bookmark	相关文档
nofollow	用于指定 Google 搜索引擎不要跟踪链接
licence	一般用于文献，表示许可证的含义
tag	标签集合
friend	友情链接

结构数据标记 *

https://developers.google.com/structured-data/testing-tool/

很高级的东西，只有Google支持

ARIA 属性 *

Accessible Rich Internet Application (无障碍富互联网应用程序)

主要针对于屏幕阅读设备(e.g. NVDA)，更快更好地理解网页

不仅仅是为了盲人用户，更多语义化

• WAI-ARIA无障碍网页应用属性完全展示

https://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/

• ARIA让视障人士更了解你的页面

http://fitdesign.tencent.com/

自定义属性 data-*

通过DOM存储与DOM对象强相关的数据

DEMO：

新属性 学习目标

• 了解而已，以后在国内普及开过后，迅速上手

智能表单

新的表单类型

DEMO：

虚拟键盘适配

智能表单 学习目标

• 网页开发过程中可以针对需求使用特定的智能表单类型

网页多媒体

在此之前需要依赖于第三方插件（e.g. flash）

音频

视频

DEMO：

视频已经加载，点击播放按钮即可播放

属性

字幕

http://www.w3schools.com/tags/tag_track.asp

多媒体 学习目标

• 掌握网页多媒体的意义

• 对Video标签和Audio标签熟练使用

• 了解字幕标签

SVG

SVG * 

Scalable Vector Graphics 可缩放矢量图形

基于可扩展标记语言

优势：体积小，质量高，效果好，可控程度高

扩展连接： HTML5中的SVG  

https://www.w3cschool.cn/html5/html5-svg.html

Inline SVG Demo

SVG File

使用 SVG File 的方式

• 使用 <embed> 标签

• 使用 <object> 标签

• 使用 <iframe> 标签

• Ajax方式加载

SVG 学习目标

• 了解SVG是什么东西

• 可以在网页中使用别人做好的SVG

• 并可以对SVG文件作出基本调整

• 会用样式修饰SVG

Canvas

提供网页级画布（GDI+）的实现

后面课程详细来说

Canvas Demo

Moderizer

一个JavaScript针对H5特性兼容的探针

About IE

为了尽可能让IE更好地支持HTML5，你可以使用以下两种方式：

Client side:

<meta http-equiv="X-UA-Compatible"                            content="chrome=1">

Server side:

X-UA-Compatible: chrome=1

What is HTML5

最新一代的WEB技术，用于构建现代Web应用程序！

HTML5 的能力已经覆盖

• Offline / Storage

• Realtime / Communication

• File / Hardware Access

• Semantics & Markup

• Graphics / Multimedia

• CSS3

• Nuts & Bolts