关于HTML5的新增特性，你只需要了解这3点-Toy模板网

这篇具有很好参考价值的文章主要介绍了关于HTML5的新增特性，你只需要了解这3点。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍常见html5的新增特性。知识学习内容来自b站的@黑马程序员的视频

html5的新特性

起源

html5新增特性主要是针对以前语义化不足的问题，添加了新的标签、表单和表单属性等。

新增的语义化标签

关于HTML5的新增特性，你只需要了解这3点 header：头部标签

nav导航标签

article：内容标签

section：文档部分区域（大号的div）

aside：侧边栏标签

footer：尾部标签

注意：

1.这种语义化标签主要针对搜索引擎

2.新标签可以使用多次

3.移动端更喜欢用这些标签

🌟新增的多媒体标签

音频：audio（推荐MP3格式）

视频：video（更推荐用mp4，因为基本能全部兼容）

使用它们可以很方便的插入视频和音频。

<!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>
    <!-- 下面属性分别是：自动播放、静音设置、循环播放、视频加载等待时显示的图片 -->
    <video src="#" autoplay="autoplay" muted="muted" loop="loop" poster="#"></video>
</body>
</html>

<!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>
    <video src="#" autoplay="autoplay" loop="loop"></video>
</body>

</html>

更多的信息可以在菜鸟教程上查看

🌟新增的input类型

关于HTML5的新增特性，你只需要了解这3点

重点只需要了解：number、tel和search三个

🌟新增的表单属性

关于HTML5的新增特性，你只需要了解这3点

<!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>
    <form action="">
        <input type="search" name="search" id="" required="required" placeholder="请输入内容">
        <input type="submit" value="提交">
    </form>
</body>

</html>

关于HTML5的新增特性，你只需要了解这3点