zoukankan      html  css  js  c++  java
  • HTML5学习笔记简明版(7):新增属性(2)

    dirname属性

    input 和 textarea 元素有了一个新元素 dirname,用于用户所设置的提交的方向性的控制(译注,即书写的方向性,ltr或rtl)。

    <form action="addcomment.cgi" method=post>
    <p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
    <p><button name="mode" type=submit value="add">Post Comment</button></p>
    </form>

    用户提交的时候,浏览器会接收到3个参数,分别是:comment, comment.dir和mode,类似下面这样:comment=Hello&comment.dir=ltr&mode=add

    如果是阿拉伯文的浏览器,输入的是阿拉伯文مرحبًا的话,那传回的参数就应该是这样的:

    comment=%D9%85%D8%B1%D8%AD%D8%A8%D9%8B%D8%A7&comment.dir=rtl&mode=add

     

    textarea下的maxlength和wrap属性

    textarea新增的maxlength和input的maxlength是一样的,都是限制最大长度的。

    新增的wrap属性为枚举值(soft/hard),意思分别是:

    • hard:自动硬回车换行,换行标记一同被传送到服务器中去,必须与cols同时使用才能判断多少字符换行;
    • soft:自动软回车换行,换行标记不会传送到服务器中去

     

    form下的novalidate属性

    新增属性novalidate的意思是允许form表单不验证即可提交(不用管form里的元素是否有验证条件,例如required, min, max等)。

    例子代码:

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

    还有一种用法是,同一个form里有多个submit按钮,可以针对某个按钮设置formnovalidate属性来忽略验证,例如:

    <form action="editor.cgi" method="post">
    <p><label>Name: <input required name=fn></label></p>
    <p><label>Essay: <textarea required name=essay></textarea></label></p>
    <p><input type=submit name=submit value="Submit essay"></p>
    <p><input type=submit formnovalidate name=save value="Save essay"></p>
    <p><input type=submit formnovalidate name=cancel value="Cancel"></p>
    </form>

    该form只有在点击Submit essay按钮的时候才验证表单,另外2个按钮不验证。

    input与button下的新属性

    input和button元素新增加了几个新属性(formaction, formenctype, formmethod, formnovalidate和formtarget),如果这些设置这些属性的话,那所对应的form属性值将被覆盖,即input或button所属的form元素的action, enctype, method, novalidate和target属性的值将被覆盖。

    例子代码:

    <form action="demo_form.asp" method="get">
    First name: <input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    <input type="submit" value="Submit" />
    <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit" />
    </form>

    <form action="demo_form.asp" method="get">
    First name: <input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    <input type="submit" value="Submit" /><br />
    <input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
    </form>

    <form action="demo_form.asp" method="get">
    First name: <input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    <input type="submit" value="Submit" />
    <input type="submit" formtarget="_blank" value="Submit" />
    </form>

    menu下的type和label属性

    menu 元素有了两个新属性:type 和 label。它们允许元素转化成典型用户界面里的菜单,并结合全局 contextmenu 属性提供上下文菜单。

     

    style下的scoped属性

    style 元素有了一个新的 scoped 属性,用来启用限定作用范围的样式表。在一个这样的 style 元素里的样式规则只应用到当前style元素的父元素根下的子树,即兄弟树。

    <!-- 这个article正常使用head里声明的style -->
    <article>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
    </article>

    <article>
    <!-- 这里声明的style只能让该article以及子元素使用 -->
    <style scoped>
    h1
    { color: hotpink; }
    article
    { border: solid 1px hotpink; }
    </style>
    <h1>Blah Title Blah</h1>
    <p>Blah blah article blah blah.</p>
    </article>

    script下的async属性

    async属性可以让script加载的脚步异步执行(即必须是src引用文件的形式才可以用),例如:

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

    有多种执行外部脚本的方法:

    1. 如果 async="async":脚本相对于页面的其余部分异步执行(当页面继续进行解析时,脚本将被执行)
    2. 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
    3. 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

     

    html下的manifest属性

    html 元素有了一个新属性 manifest,指向一个用于结合离线Web应用API的应用程序缓存清单。

    首先,需要先创建manifest文件

    CACHE MANIFEST
    #This is a comment

    CACHE #需要缓存的文件
    index.html
    style.css

    NETWORK: #不需要缓存的文件
    search.php
    login.php

    FALLBACK: #资源不可用的情况下,重定向的地址
    /api offline.html

    然后加该文的地址加到html属性里:

    <html manifest="/offline.manifest">

    例子:http://www.mangguo.org/create-offline-html5-web-apps-in-5-easy-steps/

     

    link下的sizes属性

    link 元素有了一个新的属性 sizes。可以结合 icon 的关系(通过设置 rel 属性,可被用于如网站图示)一起使用来表明被引用图标的大小。因此允许了不同的尺寸的图标。

    例子代码:

    <link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />

    ol下的reversed属性

    ol 元素有了一个新属性 reversed。当其存在时,代表列表中的顺序为降序。

     

    iframe下的sanddbox, seamless和srcdoc属性

    iframe 元素有了三个新属性分别是 sandbox, seamless, 和 srcdoc,用以允许沙箱内容,例如,博客评论。

    例子代码:

    <iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
    <iframe sandbox="allow-same-origin allow-forms allow-scripts"
    src
    ="http://maps.example.com/embedded.html"></iframe>

    Seamless:

    <nav><iframe seamless src="nav.include.html"></iframe></nav>

    video和audio的play属性

    HTML5也使得所有来自HTML4的事件处理属性(那些形如 onevent-name 的属性)变成全局属性,并为其定义的新的事件添加了几个新的事件处理属性。比如,媒体元素(video 和 audio)API所使用的 play 事件。

  • 相关阅读:
    【Azure 应用服务】在Azure App Service多实例的情况下,如何在应用中通过代码获取到实例名(Instance ID)呢?
    【Azure 应用服务】App Service For Windows 中如何设置代理实现前端静态文件和后端Java Spring Boot Jar包
    【Azure Developer】使用Azure Key Vault 的Key签名后,离线验证的一些参考资料
    【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
    【Azure 应用服务】App Service 使用Tomcat运行Java应用,如何设置前端网页缓存的相应参数呢(Xms512m Xmx1204m)?
    【Azure API 管理】APIM添加Logtoeventhub的策略后,一些相关APIM与Event Hub的问题
    【Azure API 管理】为调用APIM的请求启用Trace 调试APIM Policy的利器
    【Azure 事件中心】China Azure上是否有Kafka服务简答
    【Azure 应用服务】探索在Azure上设置禁止任何人访问App Service的默认域名(Default URL)
    【Azure 微服务】记一次错误的更新Service Fabric 证书而引发的集群崩溃而只能重建
  • 原文地址:https://www.cnblogs.com/TomXu/p/2269129.html
Copyright © 2011-2022 走看看