5 HTML-element du kanske inte vet hur du använder
Bekant ännu okänt, eller helt nytt, händer det att vi sakna delar av HTML-syntaxen Det kan visa sig vara viktig kunskap vi kan till viss nytta. Det är därför om det är nya funktioner i HTML eller dess mindre kända applikationer som ännu inte har kommit in i din radar, täcker vi dem ganska ofta på den här sidan.
I dagens inlägg tittar vi på fem HTML-element, av vilka du ofta använder, men förmodligen inte på sin fulla potential.
1.
De element har en liknande funktion till data-* attribut. Det kan användas till tillhandahålla maskinläsbar data för ett användarvänligt innehåll. De värde Attributet till det här elementet innehåller den extra informationen.
De tre volymerna av Ringenes roman är: Ringens brödraskap, De två tornen, och Kungens återkomst.
ISBN: er av böckerna som nämns på denna sida:
I ovanstående HTML, den ISBN av varje bok är läggs till i värde attribut av element som omsluter bokens titel. På bokmarknaden används ISBN för att unikt identifiera en bok.
const ISBNListBlank = document.querySelector ('# ISBNListBlank') const dataElements = document.querySelectorAll ('data'); constary = []; dataElements.forEach ((dataElement) => ary.push (dataElement.textContent + ':' + dataElement.value)) ISBNListBlank.textContent = ary.join (',') För att grovt visa dig hur du extraherar värden i JavaScript, ovanstående script extraherar ISBN: erna från märka och visar dem tillsammans med boktitlarna på en bestämd plats på sidan.
2.
Troligtvis är du redan bekant med element, men det är det inte bara för kryssrutor. Det kan kontrollera andra labellable element också utföra sina handlingar precis som det utför åtgärderna i kryssrutor.
Du behöver bara använd samma värde för id attribut av HTML-elementet du vill styra och för attribut av den tillhörande märka.
Klicka på texten till kommer utlösa klick händelse av och visa det angivna varningsmeddelandet.
3.
Detta element är mestadels används för östasiatiska språk, men det här är inte”t det enda användarfallet. Meningen med är helt enkelt till lägg till annotering eller uttal för texter, och du kan bara göra det med engelska innehåll också.
Elementet innesluter två huvudsakliga delelement, nämligen . De håller anteckningen själv.
En person som sätter upp ett företag eller företag, tar upp finansiella risker i hopp om vinst, heter
entreprenör ; en promotor inom underhållningsindustrin.
Uttalet från “entreprenör” ordet läggs till använda element i stycket. Ordet själv är inslaget i .
Så här ser utmatningen ut:
4.
De
Du kanske vet om beställningen, men visste du det ordern kan vändas om? I stället för en inkrementeringsorder, minskande numrering kan också utföras av omvänd attribut.
- Scrabble
- Mahjong
- Monopol
- Schack
- Jenga
De omvänd attribut vänder numreringen, medan typ attribut bestämmer typen av numrering. Huvudstaden jag betecknar kapital romerska numrering.
Så här ser det ut på skärmen:
5.
De element är tänkt att Wrap en term som definieras av dess omgivande text. Texten som bifogas av taggen är stilad av webbläsare med kursiv, vilket betyder att detta är termen som definieras.
Du kan lägga till definitionen av termen inuti i värdet av dess titel attribut, vilket är användbart för definiera ord som inte nödvändigtvis definieras av deras omgivande text.
De element fungerar på samma sätt som som visar betydelsen av en förkortning som anges i dess titel attribut när användaren svänger över elementet.
Det finns en dikotomi mellan designen och prototypen.
Detta är dess standard webbläsarstyling, men på en produktionsplats kanske du vill använda en annan stil:
Med markören över det definierade ordet kommer sidan visa den definition som läggs till i titel attribut.
