HTML5学习-day01【悟空教程】

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

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

常见的链接关系表

结构数据标记 *

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