ホームページ > 記事 > ウェブフロントエンド > HTML5 学習メモの簡潔版 (7): 新しい属性 (2)

HTML5 学習メモの簡潔版 (7): 新しい属性 (2)

黄舟オリジナル: 2017-01-21 16:58:022070ブラウズ

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) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 学習メモの簡潔版 (6): 新しい属性 (1)次の記事：HTML5 学習メモの簡潔版 (6): 新しい属性 (1)

続きを見る

HTML5 学習メモの簡潔版 (7): 新しい属性 (2)

関連記事