h5标签入门

前言

可能你已经觉得自己熟悉并学会了使用大部分h5标签，但是对于h5标签你可能还是陌生的，或者不知道如何在一个正确的场景下使用。h5典型的语义化标签有：header footer article section nav aside 。

h5特性

1. 对浏览器进行了规范，统一的doc声明 ， 保证一份文档可以适用于任何版本，避免了不同浏览器对代码的支持性差异。
2. 文档结构不明确，之前都是div布局，新增了许多结构标签。为语义化提供了基础。
3. web应用强大，提供各样的api支持 富web应用，比如画布canvas,webgl,video,audio等。

注意事项

1. 省略引号：当值不包括特殊值 比如单引号 双引号 大于小于 空格等 引号可以省略。
2. 不写表示true 的：checked

h5标签的分类

• html5新增的标签一共有30个，为方便记忆，分为以下4类：

1. 文本控制：3个 <bdi> <wbr> <mark>
2. 结构标签：6个 <header> <nav> <article> <section> <aside> <footer>
3. 组合使用：9个 <figure><figcaption> <details><summary> <ruby><rt><rp> <dialog> <datalist>
4. 定义内容：12个 <audio> <video> <canvas> <command> <embed> <keygen> <meter> <output> <progress> <track> <source> <time>

h5标签详细说明：

一　结构标签

新增的结构元素：

１．header：整个页面的标题 页面中文章的标题部分 引导和导航作用 ==页面或者内容区块的标题 也可以是表格 搜索表单的头 ２．nav:连接导航的部分 导航的容器 ==侧边栏导航==页内导航 几个组成部分的导航==翻页操作 ３．article: 页面中一块与上下文不关的独立内容 一篇文章 ；插件也可以 ==复杂特殊内容的section == ４．section :页面中的一个内容区块，表示文档结构 ==内容进行分块 最好是有标题的部分 ５．aside :主体内容之外的相关内容==附属信息部分 ６．footer； 内容区块的脚注 包含作者等底部信息 不限制使用一个 但是也不能过多

二　定义内容

1. 音频视频　video audio embed
2. 画布canvas
3. 组合使用： figure:一段独立的流内容 figcaption 标题 datalist 可选的数据列表　　datagrid 可选数据列表 树形的显示 dl dt 术语列表 menu 菜单列表　 show close 显示与隐藏的
4. 其他，语义标签 main：　网页中的主要内容,每个页面当中只能有一个 address 地址信息 文档维护信息 电子邮箱 地址等 　 mark 突出显示的元素 progress 进程 运行的程度 meter 度量衡 最大最小值 规定范围内的数量值 value min max low high optimun time 日期或者时间 pubdate 发布日期 区分发布日期的 ruby 注释 　rt 字符的解释 　　 iframe 安全性增强 　　 command 命令 比如按钮 　 details 细节 summary 页面增强的元素 output 脚本的输出 　　 source 媒介的源头　 dialog 对话 默认隐藏的

三　其他

wbr换行 等不常用。 filedset 用于定义自定义表单 尤其数据区域 legend 用于定义标题