zoukankan      html  css  js  c++  java
  • html5:新特性(新增标签、新增标签属性)

    1、新增标签

    (1)新增标签

    • 头部:<header>
    • 导航:<nav>
    • 内容:<article>
    • 文档的某一个区域:<section>
    • 侧边栏:<aside>
    • 尾部:<footer>

    (2)标签的使用

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
               header,nav{
                   height: 50px;
                    600px;
                   background-color: orangered;
                   border-radius: 12px;
                   margin: 12px auto;
               }
               section{
                    height: 100px;
                     600px;
                    background-color: chartreuse;
                    margin: 12px auto;
               }
            </style>
        </head>
        <body>
           <header>头部</header>
           <nav>导航栏</nav>
           <section>区域</section>
        </body>
    </html>

    效果:

     好处:

    • 以前的布局都是使用div,新特性的出现使得选择更加多样,且标签的语义化更加明显
    • 标签可以在一个页面中使用多次

    2、视频标签

    (1)自动播放

    <video src="video/1.mp4" autoplay="autoplay"></video>

    谷歌浏览器不支持自动播放功能

    解决方案:添加muted属性

     <video src="video/1.mp4" autoplay="autoplay" muted="muted"></video>

    (2)播放控件:controls

    <video src="video/1.mp4" autoplay="autoplay" muted="muted" controls="controls"></video>

    (3)自动循环播放:loop

    <video src="video/1.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>

    所有浏览器都支持mp4格式的视频文件,为了兼容性,应该尽量使用mp4格式的视频文件

    3、音频标签

    添加控件、自动播放:

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

    所有的浏览器都支持mp3格式,因此,音频文件应该尽量使用MP3格式的音频

    4、input标签

    <body>
            <form>
                搜索:
              <input type="search" /><br>
                电子邮箱:
              <input type="email" name="" id="" value="" /><br>
                                 地址:
              <input type="url" name="" id="" value="" /><br>
                                月份:
              <input type="month" name="" id="" value="" /><br>
                                      颜色
              <input type="color" name="" id="" value="" />  <br>
              <input type="submit" value="提交" />
            </form>
        
        </body>

    在定义了input的样式之后,点击提交按钮以后如果样式错误的话会给出提示信息

    5、input标签属性

    (1)required属性

      <body>
            <form>
                <input type="search" required="required" />
                <input type="submit" value="提交" />
            </form>
        </body>

    (2)placeholder属性

      <body>
            <form>
                <input type="search" required="required" placeholder="请输入您要搜索的内容"/>
                <input type="submit" value="提交" />
            </form>
        </body>

     会在输入框中显示提示信息

    (3)autofocus属性

    <input type="search" required="required" placeholder="请输入您要搜索的内容" autofocus="autofocus"/>

     自动获取焦点

    (4)autocomplete属性

    <input type="search" required="required" placeholder="请输入您要搜索的内容" autofocus="autofocus" autocomplete="on"/>

    (5)autocomplete属性

    <input type="search" required="required" name="search" placeholder="请输入您要搜索的内容" autofocus="autofocus" autocomplete="on"/>

     输入过的内容当再次点击input标签内部后会给出提示信息。

    (6)multiple属性

    <input type="file" multiple="multiple" />

  • 相关阅读:
    【linux】——FreeBSD 建立 SSH 连接慢的解决方法
    【网络编程】——connect函数遇见EINTR的处理
    【C】——幻方算法
    【C】——实现tree命令
    【数据结构】——较规范的链表操作方法
    【网络编程】——ne-snmp开发实例1
    【linux】——cscope
    【LINUX】——如何配置宿主机和虚拟机IP在同一网段
    sort /tmp space issue
    桑梓桑榆
  • 原文地址:https://www.cnblogs.com/zhai1997/p/13265270.html
Copyright © 2011-2022 走看看