Prägnante Version der HTML5-Studiennotizen (7): Neue Attribute (2)

dirname-Attribut

Die Eingabe- und Textarea-Elemente verfügen über ein neues Element dirname, das zur Steuerung der vom Benutzer festgelegten Übermittlungsrichtung (Annotation, Schreibrichtung, ltr oder rtl) verwendet wird.

<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>

Wenn der Benutzer abschickt, erhält der Browser drei Parameter, nämlich Kommentar, Kommentar.dir und Modus, ähnlich wie folgt: comment=Hello&comment.dir=ltr&mode=add

Wenn es sich um einen arabischen Browser handelt und die Eingabe Arabisch ist, sollten die zurückgegebenen Parameter wie folgt aussehen:

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

maxlength und textarea Das neue maxlength des Wrap-Attributs

textarea ist dasselbe wie die maximale Länge der Eingabe, beide begrenzen die maximale Länge.

Das neu hinzugefügte Wrap-Attribut ist ein Aufzählungswert (weich/hart), was bedeutet:

hart: automatische harte Rückkehr und Zeilenvorschub, und die Zeilenvorschubmarkierung wird zusammen an den Server übertragen . Es muss zusammen mit cols verwendet werden, um zu bestimmen, wie viele Zeichen umgebrochen werden sollen;

soft: automatischer weicher Wagenrücklauf und Zeilenvorschub, die Zeilenvorschubmarkierung wird nicht an den Server gesendet

novalidate Attribut unter Formular

Das neue Attribut novalidate bedeutet, dass das Formular ohne Überprüfung übermittelt werden kann (unabhängig davon, ob die Elemente im Formular Überprüfungsbedingungen haben, wie z. B. erforderlich, min, max usw.).

Beispielcode:

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

Eine andere Verwendung besteht darin, dass es mehrere Senden-Schaltflächen im selben Formular gibt. Sie können das formnovalidate-Attribut für eine Schaltfläche festlegen, um die Validierung zu ignorieren, zum Beispiel:

<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>

Dieses Formular wird nur validiert, wenn auf die Schaltfläche „Aufsatz senden“ geklickt wird. Die anderen beiden Schaltflächen werden nicht validiert.

Neue Attribute unter Eingabe und Schaltfläche

Eingabe- und Schaltflächenelemente haben mehrere neue Attribute hinzugefügt (formaction, formenctype, formmethod, formnovalidate und formtarget). Wenn diese Attribute festgelegt sind, dann das entsprechende Formularattribut Der Wert wird überschrieben, d. h. die Aktions-, Enctype-, Methoden-, Novalidate- und Zielattributwerte des Formularelements, zu dem die Eingabe oder Schaltfläche gehört, werden überschrieben.

Beispielcode:

<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>

Typ- und Beschriftungsattribute unter Menü

Das Menüelement verfügt über zwei neue Attribute: Typ und Beschriftung. Sie ermöglichen die Umwandlung des Elements in ein Menü in einer typischen Benutzeroberfläche und stellen in Verbindung mit der globalen Eigenschaft contextmenu ein Kontextmenü bereit. Das bereichsbezogene Attribut unter

style Das

style-Element verfügt über ein neues bereichsbezogenes Attribut, das zum Aktivieren von bereichsbezogenen Stylesheets verwendet wird. Stilregeln in einem solchen Stilelement gelten nur für den Unterbaum oder Geschwisterbaum des übergeordneten Elements des aktuellen Stilelements.

<!-- 这个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>

Das Async-Attribut unter Skript

Das Async-Attribut ermöglicht die asynchrone Ausführung der Skriptladeschritte (d. h. es muss in Form einer src-Referenzdatei vorliegen), z Beispiel:

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

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

如果 async="async"：脚本相对于页面的其余部分异步执行（当页面继续进行解析时，脚本将被执行）

如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行

如果既不使用 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 rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />

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 事件。