HTML5的一些新增标签属性的笔记

知识点:
  html5新增的标签
    结构标签
      <section></section>   模块
      <article></article>   文章
      <header></header>     头部
      <footer></footer>     底部
      <nav></nav>           导航
      <address></address>   地址

    多媒体标签
      视频标签
      <video width="320" height="240">
        <source src="" type="video/ogg">
        <source src="" type="video/mp4">
      </video>

    属性
      controls 允许用户控制视频的播放,快进,暂停
      autobuffer 即使没有自动播放,视频也会开始自动缓冲
      autoplay 自动播放
      loop 是否循环播放
      width  定义视频宽度
      height  定义视频高度
      src 播放视频的地址

    音频标签
    <audio>
      <source src="" type="audio/ogg">
      <source src="" type="audio/wav">
      <source src="" type="audio/mp3">
    </audio>
    controls 允许用户控制视频的播放,快进,暂停
    autobuffer 即使没有自动播放,视频也会开始自动缓冲
    autoplay 自动播放
    loop 是否循环播放
    src 播放视频的地址

    表单标签

    <input name="email" type="email" value=""> 邮箱表单, 识别邮箱的格式

    <input name="url" type="url" value=""> 链接表单, 识别链接的格式, http://www.***.***

    <input name="range" type="range" value=""> 类似音量调节,获取当前调整位置的属性

    <input name="month" type="month" value=""> 月份

    <input name="week" type="week" value=""> 周

    <input name="" type="time" value="">  时间

    <input name="search" type="search" value="">  搜索

    <input name="color" type="color" value="">


    其他的标签

    <progress><progress>  进度条标签

    <details>
      <summary>老师</summary>
      <ul>
        <li>james<li>
        <li>star<li>
        <li>nizi<li>
      </ul>
    </details>


    <input type="text" id="kind" type="" name="" list="kind-language">
    <datalist id="kind-language">
      <option value="C#"></option>
      <option value="php"></option>
      <option value="java"></option>
      <option value="js"></option>
      <option value="c++"></option>
      <option value="python"></option>
      <option value="c"></option>
      <option value="易语言"></option>
    </datalist>


    搜索  输入提示标签 智能关键词匹配

    <script defer src=""></script> 页面加载完以后执行
    <script async src=""></script> 浏览器解析到这里就下载下来
    并不会阻止浏览器继续解析下面的内容(异步)


    <a href="" target="target" hreflang="zh-cn"></a>

    <canvas></canvas>
    <svg></svg>
 

猜你喜欢

转载自blog.csdn.net/weixin_42588379/article/details/81067154
今日推荐