あなたが知らないかもしれない5つのHTML機能

タグ そしてテキスト入力を受け取るすべての子要素はこの属性を継承します.

スペルチェックが有効 全文 タイプ： テキスト, サーチ, URL, そして Eメール. それはまた働きます </code>, 編集可能な要素</strong> （の要素 <code>満足できる</code> 属性）.</p> <p>その値は空の文字列でもかまいません, <code>本当の</code>, または <code>偽</code>. 空の文字列と <code>本当の</code> 意志 <strong>スペルチェッカーを有効にする</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> ここに何か入力してください </p> </pre> <p>上記のコードでは, <strong>両方の <code><div></code> そして <code><p></code> タグはスペルをチェックします</strong> ユーザーが入力したとき.</p> <p>ユーザーが <strong>無効なスペルチェック</strong> ブラウザの設定では、つづりはチェックされません, <strong>たとえ <code>スペルチェック</code> 追加されました</strong>.</p> <h4>2. CDNリソースが危険にさらされないようにする</h4> <p>スクリプトやスタイルシートファイルなどのリソースを次のようにホストすることはかなり一般的です。 <abbr>CDN</abbr>ｓ。しかし、 <strong>CDNが危殆化する</strong>, ホストされているファイルも同様です。また、取得したリソースがWebサイトで危険にさらされている場合は、サイトも危険にさらされています。!</p> <p>この問題についてMozilla Developer Networkが言っていることを見てください。</p> <blockquote><p><q>CDNを使用すると、攻撃者がCDNを制御すると、悪意のあるコンテンツをCDN上のファイルに挿入する（またはファイルを完全に置き換える）可能性があるため、ファイルを取得するすべてのサイトを攻撃する可能性もあります。そのCDNから.</q></p></blockquote> <p>これを防ぐために, <strong>サブリソースインテグリティ（SRI）</strong> 2014年初頭にW3Cによって紹介されました。このスキーム <strong>ハッシュ値を比較します</strong> （ハッシュ関数を入力に適用した結果） <strong>リソースの</strong> 検証する.</p> <p>たとえば、JavaScriptファイルがあります。 <code>https://example.com/example.js</code>. まず、あなた <strong>ハッシュ関数を適用する</strong> そのファイルに <strong>生成されたハッシュ値を追加します</strong> に <strong><code>誠実さ</code> 属性</strong> の <strong><code><script></code> tag</strong> that imports <code>example.js</code> to your website.</p> <pre name="code"> <script src="https://example.com/example.js" integrity="sha384-Li9vy3DqF8tnTXuiaAJuML3ky+er10rcgNR/VqsVpcw+ThHmYcwiB1pbOxEbzJr7" crossorigin="anonymous"></script> </pre> <p>さて、あなたのサイトのWebページが上記のコードでロードされなければならないときはいつでも <code>example.js</code>, ブラウザ <strong>最初にハッシュ関数を適用します</strong>, ロードと実行 <code>example.js</code> その時だけ <strong>ハッシュ値は <code>誠実さ</code> 値</strong>.</p> <p>もし <strong><code>example.com</code> 妥協した</strong> そして <strong><code>example.js</code> 邪魔された</strong> のハッシュ値 <code>example.js</code> 一致しません <strong><code>誠実さ</code> 値</strong>. </p> <p>最も一般的なCDNはすでに提供しています <strong>SRI <code>誠実さ</code> 値</strong>, しかし、ここでも生成することができます.</p> <h4>3.送信ボタンでフォームターゲットを上書きする</h4> <p>あなたは最もよく知っている <strong><code>ターゲット</code> 属性</strong>, 決定するもの <strong>ハイパーリンクリソースが開く場所</strong>, たとえば、同じページや新しいタブにあります。あなたも同じことを知っているかもしれません <code>ターゲット</code> で使用される属性 <code><form></code> タグが決める <strong>フォーム送信からの応答が表示される場所</strong>.</p> <p>HTML5の初期のドラフトの1つで, <code>フォームターゲット</code> 他の4つのフォーム送信属性とともに定義されています。 <strong><code>形成</code>, <code>formenctype</code>, <code>フォームメソッド</code></strong>, そして <strong><code>formnovalidate</code></strong>. </p> <p>これらの属性は <strong>送信ボタンと共に使用</strong>, そしてそれらはそれぞれの属性を上書きします。 <code><form></code> ボタンが属するタグ.</p> <p>そのため、フォームがボタンを使用して送信されると <code>フォームターゲット</code> 属性、 <strong>に応じて応答が表示されます <code>フォームターゲット</code> 値</strong>, の代わりに <code>ターゲット</code> の値 <code><form></code>.</p> <pre name="code"> <form action="/save" target="_self" > <input type="submit" name="save" /> <input type="submit" name="print" formaction="/print" formtarget="_blank" /> </form> </pre> <p>上記のコードでは、フォームが2番目の送信ボタンを使用して送信されたとき（<code>印刷する</code> ）、応答は <strong>新しい閲覧コンテキストに現れる</strong>, 新しいタブのように.</p> <h4>4.要素を意味的に隠す</h4> <p>なると <strong>要素を隠す</strong>, 私たちは皆、要素を隠すという異なる段階を経てきました。 <strong><code>不透明度：0</code>, <code>可視性：隠されている</code>, <code>身長：0。幅：0</code>, <code>表示：なし</code>, <code>テキストインデント：-999px</code></strong> CSSファイルに.</p> <p>それぞれの方法には目的があり、それらのどれも冗長ではありません。 <strong><code>隠された</code> HTML属性</strong>. 要素が <code>隠された</code> それに指定されて、それは隠されるでしょう.</p> <pre name="code"> <div hidden>… </div> </pre> <p>それは働く <strong>と同じように <code>表示：なし。</code> CSSルール</strong> を持つ要素 <code>隠された</code> 属性 <strong>レンダリングされない</strong> ページ上。要素内のスクリプトはすべて実行され、フォームコントロールの場合は一緒に送信されます。 <strong>フォーム送信中の他のフォームコントロール</strong>.</p> <p>しかし、 <code>隠された</code> ということです <strong>意味的に適切</strong>, 結局のところ、HTML5はすべて意味論に関するものであり、 <code>隠された</code> HTML5 entourageの一部です!</p> <p>さらに、要素が隠されているときは、 <strong>すべてのプラットフォームで非表示</strong>, Webブラウザだけでなく、スクリーンリーダー、テレビ、プロジェクタなどにも.</p> <p>も <strong>スタイルに依存しない</strong>, ページから作成者CSSを削除しても、要素は非表示のままになります。の場合には <code>表示：なし。</code> それは起こりません。だから、考えて <code>隠された</code> として <strong>のアイアンクラッド版 <code>表示：なし。</code></strong>.</p> <h4>5.キーボードショートカットを追加する</h4> <p>の <strong><code>アクセスキー</code> グローバル属性</strong> HTML4で既に定義されていてそれは <strong>キーボードショートカットを作成します</strong> ユーザーがページ上の要素を操作できるようにします。.</p> <p>ショートカットのキーの組み合わせは <strong>二つのことに頼る</strong>：</p> <ol><li>の <strong><code>アクセスキー</code> 値</strong> 要素に与えること</li> <li>の <strong>ブラウザによって使用される事前に割り当てられたキー</strong> 同じ要素に対して</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>画像：Mozilla開発者ネットワーク</figcaption></figure><p>この例を見てください。</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> 見る </button> </pre> <p>Firefoxでは、 <strong>Alt + Shift + V（またはAlt + Control + V）のキーの組み合わせを押す</strong> macOS）でアラートが出ます “クリックして表示”.</p> <p>事前定義されたブラウザキーは各ブラウザとOSによって異なるので、それをお勧めします。 <strong>ユーザーにキーの組み合わせを知らせます</strong> ショートカットに使用されます.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/coding/5-img-css-properties-you-should-know.html"><img src="//savtec.org/img/images/5-img-css-properties-you-should-know.gif" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/coding/5-img-css-properties-you-should-know.html">5 <IMG>知っておくべきCSSプロパティ</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html"><img src="//savtec.org/img/images_5/5-iphone-apps-to-keep-track-of-your-investments_7.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/5-iphone-apps-to-keep-track-of-your-investments.html">あなたの投資を追跡する5つのiPhoneアプリ</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html"><img src="//savtec.org/img/images/5-hard-drive-formatting-and-partitioning-utilities_3.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/software-reviews/5-hard-drive-formatting-and-partitioning-utilities.html">5ハードドライブのフォーマットとパーティション設定ユーティリティ</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">次の記事</div> <div class="post-img"><a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html"> <img src="//savtec.org/img/images_6/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite_5.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/5-ideas-windows-10-should-copy-from-mac-os-x-yosemite.html">Windows 10はMac OS X Yosemiteからコピーするべき5つのアイデア</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">前の記事</div> <div class="post-img"><a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html"> <img src="//savtec.org/img/images_1/5-html-elements-you-might-not-know-how-to-use.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/coding/5-html-elements-you-might-not-know-how-to-use.html">使い方がわからない5つのHTML要素</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/5-html-features-you-might-not-know-about.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> 役立つ情報とWeb開発のヒント。 プログラミング、Webデザイン、CSS、HTML、JAVASCRIPT。 WINDOWSを構成して再インストールします。 サイトおよびアプリケーションをゼロから作成します。 </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>