1.HTML5介绍

什么是HTML5呢，就是从html原本上新增加了一些标签，能使我们前端开发工程师的写起来不需要一个一个去定义，而且在原先基础上增加了很多新特性来简化我们的代码，使别人来看我们的代码变得更加的整洁明亮，接下来就来认识认识我们HTML5的新标签

2.HTML5语义新特性

之前我们用html来写头部如果想要语义更明确得写成

div class=“top”> /div>

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

        header
        ,nav,
        section{
    
            display: block;
    
            height: 200px;
    
            background-color: pink;
    
            margin-top: 10px;

        }
    
        
    /style>
    
/head>
    
body>
    
    header>
    header/header>
    
    nav>
    nav/nav>
    
    section>
    section/section>
    
/body>
    
/html>
    

结果如图

那么其他标签大家可以去试试，我再次说明一下就可以了

现在是这些常用布局标签具体说明

3.新媒体标签 和新增表单标签

1.视频标签和音频标签

这个标签是HTML5在原先基础上引入进来的新标签，在HTML是没有音频和视频标签的，但是现在在HTML里面新增了这几个标签，都来认识一下吧

audio> 标签定义声音，比如音乐或其他音频流。

接下来我们就来试验一下各个标签

!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>
    
    !-- audio src="media/snow.mp3" controls="controls">
    /audio>
     -->
    
    audio controls="controls">
    
        source src="media/snow.mp3" type="audio/mpeg" />
    
        source src="media/snow.ogg" type="audio/ogg /">
    
            
    /audio>
    
/body>
    
 
/html>
    

先写一个audio，然后在写一个controls，这个显示控件的，就是更直观去显示这个播放按钮

source这个意思是来源的意思，意思就是说你的音频文件来源于哪里，这个我也只是看了下意思，

然后剩下我不用说了吧，直接引入就行了

2.视频标签

3.新增表单标签

这里只是简单介绍了表单的标签，现在我们来一一去实现这些标签的功能

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

4.案例小结

学以致用才能更好巩固知识，大家使用一个新特性可以来做一个表单，实现自己个人信息制表图

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！