HTML5新增标签

1、新增布局标签(结构化语义标签)

<header>顶部</header>              header表示网页的头部
<main></main>                            main表示网页的主体部分(一个页面中只会有一个main)
<nav></nav>                                nav表示网页中的导航
<hgroup>标题相关</hgroup>       hgroup标签用来为标题分组
<aside>侧边栏</aside>                aside和主体有关的其他内容(侧边栏)
<article>图文混合内容</article>   article表示一个独立的文章
<section>标题内容</section>       section对页面上的内容进行分块,或者说对文章进行分段
<footer>底部</footer>                  footer表示页面的底部
<figure>添加插图</figure>           figure和文档有关的图例,独立单元,如有图文混合模块

2、媒体标签

<video controls></video>        视频
<audio controls></audio>       音频
embed                                     嵌入内容,包括各种媒体,flash,图片等
ource                                       为video和audio提供数据源
track                                        为video和audio指定字母

3、表单标签

search              搜索框。应用非常广泛,与text的区别是有值的时候会有清空按钮
email                邮箱地址,自动校验。url:http地址,自动校验
number            必须输入数值,通过min、max属性可以设置最小最大值
url                    类型用于应该包含 URL 地址的输入域
range               必须输入一定范围内的数值。min-max
color                颜色选择器
Date pickers   日期选择器(date, month, week, time, datetime, datetime-local) 
         date                      选取年月日
         month                   选取年月
         week                     选择周和年
         time                      选取时间(小时、分钟)
        datetime                选取时间、年月日(UTC时间)
        datetime-local       选取时间、日、月、年(本地时间)

4、其他标签

canvas            表示位图区域,使用js进行图像绘制
progress          进度条
svg                  定义矢量图
code                代码段   
figcaption        图例的说明
time                日期和时间值,数据标签,给搜索引擎使用,主要日期标签
mark               高亮的引用文字
datalist            文本域下拉提示,提供给其他控件的预定义选项
keygen            秘钥对生成器控件
output              计算值
menu               菜单
detail               展开菜单
embed             嵌入的外部资源
menuitem        用户可点击的菜单项
template          声明是“模板元素”
command        按钮
ruby                 对某些内容进行注释

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值