HTML5总结

试着爱我吧

于 2021-10-22 20:08:26 发布

阅读量162

点赞数

文章标签： html5 html 前端

本文链接：https://blog.csdn.net/weixin_49445694/article/details/120911963

版权

本文介绍了HTML5中新增的语义化标签如header、nav等，详细列举了input类型的变化，包括email、tel、url等，并展示了如何使用progress和meter创建进度条。同时涵盖了audio和video标签的使用及其特性。

摘要由CSDN通过智能技术生成

一、在html5中新增了很多语义化标签

比如：header、nav、main、footer、

二、HTML新增input标签的 type类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    用户名：<input type="text" name="userName"> <br>
    密码：<input type="password" name="userPwd"> <br>
    <!--email提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交-->
    邮箱：<input type="email"> <br>
    <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果：qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
    电话：<input type="tel"> <br>
    <!--验证只能输入合法的网址：必须包含http://，否则不通过-->
    网址：<input type="url"> <br>
    <!--number：只能输入数字(包含小数点)，输入不了其他的字符
    max:最大值
    min:最小值
    value:默认值-->
    数量：<input type="number" value="60" max="100" min="0"> <br>
    <!--search：可以提供更人性化的输入体验-->
    请输入商品名称：<input type="search"> <br>
    <!--range:范围-->
    范围：<input type="range" max="100" min="0" value="50"> <br>
    颜色：<input type="color"> <br>
    <!--日期时间相关-->
    <!--time:时间：时分秒-->
    时间：<input type="time"> <br>
    <!--date：日期：年月日-->
    日期：<input type="date"> <br>
    <!--datetime:大多数浏览器不能支持datetime,所以一般用下面datetime-local那个.用于屏幕阅读器-->
    日期时间：<input type="datetime"><br>
    <!--datetime-local:日期和时间-->
    日期时间：<input type="datetime-local"> <br>
    月份：<input type="month"> <br>
    星期：<input type="week">
    <!--提交-->
    <input type="submit">
</form>
</body>
</html>

三、HTML5的进度条

<progress标签的作用就是进度条，不过感觉meter度量器好像和progress进度条没什么区别。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--max:最大值
value:当前进度值-->
<progress max="100" value="50"></progress>
<!--度量器：衡量当前进度值-->
    
<!--high:规定的较高的值
low:规定的较低的值
max:最大值
min:最小值
value:当前度量值-->
<meter max="100" min="0" high="80" low="40" value="30"></meter>
<meter max="100" min="0" high="80" low="40" value="60"></meter>
<meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>
</body>
</html>

四、html5中的多媒体标签

1、音频audio标签

HTML5通过标签来解决音频播放的问题。

语法格式：

<audio src="路径"  autoplay="autoplay" controls="true" loop=2></audio>

autoplay属性控制是否网页加载自动播放

controls 是否显示播放控件，默认不显示

loop 属性用于控制循环次数，如果值为正整数，则播放指定的次数，如果是 loop 或者是 loop = -1，则无线循环播放。

2、视频 video 标签

语法格式：

<video src="路径" controls  autoplay width="300px"></video>

autoplay属性控制是否网页加载自动播放

controls 是否显示播放控件，默认不显示

loop 属性用于控制循环次数，如果值为正整数，则播放指定的次数，如果是 loop 或者是 loop = -1，则无线循环播放。

width 属性设置播放窗口宽度

height 属性设置播放窗口高度

试着爱我吧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5总结

一、在html5中新增了很多语义化标签比如：header、nav、main、footer、二、HTML新增input标签的 type类型<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action=""> 用户名
复制链接

扫一扫