菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育
标题:
H5C3-陈旭辉-20230424
[打印本页]
作者:
陌殇
时间:
2023-4-24 22:56
标题:
H5C3-陈旭辉-20230424
一、学习内容
HTML5新特性
HTML5的新增特性主要是针对之前的不足，增加了一些新的标签、新的表单和新增的表单属性等。
required：
属性值 required 表单如果有该属性，表示该表单中内容不能为空，是必填项
placeholder ：
属性值 提示文本 表单的提示信息，如果有value属性，那么这个提示信息就不会显示
autofocus：
属性值 autofocus 当页面加载完成的时候，将焦点自动聚焦到当前的表单元素
autocomplete：
属性值 on/off 当用户想显示之前输入过的内容时，可以使用该属性，但必须要求有name 属性，而且输入的内容必须提交过，才能生效。
multiple：
属性值 multiple 当需要提交多个文件的时候，可以使用该属性。
新增多媒体标签
video标签：
video标签是可以在不使用插件的情况下， 支持视频播放，当然，它支持的格式是有限的。
video标签支持的视频格式：尽量使用MP4格式
常用属性
autoplay
属性值 autoplay 视频准备就绪自动播放（谷歌浏览器需要添加muted属性来控制视频静音，只有静音视频才可以自动播放）
controls
属性值 controls 添加播放控件
width
属性值 像素值 控制播放器的宽度
height
属性值 像素值 控制播放器的高度
loop
属性值 loop 视频结束之后可以循环播放
src
属性值 url 视频的url地址
poster
属性值 imgUrl 加载等待视频的图片画面
muted
属性值 muted 设置静音播放
audio标签：
当前audio标签支持三种音频格式：推荐使用MP3格式的音频
常用属性
src
属性值 音频的URL
controls
属性值 controls 添加音频控件
loop
属性值 loop 控制音频循环播放
CSS的过渡
过渡（transition）是CSS3最具有颠覆性的一个特征之一，可以在不使用动画或者JS的情况下，给元素从一种状态转化为另一种状态的过程添加效果。
一般情况下会和:hover来进行使用。
语法：transition: 要过渡的属性 花费的时间 运动曲线 何时开始;
要过渡的属性（必须属性）：
宽度、高度、背景颜色、内外边距都可以，如果所有的属性都需要过渡，就写一个all即可。
花费的时间（必须属性）：
单位是秒 必须要写单位，比如说.5s
运动曲线（可以省略）：
默认是ease
何时开始（可以省略）：
可以设置延迟触发的时间，默认是0 单位是秒（s）
欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)
Powered by Discuz! X3.4