文章目录
前言
在网页中嵌入视频,音频,以及对表单进行更全面的初始化
一、语义标签
语义标签的使用,更利于我们后期对其进行维护
1.常见的语义标签
<header>头部标签</header> <nav>导航栏标签</nav> <section>某个区域</section> <div> <img src="../语义标签.png" alt=""> </div>
2.代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML5新增语义化标签</title> <style> /* 语义标签根据使用的场景不同可以使用不同的语义标签 有利于我们后期对网页的维护,与查看 */ header, nav { height: 120px; background-color: pink; border-radius: 15px; width: 800px; margin: 15px auto; } section { width: 500px; height: 300px; background-color: skyblue; } div { width: 300px; height: 300px; } div img { width: 100%; height: 100%; } </style> </head> <body> <header>头部标签</header> <nav>导航栏标签</nav> <section>某个区域</section> <div> <img src="../语义标签.png" alt=""> </div> </body> </html>
3.效果展示
二、视频标签video
1.属性简介
src="../mi.mp4" 存放视频的路径 autoplay="autoplay" 是否自动播放 muted="muted" 静音播放 loop="loop" 循环播放 controls="controls" 添加控件 poster="../下载.jpg" 加载时等待的图片
2.代码示例
<!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%; height: 100%; } </style> </head> <body> <video src="../mi.mp4" autoplay="autoplay" muted="muted" loop="loop" controls="controls" poster="../下载.jpg"></video> </body> </html>
3.效果展示
三、音频标签
音频标签与视频标签属性一样 <!-- src="../mi.mp4" 存放视频的路径 autoplay="autoplay" 是否自动播放 muted="muted" 静音播放 loop="loop" 循环播放 controls="controls" 添加控件 poster="../下载.jpg" 加载时等待的图片 -->
1.代码示例
<!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> </style> </head> <body> <audio src="../苍雪龙城.mp3" muted="muted" controls="controls"></audio> </body> </html>
2.效果展示
这里大家是听不到声音的,就假装大家可以听到声音了
四、新增表单属性
1.新增概览
<!-- 对于搜索框input而言 type="search" 类型搜索 name="sear" id="" required="required" 限定文本框为必填的文本框 placeholder="pink老师" 搜索框中默认是什么东西 autofocus="autofocus" 自动将光标填入文本框 autocomplete="off" 不保留搜索历史 保留搜索历史的标签要有一个name --> <!-- 提交文件而言 type="file" name="" id="" multiple="multiple" 实现一次提交多个文件 ctrl+鼠标点击 -->
2.代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML5新增表单属性</title> <style> input::placeholder { color: blue; } </style> </head> <body> <form action=""> <input type="search" name="sear" id="" required="required" placeholder="默认值" autofocus="autofocus" autocomplete="off"> <input type="file" name="" id="" multiple="multiple"> <input type="submit" value="提交"> </form> </body> </html>
3.效果展示
4.type新增属性
以下属性直接规范了表单中的数据,不用再使用javascrip进行表单验证了 邮箱: <input type="email" /> 网址: <input type="url" /> 日期: <input type="date" /> 时间: <input type="time" /> 数量: <input type="number" /> 手机号码: <input type="tel" /> 搜索: <input type="search" /> 颜色: <input type="color" />
①代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 我们验证的时候必须添加form表单域 --> <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>
②效果展示
总结
新的标签新的特性,往往是为了方便我们大家日常开发产生的。如果使用本博客中的代码，请将代码中的文件路径改为你自己的。
