HTML5

最新推荐文章于 2022-04-07 14:58:46 发布

玳宸

最新推荐文章于 2022-04-07 14:58:46 发布

阅读量254

点赞数

分类专栏： # HTML5 & CSS3

本文链接：https://blog.csdn.net/zeroheitao/article/details/108737394

版权

HTML5 & CSS3 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1. 新增语义化标签

< header> : 头部标签
< nav> : 导航标签
< article> : 内容标签
< section> : 块级标签
< aside> : 侧边栏标签
< footer> : 尾部标签

注意：一般用于移动端、搜索引擎；

2. 新增多媒体标签

2.1 < audio>音频标签

HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，但是支持的格式是有限的。

2.1.1. 音频格式

< audio>元素支持三种音频格式：Ogg Vorbis、MP3、Wav

autoplay : autoplay; 音频在就绪后马上播放
controls : controls; 向用户显示控件，比如播放按钮
loop : loop; 音频循环播放
src : url; 播放音频的URL

对于不同浏览器支持不同格式的问题，我们经常准备音频的多个格式。

2.1.2. 音频标签语法格式

< audio src=“文件地址” controls></ audio>
< audio controls=“controls”>
< source src=“xxx.mp3” type=“audio/mpeg”>
< source src=“xxx.ogg” type=“audio/ogg”>
您的浏览器暂不支持audio标签
</ audio>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左手指月</title>
</head>

<body>
    <audio src="左手指月.mp3" controls="controls" autoplay="autoplay"></audio>
</body>

</html>

在这里插入图片描述

2.2 视频标签

2.2.1 不同浏览器支持的格式：

在这里插入图片描述

2.2.2 视频标签常见属性

autoplay : autoplay; 视频自动播放
controls : controls; 向用户显示控件
width : xpx; 设置视频宽度
height : xpx; 设置视频高度
loop : loop; 循环播放
preload : auto/none; 是否预加载视频
src :url; 视频地址
poster : Img url; 加载等待的画面图片
muted : muted; 静音播放

2.2.3 视频标签语法格式

< video src=“文件地址” controls></ video>
< video controls=“controls”>
< source src=“xxx.mp3” type=“video/mpeg”>
< source src=“xxx.ogg” type=“video/ogg”>
您的浏览器暂不支持audio标签
</ video>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        video {
            width: 300px;
        }
    </style>
</head>

<body>
    <video src="朱一龙.mp4" controls="controls"></video>
</body>

</html>

在这里插入图片描述

3. 新增input表单

3.1 表单属性

type=“email”; 输入为Email类型
type=“url”;
type=“date”;
type=“time”;
type=“month”;
type=“week”;
type=“number”;
type=“tel”;
type=“search”; 搜索框
type=“color”; 生成一个颜色选择表单
required=“required”; 显示必填
placeholder=“提示文本”; 显示表单的提示信息
autofocus=“autofocus”; 自动获取输入光标
autocomplete=“off / on”; 是否提示已经输入过的信息
multiple=“multiple”; 上传时一次可以选择多个文件

玳宸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5

1. 新增语义化标签< header> : 头部标签< nav> : 导航标签< article> : 内容标签< section> : 块级标签< aside> : 侧边栏标签< footer> : 尾部标签
复制链接

扫一扫