5 HTML-ominaisuutta, joita et ehkä tiedä

A kieli on niin yksinkertainen ja helppo oppia, HTML tarjoaa varmasti odottamaton määrä hyödyllisiä ominaisuuksia, monet niistä, joista useimmat meistä eivät edes tiedä. On vaikea pysyä ajoissa ja saatat ajatella, että kaikki “et ehkä tiedä” artikkeleiden on oltava uusimpia tunnisteita, HTML: llä on myös joitakin melko hyödyllisiä ominaisuuksia, jotka ovat jo jonkin aikaa.

Tarkastelen oikeinkirjoituksen lisäämistä näppäimistön pikanäppäimiin lisäämällä tässä artikkelissa viisi vähemmän tunnettua HTML-ominaisuutta.

1. Tarkista oikeinkirjoitus kirjoittaessasi

oikeinkirjoituksen tarkistus ominaisuus kehottaa selaimia tarkistamaan oikeinkirjoituksia, kun käyttäjä kirjoittaa elementin. Tämä ominaisuus on globaali, merkitys, voit lisätä sen mihin tahansa HTML-tunnisteeseen.

Se toimii kuitenkin vain sellaisilla elementeillä, jotka voivat ota tekstinsyöttö. Maailmanlaajuinen käyttäminen on hyödyllistä, koska se voi olla lapsen elementit perivät. Lisää se esimerkiksi a

tag ja kaikki sen lapsielementit, jotka ottavat tekstinsyötön, perivät tämän ominaisuuden.

