举例说明html5中语义化标签,HTML5中新语义化标签

HTML5中新增的语义化标签主要有：

header —>定义当前页面的表头

footer—>定义页面的页脚

main—>页面主体

注：header footer main 语义化标签在一个页面中只能出现一次

hgroup—>标题组合，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来

nav—>导航，在页脚显示一个站点的导航链接(如首页，服务信息页面，版权信息页面等等)

article—>显示一个独立的文章内容,如论坛帖子，网站新闻，报纸文章 ，博客条目，用户评论等

aside—> 辅助信息的内容

section—> 区域 , 跟div的功能以及语义是一样的，可以用于广告，成组的链接，侧边栏等

figure—> 描述图像或视频

figcaption—> 描述图像或视频的标题部分

figure和figcaption一般一起使用，例如

这是一张图片

datalist—> 选项列表

涉及到的语法：list id value …

details / summary—> 文档细节 / 文档标题

相关语法：open属性

HTML

超文本标记语言

progress / meter—> 定义进度条 / 定义度量范围

time —>定义日期或时间

今天是 3月3日

今天是 情人节

mark —>带有记号的文本

音频与视频

autio：音频 双标签

controls 显示控件

loop：循环播放

autoplay：自动播放( 很多浏览器已经禁止这个功能，因为考虑到用户体验的问题)

muted：静音

video：视频 双标签

object-fit:cover可以让视频覆盖整个父容器

注：音频和视频的默认控件是隐藏的

如果想做出和QQ音乐一样的效果：audio标签+隐藏控件(默认的，控件的样式用过HTML+CSS)+Java Script来实现交互功能

在视频中，可以通过autoplay + muted可以在静音的情况下播放

为了能够支持多个备选文件的兼容支持，可以配合source标签

新的input控件

email：电子邮件地址输入框

url：网址输入框

number：数值输入框

range：滑动条

data / month / week：日期控件

search：搜索框(跟普通框多一个关闭按钮)

color：颜色控件

tel：电话号码输入框( 跟普通框的区别，在移动端会调动手机的键盘)

time：时间控件