HTML-håndbogen

Bemærk: Du kan downloade en PDF / ePub / Mobi-version af denne bog, så du kan læse den offline.

Introduktion

Velkommen! Jeg skrev denne bog for at hjælpe dig med hurtigt at lære HTML og blive fortrolig med de avancerede HTML-emner.

HTML, en stenografi for Hyper Text Markup Language, er en af de mest grundlæggende byggesten på Internettet.

HTML blev officielt født i 1993, og siden da udviklede den sig til sin nuværende tilstand og flyttede fra enkle tekstdokumenter til at drive rige webapplikationer.

Denne håndbog henvender sig til et stort publikum.

Først nybegynderen. Jeg forklarer HTML fra nul på en kortfattet, men omfattende måde, så du kan bruge denne bog til at lære HTML fra det grundlæggende.

Så den professionelle. HTML betragtes ofte som en sekundær ting at lære. Det kan gives for givet.

Alligevel er mange ting uklare for mange mennesker. Mig inkluderet. Jeg skrev denne håndbog for at hjælpe min forståelse af emnet, for når jeg har brug for at forklare noget, skal jeg bedre sørge for, at jeg først kender det udad og udad.

Selvom du ikke skriver HTML i dit daglige arbejde, kan det være med til at spare dig for hovedpine, at vide, hvordan HTML fungerer, når du har brug for at forstå det fra tid til anden, for eksempel når du tilpasser en webside.

Du kan nå mig på Twitter @flaviocopes.

Min hjemmeside er flaviocopes.com.

Bogindeks

Forord
Grundlæggende om HTML
Dokumentets overskrift
Dokumentets krop
Mærker, der interagerer med tekst
Links
Container tags og sidestruktur HTML
Formularer
Tabeller
Multimedietags: lyd og video
iframes
Billeder
Tilgængelighed

FORORD

HTML er grundlaget for det vidunder, der kaldes Internettet.

Der er en utrolig kraft under dette ret enkle og begrænsede sæt regler, der lader os - udviklere, producenter, designere, forfattere og tinkerers - håndværksdokumenter, apps og oplevelser for mennesker over hele kloden.

Min første HTML-bog kom ud i 1997 og blev kaldt "HTML Unleashed". En stor, masser af sider, lang tome.

Der er gået mere end 20 år, og HTML er stadig grundlaget for Internettet med minimale ændringer fra dengang.

Sikker på, vi fik flere semantiske tags, præsentations HTML er ikke længere en ting, og CSS har taget sig af design af ting.

HTML's succes er baseret på én ting: enkelhed .

Det modstod at blive kapret til en XML-dialekt via XHTML, da folk til sidst indså, at ting var alt for kompliceret.

Det gjorde det på grund af en anden funktion, det giver os: tilgivelse . Der er nogle regler, ikke, men når du har lært dem, har du meget frihed.

Browsere lærte at være modstandsdygtige og altid forsøge at gøre deres bedste, når de analyserede og præsenterede HTML for brugerne.

Og hele webplatformen gjorde en ting rigtigt: det brød aldrig bagudkompatibilitet. Ganske utroligt, vi kan gå tilbage til HTML-dokumenter skrevet i 1991, og de ser stort set ud, som de så ud dengang.

Vi ved endda, hvad den første webside var. Det er dette: //info.cern.ch/hypertext/WWW/TheProject.html

Og du kan se kilden til siden takket være en anden stor funktion på Internettet og HTML: Vi kan inspicere HTML'en på enhver webside .

Tag ikke dette for givet. Jeg kender ingen anden platform, der giver os denne mulighed.

De ekstraordinære udviklerværktøjer, der er indbygget i enhver browser, giver os mulighed for at inspicere og tage inspiration fra HTML skrevet af enhver i verden.

Hvis du er ny i HTML, har denne bog til formål at hjælpe dig i gang. Hvis du er en erfaren webudvikler, forbedrer denne bog din viden.

Jeg lærte så meget, mens jeg skrev det, selvom jeg har arbejdet med internettet i mere end 20 år, og jeg er sikker på, at du også finder noget nyt.

Eller du lærer igen noget gammelt, du har glemt.

Under alle omstændigheder er bogens mål at være nyttigt for dig, og jeg håber, det lykkes.

HTML GRUNDLÆGGENDE

HTML er en standard defineret af WHATWG , et akronym for Web Hypertext Application Technology Working Group, en organisation dannet af folk, der arbejder i den mest populære webbrowser. Dette betyder, at det dybest set styres af Google, Mozilla, Apple og Microsoft.

Tidligere var W3C (World Wide Web Consortium) den organisation, der var ansvarlig for oprettelsen af HTML-standarden.

Kontrollen flyttede uformelt fra W3C til WHATWG, da det blev klart, at W3C-skubbet mod XHTML ikke var en god idé.

Hvis du aldrig har hørt om XHTML, er her en novelle. I begyndelsen af 2000'erne troede vi alle på, at fremtiden på Internettet var XML (seriøst). Så HTML flyttede fra at være et SGML-baseret forfattersprog til et XML-markeringssprog.

Det var en stor forandring. Vi var nødt til at kende og respektere flere regler. Strengere regler.

Til sidst indså browserleverandører, at dette ikke var den rigtige vej til Internettet, og de skubbede tilbage og skabte det, der nu er kendt som HTML5.

W3C var ikke rigtig enige om at opgive kontrol med HTML, og i årevis havde vi to konkurrerende standarder, som hver sigter mod at være den officielle. Til sidst den 28. maj 2019 blev det officielt af W3C, at den "ægte" HTML-version var den, der blev offentliggjort af WHATWG.

Jeg nævnte HTML5. Lad mig forklare denne lille historie. Jeg ved, det er lidt forvirrende indtil nu, som med mange ting i livet, hvor mange skuespillere er involverede, men alligevel er det også fascinerende.

Vi havde HTML-version 1 i 1993. Her er den originale RFC.

HTML 2 fulgte i 1995.

Vi fik HTML 3 i januar 1997 og HTML 4 i december 1997.

Travle tider!

20+ år gik, vi havde hele denne XHTML-ting, og til sidst kom vi til denne HTML5-"ting", som egentlig ikke bare er HTML mere.

HTML5 er et udtryk, der nu definerer et helt sæt teknologier, som inkluderer HTML, men tilføjer mange API'er og standarder som WebGL, SVG og mere.

Den vigtigste ting at forstå her er dette: der er ikke sådan noget (mere) som en HTML-version nu. Det er en levestandard. Ligesom CSS, der kaldes "3", men i virkeligheden er en flok uafhængige moduler udviklet separat. Ligesom JavaScript, hvor vi har en ny udgave hvert år, men i dag er det eneste, der betyder noget, hvilke individuelle funktioner der implementeres af motoren.

Ja, vi kalder det HTML5, men HTML4 er fra 1997. Det er lang tid til noget, endsige for internettet.

Det er her, standarden nu "lever": //html.spec.whatwg.org/multipage.

HTML er det markup-sprog, vi bruger til at strukturere indhold, som vi bruger på Internettet.

HTML serveres til browseren på forskellige måder.

Det kan genereres af en applikation på serversiden, der bygger den afhængigt af anmodningen eller sessionsdataene, for eksempel en Rails- eller Laravel- eller Django-applikation.
Det kan genereres af en JavaScript-klientside-applikation, der genererer HTML i farten.
I det enkleste tilfælde kan den gemmes i en fil og serveres til browseren af en webserver.

Lad os dykke ned i denne sidste sag. Selvom det i praksis sandsynligvis er den mindst populære måde at generere HTML på, er det stadig vigtigt at kende de grundlæggende byggesten.

Efter konvention gemmes en HTML-fil med en .htmleller .htmudvidelse.

Inde i denne fil organiserer vi indholdet ved hjælp af tags .

Mærker indpakker indholdet, og hvert tag giver en særlig betydning til teksten, det indpakker.

Lad os lave et par eksempler.

Dette HTML-uddrag opretter et afsnit ved hjælp af ptagget:

A paragraph of text

