• H5新添加的标签:


    1、如果文字要加粗显示,<em> 是用作强调的,strong是用作重点强调的。

    2、<pre>标签是原样输出标签,在该标签中的空格、换行、段落都可以原样输出。

    3、标签语义化其实就是把你想要表达的东西更容易被搜索引擎理解和重视。

    4、<abbr title="Hyper text Markup Language">HTML</abbr>是缩写标签。

    5、H5新增的多媒体标签:video、audio、canvas;

      <audio src="1.mp3" controls="controls">

    <audio controls="controls" autoplay loop>  autoplay 表示自动播放;loop表示循环次数;
       <source src="1.mp3"  type="audio/mpeg"/>
       <source src="1.ogg"  type="audio/ogg"/>
    </audio>

     <video src="1.mp4" controls="controls">
    <video controls="controls" autoplay loop> autoplay 表示自动播放;loop表示循环次数;
    <source src="1.mp4" type="audio/mpeg"/>
    <source src="1.ogg" type="audio/ogg"/>
    </video >
    var audio = document.getElementById('music1');
    audio.play(); //播放
    audio.pause(); //暂停

    audio.pause();
    audio.currentTime=0; //停止

    6、新增的布局标签:<header>、<nav>、<article>、<section>、<aside> 、<footer>.更加具有语义化,更容易被搜索引擎识别;

          6.1、nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

          6.2、article元素展示网页中独立的一块内容,譬如论坛的帖子、博客的文章、一篇用户评论。

          6.3、section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。

          6.4、aside 元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等

          6.5、<datalist> 标签定义选项列表;这是一个具有下拉菜单功能的文本框,当输入文字时,会自动匹配相对应的内容;

              <input type="text" list="taglist" />
             <datalist id="taglist">
             <option>苹果</option>
             <option>橘子</option>
             <option>西红柿</option>
             </datalist>

       6.6、address地址标签;progress进度条标签details标签定义文档细节mark高亮显示

    7、新增的表单标签

    <input type="email" />   //验证邮箱
    <input type="url" /> //验证网址

    <input type="tel" /> //验证电话,有的浏览器不识别
    <input type="number" min="1" max="20" step="1" /> //数量的一个按钮,可以增加和减少,可以用到购物的数量上;
    <input type="range"  min="1" max="20" step="4" /> //进度条,可以用到音乐、视频的进度效果,点击一次前进4;
    <input type="search" /> //搜索框
    <input type="color" /> //颜色,当点击的时候,会弹出调色板,选取想要的颜色
    <input type="date" /> //日期,可以调整日期
    <input type="month" /> //月份,可以调整月
    <input type="week" /> //周
    <input type="time" /> //时间

    8、自动补全;

      <form autocompelete="on">
          <input type="text" list="citylist" />
          <datalist id="citylist">
           <option>BeiJing</option>
           <option>QingDao</option>
           <option>QingZhou</option>
           <option>QingHai</option>
           </datalist>
          </form>

    9、

         9.1、页面加载的时候获取焦点;<input type="text" autofocus="autofocus"/>autofocus页面刷新了,自动获取焦点;

         9.2、form外也可以做数据提交,

       <form action="" method="get"   id="form1"></form>
       <input type="text" name="address1" form="form1" />
    9.3、
    file可以支持多文件上传了,<input type="file" name="img" multiple="multiple" />
    9.4、
    支持自定义验证功能了;
    <form action="1.aspx"> 请输入邮政编码:<input type="text" pattern="[0-9]{6}" title="请输入6位数的邮编" /> <input type="submit" /> </form>

    10、js的async 属性规定一旦脚本可用,则会异步执行。

      <p id="p1">Hello World!</p>
      <script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>
    当<
    script>文件过大时,加上async属性,就可以异步执行,可以先加载其他的内容;

       

       

     
     

     

    //验证邮箱
  • 相关阅读:
    章节十:Selenium
    章节七:csv&excel
    章节十三:协程实践
    章节十二:协程
    章节八:爬取知乎文章
    章节十五:Scrapy实操
    章节十六:复习与反爬虫
    章节十一:定时与邮件
    章节十四:Scrapy框架
    阅读习惯2
  • 原文地址:https://www.cnblogs.com/guanyushan/p/7831609.html
Copyright © 2020-2023  润新知