HTML5知识概况

GeorgeLin
162 阅读8分钟

@TOC

HTML5 简介

简介：

  • HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
  • HTML5的设计目的是为了在移动设备上支持多媒体。
  • HTML5 简单易学。
  • 链接：HTML5教程

HTML5 是如何起步的？

  • HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。
  • WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006年，双方决定进行合作，来创建一个新版本的 HTML。
  • HTML5 中的一些有趣的新特性： ①用于绘画的 canvas 元素 ②用于媒介回放的 video 和 audio 元素 ③对本地离线存储的更好的支持 ④新的特殊内容元素，比如 article、footer、header、nav、section ⑤新的表单控件，比如 calendar、date、time、email、url、search

HTML5 浏览器支持

简介：

  • 现代的浏览器都支持 HTML5。
  • 此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。
  • 正因为如此，你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。

将 HTML5 元素定义为块元素：

  • HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。
  • 为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

HTML5更新汇总

HTML5 新元素：

  • 自1999年以后HTML 4.01 已经改变了很多,今天，在HTML4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。
  • 为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。

HTML5 Canvas：

  • <canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
  • 在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

HTML5 内联 SVG:

  • HTML5 支持内联 SVG。
  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

HTML5 MathML:

  • HTML5 可以在文档中使用 MathML 元素，对应的标签是<math>...</math>。
  • MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

HTML5 拖放（Drag 和 Drop）:

  • 拖放（Drag 和 drop）是 HTML5 标准的组成部分。

HTML5 Geolocation（地理定位）:

  • HTML5 Geolocation（地理定位）用于定位用户的位置。
  • 定位用户的位置： ①HTML5 Geolocation API 用于获得用户的地理位置。 ②鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

HTML5 Video(视频)：

  • 很多站点都会使用到视频. HTML5 提供了展示视频的标准。

HTML5 Audio(音频)：

  • HTML5 提供了播放音频文件的标准。

HTML5 新的 Input 类型：

  • HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
  • 本章全面介绍这些新的输入类型： color date datetime datetime-local email month number range search tel time url week

TML5 新的表单元素：

  • HTML5 有以下新的表单元素: <datalist> <keygen> <output>

HTML5 新的表单属性：

  • HTML5 的 <form> 和 <input>标签添加了几个新属性.
  • <form>新属性： autocomplete novalidate
  • <input>新属性： autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 与 width list min 与 max multiple pattern (regexp) placeholder required step

HTML5 语义元素：

  • 语义= 意义

  • 语义元素 = 有意义的元素

  • 什么是语义元素：一个语义元素能够清楚的描述其意义给浏览器和开发者。 ①无语义 元素实例: <div> 和<span>- 无需考虑内容. ②语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

HTML5 Web 存储

什么是 HTML5 Web 存储?

  • 使用HTML5可以在本地存储用户的浏览数据。
  • 早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速.这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
  • 数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

浏览器支持：

  • Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
  • 注意: Internet Explorer 7 及更早IE版本不支持web 存储.

localStorage 和 sessionStorage：

  • 客户端存储数据的两个对象为： ①localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。 ②sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
  • 不管是 localStorage，还是sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）： ①保存数据：localStorage.setItem(key,value); ②读取数据：localStorage.getItem(key); ③删除单个数据：localStorage.removeItem(key); ④删除所有数据：localStorage.clear(); ⑤得到某个索引的key：localStorage.key(index);

HTML5更新补充

HTML5 应用程序缓存：

  • 使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
  • 什么是应用程序缓存（Application Cache）？ ①HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
  • 应用程序缓存为应用带来三个优势： ①离线浏览 - 用户可在应用离线时使用它们 ②速度 - 已缓存资源加载得更快 ③减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

HTML5 Web Workers：

  • web worker 是运行在后台的 JavaScript，不会影响页面的性能。
  • 什么是 Web Worker？ ①当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 ②web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

HTML5 服务器发送事件(Server-Sent Events)：

  • HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。

HTML5 WebSocket：

  • WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

H5与微信开发

链接：

公众号Web开发:

  • 开发方式：采用H5开发语言，支持跨平台
  • 优点：开发成本低，推广容易，更新迭代快，无需审核，无需下载
  • 缺点：体验差，用户粘性较低，功能和运营受微信的生态限制
  • 适用场景：频次低，粘性不高的应用，很适合作为初期项目的市场验证
  • 典型应用：资讯展示类应用，服务类应用，电商类应用，营销推广类应用，轻量级应用

小程序开发：

  • 开发方式：采用类H5开发语言，支持跨平台
  • 优点：开发成本低，推广容易，更新迭代较快，体验较好（接近原生），无需下载
  • 缺点：不适合做用户沉淀，功能限制比较多，运营受微信的生态限制，需要审核，只能做小型应用
  • 适用场景：用完即走的小工具，跟公众号联合绑定，小游戏应用
  • 典型应用：工具类应用，营销工具，电商平台，小游戏，轻量级应用

实现技术区别（公众号基于H5，小程序基于微信自身开发环境与开发语言）：

  • 小程序是微信内的云端应用（所以无需安装），不是原生App，通过WebSocket 双向通信（保证无需刷新即时通信）、本地缓存（图片与UI本地缓存降低与服务器交互延时）以及微信底层技术优化实现了接近原生APP 的体验。
  • 公众号是基于传统H5 开发与运行，传统H5 运行环境是浏览器，微信小程序运行环境并非完整的浏览器，开发过程中用到H5相关的技术，微信小程序的运行环境是微信基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准（基于H5进行了优化），提升了小程序的性能。系统权限方面，微信小程序能够通过微信APP获得更多的系统权限，比如网络通信状态、数据缓存能力等，在此微信APP相当于架在原有系统中的新的操作系统，小程序借助微信与系统间接交互，使得能够拥有原生APP 的体验。而这一点恰巧是HTML5 web应用的不足，导致其主要用于业务逻辑与交互简单的应用中。

H5高级

HTML dataset 的用途?( HTMLElement.dataset)

  • HTML5规定,可以给元素添加非标准的属性,就是提供与渲染无关,或者提供语义信息的属性,可以随意添加,任意命名。
  • 添加属性必须以data-做前缀
  • 使用时候直接用元素的dataset属性,即可获取对应的属性值
  • 使用驼峰命名
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="test" data-user-name="user" data-name="testName">
	</div>
		
</body>
<script type="text/javascript">
	var test = document.querySelector("#test")
	console.log(test.dataset.userName)//user
    conaole.log(test.dataset.name)//testName
</script>
</html>
avatar
文章
阅读
粉丝