Dette HTML-uddrag opretter en liste over emner ved hjælp af ultagget, hvilket betyder uordnet liste , og litags, der betyder listeelement :


    
     First item
     Second item
     Third item

Når en HTML-side serveres af browseren, fortolkes tagsne, og browseren gengiver elementerne i henhold til de regler, der definerer deres visuelle udseende.

Nogle af disse regler er indbyggede, såsom hvordan en liste gengives, eller hvordan et link understreges i blåt.

Nogle andre regler er angivet af dig med CSS.

HTML er ikke præsentationsmæssigt. Det er ikke bekymret for, hvordan ting ser ud . I stedet handler det om, hvad ting betyder .

Det er op til browseren at bestemme, hvordan tingene ser ud, med de direktiver, der defineres af, hvem der bygger siden, med CSS-sproget.

Nu er de to eksempler, jeg lavede, HTML-uddrag taget uden for en sidekontekst.

HTML-sidestruktur

Lad os lave et eksempel på en ordentlig HTML-side.

Ting starter med dokumenttypedeklarationen (aka doctype ), en måde at fortælle browseren, at dette er en HTML-side, og hvilken version af HTML vi bruger.

Moderne HTML bruger denne doktype:

Så har vi htmlelementet, som har et åbnings- og lukemærke:

...

De fleste tags kommer parvis med et åbningsmærke og et afsluttende mærke. Det afsluttende mærke er skrevet det samme som åbningskoden, men med et /:

some content

Der er et par selvlukkende tags, hvilket betyder, at de ikke har brug for et separat lukkemærke, da de ikke indeholder noget i dem .

Den htmlstarter tag bruges i begyndelsen af dokumentet, lige efter dokumenttype erklæring.

Den htmlslutter tag er det sidste, til stede i et HTML-dokument.

Inde i htmlelementet har vi 2 elementer: headog body:

   ...   ...

Inde headvil vi have tags, der er vigtige for at oprette en webside, som titlen, metadataene og intern eller ekstern CSS og JavaScript. For det meste ting, der ikke vises direkte på siden, men kun hjælper browseren (eller bots som Google-søgebot) med at vise den korrekt.

Inde bodyvil vi have indholdet af siden. De synlige ting .

Tags vs elementer

Jeg nævnte tags og elementer. Hvad er forskellen?

Elementer har et starttag og et afsluttende tag. I dette eksempel bruger vi pstart- og lukemærkerne til at oprette et pelement:

A paragraph of text

Så et element udgør hele pakken :

startmærke
tekstindhold (og muligvis andre elementer)
lukkemærke

Hvis et element ikke har et lukkende tag, skrives det kun med starttagget, og det kan ikke indeholde noget tekstindhold.

Når det er sagt, bruger jeg muligvis tagget eller elementudtrykket i bogen, hvilket betyder det samme, undtagen hvis jeg eksplicit nævner starttag eller sluttag.

Egenskaber

Startelementet for et element kan have specielle uddrag af information, vi kan vedhæfte, kaldet attributter .

Attributter har key="value"syntaksen:

A paragraph of text

Du kan også bruge enkelt anførselstegn, men det er en god konvention at bruge dobbelt anførselstegn i HTML.

Vi kan have mange af dem:

A paragraph of text

og nogle attributter er boolske, hvilket betyder at du kun har brug for nøglen:

Den classog idattributter er to af de mest almindelige, du vil finde brugt.

De har en særlig betydning, og de er nyttige både i CSS og JavaScript.

Forskellen mellem de to er, at en ider unik i sammenhæng med en webside; det kan ikke kopieres.

Klasser kan derimod vises flere gange på flere elementer.

Plus, en ider kun en værdi. classkan indeholde flere værdier, adskilt af et mellemrum:

A paragraph of text

Det er almindeligt at bruge bindestreg -til at adskille ord i en klasseværdi, men det er bare en konvention.

Det er kun to af de mulige egenskaber, du kan have. Nogle attributter bruges kun til et tag. De er meget specialiserede.

Andre attributter kan bruges på en mere generel måde. Du har lige set idog class, men vi har også andre, stylesom kan bruges til at indsætte integrerede CSS-regler på et element.

Sagsfølsom

HTML er store og små bogstaver. Mærker kan skrives i alle store og små bogstaver. I de tidlige dage var kasketter normen. I dag er små bogstaver normen. Det er en konvention.

Du skriver normalt sådan:

A paragraph of text

ikke sådan:

A paragraph of text

hvidt rum

Temmelig vigtigt. I HTML, selvom du tilføjer flere hvide mellemrum til en linje, kollapses den af browserens CSS-motor.

For eksempel gengivelsen af dette afsnit:

A paragraph of text

er det samme som dette:

 A paragraph of text

og det samme som dette:

A paragraph of text

> Ved hjælp af CSS-egenskaben med hvidt mellemrum kan du ændre, hvordan tingene opfører sig. Du kan finde flere oplysninger om, hvordan CSS behandler hvidt rum i CSS Spec

Jeg favoriserer typisk

A paragraph of text

eller

 A paragraph of text

Indlejrede tags skal være indrykket med 2 eller 4 tegn afhængigt af din præference

 A paragraph of text 
    
     A list item

Bemærk: Denne "hvide plads er ikke relevant" -funktionen betyder, at hvis du vil tilføje ekstra plads, kan det gøre dig ret sur. Jeg foreslår, at du bruger CSS til at skabe mere plads, når det er nødvendigt.

Bemærk: i særlige tilfælde kan du bruge HTML-entiteten (et akronym, der betyder ikke-brudende mellemrum ) - mere om HTML-enheder senere. Jeg mener, at dette ikke bør misbruges. CSS foretrækkes altid for at ændre den visuelle præsentation.

DOKUMENTOVERORDNINGEN

Den headtag indeholder specielle tags, der definerer dokumentegenskaberne.

Det er altid skrevet før bodytagget, lige efter åbningstagget html:

   ...  ...

Vi bruger aldrig attributter på dette tag. Og vi skriver ikke indhold i det.

Det er bare en container til andre tags. Inde i det kan vi have en lang række tags afhængigt af hvad du skal gøre:

title
script
noscript
link
style
base
meta

den `title`tag

Den titletagget bestemmer sidens titel. Titlen vises i browseren, og den er især vigtig, da den er en af nøglefaktorerne til søgemaskineoptimering (SEO).

den `script`tag

Dette tag bruges til at tilføje JavaScript til siden.

Du kan inkludere det inline ved hjælp af et åbningstag, JavaScript-koden og derefter det afsluttende tag:

 ..some JS

Eller du kan indlæse en ekstern JavaScript-fil ved hjælp af srcattributten:

Den typeegenskab som standard er sat til text/javascript, så det er helt valgfrit.

Der er noget ret vigtigt at vide om dette mærke.

Nogle gange bruges dette tag nederst på siden lige før det afsluttende tag. Hvorfor? Af præstationsårsager.

Indlæsning af scripts blokerer som standard gengivelsen af siden, indtil scriptet parses og indlæses.

Ved at placere det nederst på siden indlæses og udføres scriptet, efter at hele siden allerede er blevet parset og indlæst, hvilket giver brugeren en bedre oplevelse over at have det i headtagget.

Min opfattelse er, at dette nu er dårlig praksis. Lad scriptleve i headtaggen.

I moderne JavaScript har vi et alternativ, dette er mere performant end at holde scriptet nederst på siden - deferattributten. Dette er et eksempel, der indlæser en file.jsfil i forhold til den aktuelle URL:

Dette er scenariet, der udløser hurtigere sti til en side med hurtig indlæsning og hurtigindlæsning af JavaScript.

Bemærk: asyncattributten er ens, men efter min mening en værre mulighed end defer. Jeg beskriver hvorfor mere detaljeret på side //flaviocopes.com/javascript-async-defer/

den `noscript`tag

Dette tag bruges til at registrere, hvornår scripts er deaktiveret i browseren.

Bemærk: brugere kan vælge at deaktivere JavaScript-scripts i browserindstillingerne. Eller browseren understøtter muligvis ikke dem som standard.

