私たち全員が知っているように、HTML5はWANWEIネットワークアライアンス（W3C）に属します。 2016年11月、W3Cは長期演習HTML 5標準を更新しました。これは2年ぶりの小さなアップデートでした。設計上の欠陥とブラウザーメーカーからのサポートの不足により、当初提案されているHTML 5.1機能機能が削除されました。
いくつかの要素と機能の改善がありますが、HTML 5.1に持ち込まれていますが、まだ小さなアップデートです。これらの新しい要素には、この要素が<ダイアログ>、<summary>、<picture>が含まれているため、開発者はより多くのスペースを提供します。
W3CとHTML 5.2ドラフトの開発の開始は、2017年末にリリースされる予定です。ここで提示したいのは、バージョン5.1で導入された新しい機能的特性と関数の改善です。これらの機能を使用するためにJavaScriptを移動する必要はありません。すべてのブラウザがこれらの機能をサポートしているわけではないため、生産環境に適用する前にブラウザのサポートを確認するためにチェックする必要があります。
14.オンライン釣り攻撃を防ぎますターゲットを使用するほとんどの人は、興味深い事実を知りません。新しく開いたラベルは、window.opener.locationを変更することができます。オープンページであなたを表して、悪意のあるJavaScriptコードを実行します。ユーザーは、冒頭のページが安全であると考えているため、疑わないでしょう。
この問題を完全に排除するために、HTML 5.1は、ブラウザのコンテキストの分離によって標準化されたrel = noopnerプロパティの使用を標準化しました。 rel = noopenerは、<a>および<rea>タグで使用できます。
<a href =＃ターゲット= _blank roth = noopner>リンクはもうトラブルを起こしたい</a>13。柔軟なハンドリング画像タイトル
<figcaption>タグは、<図>要素に関連付けられたタイトルまたは凡例を表します。これは、通常、写真、チャート、イラストなどの視覚要素のコンテナとして使用されます。初期のHTMLバージョンでは、<figcaption>は最初または最後の<図>サブラベルとしてのみ使用できます。 HTML5.1はこの限界を緩和しました。これで、<フィギュア>コンテナのどこでも<figcaption>を使用できます。
<Artlicle> <h1>今日のニュース/フィギュアの見出し> <p>これは、2か月でのガソリン価格の4回目のハイキングです12。
SpellCheckは、空とFALSEの空の文字列の値をとることができる列挙属性です。状態が真であるように指定されている場合、それは要素がスペルと文法の検査を受け入れることを意味します。
Element.ForcesPellCheck（）は、ユーザーがテキスト要素で検出されたスペルと文法エラーを報告するように強制します。
<P SpellCheck = True> <label>名前：<入力スペルチェック= false id = textbox> </label> </p>11。エアオプション
HTMLの新しいバージョンを使用すると、空の<オプション>要素を作成できます。 <optgroup>、<datalist>、または<select>要素のサブエレメントにすることができます。この機能は、一方的なユーザーにフレンドリーなテーブルを設計するときに役立つことがわかります。
10。フレームの全画面をサポートしますフレーム用に開発されたブール変数Allowfullscreenプロパティにより、RequestFullScreen（）メソッドを使用して、コンテンツを画面から表示できるかどうかを制御できます。 たとえば、例としてYouTubeに埋め込まれたiFramesを使用します。 プレーヤーがビデオの完全な画面を表示できるように、Allowfullscreenプロパティを設定する必要があります。
<Artadicle> <header> <p> <img src =/usericons/16235> <b> Fred Flintstone </b> </p> <p> <a href =/posts/30934 r =ブックマーク> 12:44 << /a> - <a href =＃a.503439551>プライベート投稿</a> </p> </header> <p> <p>私の新しいビデオをチェックしてください！ >9。埋め込みヘッダーとフッター
HTML5.1を使用すると、別のヘッダーにヘッダーとフッターを埋め込むことができます。段落コンテンツに自分自身が含まれている場合は、ヘッダーまたはフッターをヘッド要素に追加できます。セマンティックパラグラフ要素に<section>や<ports>タグなどの詳細な詳細を追加したい場合、この機能は非常に便利になります。
次のコードでは、<portis>ラベルには<header>タグが含まれています。これには、<weader>タグが付いた<aftarid>タグがあります。
<Artader> <header> <h2>レッスン：鶏肉の調理方法</h2> <astas> <header> <h2>著者について：Tom Haank </h2> <a href =。/tomhank/>彼に連絡してください！ </a/p> </header> <p>クッキングブックのサインショーチキンと一緒にジップトップバッグに入れます8。幅Zero幅
HTMLの新しいバージョンを使用すると、幅のゼロ画像を追加できます。この機能は、画像をユーザーに表示する必要がない場合に使用できます。 IMG要素に他の用途がある場合、たとえば、ページビューの数を計算するサービスの一部として、単なる写真ではありません。幅と高さのプロパティで0の値を使用します。 0の幅の写真の場合、空の属性を使用することをお勧めします。
<img src = theimagefile.jpg width = 0 height = 0 src = "/uploads/allimg/170217/22010q544-0.jpg"/>>新しいReportValidity（）メソッドを使用すると、フォームをチェックして結果をリセットし、ブラウザ適切な位置のユーザーにエラーを報告できます。単一の要素が複数の問題に同時に遭遇する場合、ユーザーエージェントは複数の制限ルールを報告できます。この状況では、パスワード入力は必須コンテンツですが、入力されていないため、エラーとして識別されます。
<h2>フォーム検証</h2> <p>詳細を入力</p> <form> <label>必須入力タイプ=パスワード名=パスワード=必須/>> </label> <button type = subm it> submit </button > </form> <script> document.quryselector（ 'form'）</script>6.ブラウザのコンテキストHTML 5.1では、1つ以上の<menuitem>要素を含むメニューを定義し、contextmenuプロパティを使用して任意の要素にバインドするメニューを使用して<menu>マークを使用できます。 <menu>要素のIDは、コンテキストメニューを追加する要素のContextMenu属性の値と一致する必要があります。
各<menuitem>は、次の3つのフォームのいずれかを持つことができます。
- グループからのラジオ - getオプション。
- チェックボックス - オプションを選択またはキャンセルします。
- コマンド - クリック時にアクションを実行します。
<H2 ContextMenu = Popup-Menu>右クリックして、コンテキストメニューのデモを取得します。 type =コマンドラベル=コマンドonclick = alert（ '警告'）>チェックボックス2 </menuitem> <menuitem type = radio name = group1>ラジオボタンa </menuitem t ype = radio name = group1 checked = true> radio button b </menuitem> <menuitem type =チェックボックス無効>メニュー項目を無効にする</menuitem> </menu>5.スクリプトとスタイルで暗号化された乱数を使用します暗号化されたNonCEはランダムに生成された数値であり、1回しか使用できず、各ページリクエストに対して生成する必要があります。このnonce属性は、<script>および<style>要素で使用できます。
通常、Webサイトのコンテンツセキュリティ戦略で使用され、特定のスタイルとスクリプトをページに実装する必要があるかどうかを判断します。以下に示すコードでは、この値は難しいコード化されていますが、実際の使用シナリオでは、この値はランダムに生成されます。
<script nonce = 'd3ne7uwp43bhr0e'> javascriptコード</script>4。リバースシーケンスリンク関係Rev属性はHTML4で定義されていますが、HTML5には表示されません。 W3Cは、<a>および<link>要素にRev属性を再インクレッスすることが決定されます。 Rev属性識別の現在と逆リンクドキュメントの関係。広く使用されているデータ構造マーク形式のRDFAをサポートするために含まれています。
2つのドキュメントを使用して、それぞれに1つのコースが含まれています。
// url with url第1章html <link href = lesson2.html rel = next rev = // url第2章<link href = lesson1.html = prev rev = next> <link href = lesson3 roth = next rev = prev>3.情報を表示/非表示新しい<詳細>および<summary>要素を使用すると、段落に拡張情報を追加できます。クリック要素を介して追加情報ブロックを表示または非表示にできます。 デフォルトでは、追加情報が非表示になります。
コードでは、以下に示すように、<summary>マークを<詳細>マークに配置する必要があります。 <summary>ラベルの後、非表示に他のコンテンツを追加できます。
<section> <h3>エラーメッセージ</h3> <詳細> <summary>このファイルは、DUネットワークエラーをダウンロードしていません<dt>ファイルサイズ：</dt> <dd> 8 kb </dd> <dt>エラーコード：</dt> <dd> 342a </dd> </dl> </detail> </section>2。その他の入力アイテムタイプHTML入力アイテム要素は、週3つの入力タイプ、月、およびDateTime-Localを拡大しました。
名前が示すように、最初の2つの要素により、ユーザーは1週間の値と1か月の値を選択できます。ブラウザのサポートに応じて、表示された描画カレンダーにレンダリングされ、特定の1週間または1年の1か月を選択できます。
Datatime-Localは日付と時刻の入力ドメインを表しますが、タイムゾーン設定はありません。そのデータは、月または週の入力アイテムと同様の方法で選択でき、時間を単独で入力できます。
<セクション> <h2>週、月、dateTime-local </h2> <form action = action_page.php>週を選択：<入力タイプ= week name = year_week> <input = submit> </form> < = action_page.php>誕生日（月と年）：<入力タイプ=月name = bdaymonth> <入力タイプ= submit> </form> <form action = action_page.ph p> join（日付と時刻）：<入力タイプ= dateTime-local name = bdaytime> <入力タイプ=送信値= send> </form> </section>1。応答画像W3Cはいくつかの機能特性を導入し、CSSを使用せずに応答イメージを実現できます。彼らです ...
SRCSETイメージ属性
SRCSET属性を使用すると、異なるピクセル解像度に対応する複数のオプションの画像ソースを指定できます。これにより、ブラウザは異なるユーザーデバイスに従って適切な品質実装を表示できます。たとえば、モバイルデバイスが遅いユーザーに低解像度画像を表示することをお勧めします。
SRCSETプロパティを使用して、独自のX修正記号を使用して、各画像のピクセル比を記述することができます。
<img src = clicks/low-res.jpg srcset = clicks/low-res.jpg 1x、clicks/medium-res.jpg 2x、clicks/high-res.jpg 3x>ピクセル比に加えて、W変更記号を使用してさまざまなサイズの写真を指定することもできます。次の例では、幅が1600pxの場合、高解像度画像は表示として定義されます。
<img src = clicks/low-res.jpg srcset = clicks/low-res.jpg 500w、clicks/medium-res.jpg1000w、clicks/high-res.jpg 1600w>サイズの画像属性
ほとんどの場合、クリエイターは異なる画面サイズのさまざまな写真を表示するのが好きです。これは、サイズ属性で実現できます。画像ディスプレイに配布されたスペースのサイズの幅を調整し、SRCSETプロパティを使用して適切な画像を選択して表示することができます。例えば…
<img src = clicks/low-res.jpgサイズ=（max-width：25em）60vw、100vw srcset = clicks/low-res.jpg500w、clicks/medium-res.jpg 1000w 1600W>ここで、サイズの属性は、ウィンドウが25 EMを超える場合のウィンドウの画像幅の100％、またはビューの幅の60％が25EMに等しい場合のビュー幅の60％を定義します。
画像要素
画像要素を使用すると、画面サイズが異なるため、写真を宣言できます。これは、<picture>要素を使用して<img>をカプセル化し、複数の<source>サブエレメントを記述することによって実装できます。
<ピクト>マーキングだけでは何も表示されません。デフォルトの画像ソースは、SRC属性の値として宣言され、オプションの画像ソースは以下に示すように配置されます。
<Picture> <Source Media =（Max-Width：25em）srcset = clicks/small/low-res.jpg 1x、small/medium-res.jpg、clices/small/high-res.jp > <ソースメディア=（Max-Width：60EM）srcset = clicks/large/low-res.jpg 1x 1x、clicks/arger/medium-res.jpg 2x、clices/large/high-res.jpg 3x> <img src = Clicks/default/medium- res.jpg> </piction>要約します上記は、この記事のすべての内容が、すべての人の学習や仕事をするのに役立つことを願っています。