HTML 5.1 onthuld:14 nieuwe functies uitgelegd en praktisch gebruik
HTML5 is eigendom van het World Wide Web Consortium (W3C), dat standaarden voor het hele internet levert, zodat de protocollen van over de hele wereld onderling toegankelijk zijn. In november 2016 heeft W3C de langlopende HTML 5 bijgewerkt, de eerste kleine update in twee jaar. Veel initiële HTML 5.1-functies zijn verwijderd vanwege een gebrekkig ontwerp en gebrek aan ondersteuning door browserleveranciers.
Hoewel er weinig elementen en verbeteringen zijn aangebracht in HTML 5.1, is het nog steeds een kleine update. Sommige van de nieuwe elementen bevatten combo-tags, die nu
W3C is al begonnen met het werken aan een concept van HTML 5.2, dat naar verwachting eind 2017 zal verschijnen. In de tussentijd presenteren we enkele interessante nieuwe functies en verbeteringen die in versie 5.1 zijn geïntroduceerd. U kunt van deze functies gebruik maken zonder JavaScript aan te raken. Niet alle browsers ondersteunen deze functies, dus het is beter dat u de browserondersteuning controleert voordat u ze in productie gebruikt.
14. Voorkom phishing-aanvallen
De meeste mensen die target=’_blank’ gebruiken, hebben geen idee van een merkwaardig feit:het nieuw geopende tabblad kan de window.opener.location veranderen in een phishing-pagina. Het zal namens u een kwaadaardige JavaScript-code uitvoeren op de openerpagina. Omdat gebruikers de pagina vertrouwen die al is geopend, worden ze niet achterdochtig.
Om dit probleem volledig te elimineren, heeft HTML 5.1 het gebruik van het rel=”noopener” attribuut gestandaardiseerd, dat browsercontexten scheidt. De rel=”noopener” kan worden gebruikt binnen de tags en .
<a href="#" target="_blank" rel="noopener"> The link won't make trouble anymore </a>
Lezen:24 CSS3- en HTML5-animatietools voor ontwerpers
13. Ga flexibel om met figuurbijschriften
De tag
HTML5.1 heeft deze beperking opgeheven en nu kunt u
<article> <h1>The Headline of todays news </h1> <figure> <img src="petrolimage.jpeg" alt="Petrol price drops"> <figcaption>A man fueling up his car at petrol station</figcaption> </figure> <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p> </article>
12. Spellingcontrole
De spellingcontrole is een opgesomd attribuut waarvan de trefwoorden de lege tekenreeks, waar en onwaar zijn. De ware status geeft aan dat de spelling en grammatica van het element moeten worden gecontroleerd.
De element.forceSpellCheck() dwingt de user-agent om spelling- en grammaticafouten in het tekstelement te rapporteren, zelfs als de gebruiker nooit de focus op het element heeft gezet.
<p spellcheck="true"> <label>Name: <input spellcheck=" false" id="textbox"></label> </p>
11. De lege optie
Met de nieuwe versie van HTML kunt u een leeg
10. Volledig scherm toestaan voor frames
Met het booleaanse allowfullscreen-attribuut, ontwikkeld voor frames, kunt u bepalen of de inhoud zichzelf op volledig scherm kan presenteren met behulp van de requestFullscreen()-methode. Laten we bijvoorbeeld een iframe nemen dat een speler van YouTube insluit. Het kenmerk allowfullscreen is vereist zodat de speler de video op volledig scherm kan weergeven.
<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p> </header> <main> <p>Check out my new video!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>
9. Geneste kop- en voettekst
Met HTML 5.1 kunt u de kop- en voettekst in een andere koptekst nesten. U kunt een kop- of voettekst aan het kopelement toevoegen als deze zelf deel uitmaken van de sectie-inhoud.
Deze functie kan erg handig zijn als je uitgebreide headers wilt toevoegen aan semantische sectie-elementen, zoals
In de onderstaande code bevat
<article> <header> <h2>Lesson: How to cook chicken</h2> <aside> <header> <h2>About the author: Tom Hank</h2> <p><a href="./tomhank/">Contact him!</a></p> </header> <p>Expert in nothing but Cooking. The cookbook sideshow.</p> </aside> </header> <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it. Remove as much air as possible from the bag and seal it. </ins></p> </article>
8. Afbeeldingen met nulbreedte
Met de nieuwe HTML-versie kunt u een afbeelding van nulgrootte toevoegen. Deze functie wordt gebruikt als de afbeelding niet voor de gebruiker bedoeld is. Als een img-element wordt gebruikt voor andere doeleinden dan het weergeven van een afbeelding, bijvoorbeeld als onderdeel van een service om het aantal paginaweergaven te tellen, gebruik dan het kenmerk width en height met de waarde 0. Voor afbeeldingen met een breedte van nul wordt het aanbevolen om lege attributen te gebruiken.
<img src="theimagefile.jpg" width="0" height="0" alt="">
7. Formulier valideren
Met de nieuwe methode reportValidity() kunt u een formulier valideren en de resultaten ophalen, en de fouten rechtstreeks in de browser aan de gebruikers rapporteren. User Agents kunnen meer dan één overtreding van een beperking melden als het element tegelijkertijd aan meerdere problemen lijdt. Zoals in dit geval moet de invoer van het “wachtwoord” worden gemarkeerd met een fout, aangezien deze verplicht maar leeg is.
<h2>Form validation</h2>
<p>Enter details</p>
<form>
<label>
Mandatory input <input type="password" name="password" required />
</label>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').reportValidity()
</script> 6. Het contextmenu van de browser
In HTML 5.1 kunt u de tag
Industriële technologie
- Overschakelen naar gegoten urethaangieten kan uw productieproces verbeteren
- De kracht van het industriële internet der dingen ontketenen
- MEP haalt het voordeel uit de fabricage van lucht- en ruimtevaartonderdelen
- Hoe kinderopvang en industrieel ondernemerschap verband houden met het herstel van de productie
- Slotbouten:definitie, afmetingen, typen, kwaliteiten, koppel, gebruik en vergelijking van lagbouten
- Raspberry Pi 3 B vs Raspberry Pi 3 B+:welke moet je kopen
- Edge Cycling Leverancier Scouting
- Hoe valkuilen te vermijden met data-analyseprojecten
- Slangen met kleine diameter:hoe u de beste ID-inspectiemethode kiest?
- Ontwerp van krachtige PCB's in een omgeving met hoge temperaturen
- Wat zijn walserijen en hun typen?