HTML5元素

时间：2022-01-09 作者：bindu

1.1结构元素

　　HTML5定义了一组新的语义化标签，目前主流浏览器均已支持，语义化标签使用标记元素的内容，虽然可以使用原有标签替换，但是它可以简化HTML页面设计，并且也为搜索引擎在抓取和索引网页的时候展现元素的优势。

header	通常被放置在页面或者页面中某个区块元素的顶部，用来介绍内容或者做导航链接栏，在一个文档中，您可以定义多个header元素。
nav	通常表示页面的导航。
main	文档内容
article	使用在相对比较独立，完整的内容模块，一般使用在博客，论坛帖子，新闻报道，用户评论。
section	一般用来做内容的分组，比如文章的章节
aside	包含的内容不是页面的主要内容，具有独立性，是对页面的补充。aside标签一般使用在页面，文章的侧边栏，广告，友情链接等区域。
footer	一般放在页面或页面中某个区块的底部，包含版权信息，联系方式等。
ruby	定义ruby注释（中文或字符），将ruby标签与rt和rp标签一起使用。rp标签可选，该标签定义的是当浏览器不支持“ruby元素”时显示的内容。
progress	定义进度条
mark	用来标记文本
embed	用来嵌入指定的内容，比如插件。

1.2功能元素　　

hgroup元素：用于对整个页面或页面中一个内容区块的标题进行组合。

video元素：定义视频

<video src="域名" controls="controls">video元素</video>

audio元素：定义音频

<audio src="域名">audio元素</audio>

embed元素：用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。

<embed src="域名" />

mark元素：主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

dialog元素：定义对话窗或窗口

<dialog open>这是打开的对话窗口</dialog>

bdi元素：定义文本的文本方向，使其脱离其周围文本的方向设置

<ul>
 
    <li>Username<bdi>Bill</bdi>:80 points</li>
 
    <li>Username<bdi>Steve</bdi>: 78 points </li>
 
</ul>

figcaption元素：定义figure元素

figure>
 
    <figcaption>我是小可爱</figcaption>
 
</figure>

time元素：表示日期或时间，也可以同时表示两者。

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

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

menu元素：表示菜单列表。当希望列出表单控件时使用该标签。

<menu>
 
    <li><input type="checkbox" />Red</li>
 
    <li><input type="checkbox" />Blue</li>
 
</menu>

details元素：表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用，summary元素提供标题或图例。标题是可见的，用户单击标题时，会显示出细节信息。summary元素应该是details元素的第一个子元素。

<details>
 
<summary>老鼠</summary>
 
</details>

1.3表单元素

　　通过type属性，HTML5为input元素新增了很多类型，简单说明如下:

color	用于指定颜色的控件。
date	用于输入日期的控件（年，月，日，不包括时间）。
month	用于输入年月的控件，不带时区。
week	用于输入一个由星期-年组成的日期，日期不包括时区
time	用于输入不含时区的时间控件。
datetime	基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local	用于输入日期时间控件，不包含时区。
search	用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel	用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
number	用于应该包含数值的输入域。只能输入数字
email	用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
url	用于编辑URL的字段。
range	用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。