HTML5进阶笔记--超详细--简洁易懂

HTML	地址
HTML基础笔记	HTML基础--超详细--零基础--简洁易懂_ddddddyu的博客-CSDN博客
HTML5进阶笔记	HTML5进阶笔记--超详细--简洁易懂_ddddddyu的博客-CSDN博客

1 HTML5新增内容

• 新增语义化标签
• 新增音频视频标签
• 新增input类型
• 新增表单属性

广义的HTML5新增：

• 语义化标签

• 本地存储

• 兼容特性

• 2D、3D

• 动画、过渡

• CSS3特性

• 性能与集成

2 新增语义化标签

header     ---头部标签
nav        ---导航标签
article    ---内容标签
section    ---块级标签
aside      ---侧边栏标签
footer     ---尾部标签

3 新增音频视频标签

分别是音频 audio和视频video

audio支持的音频格式

audio 的参数

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的url

video视频标签目前支持三种格式

video语法及属性

<video src="./media/video.mp4" controls="controls"></video>

属性	属性值	说明
autoplay	autoplay	视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls	controls	向用户显示播放控件
width	px	设置播放器宽度
height	px	设置播放器高度
loop	loop	播放完是否继续播放该视频,循环播放
preload	auto(预先加载视频)none(不应加载视频)	规定是否预加载视频(如果有了autoplay 就忽略该属性)
src	url	视频url的地址
poster	lmgurl	加载等待的画面图片
muted	muted	静音播放

4 新增input标签类型

• 重点记住： number tel search 这三个

5 新增表单属性

• 可以通过以下设置方式修改placeholder里面的字体颜色

input::placeholder {
	color: red;
}