HTML5:html5新增了哪些标签?

文章目录

  • 前言
  • 一、新增的页面布局标签
    • 1.新增的标签
  • 二、新增的多媒体标签
    • 1.新增的多媒体标签
  • 三、新增的表单标签
  • 总结


前言

复习前端知识,增进项目开发的知识储备,今天这篇博客复习的是Html5新增的一些标签内容。


一、新增的页面布局标签

1.新增的标签

相比较之前的html版本,html5在网页制作中加入更多如下具有语义性的标签,帮助前端人员更高效地开发一个网页。

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

大致布局界面如下:
HTML5:html5新增了哪些标签?_第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>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;
        }
        
        aside {
            float: right;
            width: 80px;
            height: 200px;
            margin-right: 20px;
            background-color: purple;
        }
        
        footer {
            width: 100%;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <header>
        头部标签
    </header>
    <nav>
        导航栏标签
    </nav>
    <aside>
        侧边栏
    </aside>
    <article>
        <section>
            某个区域
        </section>
    </article>
    <footer>
        底部
    </footer>
</body>
</html>

二、新增的多媒体标签

1.新增的多媒体标签

主要新增了以下两个标签

  • < audio > 音频
  • < video > 视频

1.关于audio标签:
HTML5:html5新增了哪些标签?_第2张图片
注意兼容性:

同一份代码,在不同的浏览器会因为兼容性不同而出现各种问题,比如同样audio标签装载的音频,会因为装在音频的格式不同,在不同的浏览器中出现不能播放等情况。
但可以看到的是,几乎所有浏览器都支持mp3格式的音频,因而在选择播放音频时,应尽量选择mp3格式的音频便于兼容。

代码如下(示例):

<!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>
</head>
<body>
    <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body>
</html>

audio标签中:
1.src属性代表引用的音频路径
2.autoplay代表页面打开后是否会进行自动播放,需要注意的是Chrome浏览器已警用了音频自动播放的属性
3.controls代表是否会有原生的音频控件

2.关于video标签:
HTML5:html5新增了哪些标签?_第3张图片
注意兼容性:

视频的兼容性与音频大抵相同,在有条件的情况下,尽可能应选择mp4作为音频的播放格式。

代码如下(示例):

<!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>
        video {
            width: 100%;
        }
    </style>
</head>
<body>
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>
</body>
</html>

audio标签中:
1.src属性代表引用的视频路径
2.autoplay代表页面打开后是否会进行自动播放,需要注意的是Chrome浏览器已警用了视频自动播放的属性;但可以通过修改*muted=“muted”*属性来实现视频的静音播放功能。
3.controls代表是否会有原生的音频控件
4.poster代表视频尚未加载完成时,会有一张图片代替视频进行显示

三、新增的表单标签

在html5中,针对用户的输入框增加了许多语义,如用户在界面搜索时,搜索的输入框的类型应该为"search" 而不应是"input"。

针对不同的输入类型,html5的表单属性增加了
以下语义:
HTML5:html5新增了哪些标签?_第4张图片
代码如下(示例):

<!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>

总结

Html5新增的标签属性很多,具体的用法还需要更多得查阅文档,前端有很多值得学习的东西,希望自己能学好前端,做好知识迁移,更好地从事开发。

你可能感兴趣的:(前端,html,html5,前端)