• html5内容快速学习


    accessKey 快捷键

    <input type="text" accessType="m"/>
    <!-- chrome按下快捷键alt+m,firefox按下shift+alt+m-->

    contenteditable 内容可编辑

    <p contenteditable="true">
    </p>

    data-*自定义属性

    使用dataset可能引起浏览器兼容问题,可以使用获取attribute的方式

    <!DOCTYPE HTML>
    <html>
    <body>
    <input id="te" type="text" accesskey="j" data-age="1"/>
    <script >
    var a=document.getElementById("te");
    alert(a.dataset.age);
    </script>
    </body>
    </html>

    contextmenu,尚无支持的浏览器

    <p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>  
    
    <menu id="supermenu">
      <command label="Step 1: Write Tutorial" onclick="doSomething()">
      <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
    </menu>

    dir规定文本方向ltr:从左到右 rtl从右到左

    <p dir="ltr">
    </p>

    spellcheck拼写检查

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>text</title> 
    </head>
    <body>
    <textarea spellcheck="true">
    </textarea>
    </body>
    </html>下图为chrome下效果

     tabindex

    <a href="/" tabindex="2">2</a>
    <a href="" tabindex="1">1</a>
    <a href="" tabindex="3">3</a>

     cite

    <cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
    按照惯例,引用的文本将以斜体显示。

     base标签_设置url相对寻址的基址

    <head>
    <base href="http://www.a.com.cn/i/" />
    <base target="_blank" />
    </head>

    noscript_js禁用时显示的内容

      <noscript>Your browser does not support JavaScript!</noscript>

    abbr_缩写

    The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

    del_删除线

    a dozen is <del>20</del> 12 pieces

    mark_突出显示

    <p>Do not forget to buy <mark>milk</mark> today.</p>

    ruby_注音

    <ruby><rt> ㄏㄢˋ </rt>
    </ruby>

    track_字幕

    <video width="320" height="240" controls="controls">
      <source src="forrest_gump.mp4" type="video/mp4" />
      <source src="forrest_gump.ogg" type="video/ogg" />
      <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
      <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
    </video>

    equiv_周期刷新

    <meta http-equiv="refresh" content="4">

    async_异步执行脚本

    <script type="text/javascript" src="demo_async.js" async="async"></script>

    prefetch_预加载

    <link rel='prefetch' href='secondary.js'>

    defer_推迟脚本加载,等页面加载完才直接js内容,可以优化页面速度

    <script type="text/javascript" defer="defer">
    alert(document.getElementById("p1").firstChild.nodeValue);
    </script>

    wbr_浏览器换行位置建议

    <p>
    如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
    </p>

    nav_导航菜单

    <nav>
    <a href="index.asp">Home</a>
    <a href="html5_meter.asp">Previous</a>
    <a href="html5_noscript.asp">Next</a>
    </nav>

     autocomplete_input自动完成

    <input type="email" name="email" autocomplete="off" />

     fieldset

    <fieldset>
        <legend>健康信息</legend>
        身高:<input type="text" />
        体重:<input type="text" />
     </fieldset>
     

     novalidate属性_提交表单不验证有效性

    <form action="demo_form.asp" novalidate="novalidate">
      E-mail: <input type="email" name="user_email" />
      <input type="submit" />
    </form>

     datalist_为input提供可能的输入(输入提示)

    <input id="myCar" list="cars" />
    <datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
    </datalist>

     optgroup_对option进行分组

    <select>
      <optgroup label="Swedish Cars">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
      </optgroup>
    
      <optgroup label="German Cars">
        <option value ="mercedes">Mercedes</option>
        <option value ="audi">Audi</option>
      </optgroup>
    </select>
     

     output_计算结果

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
       <input type="range" id="a" value="50">100
       +<input type="number" id="b" value="50">
       =<output name="x" for="a b"></output>
    </form> 

     progress_进度

    下载进度:
    <progress id="p" value="22" max="100">
    </progress>

     oninput事件_尝试修改input值时触发

    <!DOCTYPE html>
    <html>
    <body>
    
    下载进度:
    <progress id="p" value="22" max="100">
    </progress>
    <input id="r" type="range" value=0 max=100 min=0 oninput="c()"/>
    <p><b>注释:</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>
    <script>
    function c()
    {
     var value=document.getElementById("r");
    var p=document.getElementById("p");
    p.value=value.value;
    }
    </script>
    </body>
    </html>

     meter_与progress类似,用来显示具体指的范围

    <p>显示度量值:</p>
    <meter value="3" min="0" max="10">3/10</meter><br>
    <meter value="0.6">60%</meter>

     css选择器

    [href]:{
    color:red;
    }

     
  • 相关阅读:
    记录s标签范例
    链表问题总结
    Hibernate学习总结
    HDU2460-Network
    CF464C-Substitutes in Number
    CF666E-Forensic Examination
    CF373C-Counting Kangaroos is Fun
    CF558E-A Simple Task
    HDU5669-Road
    CF341D-Iahub and Xors
  • 原文地址:https://www.cnblogs.com/ives/p/11014872.html
Copyright © 2020-2023  润新知