5 HTML tulajdonság, amit nem tudhat

Az a a nyelv olyan egyszerű és könnyen megtanulható, HTML biztosan kínál egy váratlan mennyiségű hasznos funkció, sokan közülük a legtöbbünk még nem tud róla. Nehéz lépést tartani az időkkel, és úgy gondolja, hogy minden “talán nem tudod” a cikkeknek a legutóbbi címkékről kell szólniuk nagyon hasznos funkciók, amelyek már egy ideje vannak.

A helyesírás ellenőrzésétől a billentyűparancsok hozzáadásával ebben a cikkben megmutatom öt kevésbé ismert HTML funkció.

1. Ellenőrizze, hogy írja-e a helyesírást

A helyesírás-ellenőrzés tulajdonság felkéri a böngészőket, hogy ellenőrizzék a helyesírásokat, amikor egy felhasználó egy elemet ír. Ez az attribútum globális, jelentése, hozzáadhatja bármely HTML-címkéhez.

Ez azonban csak olyan elemeken működik, amelyek képesek szövegbevitelt. A globális használata hasznos, mert lehet gyermekelemek által örökölt. Például, adjuk hozzá a

címke és minden gyermekelem, amely szövegbevitelt vesz, ezt az attribútumot örökli.

A helyesírás-ellenőrzés működik minden szöveg típusok: szöveg, keresés, url, és email. Ez is működik </code>, és szerkeszthető elemek</strong> (elemekkel <code>contenteditable</code> tulajdonság).</p> <p>Értéke üres karakterlánc lehet, <code>igaz</code>, vagy <code>hamis</code>. Az üres karakterlánc és <code>igaz</code> akarat <strong>engedélyezze a helyesírás-ellenőrzőt</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Írjon be valamit itt </p> </pre> <p>A fenti kódban, <strong>mind a <code><div></code> és <code><p></code> a címkék ellenőrzik a helyesírásokat</strong> amikor a felhasználó beírja őket.</p> <p>Ha a felhasználó rendelkezik <strong>tiltott helyesírás-ellenőrzés</strong> a böngésző beállításaiban a helyesírás nem kerül ellenőrzésre, <strong>még akkor is, ha <code>helyesírás-ellenőrzés</code> hozzá lett adva</strong>.</p> <h4>2. Legyen biztonságban a veszélyeztetett CDN erőforrásoktól</h4> <p>Elég gyakori az erőforrások, mint például a szkriptek és a stíluslapfájlok, tárolása <abbr>CDN</abbr>s. De ha <strong>A CDN megsérül</strong>, így a tárolt fájlokat is, és ha a webhelyén bármilyen lekérdezett erőforrás veszélybe kerül, akkor a webhelye is!</p> <p>Nézze meg, mit mond a Mozilla Fejlesztői Hálózat a problémáról:</p> <blockquote><p><q>… A CDN-ek használata is kockázatot jelent, mivel ha egy támadó egy CDN-t irányít, a támadó tetszőleges rosszindulatú tartalmat fecskendezhet a CDN fájljaiba (vagy cserélheti ki teljesen a fájlokat), és így potenciálisan támadhat minden olyan webhelyet, amely fájlokat szerez ebből a CDN-ből.</q></p></blockquote> <p>Ennek megakadályozása, <strong>Subresource integritás (SRI)</strong> 2014 elején vezették be a W3C. Ez a rendszer <strong>összehasonlítja a hash értéket</strong> (a hash függvény egy bemenetre történő alkalmazásának eredménye) <strong>erőforrás</strong> érvényesíteni.</p> <p>Mondja, van egy JavaScript fájl <code>https://example.com/example.js</code>. Először te <strong>alkalmazzon hash funkciót</strong> az adott fájlba <strong>adjunk hozzá az előállított hash értéket</strong> hoz <strong><code>becsületesség</code> tulajdonság</strong> a <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>Most, hogy a webhelyének a fenti kóddal ellátott weboldala töltse be <code>example.js</code>, a böngésző <strong>először a hash funkciót alkalmazza</strong>, és terhelések és futások <code>example.js</code> csak akkor <strong>hash érték megfelel a <code>becsületesség</code> érték</strong>.</p> <p>Ha <strong><code>example.com</code> veszélybe került</strong> és <strong><code>example.js</code> beavatkozott</strong> akkor a hash értéke <code>example.js</code> nem egyezik a <strong><code>becsületesség</code> érték</strong>. </p> <p>A leggyakoribb CDN-ek már rendelkezésre állnak <strong>SRI <code>becsületesség</code> értékeket</strong>, de itt is létrehozhat egyet.</p> <h4>3. Vigye felül a formanyomtatványokat a küldési gombokban</h4> <p>Valószínűleg ismeri a <strong><code>cél</code> tulajdonság</strong>, az, amelyik dönt <strong>ahol hiperhivatkozott erőforrás nyílik meg</strong>, például ugyanazon az oldalon vagy egy új lapon. Lehet, hogy ugyanazt is tudja <code>cél</code> a <code><form></code> címke dönt <strong>ahol a formanyomtatványtól kapott válasz látható</strong>.</p> <p>A HTML5 egyik korai tervezetében, <code>formtarget</code> négy további formanyomtatvány attribútummal együtt definiálták: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, és <strong><code>formnovalidate</code></strong>. </p> <p>Ezek az attribútumok lehetnek <strong>a benyújtási gombokkal együtt használható</strong>, és felülbírálják a megfelelő attribútumokat a <code><form></code> címke, amelyhez a gombok tartoznak.</p> <p>Tehát, ha egy űrlapot egy gomb segítségével küldünk be <code>formtarget</code> attribútum, a <strong>a válasz a <code>formtarget</code> érték</strong>, ahelyett, hogy <code>cél</code> értéke <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>A fenti kódban, amikor a formanyomtatványt a második elküldés gomb segítségével nyújtja be<code>nyomtatás</code> ), a válasz lesz <strong>új böngészési környezetben jelennek meg</strong>, mint egy új lapon.</p> <h4>4. Elemek elrejtése szemantikailag</h4> <p>Amikor arra kerül sor <strong>elrejtő elemek</strong>, mindannyian a rejtett elemek különböző fázisain mentünk keresztül: a <strong><code>opacitás: 0</code>, <code>visibility: hidden</code>, <code>magasság: 0; szélesség: 0</code>, <code>display: none</code>, <code>text-indent: -999px</code></strong> a CSS fájlunkban.</p> <p>Minden módszernek van célja, egyikük sem felesleges, és így nem ez: a <strong><code>rejtett</code> HTML attribútum</strong>. Ha van egy elem <code>rejtett</code> meg van adva, elrejtve lesz.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Ez működik <strong>ugyanúgy, mint a <code>display: none;</code> CSS szabály;</strong> az elemet a <code>rejtett</code> tulajdonság <strong>nem lesz renderelve</strong> az oldalon. Az elemen belüli minden parancsfájl végrehajtásra kerül, és ha ez egy űrlapvezérlés, akkor azt együtt kell benyújtani <strong>más formanyomtatványok az űrlap benyújtásakor</strong>.</p> <p>Azonban az előnye <code>rejtett</code> az, hogy ez <strong>szemantikailag megfelelő</strong>, végül is a HTML5 a szemantikáról és a <code>rejtett</code> része a HTML5 kísérőnek!</p> <p>Sőt, ha egy elem rejtve van, akkor kell lennie <strong>rejtve minden platformon</strong>, nem csak a webböngészőkben, hanem a screenreadersben, a TV-ben, a projektorokban stb.</p> <p>Ez is <strong>nem stílusfüggő</strong>, még akkor is, ha elhagyja a szerző CSS-t egy oldalról, az elem rejtve marad. Mivel. \ T <code>display: none;</code> ez nem fog megtörténni. Szóval, gondolj <code>rejtett</code> mint a <strong>vasbeton változat <code>display: none;</code></strong>.</p> <h4>5. Billentyűparancsok hozzáadása</h4> <p>A <strong><code>accesskey</code> globális attribútum</strong> a HTML4-ben és azt már definiálták <strong>billentyűparancsot hoz létre</strong> amellyel a felhasználó egy elemet kezelhet az oldalon.</p> <p>A gyorsbillentyű kombinációja <strong>két dologtól függ</strong>:</p> <ol><li>a <strong><code>accesskey</code> érték</strong> amit egy elemnek adunk</li> <li>a <strong>egy böngésző által használt előre kijelölt kulcsok</strong> azonos elemre</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>IMAGE: Mozilla Developer Network</figcaption></figure><p>Vegyük ezt a példát:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> Kilátás </button> </pre> <p>A Firefoxban, ha te <strong>nyomja meg az Alt + Shift + V billentyűkombinációt (vagy az Alt + Control + V billentyűt)</strong> MacOS-ban) megkapja a figyelmeztetést “Nézet Kattintson”.</p> <p>Mivel az előre definiált böngészőgombok az egyes böngészők és operációs rendszerek függvényében változnak, ajánlott <strong>hagyja, hogy a felhasználók tudják a kulcskombinációkat</strong> a parancsikonokhoz.</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 tulajdonságok, amelyeket tudnia kell</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-alkalmazások a befektetések nyomon követésére</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 Merevlemez-formázás és partíciós segédprogramok</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">Következő cikk</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">5 Ötletek Windows 10-nek másolnia kell a Mac OS X Yosemite programból</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Korábbi cikk</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-elem, amit nem tudhat meg, hogyan kell használni</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"> Hasznos információk és webfejlesztési tippek. Programozás, webdesign, CSS, HTML, JAVASCRIPT. Konfigurálja és telepítse újra a WINDOWS szoftvert. Webhelyek és alkalmazások létrehozása a semmiből. </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>