HTML5新增标签

文/饥人谷_韩宝亿(简书作者)
原文链接:http://www.jianshu.com/p/a4e5c10a98e8
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

一、什么是HTML5

HTML5HTML 标准的最新演进版本。 这个术语代表了两个不同的概念:
它是一个新的 HTML 语言版本包含了新的元素,属性和行为,同时包含了一系列可以被用来让 Web 站点和应用更加多样化,功能更强大的技术。 这套技术往往被称作 HTML5 和它的朋友们,通常简称为 HTML5
从要对全部所有的 Web 开发人员有用这一点出发,这个参考页面链接了有关 HTML5 技术的大量资源,并且基于它们各自的功能,把它们归类成了若干组。
语义:能够让你更恰当地描述你的内容是什么。
连通性:能够让你和服务器之间通过创新的新技术方法进行通信。
离线 & 存储:能够让网页在客户端本地存储数据以及更高效地离线运行。
多媒体:使 video 和 audio 成为了在所有 Web 中的一等公民。
2D/3D 绘图 & 效果:提供了一个更加分化范围的呈现选择。
性能 & 集成:提供了非常显著的性能优化和更有效的计算机硬件使用。
设备访问 Device Access:能够处理各种输入和输出设备。
样式设计: 让作者们来创作更加复杂的主题吧!

二、HTML5新增标签

脚本:

<template> 通过JavaScript在运行时实例化内容的容器

章节:

<section> 定义文档中的一个章节,一般来说会有包含一个 heading

<nav>定义一个含有多个超链接的区域,这个区域包含转到其他页面,或者页面内部其他部分的链接列表

<article> 表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构

<aside> 定义和页面内容联度较低的内容--如果被删除,剩下的内容仍然很合理

<header> 定义页面或章节的头部。它经常包含logo、页面标题和导航性的目录

<footer> 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址

<main> 定义文档中主要或重要的独一无二的内容。一个文档中不能出现一个以上的<main>标签

组织内容:

<figure> 代表一个和文档有关的图例

<figcaption> 代表一个图例的说明

文字形式:

<data> 将一个指定内容和机器可读的翻译联系在一起。但如果内容是与time和date相关的,一定要使用<time>
<time> 代表日期和时间值;机器可读的等价形式通过datetime属性指定
<mark> 代表一段需要被高亮的引用文字,用来表示上下文的关联性
<ruby> 表示被ruby注释标记的文本,如中文汉字和它的拼音
<rt> 代表ruby注释,如中文拼音
<rp> 代表ruby注释两边的额外插入文本,用于在不支持ruby注释显示的浏览器中提供友好的注释显示
<bdi> 代表需要脱离父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本
<wbr> 代表建议换行,当文本太长需要换行时将会在此处添加换行符

嵌入内容:

<embed> 代表一个嵌入的外部资源,如应用程序或交互内容,换句话说,就是一个插件。如<embed type="video/quicktime" src="movie.mov" width="640" height="480">

<video> 代表一段视频及其视频文件和字幕,并提供了播放视频的用户界面

<audio> 代表一段声音或音频流。 <audio> 元素可以包含多个音频资源, 这些音频资源可以使用 src 属性或者<source> 元素来进行描述

<source> 为<video>或<audio>这类媒体元素指定媒体源

<track> 为<video>或<audio>这类媒体元素指定文本轨道(字幕)

<canvas> 代表位图区域,可以通过脚本在它上面实时呈现图形,如图表、游戏绘图等

<svg> 定义一个嵌入式矢量图

<math> 定义一段数学公式

表单:

<datalist> 代表提供给其他控件的一组预定义选项

<keygen> 代表一个密钥对生成器控件

<output> 代表计算值

<meter> 代表滑动条

<progress> 代表进度条,用来显示一项任务的完成进度

交互元素:

<details> 代表一个用户可以(点击)获取额外信息或控件的小部件。与summary配合使用

<summary> 代表 <details> 元素的综述或标题

<menuitem> 代表一个用户可以点击的菜单项

<menu> 代表菜单,呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单,也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

原文地址:https://www.cnblogs.com/hanbaoyi/p/5288148.html