H5新增元素和属性

2018-11-18

HTML5 的特点

自适应网页设计
语法更宽松
多设备跨平台
标签语义化
结构更简单、清晰

语义化的重要性： 1)当页面加载失败的时候，还能够呈现出清晰的结构 2)有利于 SEO 优化，利于被搜索引擎收录（即便于网络爬虫的识别） 3)在项目开发及维护时，语义化也很大程度上降低了开发难度，节省成本

HTML5 新增的结构标签

header
header 标签定义文档或者文档的一部分区域的页眉。一般作为介绍内容或者导航链接栏的容器。
在一个文档中，可以定义多个<header>元素。
注：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。
nav
nav 定义页面中导航链接部分(传统导航条、腾讯新闻、侧边栏导航、内页导航、百度百科、翻页操作)注：并不一定是视觉上的导航，只要是多链接区域，都可以使用
artical
<article> 标签定义独立的内容。内容本身必须是有意义的且必须是独立于文档的其余部分。如：论坛帖子、博客文章、新闻故事、评论
aside
<aside> 标签定义 <article> 标签外的内容。应该与附近的内容相关。
section
<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。标示文档的结构
footer
<footer> 标签定义文档或者文档的一部分区域的页脚。如：文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个 <footer> 元素。
figure
定义一段独立的流内容，一般是文档主体流内容中的一个独立单元。使用 figcaption 元素为 figure 元素添加标题。
figure 是一种元素的组合，带有可选标题。用来表示网页上一块独立内容。
figcaption 表示 figure 的标题。从属于 figure，并且，figure 中只能放置一个 figcaption
注：有默认的边距或填充值
hgroup
表示定义文件中一个区块的相关信息，一般用作放置标题标签的容器。
dialog
<dialog> 标签定义一个对话框、确认框或窗口
注：目前，只有 Chrome 和 Safari 6 支持 <dialog> 标签。

新增的多媒体元素

video 元素
在 HTML5 中专门用来播放网络上的视频或者电影。
使用方法:
video 元素要设定好长宽和 src 属性就可以了：

1	<video width="750" height="400" src="time.mp4" controls="controls"></video>

同样对于不支持 video 的浏览器可以在中间加入替换文字：

1	<video width="750" height="400" src="time.mp4">您的浏览器不支持video元素</video>

audio 元素
在 HTML5 中专门用来播放网络上的音频
使用方法:
audio 元素只需要给他指定一个 src 属性：

1	<audio src="MP3.mp3" controls="controls"></audio>

对于不支持的浏览器我们可以在这对元素之间加入提示语句来代替

1	<audio src="MP3.mp3" controls="controls">您的浏览器不支持Audio元素</audio>

source 元素指定多个播放格式与编码：
source 元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择到所支持的格式为止。
使用方法：

<video>
  <source src="video.webm" type="video/webm" />
  <source src="video.ogg" type="video/ogg" />
  <source src="video.mp4" />
</video>

注：video 元素支持三种视频格式：mp4、ogg、webm;

浏览器的支持：
Safari3 以上、Firefox4 以上、0pera10 以上、chrome3.0 以上版本都对 audio 元素和 video 元素支持！

新增的其他元素

canvas
表示图形，比如图标和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图 API 展现给客户端 js，以使脚本能够把想绘制的东西绘制到这块画布上

1	<canvas id="myCanvas" width="200" height="200"></canvas>

新增的表单元素

Datalist
datalist 提供一个事先定义好的列表，通过 id 与 input 关联，当在 input 内输入时就会有自动完成的功能，用户将会看见一个下拉列表供其选择。
选项列表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML5 datalist tag</title>
  </head>
  <body>
    <p>浏览器版本：<input list="words" /></p>
    <datalist id="words">
      <option value="浏览器" />
      <option value="Firefox" />
      <option value="Chrome" />
      <option value="Opera" />
      <option value="Safari" />
      <option value="Sogou" />
      <option value="Maxthon" />
    </datalist>
  </body>
</html>

output
表示不同类型的输出，比如脚本的输出

注：表单中有应用

新增的表单类型

email
专门用来输入 email 地址的文本框,如果该文本框中内容不是 email 地址格式的，则不允许提交。但它不检查 email 地址是否存在。提交时可以为空，除非加上了 required 属性。

具有 multiple 属性，它允许在该文本框中输入一串以逗号分隔的 email 地址。

url
专门用来输入 URL 地址的文本框。如果该文本框中内容不是 URL 地址格式的，则不允许提交。
例：

1	<input name="url1" type="ur" value="http://www.baidu.com" />

number 和 range
number 类型是专门用来输入数字的，并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值，min 是允许的最小值，step 是间隔。设置了这些属性后，如果手动填入的数字不符合这些属性条件，将不能提交。

range 类型是一个数字滑动条。它与 number 类型功能类似，也有 max、min 和 step 属性，在 Opera 中，可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值，但可以使用 output 输出当前值。

datetime 和 datetime-local
datetime 类型是用来输入 UTC 日期和时间的文本框，而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。
month 和 week
month 类型是月份选择器，它的值为：年-月，如：2012-01；
week 类型是周选择器，它的值为：年-W 周数，如:2011-W02。
search
search 类型的是用来输入搜索关键词的文本框，它与 text 类型在功能都没有太大区别，只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中，当用户输入内容时，输入框右侧会有一个“×”按钮，单击该按钮，将清空输入框内的内容，使用非常方便。
color
color 类型用来选取颜色，它提供了一个颜色选取器，值为 16 进制符号，如：#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。

注意，跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果，等，这些都不可以实现。

output 元素：
定义不同类型的输出，如计算结果的输出，或脚本的输出。
注：必须从属于某个表单。即，必须将它书写在表单内部，或对它添加 form 属性。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0 <input type="range" id="a" value="50" />100+
  <input type="number" id="b" value="50" />=
  <output name="x" for="a b"></output>
</form>

date
从日期选择器选择一个日期
time
输入事件的文本框
tel
输入电话号码

新增的 input 属性

required
可以应用在大多数输入元素上,在提交时如果元素内容为空白，则不允许提交，同时显示提示文字。
pattern
此属性用来设置某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。

<input
  type="text"
  pattern="[0-9][A-Z]{3}"
  placeholder="输入内容：一个数与三个大写字母"
/>

placeholder 属性
文本框处于未输入状态时文本框中显示的输入提示。
autofocus 属性
给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得鼠标焦点，一个页面只能有一个。
autocomplete 属性
规定输入字段是否应该启用自动完成功能。属性值=on/off
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。使用时表单元素必须有 name 属性；（类似历史记录功能）

注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

提示：在某些浏览器中，可能需要手动启用自动完成功能。

min、max、step：
为包含数字或日期的 input 类型规定限定（约束）
max: 最大值
min: 最小值
step: 数字间隔

1	<input type="number" min="0" max="10" step="3" />

取消验证
可以对 form 表单添加 novalidate 属性，即使 form 表单中的 input 添加了 required，也将不进行验证
Multiple
可以输入一个或多个值，每个值之间用逗号分开；如果要获取其中的值在用 split 获取；

1	<input type="email" multiple />

还可以应用于 file

本文作者：人模人样的搬砖老段
本文链接：H5 新增元素和属性
如有错误，请及时评论或者知乎私信或者 B 站私信哦~

最后更新于:2020/01/12