Det bruges forskelligt afhængigt af om det er anbragt i dokumenthovedet eller i dokumentet.

Vi taler om dokumenthovedet nu, så lad os først introducere denne brug.

I dette tilfælde kan noscripttagget kun indeholde andre tags:

link tags
style tags
meta tags

for at ændre de ressourcer, der vises på siden, eller metainformationen, hvis scripts er deaktiveret.

I dette eksempel indstillede jeg et element med no-script-alertklassen, der skal vises, hvis scripts er deaktiveret, som det var display: nonesom standard:

   ...   .no-script-alert { display: block; }   ...  ...

Lad os løse den anden sag: hvis den placeres i kroppen, kan den indeholde indhold, som afsnit og andre tags, der gengives i brugergrænsefladen.

den `link`tag

Den linktag bruges til at indstille relationer mellem et dokument og andre ressourcer.

Det bruges hovedsageligt til at linke en ekstern CSS-fil, der skal indlæses.

Dette element har ingen lukkemærker.

Anvendelse:

   ...  ...  ...

Den mediaattribut tillader indlæsningen af forskellige stylesheets afhængigt af enhedstype:

Vi kan også linke til andre ressourcer end stilark.

For eksempel kan vi knytte et RSS-feed ved hjælp af

Eller vi kan knytte et favicon ved hjælp af:

Dette mærke blev også brugt til indhold på flere sider for at angive den forrige og næste side ved hjælp af rel="prev"og rel="next". Mest for Google. Fra og med 2019 meddelte Google, at de ikke bruger dette tag mere, fordi det kan finde den korrekte sidestruktur uden det.

den `style`tag

Dette mærke kan bruges til at tilføje typografier i dokumentet i stedet for at indlæse et eksternt typografiark.

Anvendelse:

 .some-css {}

Som med linktagget kan du kun bruge mediaattributten til at bruge den CSS på det angivne medium:

 .some-css {}

den `base`tag

Dette tag bruges til at indstille en basis-URL til alle relative URL'er indeholdt på siden.

   ...  ...  ...

den `meta`tag

Metatags udfører en række opgaver, og de er meget, meget vigtige.

Især til SEO.

meta elementer har kun startmærket.

Den mest basale er descriptionmetakoden:

Dette kan muligvis bruges af Google til at generere sidebeskrivelsen på dens resultatsider, hvis den finder det bedre beskriver siden end indholdet på siden (spørg mig ikke hvordan).

Den charsetmeta-tag bruges til at indstille den side tegnsæt. utf-8i de fleste tilfælde:

Den robotsmeta-tag instruerer Search Engine bots, om at indeksere en side eller ej:

Eller hvis de skal følge links eller ej:

Du kan også indstille nofollow på individuelle links. Sådan kan du indstille nofollowglobalt.

Du kan kombinere dem:

Standardadfærden er index, follow.

Du kan bruge andre egenskaber, herunder nosnippet, noarchive, noimageindexog meget mere.

Du kan også bare fortælle Google i stedet for at målrette mod alle søgemaskiner:

Og andre søgemaskiner kan også have deres eget metatag.

Når vi taler om det, kan vi bede Google om at deaktivere nogle funktioner. Dette forhindrer oversættelsesfunktionaliteten i søgemaskinens resultater:

Den viewportmeta-tag bruges til at fortælle browseren at indstille sidebredden baseret på enhedens bredde.

Se mere om dette mærke.

Et andet ret populært metatag er det http-equiv="refresh". Denne linje beder browseren om at vente 3 sekunder og derefter omdirigere til den anden side:

Brug af 0 i stedet for 3 omdirigerer så hurtigt som muligt.

Dette er ikke en fuld reference; Andre mindre anvendte metatags findes.

Efter introduktionen af denne dokumentoverskrift kan vi begynde at dykke ned i dokumentet.

DOKUMENTKROPPEN

Efter det afsluttende head-tag kan vi kun have en ting i et HTML-dokument: bodyelementet.

   ...   ...

Ligesom headog htmltags kan vi kun have et bodytag på en side.

Inde i bodytagget har vi alle de tags, der definerer sidens indhold.

Teknisk set er start- og slutkoder valgfri. Men jeg anser det for en god praksis at tilføje dem. Bare for klarhedens skyld.

I de næste kapitler definerer vi de forskellige tags, du kan bruge inde i sidens brødtekst.

Men før skal vi indføre en forskel mellem blokelementer og inlineelementer.

Bloker elementer vs indbyggede elementer

Visuelle elementer, dem der er defineret i sidens brødtekst, kan generelt klassificeres i to kategorier:

block elementer ( p, div, overskrift elementer, lister og listeelementer, ...)
inline elementer ( a, span, img, ...)

Hvad er forskellen?

Bloker elementer, når de er placeret på siden, tillader ikke andre elementer ved siden af dem. Til venstre eller til højre.

Integrerede elementer kan i stedet sidde ved siden af andre integrerede elementer.

Forskellen ligger også i de visuelle egenskaber, vi kan redigere ved hjælp af CSS. Vi kan ændre bredden / højden, margenen, polstringen og kanten af blokelementer. Vi kan ikke gøre det for integrerede elementer.

Bemærk, at ved hjælp af CSS kan vi ændre standard for hvert element, indstille et ptag til at være indbygget, for eksempel, eller spanat være et blokelement.

En anden forskel er, at integrerede elementer kan være indeholdt i blokelementer. Det omvendte er ikke sandt.

Nogle blokelementer kan indeholde andre blokelementer, men det afhænger. Det ptag for eksempel ikke tillader en sådan mulighed.

MÆRKER, DER VIRKER MED TEKST

den `p`tag

Dette tag definerer et afsnit i teksten.

Some text

Det er et blokelement.

Inde i det kan vi tilføje ethvert inline-element, vi kan lide, lide spaneller a.

Vi kan ikke tilføje blokelementer.

Vi kan ikke rede et pelement i et andet.

Som standard indstiller browsere et afsnit med en margen øverst og nederst. 16pxi Chrome, men den nøjagtige værdi kan variere mellem browsere.

Dette får to på hinanden følgende afsnit til at blive adskilt, hvilket replikerer hvad vi synes om et "afsnit" i trykt tekst.

den `span`tag

Dette er et indbygget tag, der kan bruges til at oprette et afsnit i et afsnit, der kan målrettes ved hjælp af CSS:

A part of the text and here another part

den `br`tag

Dette tag repræsenterer et linjeskift. Det er et integreret element og har ikke brug for et lukkemærke.

Vi bruger den til at oprette en ny linje inde i et ptag uden at oprette et nyt afsnit.

Og sammenlignet med at oprette et nyt afsnit tilføjer det ikke yderligere afstand.

Some text
A new line

Overskriftskoderne

HTML giver os 6 overskriftskoder. Fra vigtigst for mindst vigtigt, vi har h1, h2, h3, h4, h5, h6.

Typisk vil en side have et h1element, som er sidetitlen. Derefter kan du have et eller flere h2elementer afhængigt af sideindholdet.

Overskrifter, især overskriftsorganisationen, er også vigtige for SEO, og søgemaskiner bruger dem på forskellige måder.

Browseren vil som standard gøre h1tagget større og gøre elementernes størrelse mindre, når antallet nær høges:

Alle overskrifter er blokelementer. De kan ikke indeholde andre elementer, kun tekst.

den `strong`tag

Dette mærke bruges til at markere teksten indeni som stærk . Dette er ret vigtigt, det er ikke et visuelt tip, men et semantisk tip. Afhængigt af det anvendte medium vil dets fortolkning variere.

Browsere gør som standard teksten i dette tag fed .

den `em`tag

Dette mærke bruges til at markere teksten inde i det som fremhævet . Som med stronger det ikke et visuelt tip, men et semantisk tip.

Browsere gør som standard teksten i denne kursiv .

Citater

Den blockquoteHTML-tag er nyttigt at indsætte citater i teksten.

Browsere anvender som standard en margen på blockquoteelementet. Chrome anvender en 40px venstre og højre margen og en 10px top- og bundmargen.

Den qHTML-tag bruges til inline citater.