Oikeinkirjoituksen tarkistus toimii kaikki teksti tyypit: teksti, Hae, url, ja sähköposti. Se toimii myös </code>, ja muokattavat elementit</strong> (elementit <code>contenteditable</code> määrite).</p> <p>Sen arvo voi olla tyhjä merkkijono, <code>totta</code>, tai <code>väärä</code>. Tyhjä merkkijono ja <code>totta</code> tahtoa <strong>ota oikeinkirjoituksen tarkistus käyttöön</strong>.</p> <pre name="code"> <input type="text" spellcheck="true" placeholder="Type something here"> <p contenteditable="true" spellcheck="true"> Kirjoita jotain tähän </p> </pre> <p>Yllä olevassa koodissa, <strong>molemmat <code><div></code> ja <code><p></code> tunnisteet tarkistavat oikeinkirjoituksia</strong> kun käyttäjä kirjoittaa niihin.</p> <p>Jos käyttäjällä on <strong>kielletty oikeinkirjoitus</strong> selaimen asetuksissa oikeinkirjoitusta ei tarkisteta, <strong>vaikka <code>oikeinkirjoituksen tarkistus</code> lisättiin</strong>.</p> <h4>2. Varo vaarantuneista CDN-resursseista</h4> <p>On melko tavallista isännöidä resursseja, kuten komentosarjoja ja tyylitaulukkotiedostoja <abbr>CDN</abbr>s. Mutta jos <strong>CDN saa vaarantua</strong>, niin myös ylläpidetyt tiedostot, ja jos jokin haettu resurssi vaarantuu sivustossasi, niin sivustosi toimii!</p> <p>Katso, mitä Mozilla Developer Network kertoo ongelmasta:</p> <blockquote><p><q>… CDN: iden avulla on myös riski, että jos hyökkääjä saa CDN: n hallinnan, hyökkääjä voi pistää mielivaltaisen haitallisen sisällön CDN-tiedostoihin (tai korvata tiedostot kokonaan) ja siten myös mahdollisesti hakea tiedostoja. CDN: ltä.</q></p></blockquote> <p>Tämän estämiseksi, <strong>Subresource Integrity (SRI)</strong> W3C esitteli vuoden 2014 alussa. Tämä järjestelmä <strong>vertaa hash-arvoa</strong> (tulos, joka koskee hash-funktion käyttämistä tuloon) <strong>resurssin</strong> vahvistaaksesi sen.</p> <p>Sano, että JavaScript-tiedosto on osoitteessa <code>https://example.com/example.js</code>. Sinä ensin <strong>soveltaa hash-toimintoa</strong> sitten kyseiseen tiedostoon <strong>lisää tuotettu hash-arvo</strong> että <strong><code>eheys</code> ominaisuus</strong> n <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>Nyt kun sivustosi web-sivu on ladattu edellä mainitulla koodilla <code>example.js</code>, selain <strong>ensin käyttää hajautusfunktiota</strong>, ja kuormat ja juoksut <code>example.js</code> vain silloin, kun se on <strong>hash-arvo vastaa <code>eheys</code> arvo</strong>.</p> <p>Jos <strong><code>example.com</code> oli vaarassa</strong> ja <strong><code>example.js</code> häirittiin</strong> sen jälkeen <code>example.js</code> ei vastaa <strong><code>eheys</code> arvo</strong>. </p> <p>Yleisimpiä CDN-levyjä on jo tarjolla <strong>SRI <code>eheys</code> arvot</strong>, mutta voit myös luoda yhden täällä.</p> <h4>3. Ohita lomakkeen tavoitteet lähetyksen painikkeissa</h4> <p>Olet todennäköisesti tuttu <strong><code>kohde</code> ominaisuus</strong>, se, joka päättää <strong>kun hyperlinkki avataan</strong>, esimerkiksi samalle sivulle tai uudelle välilehdelle. Saatat myös tietää, että sama <code>kohde</code> määritteessä käytetty ominaisuus <code><form></code> tag päättää <strong>missä lomakkeen lähettämä vastaus näytetään</strong>.</p> <p>Yhdessä HTML5: n varhaisista luonnoksista, <code>formtarget</code> määritettiin yhdessä neljän muun lomakkeen esittämisominaisuuden kanssa: <strong><code>formaction</code>, <code>formenctype</code>, <code>formmethod</code></strong>, ja <strong><code>formnovalidate</code></strong>. </p> <p>Nämä ominaisuudet voivat olla <strong>käytetään lähetyspainikkeiden kanssa</strong>, ja ne ohittavat niiden määritteet <code><form></code> tunniste, johon painikkeet kuuluvat.</p> <p>Joten kun lomake lähetetään painikkeella, jolla on a <code>formtarget</code> määrite, <strong>vastaus näkyy <code>formtarget</code> arvo</strong>, sijaan <code>kohde</code> jonkin arvo <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>Yllä olevassa koodissa, kun lomake lähetetään toisella lähetyspainikkeella (<code>Tulosta</code> ), vastaus tulee <strong>näkyvät uudessa selausyhteydessä</strong>, kuten uudessa välilehdessä.</p> <h4>4. Piilota elementit semanttisesti</h4> <p>Kun se tulee <strong>piilottavat elementit</strong>, me kaikki kävelimme piilottavien elementtien eri vaiheissa: käyttämällä <strong><code>opasiteetti: 0</code>, <code>näkyvyys: hidden</code>, <code>korkeus: 0; leveys: 0</code>, <code>display: none</code>, <code>text-luetelmakohta: -999px</code></strong> CSS-tiedostossamme.</p> <p>Jokaisella menetelmällä on tarkoitus, mikään niistä ei ole tarpeeton, eikä näin ole: <strong><code>kätketty</code> HTML-määrite</strong>. Jos elementillä on <code>kätketty</code> se on määritetty, se piilotetaan.</p> <pre name="code"> <div hidden>... </div> </pre> <p>Se toimii <strong>samalla tavalla kuin <code>display: none;</code> CSS-sääntö;</strong> elementin kanssa <code>kätketty</code> ominaisuus <strong>ei saa sulatettua</strong> sivulla. Kaikki elementin sisällä olevat komentosarjat suoritetaan, ja jos se on lomakkeen hallinta, se toimitetaan yhdessä <strong>muut lomakkeen ohjaukset lomakkeen lähettämisen aikana</strong>.</p> <p>Kuitenkin hyöty <code>kätketty</code> se on se <strong>semanttisesti sopiva</strong>, loppujen lopuksi HTML5 on kyse semantikasta ja <code>kätketty</code> on osa HTML5-seuraajaa!</p> <p>Lisäksi, kun elementti on piilossa, se on <strong>piilotettu kaikilla alustoilla</strong>, ei pelkästään selaimissa vaan näytönohjaimissa, televisiossa, projektorissa jne.</p> <p>Se on myös <strong>ei tyylipohjainen</strong>, vaikka poistat tekijän CSS: n pois sivulta, elementti pysyy piilossa. Sekä katsoo, että. \ T <code>display: none;</code> se ei tapahdu. Joten ajattele <code>kätketty</code> kuin <strong>ironclad-versio <code>display: none;</code></strong>.</p> <h4>5. Lisää pikanäppäimet</h4> <p> <strong><code>pääsykoodi</code> globaali ominaisuus</strong> määritettiin jo HTML4: ssä ja sitä <strong>luo pikanäppäimen</strong> jonka avulla käyttäjä voi käyttää elementtiä sivulla.</p> <p>Pikanäppäimen yhdistelmä <strong>riippuu kahdesta asiasta</strong>:</p> <ol><li> <strong><code>pääsykoodi</code> arvo</strong> että annamme elementille</li> <li> <strong>selaimen käyttämät ennalta määritellyt avaimet</strong> sama elementti</li> </ol><figure> <img src="//savtec.org/img/images_1/5-html-features-you-might-not-know-about.jpg"><figcaption>KUVA: Mozilla Developer Network</figcaption></figure><p>Ota tämä esimerkki:</p> <pre name="code"> <button accesskey="v" onclick="alert('View Click')"> näkymä </button> </pre> <p>Jos olet, Firefoxissa <strong>paina näppäinyhdistelmää Alt + Shift + V (tai Alt + Control + V</strong> MacOSissa saat ilmoituksen “Näytä napsauttamalla”.</p> <p>Koska ennalta määritetyt selainnäppäimet vaihtelevat selaimen ja käyttöjärjestelmän mukaan, on suositeltavaa <strong>anna käyttäjille tietää näppäinyhdistelmistä</strong> käytetään pikakuvakkeisiin.</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-ominaisuudet, jotka sinun pitäisi tietää</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-sovellukset, joiden avulla voit seurata investointejasi</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 Kiintolevyn muotoilu ja osiointityökalut</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">Seuraava artikkeli</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 Ideoita Windows 10 n pitäisi kopioida Mac OS X Yosemiten avulla</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Edellinen artikkeli</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-elementtiä, jotka eivät ehkä tiedä, miten niitä käytetään</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"> Hyödyllisiä tietoja ja verkkokehitysvinkkejä. Ohjelmointi, web-suunnittelu, CSS, HTML, JAVASCRIPT. Määritä ja asenna WINDOWS uudelleen. Sivustojen ja sovellusten luominen tyhjästä. </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>