html5新增加的标签有哪些

时间2024-01-23 07:51:06发布访客分类HTML浏览536

导读：收集整理的这篇文章主要介绍了html5新增加的标签有哪些，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来htML5新增加的标签有哪些，使用html5新增加标签的注意事项有哪些，下面就是实战案例，一起来看一下。今天新学习了9个...

收集整理的这篇文章主要介绍了html5新增加的标签有哪些，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来htML5新增加的标签有哪些，使用html5新增加标签的注意事项有哪些，下面就是实战案例，一起来看一下。

今天新学习了9个标签、

audio> 简单的说就是一个音频标签，他的主要常用属性有src=""音频的路径 controls="controls" 控制参数，他就是可以让其在页面显示一个播放器的效果autoplay="autoplay"自动播放属性 loop="loop"循环次数

video> 同audio标签一样。是一个视频标签。主要常用的属性同上面一样

datalist> 定义选项列表。这个其实是一个比较大的改进，不过也有不足，这个标签其实组合了《input标签中的text》和select标签、生产的一个可以输入和下拉选项的输入组合框》。不足之处在于如果不通过JS控制，只有当输入框中为空，定义的下拉选项中才会生效

details> 定义文档细节。这个标签其实用的地方也比较多，常和summary标签用。summary标签里面写文档的标题。p标签写文档的细节

mark> 一个高亮的显示标签，再也不用标记某一段文字要用font属性了。

menu> 快速创建一个list列表。用法是menu li结合

address> 存放地址的标签

PRogress> 这个是一个进度条标签。他的主要属性有value和max。value表示当前进度条位置，max表示进度条的总共长度。

time> 标签放时间的标签。

初步接触html5的标签。给人的第一感觉就是望文知义。这个标签能够很容易让人记住。

%@ page language="java" contentTyPE="text/html;
     charset=UTF-8"    pageEncoding="UTF-8"%>
    !DOCTYPE html >
    html>
    head>
    meta http-equiv="Content-type" content="text/html;
     charset=UTF-8">
    tITle>
    Html5学习之路/title>
    /head>
    body>
    header style="text-align: center;
     color: blue;
    ">
    欢迎来到Html5的学习之路，我是header标签。/header>
    这是一个定义选项列表的标签datalist 这个的作用就是将text文本框与select标签结合起来input type="text" list="phone">
    datalist id="phone">
        option>
    /option>
        option>
    IPhone/option>
        option>
    华为    /option>
        option>
    小米    /option>
        option>
    三星/option>
    /datalist>
    br/>
    br/>
    font color="red">
    这里我发现了两者一个不同之处在于，datalist只有在输入框为空的时候才会有自己定义下拉的内容!/font>
    br/>
    而这个select选项框是不管什么内容它都会存在的select>
        option>
    IPhone/option>
        option>
    华为    /option>
        option>
    小米    /option>
        option>
    三星/option>
    /select>
    br>
    br>
    br>
    ------------------------br>
    br>
    br>
    这是一个定义文档细节的标签。detail标签。它的主要作用很简单。details>
        summary>
    这是一个detail标签，下面就是他的使用方法/summary>
            p>
    detail标签是什么？/p>
            p>
    detail标签有什么作用？/p>
            p>
    detail标签能干什么？/p>
            p>
    detail标签我改怎么用它？/p>
    /details>
    br>
    detail标签常与sunmmary标签用在一起。比如这个标签是高亮标签mark>
    mark/mark>
    比重不一样。br>
    br>
    接下来这个标签是定义列表标签。menu。menu>
        li>
    西游记/li>
    li>
    水浒传/li>
    li>
    红楼梦/li>
    li>
    三国演义/li>
    /menu>
    br>
    br>
    进度条标签我们用的比较多。比如这个。mark>
    progress/mark>
    progress value="5" max="10">
    value=5 max=10/progress>
    br>
    audio src="" controls="controls" autoplay="autoplay" loop="loop">
    /audio>
    footer>
    我是底部footer标签/footer>
    /body>
    /html>

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！