HTML5的新特性(语义化标签、多媒体标签、input表单和表单属性)

最新推荐文章于 2024-05-30 09:37:34 发布

Bulut0907

最新推荐文章于 2024-05-30 09:37:34 发布

阅读量783

点赞数 21

分类专栏：编程语言文章标签： html5 语义化标签多媒体标签 input表单表单属性

本文链接：https://blog.csdn.net/yy8623977/article/details/125126669

版权

编程语言专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1. 新增的语义化标签(header、nav、article、section、aside、footer)

功能和<div>标签一样，在页面中可以使用多次。主要是针对搜索引擎的。常用标签如下

<header>：头部标签
<nav>：导航栏标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

在网页布局中使用的位置如下所示
语义化标签

示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

    </style>
</head>
<body>

<header>我是头部标签</header>
<nav>我是导航栏标签</nav>

</body>
</html>

显示效果如下
语义化标签

2. 多媒体标签

2.1 视频标签

<video>标签使用的视频文件尽量使用mp4格式的，兼容性好

常见属性如下

属性	值	描述
autoplay	autoplay	视频是否自动播放(谷歌浏览器还需要添加muted属性实现自动化播放)
controls	controls	显示播放控件
width	px像素	设置播放画面宽带
height	px像素	设置播放画面高度
loop	loop	是否循环播放
preload	auto(预先加载视频)、none(不预先加载视频)	是否预先加载视频(使用了autoplay会自动忽略该属性)
src	url	视频url地址
poster	img-url	视频未加载好时，显示的图片
muted	muted	静音播放

示例如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>
        video {
            width: 100%;
        }

    </style>
</head>
<body>

<video src="media/test.mp4" autoplay="autoplay" controls="controls" loop="loop" poster="media/test.png" muted="muted"></video>

</body>
</html>

2.2 音频标签

<audio>标签使用的音频文件尽量使用mp3格式的，兼容性好

常见属性如下

属性	值	描述
autoplay	autoplay	音频是否自动播放(谷歌浏览器并不会自动播放，可以使用Javascript进行解决)
controls	controls	显示播放控件
loop	loop	是否循环播放
src	url	音频url地址

示例如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

    </style>
</head>
<body>

<audio src="media/test.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>

</body>
</html>

显示效果如下，谷歌浏览器并不会自动播放
audio

3. 新增input表单，和表单属性

新增的input表单，会对用户输入的内容进行一定的限制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>
        /*元素的属性选择器*/
        input::placeholder {
            color: red;
        }
    </style>
</head>
<body>

<form action="test.php" method="get" name="test_form">

    <!--HTML5新增的input表单-->
    请选择日期：<input type="date" name="date" value=""/> <br />
    请选择月份：<input type="month" name="month" value=""/> <br />
    请选择周：<input type="week" name="week" value=""/> <br />
    请选择时间：<input type="time" name="time" value=""/> <br />
    请输入数字：<input type="number" name="number" value=""/> <br />
    请选择一个颜色：<input type="color" name="color" value=""/> <br />

    <!--HTML5新增的input表单，和表单属性-->
    请输入正确格式的邮箱, 页面打开光标自动定位到这里：<input type="email" name="email" value="" autofocus="autofocus"/> <br />
    请输入正确格式的URL, 默认会记录输入过的URL：<input type="url" name="url" value="" autocomplete="on"/> <br />
    请输入手机号码, 必填：<input type="tel" name="tel" value="" required="required"/> <br />
    请根据提示, 输入要搜索的内容：<input type="search" name="search" value="" placeholder="搜索提示内容"/> <br />

    <!--HTML5新增的表单属性-->
    请选择文件，可以一个或多个：<input type="file" name="file" value="上传文件" multiple="multiple"/> <br />

    <input type="submit" name="submit" value="提交"/> <br />

</form>

</body>
</html>

显示效果如下
新增input表单和表单属性

Bulut0907

关注

21
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
HTML5的新特性(语义化标签、多媒体标签、input表单和表单属性)

功能和标签一样，在页面中可以使用多次。主要是针对搜索引擎的。标签使用的视频文件尽量使用mp4格式的，兼容性好。标签使用的音频文件尽量使用mp3格式的，兼容性好。新增的input表单，会对用户输入的内容进行一定的限制。显示效果如下，谷歌浏览器并不会自动播放。在网页布局中使用的位置如下所示。
复制链接

扫一扫

专栏目录