Vandret linje

Ikke rigtig baseret på tekst, men hrtagget bruges ofte inde på en side. Det betyder horizontal rule, og det tilføjer en vandret linje på siden.

Nyttigt at adskille sektioner på siden.

Kodeblokke

Den codetag er især nyttig til at vise koden, fordi browsere give det en proportional skrifttype.

Det er typisk det eneste, browsere gør. Dette er CSS anvendt af Chrome:

code { font-family: monospace; }

Dette tag er typisk pakket i et pretag, fordi codeelementet ignorerer mellemrum og linjeskift. Ligesom pmærket.

Chrome giver predenne standard styling:

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; }

hvilket forhindrer, at hvidt rum kollapser og gør det til et blokelement.

Lister

Vi har 3 typer lister:

uordnede lister
bestilte lister
definitionslister

Uordnede lister oprettes ved hjælp af ultagget. Hvert element på listen oprettes med litagget:


    
     First
     Second

Bestilte lister er ens, netop lavet med oltagget:


    
     First
     Second

Forskellen mellem de to er, at bestilte lister har et nummer foran hver vare:

Definitionslister er lidt forskellige. Du har et udtryk og dets definition:


    
     
      Flavio
     
     
      The name
     
     
      Copes
     
     
      The surname

Sådan gengiver browsere dem typisk:

Jeg må sige, at du sjældent ser dem i naturen, sikkert ikke meget som ulog ol, men nogle gange de kan være nyttigt.

Andre tekst tags

Der er et antal tags med præsentationsformål:

den marktag
den instag
den deltag
den suptag
den subtag
den smalltag
den itag
den btag

Dette er et eksempel på den visuelle gengivelse af dem, der anvendes som standard af browsere:

Du undrer dig måske over, hvordan er banderledes end strong? Og hvordan ier anderledes end em?

Forskellen ligger i den semantiske betydning. Mens bog ier et direkte tip til browseren for at gøre et stykke tekst fed eller kursiv strongog emgive teksten en særlig betydning, og det er op til browseren at give stylingen. Hvilket tilfældigvis er nøjagtigt det samme som bog isom standard. Selvom du kan ændre det ved hjælp af CSS.

Der er en række andre, mindre brugte tags relateret til tekst. Jeg nævnte lige dem, som jeg ser brugt mest.

LINKS

Links defineres ved hjælp af atagget. Linkdestinationen indstilles via dens hrefattribut.

Eksempel:

click here

Mellem start- og lukningskoden har vi linkteksten.

Ovenstående eksempel er en absolut URL. Links fungerer også med relative URL'er:

click here

I dette tilfælde flyttes brugeren til /testURL'en på den aktuelle oprindelse , når man klikker på linket .

Vær forsigtig med /karakteren. Hvis den udelades, i stedet for at starte fra oprindelsen, tilføjer browseren bare teststrengen til den aktuelle URL.

Eksempel, jeg er på siden //flaviocopes.com/axios/og har disse links:

/test når et klik er bragt mig til //flaviocopes.com/test
test når et klik er bragt mig til //flaviocopes.com/axios/test

Link tags kan indeholde andre ting inde i dem, ikke kun tekst. For eksempel billeder:

eller andre elementer undtagen andre tags.

Hvis du vil åbne linket i en ny fane, kan du bruge targetattributten:

open in new tab

CONTAINER TAGS OG SIDE STRUKTUR HTML

Container tags

HTML indeholder et sæt containertags. Disse tags kan indeholde et uspecificeret sæt andre tags.

Vi har:

article
section
div

og det kan være forvirrende at forstå forskellen mellem dem.

Lad os se, hvornår vi skal bruge hver enkelt af dem.

`article`

Artikeltaggen identificerer en ting, der kan være uafhængig af andre ting på en side.

For eksempel en liste over blogindlæg på startsiden.

Eller en liste over links.

A blog post
 Read more   Another blog post
 Read more

Vi er ikke begrænset til lister: en artikel kan være hovedelementet på en side.

A blog post
Here is the content...

Inde i et articletag skal vi have en titel ( h1- h6) og

`section`

Repræsenterer et afsnit af et dokument. Hver sektion har en overskrift ( h1- h6), derefter sektionens brødtekst .

Eksempel:

A section of the page
...

Det er nyttigt at opdele en lang artikel i forskellige sektioner .

Bør ikke bruges som et generisk containerelement. diver lavet til dette.

`div`

div er det generiske containerelement:

...

Du tilføjer ofte en classeller idattribut til dette element for at tillade det at blive stylet ved hjælp af CSS.

Vi bruger divethvert sted, hvor vi har brug for en container, men de eksisterende tags ikke er egnede.

Mærker relateret til side

`nav`

Dette tag bruges til at oprette den markering, der definerer sidens navigering. Til dette tilføjer vi typisk en uleller en olliste:


    
     Home
     Blog

`aside`

Den asidetag bruges til at tilføje et stykke indhold, der er relateret til hovedindhold.

Et felt, hvor du f.eks. Kan tilføje et tilbud. Eller et sidebjælke.

Eksempel:

some text..
A quote..
other text...

Brug asideer et signal om, at de ting, den indeholder, ikke er en del af den regelmæssige strøm af det afsnit, den lever i.

`header`

Det headermærke repræsenterer en del af den side, der er indledningen. Det kan f.eks. Indeholde et eller flere overskriftskoder ( h1- h6), tagline for artiklen, et billede.

Article title
  ...

`main`

Den maintag repræsenterer den vigtigste del af en side:

 ....  ....

`footer`

Den footertag bruges til at bestemme sidefoden af en artikel, eller sidefoden på siden:

 ....  Footer notes..

FORMER

Formularer er den måde, du kan interagere med en side eller en app, der er bygget med webteknologier.

Du har et sæt kontrolelementer, og når du sender formularen, enten med et klik på en "send" -knap eller programmatisk, sender browseren dataene til serveren.

Som standard får denne dataforsendelse siden til at genindlæse, når dataene er sendt, men ved hjælp af JavaScript kan du ændre denne adfærd (vil ikke forklare, hvordan i denne bog).

En formular oprettes ved hjælp af formtagget:

...

Som standard indsendes formularer ved hjælp af GET HTTP-metoden. Hvilket har sine ulemper, og normalt vil du bruge POST.

Du kan indstille formularen til at bruge POST, når den sendes ved hjælp af methodattributten:

...

Formularen sendes, enten ved hjælp af GET eller POST, til den samme URL, hvor den ligger.

Så hvis formularen er på //flaviocopes.com/contactssiden, skal du trykke på knappen "send" forespørgsel til den samme URL.

Hvilket kan resultere i, at der ikke sker noget.

Du har brug for noget på serversiden for at håndtere anmodningen, og du "lytter" typisk til disse formularer indsender begivenheder på en dedikeret URL.

Du kan angive URL'en via actionparameteren:

...

Dette får browseren til at indsende formulardataene ved hjælp af POST til /new-contactURL'en med samme oprindelse.

Hvis oprindelsen (protokol + domæne + port) er //flaviocopes.com(port 80 er standard), betyder det, at formulardata sendes til //flaviocopes.com/new-contact.

Jeg talte om data. Hvilke data?

Data leveres af brugere via det sæt kontrolelementer, der er tilgængelige på webplatformen:

indtastningsfelter (tekst med en linje)
tekstområder (flerlinjetekst)
vælg felter (vælg en mulighed i rullemenuen)
radioknapper (vælg en mulighed fra en liste, der altid er synlig)
afkrydsningsfelter (vælg nul, en eller flere indstillinger)
fil uploads
og mere!

Lad os introducere hver enkelt af dem i følgende formularoversigtsoversigt.

den `input`tag

Den inputer ét af de mest udbredte formelementer. Det er også et meget alsidigt element, og det kan ændre adfærd fuldstændigt baseret på typeattributten.

Standardadfærden er at være en tekstlinjekontrol med en linje:

Svarer til brug:

Som med alle de andre felter, der følger, skal du give feltet et navn, for at dets indhold kan sendes til serveren, når formularen indsendes:

