html5的常用标签
html5
版权声明:本文为博主原创文章,未经博主允许不得转载。
一、新增标签
1.结构标签
header 表示页面中一个内容区块或者整体内容的标题
nav 表示链接导航部分
footer 表示整个页面或者页面中一个内容区块的脚注 一般来说 他会包含创作作者的姓名 文章创作的日期以及创作者的联系信息
section 定义文档或应用程序的一区段 如文章章节 页眉 也叫或者文件的其他部分
article 文档中的一块独立的内容 写文章
aside 侧边栏 制作滚动广告的内容
2. 对话标签
dialog 定义对话 配合 dt dd 使用
dt 定义定义列表中题目标签
dd 定义列表中定义条目的解析部分标签
3. 标记标签
mark 标记的意思 例如高亮
默认背景颜色是黄色 你可以通过样式表修改成你想要的样式
4. 表示日期和时间
time 语义标签 他是给搜索引擎来使用的 用来将你的页面进行分类的
5.进度条
meter 进度条 不是所有浏览器都兼容 IE不兼容
属性:
min 最小值
max 最大值
value 默认值
6.进度标签
progress IE 不兼容
属性:
min 最小值
max 最大值
value 默认值
二、多媒体标签
- video 用于视频播放(ogg,mepg-4,webm)
属性:
src 资源地址
controls 显示控制
autoplay 自动播放
loop 循环播放
source 为媒介标签
作用 :如果第一个不存在 会自动查找到下一个 直到你的文件存在未知 用来做备用资源
属性
src
type
- audio 用来播放音频(ogg,mp3,wav)
属性
src 资源地址
controls 显示控制
autoplay 自动播放
loop 循环播放
source 为媒介标签
作用 :如果第一个不存在 会自动查找到下一个 直到你的文件存在未知 用来做备用资源
属性
src
type
三、表单标签
1. input
type
email 匹配邮箱地址
url 网络地址(匹配的就是http://)
number 输入值必须是数字
属性
min 最小值
max 最大值
step 指定跳跃范围(步长)
value 默认值
range 取值范围 拉动条
属性
min 最小值
max 最大值
step 指定跳跃范围(步长)
value 默认值
search 搜索框 效果和text一样
tel 电话号 在pc端没有效果 在移动端会直接弹出数字键盘
color 调用取色面板
2.时间相关内容表单属性 火狐不兼容
date 选取 日 月 年
month 选取 月 年
week 选取 周和年
time 选择时间 小时和分钟
datetime 选择utc时间,日月年
datetime-local 选取本地时间 日月年
四、属性
placeholder 提示文字 有别于value
五、iframe 标签
可以构成一个特殊的框架结构 被称为浮动的框架 他是在浏览器窗口中嵌套另外一个网页文件
属性
src 默认显示页面
name 用于 target跳转
align 相对于周边元素的对齐方式 |left |right|top|middle|bottom
width 宽度
height 设置高度
scrolling 滚动条 yes no auto
frameborder 0 1 规定是否显示框架周围的边框
canvas 画布标签
总结:
这些都是常用的html5标签,还有很多没写出来,因为用的很少,像一些html5标签要注意IE和别的浏览器的兼容,主要是IE。
有一些标签我们对于它的使用要用到JavaScript,像我们的画布canvas,这些需要一定的JavaScript基础,所以我们把常用的好用的兼容性高的记住就行了,其他的了解就行。