HTML5新特性

HTML5新特性

1、区别

HTML 和 HTML5 的区别

HTML5不基于SGML （Standard Generalized Markup Language 标准通用标记语言）。

因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要 DOCTYPE 来规范浏览器行为。

2、标签

1. header 头部标签
2. nav 导航标签
3. article 内容标签
4. section 块级标签
5. aside 侧边栏标签
6. footer 尾部标签

3、属性

1. 视频

<video width='400' heigth='200'>
	<source src='' type=''>
</video>	

source ：兼容不同视频格式（标签）。

autoplay：视频就绪时播放。

<video width='400' heigth='200' autoplay>
	<source src='' type=''>
</video>	

controls：给视频添加控件。

<video width='400' heigth='200' controls>
	<source src='' type=''>
</video>	

loop：循环播放。

<video width='400' heigth='200' autoplay loop>
	<source src='' type=''>
</video>	

muted：静音播放。

<video width='400' heigth='200' muted>
	<source src='' type=''>
</video>	

poster：用户下载时的封面，值为URL。

<video width='400' heigth='200' poster>
	<source src='' type=''>
</video>	

preload：边加载边播放。

<video width='400' heigth='200' preload>
	<source src='' type=''>
</video>	

src:播放视频的URL。

<video width='400' heigth='200' src=''>
	<source src='' type=''>
</video>	

2. 音频

<audio src=''>
<audio src='' autoplay>  音频就绪后播放
<audio src='' controls>  给音频增加控件
<audio src='' loop>      循坏播放
<audio src='' muted>     静音播放
<audio src='' preload>   边加载边播放

音频里面没有 宽高 和 poster 属性。

4、 input 属性

1. text 文本
2. button 按钮
3. password 密码
4. submit 提交
5. radio 单选按钮
6. checkbox 多选按钮
7. reset 重置
8. number 数字
9. date 日期
10. file 上传文件
11. Email 邮箱
12. tel 手机号码
13. url 网址
14. search 搜索
15. color 颜色

placeholder 表单提示文字。

<input type='text' placeholder='请输入...'>

required 校验表单不能为空，需要配合 提交按钮(submit) 使用。

<form>
	<input type='text' required placeholder='请输入...'>
	<input type='submit' value='提交'>
</form>

multiple 选择多个文件上传。

<form>
	<input type='text' multiple>
	<input type='submit' value='提交'>
</form>

autocomplete 历史记录 启用：on ; 关闭：off；

<form autocomplete='on'>
	<input type='text' autocomplete='on' plechholder='历史记录已开启'>
	<input type='text' autocomplete='off' plechholder='历史记录已关闭'>
	<input type='submit' value='提交'>
</form>

min='' ; max='' ；通常与数字和日期类型一起使用。

<form>
	输入 1980-01-01 之前的日期:
	<input type="date" name="bday" max="1979-12-31">
	
	数量 (在1和5之间):
	<input type="number" name="quantity" min="1" max="5">
	
	<input type='submit' value='提交'>
</form>

pattern 表单正则验算。

<form>
	输入规范为大小写A-Z 字符长度为3:
	<input type="text" pattern='[A-Za-z]{3}'>
	
	<input type='submit' value='提交'>
</form>

step 给默认数字类型上下箭头提供跳跃的数字。

<form>
	<input type='number' step='3'>
	<input type='submit' value='提交'>
</form>

readonly 只读属性。

<form>
	<input type='text' readonly placeholder='只读，不能输入'>
	<input type='submit' value='提交'>
</form>

disabled 禁用属性。

<form>
	<input type='text' disabled placeholder='禁用，不能输入'>
	<input type='submit' value='提交'>
</form>

---

• 失联

最后编辑时间 2023，09，08 ；16：16