前端H5补缺

根据前端技能树补缺H5知识

语义化标签

<header>
<nav>
<article>
<section>
<aside>
<footer>

注意：

语义化标签主要针对搜索引擎

可多次使用

IE9中需要将这些标签转化为块级元素

移动端没有兼容性问题，因此会大量使用

多媒体标签

视频标签

<video>

该标签支持MP4、WebM、Ogg等格式的视频，其中MP4被更多的浏览器所支持

<video src="media/video.mp4" tyoe="video/mp4"></video>
<!-- 以下为兼容性代码，浏览器会依次寻找可以播放的video进行播放 -->
<video width="320" height="240" controls>
    <source src="movie.mp4"	type="video/mp4">
    <source src="movie.ogg"	type="video/ogg">
    你的浏览器不支持video标签
</video>

video常用属性

属性	值	描述
autoplay	autoplay	视频自动播放（谷歌浏览器需要添加muted来解决无法自动播放的问题
controls	controls	显示播放控件
width	pixels	设置宽度（可以通过css设置
height	pixels	设置高度（可以通过css设置
loop	loop	是否循环播放
preload	auto/none	auto表示预先加载视频，none表示不预先加载（如果设置了autoplay则忽略该属性
src	url	视频url地址
poster	imgurl	加载等待的画面图片
muted	muted	静音播放

音频标签

<audio>

该标签支持MP3、Wav、Ogg等格式，其中MP3的浏览器兼容性最好

<audio src="audio.mp3" controls></audio>

<!-- 以下为兼容性代码，浏览器会依次寻找可以播放的video进行播放 -->
<audio controls>
    <source src="audio.mp3"	type="audio/mpeg">
    <source src="audio.ogg"	type="audio/ogg">
    你的浏览器不支持audio标签
</audio>

常用属性

属性	值	说明
autoplay	autoplay	自动播放音频（谷歌禁用，需用js控制
controls	controls	显示播放控件
loop	loop	循环播放
src	url	音频文件url

Input表单

H5中新增了很多语义化的Input类型：

属性值	说明
email	只允许邮箱格式
url	只允许url格式
date	只允许日期格式
time	只允许时间格式
month	只允许月格式
week	只允许周格式
number	只允许数字格式
tel	手机号码
search	搜索框
color	生成一个颜色选择表

验证时必须写在form表单域中，点击提交时即可验证

表单属性

属性	值	说明
required	required	不能为空
placeholder	提示文本	提示信息，存在默认值时不显示
autofocus	autofocus	自动聚焦，页面加载完成后自动获取焦点
autocomplete	off/on	开启时，浏览器将基于之前键入的结果给出提示，默认为打开，需要在表单内，具有name属性并且之前提交成功过
multiple	multiple	可以多选文件提交，通常和type=file一起使用

其中placeholder在CSS中可以通过伪元素选择器来修改样式：

1
2
3

input::placeholder {
    color: red
}