1.语义化标签
< header> | 头部标签 |
---|---|
< nav> | 导航标签 |
< article> | 内容标签 |
< section> | 定义文档某个区域 |
< aside> | 侧边栏标签 |
< footer> | 尾部标签 |
2.多媒体标签
2.1视频<video>
当前< video>元素支持三种视频格式:MP4、WebM、Ogg。但是不同的浏览器支持不同的格式,尽量使用MP4格式。
<video src="文件地址" controls="controls"></video>
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放的问题) |
controls | controls | 向用户显示播放控件 |
width | pixels(像素) | 设置播放器宽度 |
height | pixels(像素) | 设置播放器高度 |
loop | loop | 播放完是否继续播放该视频,循环播放 |
preload | auto(预先加载视频) none(不应加载视频) | 规定是否预加载视频(如果有了autoplay就忽略该属性) |
src | url | 视频地址 |
poster | Imgurl | 加载等待的图片 |
muted | muted | 静音播放 |
2. 1音频< audio>
当前< audio>元素支持三种视频格式:MP3、mpeg、Ogg。但是不同的浏览器支持不同的格式,尽量使用MP3格式。
<audio src="文件地址" controls="controls"></audio>
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件。 |
loop | loop | 循环播放 |
src | url | 音频文件地址 |
3.input类型
type="email | url | date | time | month | week | number | tel | search | color"
4.表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off/on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项,相当于历史搜索记录。默认打开,一般设置为off关掉 |
multiple | multiple | 可以多选文件提交 |
可以通过以下设置方法修改placeholder里面的字体颜色:
input::placeholder {
color:pink;
}