HTML5标签

HTML5还是比较简单,本人也是新学,但是里面的一些东西挺好用的,比如说下面的detailsdatalist,如果用JS写的话代码挺烦的,5就能比较好的解决这个问题。以下是一些新增标签,也有图片样式,先总结在博客上,以后要用直接过来复制粘贴,很方便哦~

  1.新增标签

  (1)进度条--Prograss

     <h3>Prograss</h3>
     <progress max="100" value="85">
       <span>85</span>
        "%"
     </progress>

  

  (2)下拉条目-details(挺好用)

    <h3>details</h3>
    <details open>
      <summary>MacBook Pro Specification</summary>
      <ul>
        <li>12-iucb LED-backlit glossy widescreen display with edge</li>
        <li>2.4GHzIntel Core I5 dual-core processor with 3 MB shared for</li>
        <li>12-iucb LED-backlit glossy widescreen display with edge</li>
        <li>2.4GHzIntel Core I5 dual-core processor with 3 MB shared for</li>
        <li>12-iucb LED-backlit glossy widescreen display with edge</li>
        <li>2.4GHzIntel Core I5 dual-core processor with 3 MB shared for</li>
      </ul>
    </details>

  (3)datalist--对输入内容做提示(好用)

  <h3>datalist</h3>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
       <input id="myCar" list="cars"/>
       <datalist id="cars">
          <option value="BMU"></option>
          <option value="Ford"></option>
          <option value="Volvo"></option>
       </datalist>
    </form>

  

  (4)ruby--注释(rt表示注释内容,可标注拼音;rp表示浏览器不支持时该如何显示)

  <h3>ruby</h3>
    <ruby>
     "姚"
     <rt>yao</rt>
     <rp>"女兆"</rp>
    </ruby>  

  

原文地址:https://www.cnblogs.com/SunnyYYN/p/6883363.html