HTML-attributter forklaret

HTML-elementer kan have attributter, der indeholder yderligere oplysninger om elementet.

HTML-attributter findes normalt i navn-værdi-par og går altid i åbningskoden for et element. Attributnavnet siger, hvilken type information du giver om elementet, og attributværdien er den aktuelle information.

For eksempel opretter et anchor ( ) -element i et HTML-dokument links til andre sider eller andre dele af siden. Du bruger hrefattributten i åbningskoden til at fortælle browseren, hvor linket sender en bruger.

Her er et eksempel på et link, der sender brugere til freeCodeCamps startside:

Click here to go to freeCodeCamp!

Bemærk, at attributnavnet ( href) og værdien (“www.freeCodeCamp.org”) er adskilt med et ligetegn, og anførselstegn omgiver værdien.

Der er mange forskellige HTML-attributter, men de fleste fungerer kun på bestemte HTML-elementer. F.eks. Fungerer hrefattributten ikke, hvis den er placeret i en åbning

tag.

I eksemplet ovenfor kan værdien, der leveres til hrefattributten, være et hvilket som helst gyldigt link. Nogle attributter har dog kun et sæt gyldige indstillinger, du kan bruge, eller værdier skal være i et specifikt format. Den langattribut fortæller browseren standardsproget af indholdet i et HTML-element. Værdierne for langattributten skal bruge standardsprog eller landekoder, som enfor engelsk eller itfor italiensk.

Boolske attributter

Nogle HTML-attributter har ikke brug for en værdi, fordi de kun har en mulighed. Disse kaldes boolske attributter. Tilstedeværelsen af ​​attributten i et tag vil anvende den på det HTML-element. Det er dog okay at skrive attributnavnet ud og indstille det lig med den ene mulighed for værdien. I dette tilfælde er værdien normalt den samme som attributnavnet.

For eksempel kan elementet i en form have en requiredattribut. Dette kræver, at brugerne udfylder den vare, inden de kan indsende formularen.

Her er eksempler, der gør det samme:

Du kan læse mere om attributterne,, src og roll her:

Attribut

src Attribut

roll Attribut

Attribut

Lad os nu lære mere om nogle andre HTML-attributter:

P Juster attribut

Vigtig

Denne attribut understøttes ikke i HTML5. Det anbefales at bruge text-alignegenskaben CSS.

For at justere teksten inden i en

Syntax

Lorem Ipsum...

Attributes

  • left - Text aligns to the left
  • right - Text aligns to the right
  • center - Text aligns to the center
  • justify - All lines of text have equal width

Example

Paragraph align attribute example

Img Src Attribute

The attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

There is an image of the freeCodeCamp Logo located at //avatars0.githubusercontent.com/u/9892522?v=4&s=400

You can set that as the image using the src attribute.

 Img Src Attribute Example 

The above code displays like this:

The freeCodeCamp Avatar

The src attribute is supported by all browsers.

You can also have a locally hosted file as your image.

For example, Change my color

function redify(){ let text = document.querySelector('#text'); text.style.color = "red"; }

Using raw JavaScript onclick attribute:

Hello World

Img Align Attribute

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

Attribute Values:

right - Align image to the right left - Align image to the left

top - Align image to the top

bottom - Align image to the bottom

middle - Align image to the middle

For example:

 Img Align Attribute 

This is an example. More text right here

Vi kan også justere til højre, hvis vi vil:

This is another example

Bemærk, at tilpasningsattributten ikke understøttes i HTML5, og du skal bruge CSS i stedet. Det understøttes dog stadig af alle de store browsere.

Input Type Attribut

Attributten inputtype specificerer typen af ​​den input, som brugeren skal lægge i din formular.

tekst

En linje i en tekst.

  Login:  

adgangskode

En linje i en tekst. Tekst vises automatisk som en række prikker eller stjerner (afhænger af browseren og operativsystemet).

  Password:  

e-mail

HTML-en kontrollerer, om inputet matcher e-mail-adresseformatet (noget @ noget).

  E-mail address:  

nummer

Tillad kun numerisk input. Du kan også angive den tilladte min. Og maks. Værdi. Eksemplet nedenfor kontrollerer, at input er nummer mellem 1 og 120.

  Age:  

radio

Kun én mulighed kan vælges af brugeren. Gruppen af ​​radioknapper skal have samme navneattribut. Du kan automatisk vælge en mulighed ved hjælp af checkedegenskaben (i eksemplet nedenfor vælges værdien Blå).

  Red Green Blue 

afkrydsningsfelt

Brugeren kan vælge nul eller flere muligheder fra gruppen af ​​afkrydsningsfelter. Du kan også bruge checkedejendom her til en eller flere muligheder.

  english spanish french 

knap

Indgangen vises som knap, teksten, der skal vises i knappen, er i værdiattribut.

Indsend

Viser knappen Send. Teksten, der skal vises i knappen, er i værdiattribut. Efter at have klikket på knappen foretager HTML-valideringen, og hvis den passerer, indsendes formularen.

Nulstil

Viser reset-knappen. Teksten, der skal vises i knappen, er i værdiattribut. Efter at have klikket på knappen, slettes alle værdier fra formularen.

Der er flere typer elementer.

Andre HTML-attributter:

src-attribut

roll-attribut

attribut

attribut