Den placeholderattribut bruges til at have noget tekst dukke op, i lysegrå, når feltet er tomt. Nyttigt at tilføje et tip til brugeren om, hvad han skal skrive:

E-mail

Brug type="email"vil validere klientsiden (i browseren) en e-mail for korrekthed (semantisk korrekthed, uden at sikre, at e-mail-adressen findes), inden den sendes.

Adgangskode

Brug type="password"gør, at hver indtastet tast vises som en stjerne (*) eller prik, hvilket er nyttigt for felter, der er vært for en adgangskode.

Tal

Du kan have et inputelement, der kun accepterer tal:

Du kan angive en accepteret minimums- og maksimumværdi:

Den stepegenskab hjælper med at identificere de trin mellem forskellige værdier. For eksempel accepterer dette en værdi mellem 10 og 50 i trin 5:

Skjult felt

Felter kan skjules for brugeren. De vil stadig blive sendt til serveren efter formularen indsende:

Dette bruges ofte til at gemme værdier som et CSRF-token, der bruges til sikkerhed og brugeridentifikation eller endda til at opdage robotter, der sender spam, ved hjælp af specielle teknikker.

Det kan også bare bruges til at identificere en formular og dens handling.

Indstilling af en standardværdi

Alle disse felter accepterer en foruddefineret værdi. Hvis brugeren ikke ændrer det, vil dette være den værdi, der sendes til serveren:

Hvis du indstiller en pladsholder, vises den værdi, hvis brugeren rydder inputfeltværdien:

Formular indsendes

Det type="submit"felt er en knap, der, når presset af brugeren, sender formularen:

Den valueattribut sætter teksten på knappen, som, hvis manglende shows "Send" tekst:

Formularvalidering

Browsere leverer formularer valideringsfunktionalitet på klientsiden.

Du kan indstille felter efter behov, sikre at de udfyldes og håndhæve et specifikt format til input af hvert felt.

Lad os se begge muligheder.

Indstil felter efter behov

Den requiredegenskab hjælper dig med validering. Hvis feltet ikke er indstillet, mislykkes validering af klientsiden, og browseren sender ikke formularen:

Håndhæv et specifikt format

Jeg beskrev type="email"feltet ovenfor. Det validerer automatisk e-mail-adressen i henhold til et format, der er angivet i specifikationen.

I type="number"feltet nævnte jeg minog maxattributten til grænseværdier indtastet til et interval.

Du kan gøre mere.

Du kan håndhæve et bestemt format på ethvert felt.

Den patternegenskab giver dig mulighed for at angive et regulært udtryk til at validere værdien imod.

Jeg anbefaler at læse min guide til regulære udtryk på flaviocopes.com/javascript-regular-expressions/.

mønster = "//.*"

Andre felter

Fil uploads

Du kan indlæse filer fra din lokale computer og sende dem til serveren ved hjælp af et type="file"inputelement:

Du kan vedhæfte flere filer:

Du kan angive en eller flere tilladte filtyper ved hjælp af acceptattributten. Dette accepterer billeder:

Du kan bruge en bestemt MIME-type, ligesom application/jsoneller indstille en filtypenavn som .pdf. Eller indstil flere filtypenavne som denne:

Knapper

De type="button"indtastningsfelter kan bruges til at tilføje yderligere knapper til formularen, som ikke indsender knapper:

De bruges til programmatisk at gøre noget ved hjælp af JavaScript.

Der er et specielt felt gengivet som en knap, hvis specielle handling er at rydde hele formularen og bringe tilstanden for felterne tilbage til den oprindelige:

Radioknapper

Radioknapper bruges til at skabe et sæt valg, hvoraf den ene trykkes og alle de andre er deaktiveret.

Navnet kommer fra gamle bilradioer, der havde denne slags interface.

Du definerer et sæt type="radio"input, alle med samme nameattribut og forskellige valueattribut:

Når formularen er indsendt, vil colordataegenskaben have en enkelt værdi.

Der er altid et element kontrolleret. Det første element er det, der er markeret som standard.

Du kan indstille den værdi, der er forudvalgt, ved hjælp af checkedattributten. Du kan kun bruge den en gang pr. Radioindgangsgruppe.

Afkrydsningsfelter

Svarende til radiobokse, men de tillader at vælge flere værdier eller slet ingen.

Du definerer et sæt type="checkbox"input, alle med samme nameattribut og forskellige valueattribut:

Alle disse afkrydsningsfelter er ikke markeret som standard. Brug checkedattributten til at aktivere dem ved sideindlæsning.

Da dette indtastningsfelt tillader flere værdier, sendes værdien (erne) efter formularen til serveren som en matrix.

Dato og tid

Vi har et par inputtyper til at acceptere datoværdier.

Den type="date"indtastningsfeltet giver brugeren mulighed for at indtaste en dato, og viser en datovælger hvis nødvendigt:

Det type="time"input felt giver brugeren mulighed for at indtaste en tid, og viser en tid picker hvis nødvendigt:

Den type="month"indtastningsfeltet giver brugeren mulighed for at indtaste en måned og et år:

Den type="week"indtastningsfeltet giver brugeren mulighed for at indtaste en uge og et år:

Alle disse felter tillader at begrænse området og trinnet mellem hver værdi. Jeg anbefaler at tjekke MDN for de små detaljer om deres brug.

Det type="datetime-local"felt lader dig vælge en dato og et tidspunkt.

Her er en side for at teste dem alle: //codepen.io/flaviocopes/pen/ZdWQPm

Farvevælger

Du kan lade brugerne vælge en farve ved hjælp af type="color"elementet:

Du indstiller en standardværdi ved hjælp af valueattributten:

Browseren sørger for at vise en farvevælger til brugeren.

Rækkevidde

Dette inputelement viser et skyderelement. Folk kan bruge det til at flytte fra en startværdi til en slutværdi:

Du kan give et valgfrit trin:

Telefon

Det type="tel"input felt bruges til at indtaste et telefonnummer:

Det vigtigste salgsargument for brug af telover texter på mobil, hvor enheden kan vælge at vise et numerisk tastatur.

Angiv en patternattribut til yderligere validering:

URL

Det type="url"felt bruges til at indtaste en URL.

Du kan validere det ved hjælp af patternattributten:

den `textarea`tag

Det textareaelement giver brugerne mulighed for at indtaste flere linjer tekst. Sammenlignet med inputkræver det et sluttag:

Du kan indstille dimensioner ved hjælp af CSS, men også ved hjælp af rowsog colsattributter:

Som med de andre nameformtags bestemmer attributten navnet i de data, der sendes til serveren:

den `select`tag

Dette tag bruges til at oprette en rullemenu.

Brugeren kan vælge en af de tilgængelige muligheder.

Hver indstilling oprettes ved hjælp af optiontagget. Du tilføjer et navn til markøren og en værdi til hver indstilling:

 Red Yellow

Du kan indstille en indstilling deaktiveret:

 Red Yellow

Du kan have en tom mulighed:

 None Red Yellow

Valgmuligheder kan grupperes ved hjælp af optgrouptagget. Hver indstillingsgruppe har en labelattribut:

  Red Yellow Blue   Green Pink

TABLER

I de tidlige dage af webtabellerne var en meget vigtig del af opbygningen af layout.

Senere blev de erstattet af CSS og dets layoutmuligheder, og i dag har vi kraftfulde værktøjer som CSS Flexbox og CSS Grid til at opbygge layout. Tabeller bruges nu kun til, gæt hvad, at bygge borde!

den `table`tag

Du definerer en tabel ved hjælp af tabletagget:

Inde i tabellen definerer vi dataene. Vi begrunder med hensyn til rækker, hvilket betyder, at vi tilføjer rækker i en tabel (ikke kolonner). Vi definerer kolonner inde i en række.

Rækker

En række tilføjes ved hjælp af trtagget, og det er det eneste, vi kan tilføje til et tableelement:

Dette er en tabel med 3 rækker.

Den første række kan tage rollen som header.

Kolonneoverskrifter

Tabeloverskriften indeholder navnet på en kolonne, typisk med en fed skrift.

