dirname 属性
Input 要素と textarea 要素には、ユーザーが設定した送信の方向性 (アノテーション、つまり、ltr または rtl の書き込みの方向性) を制御するために使用される新しい要素 dirname があります。
<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 は入力の maxlength と同じで、両方とも最大長です。
新しい Wrap 属性は列挙値 (ソフト/ハード) です。これは次のことを意味します:
ハード: 自動ハード復帰と改行マークは、cols と一緒にサーバーに送信されます。文字数を決定します 改行;
ソフト: 自動ソフトリターンと改行、改行マークはサーバーに送信されません
フォームの下の novalidate 属性
新しい属性 novalidate は、フォームを送信できることを意味します検証なし (形式については気にしないでください) 要素に検証条件 (必須、最小、最大など) があるかどうか)。
コード例:
<form action="demo_form.asp" novalidate="novalidate">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
ログイン後にコピー
もう 1 つの使用法は、同じフォームに複数の送信ボタンがある場合、特定のボタンに 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>
ログイン後にコピー
このフォームは次の場合にのみ使用できます。 [エッセイを送信] ボタンがクリックされた場合 フォームは時間になったときにのみ検証され、他の 2 つのボタンは検証されません。
input 要素と button 要素に新しい属性が追加されました (formaction、formenctype、formmethod、formnovalidate、formtarget)。これらの属性が設定されている場合、対応する form 属性値は Override になります。 input またはボタンが属する form 要素の action、enctype、method、novalidate、target 属性の値は上書きされます。
コード例: menu の下の
<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>
ログイン後にコピー
type 属性と label 属性
menu 要素には、type と label という 2 つの新しい属性があります。これらにより、要素を一般的なユーザー インターフェイスのメニューに変換でき、グローバル contextmenu プロパティと組み合わせてコンテキスト メニューを提供できます。 style
style 要素の下の
scoped 属性には、スコープ付きスタイル シートを有効にするために使用される新しいscoped 属性があります。このようなスタイル要素のスタイル ルールは、現在のスタイル要素の親要素のサブツリー、または兄弟ツリーにのみ適用されます。
<!-- 这个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>ログイン後にコピー
スクリプトの async 属性
async 属性を使用すると、スクリプトの読み込みステップを非同期で実行できます (つまり、src 参照ファイルの形式である必要があります)。例:
<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下的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 事件。
上記は、HTML5 学習ノート (7): 新しい属性の内容 (2) の簡潔版です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
