HTML5学习笔记简明版（7）：新增属性（2）

╰+攻爆jí腚メ 2022-04-16 04:20 870阅读 0赞

# 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里有多个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>
        <h1>Blah Title Blah</h1>
        <p>Blah blah article blah blah.</p>
    </article>
    
    <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引用文件的形式才可以用），例如：

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

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属性里：

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

## ##

# link下的sizes属性 #

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

例子代码：

# ol下的reversed属性 #

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

## ##

# iframe下的sanddbox, seamless和srcdoc属性 #

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

例子代码：