Tænk på et Excel / Google Sheets-dokument. Den øverste A-B-C-D...overskrift.

Vi definerer overskriften ved hjælp af thtagget:


    
     
      
       Column 1
       Column 2
       Column 3

Indholdet af tabellen

Indholdet af tabellen defineres ved hjælp af tdtags inde i de andre trelementer:


    
     
      
       Column 1
       Column 2
       Column 3
      
      
       Row 1 Column 1
       Row 1 Column 2
       Row 1 Column 3
      
      
       Row 2 Column 1
       Row 2 Column 2
       Row 2 Column 3

Column 1	Column 2	Column 3
Row 1 Column 1	Row 1 Column 2	Row 1 Column 3
Row 2 Column 1	Row 2 Column 2	Row 2 Column 3

Sådan gengiver browsere det, hvis du ikke tilføjer nogen CSS-styling:

Tilføjelse af denne CSS:

th, td { padding: 10px; border: 1px solid #333; }

får bordet til at ligne et ordentligt bord:

Spænd kolonner og rækker

En række kan beslutte at spænde over 2 eller flere kolonner ved hjælp af colspanattributten:


    
     
      
       Column 1
       Column 2
       Column 3
      
      
       Row 1 Columns 1-2
       Row 1 Column 3
      
      
       Row 2 Columns 1-3

Column 1	Column 2	Column 3
Row 1 Columns 1-2	Row 1 Column 3
Row 2 Columns 1-3

Eller det kan spænde over 2 eller flere rækker ved hjælp af rowspanattributten:


    
     
      
       Column 1
       Column 2
       Column 3
      
      
       Rows 1-2 Columns 1-2
       Row 1 Column 3
      
      
       Row 2 Column 3

Column 1	Column 2	Column 3
Rows 1-2 Columns 1-2	Row 1 Column 3
Row 2 Column 3

Rækkeoverskrifter

Før jeg forklarede, hvordan du kan have kolonneoverskrifter ved hjælp af thtagget inden i det første trtag i tabellen.

Du kan tilføje et thtag som det første element i en, trder ikke er den første tri tabellen, der har rækkeoverskrifter:

	Column 2	Column 3
Row 1	Col 2	Col 3
Row 2	Col 2	Col 3

Flere tags til at organisere bordet

Du kan tilføje 3 flere tags i en tabel for at få den mere organiseret.

Dette er bedst, når du bruger store borde. Og for at definere et sidehoved og en sidefod korrekt.

Disse tags er

thead
tbody
tfoot

De indpakker trtags for tydeligt at definere de forskellige sektioner i tabellen. Her er et eksempel:


    
     
      
       
       Column 2
       Column 3
      
     
     
      
       Row 1
       Col 2
       Col 3
      
      
       Row 2
       Col 2
       Col 3
      
     
     
      
       
       Footer of Col 1
       Footer of Col 2

	Column 2	Column 3
Row 1	Col 2	Col 3
Row 2	Col 2	Col 3
	Footer of Col 1	Footer of Col 2

Tabeltekst

En tabel skal have et captiontag, der beskriver dets indhold. Dette mærke skal placeres umiddelbart efter åbningskoden table:

Dog	Age
Roger	7

MULTIMEDIA-MÆRKNINGER: `AUDIO`OG`VIDEO`

I dette afsnit vil jeg vise dig tags audioog videotags.

den `audio`tag

Dette tag giver dig mulighed for at integrere lydindhold på dine HTML-sider.

Dette element kan streame lyd, måske ved hjælp af en mikrofon via getUserMedia(), eller det kan afspille en lydkilde, som du refererer til ved hjælp af srcattributten:

Som standard viser browseren ikke nogen kontroller for dette element. Hvilket betyder, at lyden kun afspilles, hvis den er indstillet til automatisk afspilning (mere om dette senere), og brugeren ikke kan se, hvordan man stopper den eller styrer lydstyrken eller bevæger sig gennem sporet.

For at vise de indbyggede kontroller kan du tilføje controlsattributten:

Kontrolelementer kan have en brugerdefineret hud.

Du kan angive MIME-typen for lydfilen ved hjælp af typeattributten. Hvis det ikke er indstillet, forsøger browseren automatisk at bestemme det:

En lydfil afspilles som standard ikke automatisk. Tilføj autoplayattributten for automatisk at afspille lyden:

Bemærk: mobilbrowsere tillader ikke automatisk afspilning

Den loopattribut genstarter lyden afspilles på 0:00 hvis indstillet; Ellers stopper lyden i slutningen af filen, hvis den ikke er til stede:

Du kan også afspille en lydfil dæmpet ved hjælp af mutedattributten (ikke rigtig sikker på, hvad der er nytten af dette):

Ved hjælp af JavaScript kan du lytte til forskellige begivenheder, der sker på et audioelement, hvoraf de mest basale er:

play når filen begynder at afspilles
pause når lydafspilningen blev sat på pause
playing når lyden genoptages fra en pause
ended når slutningen af lydfilen blev nået

den `video`tag

Dette tag giver dig mulighed for at integrere videoindhold på dine HTML-sider.

Dette element kan streame video ved hjælp af et webcam via getUserMedia()eller WebRTC , eller det kan afspille en videokilde, som du refererer til ved hjælp af srcattributten:

Som standard viser browseren ikke nogen kontroller for dette element, kun videoen.

Hvilket betyder, at videoen kun afspilles, hvis den er indstillet til automatisk afspilning (mere om dette senere), og brugeren ikke kan se, hvordan man stopper den, sætter den på pause, styrer lydstyrken eller springer til en bestemt position i videoen.

For at vise de indbyggede kontroller kan du tilføje controlsattributten:

Kontrolelementer kan have en brugerdefineret hud.

Du kan angive MIME-typen for videofilen ved hjælp af typeattributten. Hvis det ikke er indstillet, forsøger browseren automatisk at bestemme det:

En videofil afspilles som standard ikke automatisk. Tilføj autoplayattributten for automatisk at afspille videoen:

Nogle browsere kræver også mutedattributten til automatisk afspilning. Videoen afspilles kun automatisk, hvis den er slået fra:

Den loopattribut genstarter videoen afspilles på 0:00 hvis sæt; ellers stopper videoen i slutningen af filen, hvis den ikke er til stede:

Du kan indstille et billede til at være plakatbilledet:

Hvis den ikke er til stede, viser browseren det første billede af videoen, så snart den er tilgængelig.

Du kan indstille widthog heightattributterne til at indstille det rum, som elementet skal tage, så browseren kan tage højde for det, og det ændrer ikke layoutet, når det endelig er indlæst. Det tager en numerisk værdi, udtrykt i pixels.

Ved hjælp af JavaScript kan du lytte til forskellige begivenheder, der sker på et videoelement, hvoraf de mest basale er:

play når filen begynder at afspilles
pause da videoen blev sat på pause
playing når videoen genoptages fra en pause
ended når slutningen af videofilen blev nået

IFRAMER

Den iframetag giver os mulighed for at indkapsle indhold fra andre oprindelser (andre steder) i vores hjemmeside.

Teknisk set opretter en iframe en ny indlejret browsing-kontekst. Dette betyder, at alt i iframe ikke interfererer med forældresiden og omvendt. JavaScript og CSS "lækker" ikke til / fra iframes.

Mange sider bruger iframes til at udføre forskellige ting. Du er måske bekendt med Codepen, Glitch eller andre websteder, der giver dig mulighed for at kode i en del af siden, og du ser resultatet i en boks. Det er en iframe.

Du opretter en på denne måde:

Du kan også indlæse en absolut URL:

Du kan indstille et sæt parametre for bredde og højde (eller indstille dem ved hjælp af CSS), ellers bruger iframe standardindstillingerne, en boks på 300x150 pixels:

Srcdoc

Den srcdocegenskab lader dig angive nogle inline HTML for at vise. Det er et alternativ til src, men nyligt og understøttes ikke i Edge 18 og lavere og i IE:

Sandkasse

Den sandboxattribut giver os mulighed for at begrænse operationerne tilladt i iframes.

Hvis vi udelader det, er alt tilladt:

Hvis vi sætter det til "", er intet tilladt:

Vi kan vælge, hvad vi skal tillade, ved at tilføje indstillinger i sandboxattributten. Du kan tillade flere ved at tilføje et mellemrum imellem. Her er en ufuldstændig liste over de muligheder, du kan bruge:

allow-forms: tillad at indsende formularer
allow-modalstillad at åbne modalvinduer, herunder at ringe alert()til JavaScript
allow-orientation-lock tillad at låse skærmretningen
allow-popupstillad pop op-vinduer, brug window.open()og target="_blank"links
allow-same-origin behandle ressourcen, der indlæses, som samme oprindelse
allow-scripts lader den indlæste iframe køre scripts (men ikke oprette pop op-vinduer).
allow-top-navigation giver adgang til iframe til browserkonteksten på øverste niveau

Tillade

I øjeblikket eksperimentel og understøttes kun af Chromium-baserede browsere, dette er fremtiden for ressourcedeling mellem det overordnede vindue og iframe.

Det ligner sandboxattributten, men lader os tillade specifikke funktioner, herunder:

accelerometer giver adgang til Sensors API Accelerometer interface
ambient-light-sensor giver adgang til Sensors API AmbientLightSensor interface
autoplay tillader automatisk afspilning af video- og lydfiler
camera giver adgang til kameraet fra getUserMedia API
display-capture giver adgang til skærmindholdet ved hjælp af getDisplayMedia API
fullscreen giver adgang til fuldskærmstilstand
geolocation giver adgang til Geolocation API
gyroscope giver adgang til Sensors API Gyroscope-interface
magnetometer giver adgang til Sensors API Magnetometer interface
microphone giver adgang til enhedens mikrofon ved hjælp af getUserMedia API
midi giver adgang til Web MIDI API
payment giver adgang til API for betalingsanmodning
speaker giver adgang til afspilning af lyd gennem enhedens højttalere
usb giver adgang til WebUSB API.
vibrate giver adgang til Vibration API
vr giver adgang til WebVR API

Henvisning

Når du indlæser en iframe, sender browseren vigtige oplysninger om, hvem der indlæser den i Refereroverskriften (læg mærke til singlen r, en tastefejl, vi skal leve med).

Fejlstavningen af henviseren stammer fra det oprindelige forslag fra computerforsker Phillip Hallam-Baker om at indarbejde feltet i HTTP-specifikationen. Stavefejlen blev sat i sten, da den blev inkorporeret i standarddokumentet RFC 1945 om anmodning om kommentarer

Den referrerpolicyegenskab lader os sætte den henvisende til at sende til iframe, når du lægger det. Henviseren er en HTTP-overskrift, der fortæller siden, hvem der indlæser den. Dette er de tilladte værdier:

no-referrer-when-downgrade det er standard og sender ikke henviseren, når den aktuelle side indlæses via HTTPS, og iframe indlæses på HTTP-protokollen
no-referrer sender ikke henvisningshovedet
origin henviseren sendes og indeholder kun oprindelsen (port, protokol, domæne), ikke oprindelsen + stien, som er standard
origin-when-cross-originved indlæsning fra samme oprindelse (port, protokol, domæne) i iframe sendes henviseren i sin fulde form (oprindelse + sti). Ellers sendes kun oprindelsen
same-origin henviseren sendes kun, når den indlæses fra samme oprindelse (port, protokol, domæne) i iframe
strict-originsender oprindelsen som henvisning, hvis den aktuelle side indlæses via HTTPS, og iframe også indlæses på HTTPS-protokollen. Sender intet, hvis iframe er indlæst via HTTP
strict-origin-when-cross-originsender oprindelsen + stien som henviseren, når man arbejder på den samme oprindelse. Sender oprindelsen som henvisning, hvis den aktuelle side indlæses via HTTPS, og iframe også indlæses på HTTPS-protokollen. Sender intet, hvis iframe er indlæst via HTTP
unsafe-url: sender oprindelsen + stien som henvisning, selv når ressourcer indlæses fra HTTP, og den aktuelle side indlæses via HTTPS

BILLEDER

Billeder kan vises ved hjælp af imgmærket.

Dette tag accepterer en srcattribut, som vi bruger til at indstille billedkilden:

Vi kan bruge et bredt sæt billeder. De mest almindelige er PNG, JPEG, GIF, SVG og for nylig WebP.

HTML-standarden kræver en altattribut for at være til stede for at beskrive billedet. Dette bruges af skærmlæsere og også af søgemaskine-bots:

Du kan indstille widthog heightattributterne for at indstille den plads, elementet skal tage, så browseren kan tage højde for det, og det ændrer ikke layoutet, når det er fuldt indlæst. Det tager en numerisk værdi, udtrykt i pixels.

den `figure`tag

Den figuretagget bruges ofte sammen med imgtag.

figureer et semantisk tag, der ofte bruges, når du vil vise et billede med en billedtekst. Du bruger det sådan:

 A nice dog

Den figcaptiontag wraps billedteksten.

Responsive billeder ved hjælp af `srcset`

Den srcsetegenskab gør det muligt at sætte responsive billeder, browseren kan bruge, afhængigt af pixeltæthed eller vindue bredde, i henhold til dine præferencer. På denne måde kan den kun downloade de ressourcer, den har brug for for at gengive siden uden at downloade et større billede, hvis det f.eks. Er på en mobilenhed.

Her er et eksempel, hvor vi giver 4 ekstra billeder til 4 forskellige skærmstørrelser:

I det srcsetbruger vi wforanstaltningen til at indikere vinduesbredden.

Da vi gør det, skal vi også bruge sizesattributten:

I dette eksempel beskriver (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxstrengen i sizesattributten billedets størrelse i forhold til visningsporten med flere betingelser adskilt af et semikolon.

Medietilstanden max-width: 500pxindstiller billedets størrelse i overensstemmelse med visningsportens bredde. Kort sagt, hvis vinduesstørrelsen er <500 px, gengives det billedet til 100% af vinduesstørrelsen.

Hvis vinduesstørrelsen er større, men < 900px, gengives billedet med 50% af vinduesstørrelsen.

Og hvis det er endnu større, gengiver det billedet ved 800 pixel.

Den vwmåleenhed kan være nyt for dig, og kort sagt kan vi sige, at en vwer 1% af vinduets bredde, så 100vwer 100% af vinduet bredde.

Et nyttigt websted til at generere srcsetog gradvist mindre billeder er //responsivebreakpoints.com/.

den `picture`tag

HTML giver os også picturetagget, som gør et meget lignende job srcset, og forskellene er meget subtile.

Du bruger, picturenår du i stedet for bare at servere en mindre version af en fil, vil ændre den. Eller tjen et andet billedformat.

Den bedste brugssag, jeg fandt, er når jeg serverer et WebP-billede, som er et format, der stadig ikke understøttes bredt. I picturetagget angiver du en liste med billeder, og de vil blive brugt i rækkefølge, så i det næste eksempel bruger browsere, der understøtter WebP, det første billede og en reserve til JPG, hvis ikke:

Den sourcetag definerer en (eller flere) formater til billederne. Den imgtag er den fallback i tilfælde af browseren er meget gammel og understøtter ikke picturemærket.

I sourcetagget indeni picturekan du tilføje en mediaattribut for at indstille medieforespørgsler.

Eksemplet, der følger slags arbejder som ovenstående eksempel med srcset:

Men det er ikke dets brugssag, for som du kan se, er det meget mere detaljeret.

Den picturetag er nyere, men er nu støttet af alle de store browsere undtagen Opera Mini og IE (alle versioner).

TILGÆNGELIGHED

Det er vigtigt, at vi designer vores HTML med tanke på tilgængelighed.

At have tilgængelig HTML betyder, at mennesker med handicap kan bruge Internettet. Der er helt blinde eller synshandicappede brugere, mennesker med høretabsproblemer og en lang række andre forskellige handicap.

Desværre tager dette emne ikke den betydning, det har brug for, og det virker ikke så sejt som andre.

Hvad hvis en person ikke kan se din side, men stadig vil forbruge dens indhold? For det første, hvordan gør de det? De kan ikke bruge musen, de bruger noget, der kaldes en skærmlæser . Du behøver ikke forestille dig det. Du kan prøve en nu: Google leverer den gratis ChromeVox Chrome-udvidelse. Tilgængelighed skal også sørge for, at værktøjer let kan vælge elementer eller navigere gennem siderne.

Websider og webapps er ikke altid bygget med tilgængelighed som et af deres første mål, og måske frigives version 1 ikke tilgængelig, men det er muligt at gøre en webside tilgængelig efter det faktum. Før er bedre, men det er aldrig for sent.

Det er vigtigt, og i mit land skal websteder, der er bygget af regeringen eller andre offentlige organisationer, være tilgængelige.

Hvad betyder dette for at gøre en HTML tilgængelig? Lad mig illustrere de vigtigste ting, du har brug for at tænke over.

Bemærk: der er flere andre ting at tage sig af, som muligvis findes i CSS-emnet, som farver, kontrast og skrifttyper. Eller hvordan man gør SVG-billeder tilgængelige. Jeg taler ikke om dem her.

Brug semantisk HTML

Semantisk HTML er meget vigtig, og det er en af de vigtigste ting, du skal passe på. Lad mig illustrere et par almindelige scenarier.

Det er vigtigt at bruge den korrekte struktur til overskriftskoder. Det vigtigste er h1, og du bruger højere tal til mindre vigtige, men alle overskrifter på samme niveau skal have den samme betydning (tænk på det som en træstruktur)

h1 h2 h3 h2 h2 h3 h4

Brug strongog i emstedet for bog i. Visuelt ser de ens ud, men de første 2 har mere betydning forbundet med dem. bog ier mere visuelle elementer.

Lister er vigtige. En skærmlæser kan registrere en liste og give et overblik og derefter lade brugeren vælge at komme ind på listen eller ej.

En tabel skal have et captiontag, der beskriver dets indhold:

Dog	Age
Roger	7

Brug `alt`attributter til billeder

Alle billeder skal have et alttag, der beskriver billedindholdet. Det er ikke kun en god praksis, det kræves af HTML-standarden, og din HTML uden den er ikke valideret.

Det er også godt for søgemaskiner, hvis det er et incitament for dig at tilføje det.

Brug `role`attributten

Den roleegenskab kan du tildele specifikke roller til de forskellige elementer i din side.

Du kan tildele mange forskellige roller: komplementær, liste, liste, emne, hoved, navigation, region, fane, alarm, applikation, artikel, banner, knap, celle, afkrydsningsfelt, indholdsinfo, dialog, dokument, feed, figur, form, gitter, gridcell, heading, img, listbox, row, rowgroup, search, switch, table, tabpanel, textbox, timer.

Det er meget, og til den fulde reference for hver af dem giver jeg dig dette MDN-link. Men du behøver ikke at tildele en rolle til hvert element på siden. Skærmlæsere kan udlede fra HTML-tagget i de fleste tilfælde. For eksempel er det ikke nødvendigt at tilføje en rolle tag til semantiske tags som nav, button, form.

Lad os tage navtageksemplet. Du kan bruge den til at definere sidens navigering således:


    
     Home
     Blog

Hvis du blev tvunget til at bruge et divtag i stedet for nav, ville du bruge navigationrollen:


    
     Home
     Blog

Så her har du et praktisk eksempel: rolebruges til at tildele en meningsfuld værdi, når tagget ikke allerede formidler betydningen.

Brug `tabindex`attributten

Den tabindexegenskab gør det muligt at ændre rækkefølgen af hvordan trykke på tabulatortasten vælger "valgbare" elementer. Som standard er kun links og formelementer "valgbare" ved at navigere ved hjælp af Tab-tasten (og du behøver ikke at indstille tabindexdem).

Tilføjelse tabindex="0"gør et element valgbart:

...

Brug i tabindex="-1"stedet fjerner et element fra denne fanebaserede navigation, og det kan være ret nyttigt.

Brug `aria`attributterne

ARIA er et akronym, der betyder Accessible Rich Internet Applications og definerer semantik, der kan anvendes på elementer.

`aria-label`

Denne attribut bruges til at tilføje en streng for at beskrive et element.

Eksempel:

...

Jeg bruger denne attribut på min blog-sidebjælke, hvor jeg har et indtastningsfelt til søgning uden en eksplicit etiket, da den har en pladsholderattribut.

`aria-labelledby`

Denne attribut indstiller en sammenhæng mellem det aktuelle element og det, der mærker det.

Hvis du ved, hvordan et inputelement kan knyttes til et labelelement, er det ens.

Vi sender element-id'et, der beskriver det aktuelle element.

Eksempel:

The description of the product
 ...

`aria-describedby`

Denne attribut lader os forbinde et element med et andet element, der fungerer som beskrivelse.

Eksempel:

Pay now Clicking the button will send you to our Stripe form!

Brug aria-skjult til at skjule indhold

Jeg kan godt lide et minimalistisk design på mine websteder. Min blog er for eksempel for det meste bare indhold med nogle links i sidepanelet. Men nogle ting i sidebjælken er bare visuelle elementer, der ikke føjer til oplevelsen af en person, der ikke kan se siden. Ligesom mit logo-billede eller den mørke / lyse temavælger.

Tilføjelse af "attribut vil bede skærmlæsere om at ignorere dette element.

Hvor kan man lære mere

Dette er kun en introduktion til emnet. For at lære mere anbefaler jeg disse ressourcer:

//www.w3.org/TR/WCAG20/
//webaim.org
//developers.google.com/web/fundamentals/accessibility/

Du nåede slutningen af HTML-håndbogen.

Klik her for at få en PDF / ePub / Mobi-version af denne bog, der kan læses offline !

Introduktion

Bogindeks

FORORD

HTML GRUNDLÆGGENDE

HTML-sidestruktur

Tags vs elementer

Egenskaber

Sagsfølsom

hvidt rum

DOKUMENTOVERORDNINGEN

den titletag

den scripttag

den noscripttag

den linktag

den styletag

den basetag

den metatag

DOKUMENTKROPPEN

Bloker elementer vs indbyggede elementer

MÆRKER, DER VIRKER MED TEKST

den ptag

den spantag

den brtag

Overskriftskoderne

den strongtag

den emtag

Citater

Vandret linje

Kodeblokke

Lister

Andre tekst tags

LINKS

CONTAINER TAGS OG SIDE STRUKTUR HTML

Container tags

article

A blog post

Another blog post

A blog post

section

A section of the page

div

Mærker relateret til side

nav

aside

header

Article title

main

footer

FORMER

den inputtag

E-mail

Adgangskode

Tal

Skjult felt

Indstilling af en standardværdi

Formular indsendes

Formularvalidering

Indstil felter efter behov

Håndhæv et specifikt format

Andre felter

Fil uploads

Knapper

Radioknapper

Afkrydsningsfelter

Dato og tid

Farvevælger

Rækkevidde

Telefon

URL

den textareatag

den selecttag

TABLER

den tabletag

Rækker

Kolonneoverskrifter

Indholdet af tabellen

Spænd kolonner og rækker

Rækkeoverskrifter

Flere tags til at organisere bordet

Tabeltekst

den `title`tag

den `script`tag

den `noscript`tag

den `link`tag

den `style`tag

den `base`tag

den `meta`tag

den `p`tag

den `span`tag

den `br`tag

den `strong`tag

den `em`tag

`article`

`section`

`div`

`nav`

`aside`

`header`

`main`

`footer`

den `input`tag

den `textarea`tag

den `select`tag

den `table`tag

MULTIMEDIA-MÆRKNINGER: `AUDIO`OG`VIDEO`

den `audio`tag

den `video`tag

den `figure`tag

Responsive billeder ved hjælp af `srcset`

den `picture`tag

Brug `alt`attributter til billeder

Brug `role`attributten

Brug `tabindex`attributten

Brug `aria`attributterne

`aria-label`

`aria-labelledby`

`aria-describedby`