【html+css部分】1.html5新特性有哪些

html
,

今天是世界睡眠日，累了就多歇歇吧

HTML5 是定义 HTML 标准的最新的版本。 该术语通过两个不同的概念来表现：

  • 它是一个新版本的HTML语言，具有新的元素，属性和行为，
  • 它有更大的技术集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词 HTML5。

标记html5的dtd文档模型

1
<!DOCTYPE html>

声明字符集

1
<meta charset="UTF-8">

html5新特性一览

各个大厂都需要熟悉html5新特性，那么我们需要掌握哪些才能熟悉呢？

  • 语义：能够让你更恰当地描述你的内容是什么。
  • 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
  • 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
  • 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
  • 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
  • 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
  • 设备访问 Device Access：能够处理各种输入和输出设备。
  • 样式设计: 让作者们来创作更加复杂的主题吧！

语义

HTML5 中的区块和段落元素

  • <section>
  • <article>
  • <nav>
  • <header>
  • <footer>
  • <aside>
  • <hgroup>

使用 HTML5 的音频和视频

  • <audio> 和 <video> 元素嵌入和允许操作新的多媒体内容。

表单的改进

  • 对 web 表单的改进：强制校验API，一些新的属性，一些新的 <input> 元素 type 属性值 ，新的 <output> 元素。

新的语义元素

  • 除了节段，媒体和表单元素之外，还有众多的新元素，例如 <mark>， <figure>， <figcaption>， <data>， <time>， <output>， <progress>， 或者 <meter>和<main>，这增加了有效的 HTML5 元素的数量。

iframe 的改进

  • 使用 sandbox， seamless， 和 srcdoc 属性，作者们现在可以精确控制 <iframe> 元素的安全级别以及期望的渲染。

MathML

允许直接嵌入数学公式。

通信

Web Sockets

  • 允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。

Server-sent events

  • 允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。

WebRTC

  • 这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。

离线 & 存储

离线资源：应用程序缓存 (已废弃)

  • HTML5 提供一种 应用程序缓存 机制，使得基于web的应用程序可以离线运行。

在线和离线事件

  • 为了构建一个支持离线的 web 应用，你需要知道你的应用何时真正处于离线状态。

WHATWG 客户端会话和持久化存储 (又名 DOM 存储)

  • localStorage 和 sessionStorage

IndexedDB

  • 是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 Web 标准。在web worker中可用

自 web 应用程序中使用文件

  • 对新的 HTML5 文件 API 的支持已经被添加到 Gecko 中，从而使 Web 应用程序可以访问由用户选择的本地文件。这包括使用 type file 的 <input> 元素的新的 multiple 属性针对多文件选择的支持。 还有 FileReader。

多媒体

使用 HTML5 音视频

  • <audio> 和 <video> 元素嵌入并支持新的多媒体内容的操作。

WebRTC

这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，在浏览器中直接控制视频会议，而不需要一个插件或是外部的应用程序。

使用 Camera API

允许使用，操作计算机摄像头，并从中存储图像。

Track 和 WebVTT

  • <track> 元素支持字幕和章节。WebVTT 一个文本轨道格式。

3D, 图像 & 效果

Canvas & WebGL

  • WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 <canvas> 元素中的 API 给 Web 带来了 3D 图像功能。

SVG

  • 原先只能外联引入，现在可以直接内联嵌入页面使用

性能 & 集成

Web Workers

  • 能够把 JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。

XMLHttpRequest Level 2

  • 允许异步读取页面的某些部分，允许其显示动态内容，根据时间和用户行为而有所不同。这是在 Ajax背后的技术。

即时编译的 JavaScript 引擎

  • 新一代的 JavaScript 引擎功能更强大，性能更杰出。

History API

  • 允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。

contentEditable 属性：把你的网站改变成 wiki !

  • HTML5 已经把 contentEditable 属性标准化了。了解更多关于这个特性的内容。

拖放

  • HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。

HTML 中的焦点管理

  • 支持新的 HTML5 activeElement 和 hasFocus 属性。

基于 Web 的协议处理程序

  • 你现在可以使用 navigator.registerProtocolHandler() 方法把 web 应用程序注册成一个协议处理程序。

requestAnimationFrame

  • 允许控制动画渲染以获得更优性能。

全屏 API

  • 为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。

指针锁定 API

  • 允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

在线和离线事件

  • 为了构建一个良好的具有离线功能的 web 应用程序，你需要知道什么时候你的应用程序确实离线了。顺便提一句，在你的应用程序又再回到在线状态时你也需要知道。

设备访问

使用 Camera API

  • 允许使用和操作计算机的摄像头，并从中存取照片。

触控事件

  • 对用户按下触控屏的事件做出反应的处理程序。

使用地理位置定位

  • 让浏览器使用地理位置服务定位用户的位置。

检测设备方向

  • 让用户在运行浏览器的设备变更方向时能够得到信息。这可以被用作一种输入设备（例如制作能够对设备位置做出反应的游戏）或者使页面的布局跟屏幕的方向相适应（横向或纵向）。

指针锁定 API

  • 允许锁定到内容的指针，这样游戏或者类似的应用程序在指针到达窗口限制时也不会失去焦点。

样式

CSS 已经扩展到能够以一个更加复杂的方法给元素设置样式。这通常被称为 CSS3, 尽管 CSS 已经不再是很难触动的规范，并且不同的模块并不全部位于 level 3：其中一些位于 level 1 而另一些位于 level 4，覆盖了所有中间的层次。

新的背景样式特性

  • 现在可以使用 box-shadow 给逻辑框设置一个阴影，而且还可以设置 多背景。

更精美的边框

  • 现在不仅可以使用图像来格式化边框，使用 border-image 和它关联的普通属性，而且可以通过 border-radius 属性来支持圆角边框。

为你的样式设置动画

  • 使用 CSS Transitions 以在不同的状态间设置动画，或者使用 CSS Animations 在页面的某些部分设置动画而不需要一个触发事件，你现在可以在页面中控制移动元素了。

排版方面的改进

  • 作者们如今有更强大的能力来使自己的网页文字达到更佳的排版。他们不但可以控制 text-overflow 和 hyphenation， 还可以给它设置一个 阴影 或者更精细地控制它的 decorations。感谢新的 @font-face 规则，现在我们可以下载并应用自定义的字体了。

新的展示性布局

  • 为了提高设计的灵活性，已经有两种新的布局被添加了进来：CSS 多栏布局, 以及 CSS 灵活方框布局。

注：

本文摘抄自mdn官方文档：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5