HTML 5学習ノート簡明版(7):新規属性(2)

22054 ワード
httml 5
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と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>

     
    もう1つの方法は、同じ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の2つの新しい属性があります.これらは、要素を典型的なユーザーインタフェースのメニューに変換し、グローバルcontextmenuプロパティと組み合わせてコンテキストメニューを提供することを可能にします.
     
    スタイルの下の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>

     
    外部スクリプトを実行する方法はいくつかあります.
  • async="async":ページの残りの部分に対してスクリプトが非同期で実行される場合(ページが解析を続行するとスクリプトが実行される)
  • asyncを使用せずにdefer="defer":スクリプトは、ページの解析が完了すると
    • を実行します.
  • asyncもdeferも使用しない場合:ブラウザがページの解析を続行する前に、スクリプト
    • を読み出して実行します.
     
    htmlの下のmanifestプロパティ
    html要素には、オフラインWebアプリケーションAPIと結合するためのアプリケーションキャッシュリストを指す新しいプロパティmanifestがあります.
    まず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があります.参照されるアイコンのサイズは、relプロパティを設定することによって、ウェブサイトの図示のように使用することができるiconの関係と組み合わせて使用することができる.これにより、異なるサイズのアイコンが許可されます.
    例コード:
    <link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16" />

     
    olの下のreversed属性
    ol要素には新しい属性reversedがあります.存在する場合、代表リストの順序は降順になります.
     
    iframeのsanddbox,seamlessおよびsrcプロパティ
    iframe要素には、sandbox、seamless、srcdocの3つの新しい属性があり、砂箱の内容、例えばブログのコメントを許可します.
    例コード:
    <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>

     
    ビデオとaudioのプレイプロパティ
    HTML 5はまた、onevent-nameのようなHTML 4からのすべてのイベント処理属性をグローバル属性にし、定義された新しいイベントにいくつかの新しいイベント処理属性を追加する.例えば、メディア要素(videoおよびaudio)APIで使用されるプレイイベント.
    file-saverライブラリaxiosが返すテーブルファイルの文字化けしを保存
    HTML 5でのAudio使用ピットまとめ