新特性
- 针对以前的不足增加了一些新的标签,新的表单属性
- 但这些新增的属性都有一定的版本兼容性的问题,基本上是IE9+的版本才能支持
- div对于搜索引擎来说,是没有语义的
1.新增的语义化标签
图片来自黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+web前端视频教程 275集
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header {
height: 120px;
background-color: pink;
border-radius: 15px;
width: 800px;
margin: 15px auto;
}
nav {
height: 120px;
background-color: blue;
border-radius: 15px;
width: 800px;
margin: 15px auto;
}
section {
width: 500px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<header>头部标签</header>
<nav>导航栏标签</nav>
<section>某个区域</section>
</body>
</html>
最终效果
2.新增的多媒体标签
<video src=“文件地址” controls = “controls”>< /video>
<audio>
- 可以比较方便地插入视频文件和音频文件
- video支持多种视频格式,但是mp4的兼容性最好,所以最好使用mp4的视频格式
- 注意谷歌浏览器会把自动播放禁止掉,但是可以用muted来自动播放
2.1视频标签
视频文件标签控件
图片来自黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程276集
2.2音频标签
音频多使用mp3支持大多数的浏览器
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video {
width: 100%;
}
</style>
</head>
<body>
<h1>视频标签</h1>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"
poster="media/mi9.jpg"></video>
<h1>音频标签</h1>
<audio src="media/music.mp3" autoplay="autoplay" muted="muted" controls="controls"></audio>
</body>
</html>
最终效果
3.新增的input类型
图片来自黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程 278集
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 我们验证的时候必须添加from表单域 -->
<form action="">
<ul>
<li>邮箱: <input type="email"></li>
<li>网址: <input type="url"></li>
<li>日期: <input type="date"></li>
<li>时间: <input type="time"></li>
<li>数量: <input type="number"></li>
<li>手机号码: <input type="tel"></li>
<li>搜索: <input type="search"></li>
<li>颜色: <input type="color"></li>
<!-- 当我们点击提交的时候就会验证表单了 -->
<li><input type="submit" value="提交"></li>
</ul>
</form>
</body>
</html>
最终效果
4.新增的表单属性
图片来自黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程279集
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input::placeholder {
color: skyblue;
}
</style>
</head>
<body>
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="aaaaa" autofocus="autofocus"
autocomplete="on">
<input type="file" name="file" id="" multiple="multiple">
<!-- 当我们点击提交的时候就会验证表单了 -->
<li><input type="submit" value="提交"></li>
</form>
</body>
</html>
最终效果
写在最后
注:上述笔记均来自黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+web前端视频教程 这一课程的学习记录,主要供自己的学习分享
各位看官,都看到这里了,麻烦动动手指头给博主来个点赞8,您的支持作者最大的创作动力哟! <(^-^)>
才疏学浅,若有纰漏,恳请斧正
本文章仅用于各位同志作为学习交流之用,不作任何商业用途,若涉及版权问题请速与作者联系,望悉知