HTML5常用的语义化标签``视频标签常见属性``音频标签常见属性``表单的新增新增的input类型新增的表单属性常用的语义化标签语义化标签对搜索引擎比较友好,但是语义化标签存在兼容性问题,IE9+,如果不考虑兼容性问...
HTML5
- 常用的语义化标签
- ``视频标签
- 常见属性
- ``音频标签
- 常见属性
- ``表单的新增
- 新增的input类型
- 新增的表单属性
常用的语义化标签
语义化标签对搜索引擎比较友好,但是语义化标签存在兼容性问题,IE9+,如果不考虑兼容性问题可以大量使用。
<header>
:头部标签<nav>
:导航栏标签<section>
:定义文档某个区域,相当于一个<div>
标签<aside>
:侧边导航栏标签<footer>
:尾部标签
上述语义化标签的常规布局(可以用在不同的地方,没有强制性,可以多次使用)
<video>
视频标签
支持mp4
、ogg
、webm
三种视频格式,尽量使用mp4
格式
<video src="bW92aWUubXA0"></video>
或
<video width="320" height="240" controls="controls">
<source src="bW92aWUubXA0" type="video/mp4">/*如果mp4格式加载不了就会转向下面的标签*/
<source src="bW92aWUub2dn" type="video/ogg">/*如果ogg格式加载不了就会显示下面的话*/
你的浏览器不支持<video>标签。
</video>
常见属性
属性 | 描述 |
---|---|
autoplay | 视频就绪自动播放(谷歌浏览器需要另外设置muted属性才能自动播放) |
controls | 是否显示控制组件 |
width | 设置播放器(视频)宽度 |
height | 设置播放器(视频)宽度 |
loop | 播放完毕后是否循环播放 |
preload | 规定是否预先加载视频,auto(预先加载)none(不预先加载),如果设置了autoplay就自动忽略这个属性 |
src | 视频url地址 |
poster | 未加载完毕时显示的图片 |
muted | 是否静音播放 |
<audio>
音频标签
支持mp3
、ogg
、wav
三种音频格式,尽量使用mp3
格式
<audio src="bXVzaWMubXAz" controls="controls"></audio>
或
<audio controls="controls">
<source src="bXVzaWMubXAz" type="audio/mpeg">/*如果mp3格式加载不了就会转向下面的标签*/
<source src="bXVzaWMub2dn" type="audio/ogg">/*如果ogg格式加载不了就会显示下面的话*/
你的浏览器不支持<audio>标签。
</video>
常见属性
属性 | 描述 |
---|---|
autoplay | 音频就绪自动播放(谷歌浏览器除外,可以通过JS解决) |
controls | 是否显示控制组件 |
loop | 播放完毕后是否循环播放 |
src | 视频url地址 |
<form>
表单的新增
新增的input类型
属性值 | 描述 |
---|---|
type=“email” | 限制用户输入必须是邮箱类型 |
type=“url” | 限制用户输入必须是URL类型 |
type=“search” | 搜索框 |
type=“number” | 限制用户输入必须是数字类型 |
type=“date” | 限制用户输入必须是日期类型 |
type=“time” | 限制用户输入必须是时间类型 |
type=“mouth” | 限制用户输入必须是月类型 |
type=“week” | 限制用户输入必须是周类型 |
type=“tel” | 限制用户输入必须是手机号码 |
type=“color” | 颜色选择表单 |
新增的表单属性
属性 | 值 | 描述 |
---|---|---|
required | required | 表单如果拥有该属性表示为必填项 |
palceholder | 要提示的文本 | 表单的提示信息 |
autofocus | autofocus | 页面加载完自动聚焦到指定表单 |
沃梦达教程
本文标题为:HTML5
猜你喜欢
- 如何通过php在mysql中插入特殊字符并在html页面上显示 2023-10-26
- Typescript+Vue大型后台管理系统实战 2023-10-08
- 基于Ajaxupload的多文件上传操作 2023-02-14
- Ajax请求响应中用window.open打开新窗口被拦截的解决方法 2023-01-20
- react中ref获取dom或者组件的实现方法 2023-07-09
- AngularJS tab栏实现和mvc小案例实例详解 2023-02-01
- JavaScript中的异步能省掉await吗? 2023-08-12
- JSscript标签有哪些属性 2023-08-08
- 详解CSS故障艺术 2022-11-20
- vue 请求拦截request将token添加到请求头headers 2023-10-08