HTML-element

Den aktuella versionen av sidan har ännu inte granskats av erfarna bidragsgivare och kan skilja sig väsentligt från versionen som granskades den 11 december 2015; kontroller kräver 50 redigeringar .

HTML - elementet  är den grundläggande strukturella enheten för en webbsida , skriven på HTML - språket . Du kan se detta element i källkoden för alla webbsidor efter att ha ställt in dokumenttypen på den första raden på sidan. DOCTYPE anger vilken version av (X)HTML denna sida använder. Sidelementen finns mellan den inledande <HTML>-taggen och den avslutande </HTML>. Elementet <html> kallas rotelementet. [ett]


Strukturen för ett HTML-dokument

HTML  är ett taggat dokumentmarkeringsspråk , det vill säga alla dokument i HTML- språket är en uppsättning element, och början och slutet av varje element indikeras av speciella märken som kallas taggar . Det fall i vilket taggnamnet skrivs spelar ingen roll i HTML. Element kan vara tomma , det vill säga inte innehålla någon text eller annan data (till exempel en radbrytningstagg <br> ). I det här fallet är den avslutande taggen vanligtvis inte specificerad. Dessutom kan element ha attribut som definierar vissa av deras egenskaper (till exempel teckenstorleken för <font>-taggen ). Attribut anges i öppningstaggen. Här är ett exempel på en uppmärkningsdel av ett HTML-dokument:

< p > Text mellan två taggar - öppning och stängning. </ p > <a href="http://example.com"> Här innehåller elementet href- attributet . </a> Här är ett exempel på ett tomt element : <br>

Varje HTML-dokument som överensstämmer med en version av HTML-specifikationen måste börja med en HTML-versionsdeklarationsrad <!DOCTYPE>, som vanligtvis ser ut ungefär så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Om denna rad inte anges blir det svårare att få korrekt visning av dokumentet i webbläsaren .

Vidare indikeras början och slutet av dokumentet med taggar <html>respektive </html>. Inom dessa taggar finns rubriken ( <head></head>) och texten ( <body></body>) för dokumentet.

DOCTYPE-alternativ för HTML 4.01

  • Strikt: Innehåller inte taggar markerade som föråldrade eller utfasade.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Transitional: innehåller föråldrade taggar för kompatibilitet och enkel övergång från äldre versioner av HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Med ramar (Frameset): liknar övergången, men innehåller även taggar för att skapa ramuppsättningar.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE för HTML 5

Till skillnad från tidigare versioner finns det bara en tagg. [2]

<!DOCTYPE html>

Grundläggande element

Taggar och deras parametrar är skiftlägesokänsliga. Det vill säga, <A HREF="http://example.com"> och <a href="http://example.com"> betyder samma sak.

I de senaste versionerna av HTML har nästan varje tagg ett stort antal valfria parametrar - vanligtvis minst 15. Vi tillhandahåller endast huvudtaggparametrarna.

Hyperlänkar

< a href = "filename" target = "_self" > länknamn </ a >
  • Attributet hrefanger värdet på adressen till dokumentet som länken pekar på.
  • filename — filnamn eller internetadress som du vill hänvisa till.
  • название ссылки - namnet på hypertextlänken som kommer att visas i webbläsaren, det vill säga visas för de som har besökt sidan.
  • target - ställer in värdet på fönstret eller ramen där dokumentet som länken pekar på kommer att öppnas. Möjliga attributvärden:
    • _top — öppna ett dokument i det aktuella fönstret;
    • _blank - öppna ett dokument i ett nytt fönster;
    • _self - öppna ett dokument i den aktuella ramen;
    • _parent — öppna dokumentet i den överordnade ramen.

Standardvärde: _self.

Ankare

Samma element används för att skapa så kallade "ankare" (ankare), som sedan kan användas i hyperlänkar riktade till ett specifikt element på sidan. Till exempel:

<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title > Förankra inuti dokumentet </ title > </ head > < body > < p >< a name = "top" > </ a ></ p > < p > text </ p > < p >< a href = "#top" > Överst </ a ></ p > </ body > </ html >

På samma sätt kan ett ankare placeras på ett bokmärke som finns på en annan webbsida eller på en annan webbplats: där länken är riktad ska den vara <a name="xxx"></a>, och där länken kommer ifrån, ett pundtecken och namnet på ankaret hrefläggs till i värde.

Dessutom kan id:t för alla element fungera som ett ankare i moderna webbläsare.

Textblock

  • <H1> … </H1>, <H2> … </H2>, … , <H6> … </H6> — rubrikerna 1, 2, … 6 nivåer. Används för att markera delar av texten (rubrik 1 är den största, 6 är den minsta).
  • <P> - ny punkt. Du kan sätta i slutet av stycket </P>, men detta är inte nödvändigt.
  • <BR> - ny linje. Den här taggen är inte stängd (dvs taggen finns inte </BR>)
  • <HR> - vågrät linje
  • <BLOCKQUOTE> … </BLOCKQUOTE>  - Citat. Normalt flyttas texten åt höger.
  • <PRE> … </PRE>  — förhandsgranskningsläge (förformaterad text). Blanktecken förblir där de finns i originaldokumentet (ignoreras i andra taggar). Internt kan andra inline-taggar än img, object, big, small, sup och sub bearbetas.
  • <DIV> … </DIV>  - block (används vanligtvis för att tillämpa CSS- stilar )
  • <SPAN> … </SPAN>  - sträng (används vanligtvis för att tillämpa CSS- stilar )

Textformatering

  • <EM> … </EM>  - logisk betoning (visas vanligtvis i kursiv stil )
  • <STRONG> … </STRONG>  - förstärkt logisk stress (vanligtvis med fet stil )
  • <I> … </I> - kursiv  text
  • <B> … </B>  - fet text
  • <U> … </U>  - understrykning av text
  • <S> … </S> (eller <STRIKE> … </STRIKE> ) - genomstruken text
  • <BIG> … </BIG>  - ökning av teckenstorlek
  • <SMALL> … </SMALL>  - teckensnittsreduktion
  • <BLINK> … </BLINK>  - blinkande text. Uppmärksamhet! Den här taggen fungerar inte i Internet Explorer 5 och senare utan JavaScript
  • <MARQUEE> … </MARQUEE>  - text som glider över skärmen.
  • <SUB> … </SUB>  - nedsänkt text. Till exempel kommer H <SUB>2</SUB>O att skapa texten H 2 O.
  • <SUP> … </SUP>  - upphöjd text. Till exempel kommer E=mc <SUP>2</SUP> att skapa texten E=mc 2 .
  • <FONT параметры> … </FONT>  — ställ in teckensnittsparametrar. Den här taggen har följande alternativ:
    • COLOR=цвет - ställ in färg. Färgen kan anges i hexadecimal form som #rrggbb (de första 2 hexadecimala siffrorna är den röda komponenten, nästa 2 är gröna, de sista 2 är blå) eller med ett namn.
    • FACE=шрифтställa in typsnittet
    • SIZE=размерställa in teckensnittsstorleken. Storlek 1 till 7: Standardstorleken är 3. Det finns många sätt att ändra standardstorleken.
    • SIZE=+изменениеeller  — ändra teckenstorleken från standardstorleken. Till exempel betyder +2 att storleken är 2 mer än standardstorleken.SIZE=-изменение

Till exempel,

< U > tre </ U > < FONT SIZE = "+2" > stora </ FONT > < FONT COLOR = "grön" > gröna </ FONT > visselpipor är signalen för att starta attacken .

kommer att skapa text

Сигналом к началу атаки являются три больших зелёных свистка.

Listor

< UL > < LI > första elementet </ LI > < LI > andra elementet </ LI > < LI > tredje elementet </ LI > </ UL >

skapar en lista

  • första elementet
  • andra elementet
  • tredje elementet

Om istället för <UL> ( Oordnad lista  - oordnad lista) sätter <OL> ( Ordnad lista  - numrerad lista), kommer listan att numreras:

  1. första elementet
  2. andra elementet
  3. tredje elementet

Dessa taggar har parametrar:

typ ="typ"

där typ  är form:

i <UL>  - tecken

  • square - fyrkantig
  • circle - omkrets
  • disk - cirkel: standard

och i <OL>  - siffror eller bokstäver

  • A eller a (med latinska bokstäver) - alfabetisk lista: med versaler respektive gemener
  • I eller i - romerska siffror: med versaler respektive gemener (romerska siffror visar siffror från 1 till 3999, resten - arabiska)
  • 1 - Arabiska siffror: standard

är skrivet så här:

< oltype = " i" > < li > Först </ li > < li > Andra </ li > < li > osv. </ li > </ ol >

och kommer att skapa följande:

  1. Först
  2. Andra
  3. Etc.

Parameter start ="start" (endast för <OL> ), som definierar början av en ny nedräkning: till exempel om du inte behöver 1, 2, 3, utan 24, 25, 26

Det är skrivet så här:

< ol start = "24" > < li > Tjugofyra </ li > < li > Tjugofem </ li > < li > osv. </ li >

och kommer att skapa följande:

  1. Tjugofyra
  2. Tjugofem
  3. Etc.

och slutligen, för taggen , en <LI> parameter  - om du behöver hoppa från en siffra till en annan: till exempel inte 1, 2, 3, 4, utan 1, 2, 22, 23 value="следующий"

< ol > < li > En </ li > < li > Två </ li > < li value = "22" > Tjugotvå </ li > < li > Tjugotre </ li >

kommer att skapa följande:

  1. Ett
  2. Två
  3. Tjugotvå
  4. Tjugotre

Slutligen är den tredje och sista listan listan med definitioner :

< DL > < DT > Katt </ DT > < DD > jamar husdjur </ DD > < DT > Katt </ DT > < DD > kattens make </ DD > < DT > Krokodil </ DT > < DD > stor afrikansk best med vassa tänder </ DD > </ DL >

kommer att skapa följande:

Katt jamar husdjur Katt kattmake Krokodil stort afrikanskt odjur med vassa tänder

Förresten, taggar <LI>, <DT>, <DD>kanske inte stängs.

Skillnader i att visa numrerade listor

Med icke-positiva värden i numreringen beter sig webbläsare annorlunda. Till exempel ignorerar Internet Explorervalue=0 , value=-1etc., medan andra webbläsare som Chrome , Firefox visar det angivna värdet. Samtidigt ignorerar inte Internet Explorer start=0, start=-1etc., d.v.s. den kan starta listan med ett icke-positivt värde, men det kan inte hoppa till ett icke-positivt värde i numreringen.

HTML-uppmärkning Denna webbläsare Chrome, Firefox Internet Explorer
<ol start=-2><li><li värde=0><li värde=2></ol>
  1.  
  2.  
  3.  
 -2, 0, 2 -2, -1, 2

I den alfabetiska listan ( type=Aeller type=a) visar vissa webbläsare, som Chrome, Firefox, icke-positiva värden som siffror, medan Internet Explorer (i Quirks-läge , dvs om sidan inte anger HTML 4.01 eller 5 i taggen !DOCTYPE HTML) visar negativa värden som bokstäver med ett minustecken och noll med @-symbolen.

HTML-uppmärkning Denna webbläsare Chrome, Firefox Internet Explorer (Quirks-läge)
<ol type=A start=-1><li><li><li></ol>
  1.  
  2.  
  3.  
 -1, 0, A -A, @, A

Ett tomt eller icke-numeriskt värde ( value=, value=A, value=B) ignoreras av vissa webbläsare, som Chrome, Firefox, medan Internet Explorer uppfattar det som value=1.

HTML-uppmärkning Denna webbläsare Chrome, Firefox Internet Explorer
<ol start=-2><li><li värde=B><li värde=2></ol>
  1.  
  2.  
  3.  
 -2, -1, 2 -2, 1, 2

Det finns skillnader när man visar tal i romerska siffror ( type=Ieller type=i), eftersom Internet Explorer (i Quirks-läge , d.v.s. om sidan inte anger HTML-version 4.01 eller 5 i taggen !DOCTYPE HTML) visar vissa siffror felaktigt.

HTML-uppmärkning Denna webbläsare Chrome, Firefox Internet Explorer (Quirks-läge)
<ol type=I start=3300><li><li><li><li></ol>
  1.  
  2.  
  3.  
  4.  
MMMCCC
MMMCCCI
MMMCCCII
MMMCCCIII 		MMMCCC
MMMCCC
MMMCCC
MMMCCC

Alla nummer från intervallet 1 till 1880 visas korrekt av Internet Explorer, men inte alla från intervallet 1881 till 3999. För 603 nummer, 67 grupper om 9 nummer (xxx1-xxx9), ingår inte den minst signifikanta siffran i den romerska siffran. Och detta är troligen inte för att förkorta en lång rekord, eftersom 3888 - numret med den längsta (mellan 1 och 3999) romerska siffror (MMMDCCCLXXXVIII) - visas korrekt.

Grupper av nummer som visas felaktigt i Internet Explorer (i Quirks-läge ) är markerade med ett kryss i tabellen:

01-09 11-19 21-29 31-39 41-49 51-59 61-69 71-79 81-89 91-99
1800 ✘
2300 ✘ ✘ ✘
2700 ✘ ✘ ✘
2800 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3100 ✘
3200 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3300 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3400 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3500 ✘
3600 ✘ ✘ ✘ ✘ ✘ ✘ ✘
3700 ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘
3800 ✘ ✘ ✘
3900 ✘ ✘ ✘ ✘ ✘ ✘ ✘

Objekt

  • EMBED - infoga olika objekt: icke-HTML-dokument och mediafiler
  • APPLET - infoga Java-appletar
  • SCRIPT - infoga skript.

Bilder

  • IMG - infoga bild. Den här taggen är inte stängd.
    • SRC - namn eller URL
    • ALT - alternativt namn (kommer att visas om webbläsaren förbjuder visning av bilder)
    • TITLE - en kort beskrivning av bilden (visas när du håller muspekaren över bilden)
    • WIDTH, HEIGHT - mått (om de inte stämmer överens med bildens verkliga mått kommer bilden att "sträckas ut" eller "krympas")
    • ALIGN — ställer in parametrar för textbrytning (överst, mitten, botten, vänster, höger)
    • VSPACE, HSPACE - ställ in måtten på det vertikala och horisontella utrymmet runt bilden

Exempel:

< IMG SRC = url ALT = "text" TITLE = "text" WIDTH = "storlek (px, %)" HEIGHT = "storlek (px, %)" >

En bild kan göras till en länk:

< A HREF = url >< IMG SRC = url ></ A >

Bildkarta

  • <MAP>…</MAP> - skapa en bildkarta som låter dig lagra flera länkar i en bild.

Exempel:

< IMG width = "500" höjd = "200" usemap = "#somemap" src = "url" > < MAP name = "somemap" > < AREA shape = "rect" coords = "6, 7, 140, 196" href = "url1" > < AREA form = "cirkel" coords = "239, 98, 92" href = "url2" > < AREA shape = "polygon" coords = "386.16, 344.56, 350.189, 385.132, 489. 489. href = "url3" > </ MAP >

Tabeller

  • TABLE - skapa en tabell. Taggalternativ:
    • BORDER — Tjockleken på skiljelinjerna i tabellen
    • CELLSPACING - avstånd mellan celler
    • CELLPADDING- indrag från ramen till innehållet i cellen.
  • CAPTION - Tabellrubrik (denna tagg är valfri)
  • TR - bordsrad
  • TH - tabellkolumnrubrik (denna tagg är valfri)
  • TD - tabellcell
  • height - bordshöjd
  • width - bordsbredd

Till exempel,

< TABLE BORDER = "1" CELLSPACING = "0" > < CAPTION > Mumbe Yumba krokodilfångst </ CAPTION > < TH > År </ TH > < TH > Fångst </ TH > < TR > < TD > 1997 < / TD > < TD > 214 </ TD > </ TR > < TR > < TD > 1998 </ TD > < TD > 216 </ TD > </ TR > < TR > < TD > 1999 </ TD > < TD > 207 </ TD > </ TR > </ TABELL >

Skapar en tabell:

Fångst av krokodiler i Mumbe-Yumbe
År Fånga
1997 214
1998 216
1999 207

TABLE-taggen har också en CELLPADDING-parameter. Den definierar avståndet i pixlar mellan cellens kant och dess innehåll. Till exempel om du ersätter den första raden i tabellen med

< TABELL BORDER = "1" CELLSPACING = "0" CELLPADDING = "5" >

tabellen kommer att se ut så här:

Fångst av krokodiler i Mumbe-Yumbe
År Fånga
1997 214
1998 216
1999 207

En annan parameter för  taggarna TABLE, TR, THär . Den definierar inriktningen. Möjliga värden är (mitten), (vänster), (höger). TDALIGNcenterleftright

Parametern ALIGNi TDeller THbestämmer justeringen för innehållet i den givna cellen, i TR - för innehållet i alla celler i raden, TABLE - för själva tabellen på sidan. För varje cell tas justeringen från TDeller TH, om den inte är inställd - från TR, om den inte är inställd antingen - center för THeller vänster för TD.

Till exempel om du ersätter de första raderna i tabellen med

< TABLE BORDER = "1" CELLSPACING = "0" ALIGN = "center" > < CAPTION > Mumbe Yumba krokodilfångst </ CAPTION > < TH > År </ TH > < TH > Fångst </ TH > < TR > < TD > 1997 </ TD > < TD ALIGN = "CENTER" > 214 </ TD >

tabellen kommer att se ut så här:

Fångst av krokodiler i Mumbe-Yumbe
År Fånga
1997 214
1998 216
1999 207

Ostängda taggar TD , TR och TH leder till felaktig visning, speciellt när man arbetar med kapslade tabeller.

Formulär

Att skapa formulär i HTML är ganska komplicerat. Endast namnen på huvudtaggarna anges här.

  • FORM - skapa ett formulär
  • INPUT - inmatningselement (kan ha olika funktioner - från att skriva in text till att skicka ett formulär)
  • TEXTAREA - textområde (textinmatningsfält med flera rader)
  • SELECT - en lista (vanligtvis i form av en rullgardinsmeny)
  • OPTION - listobjekt

Symboler

För att skapa en symbol är det inte nödvändigt att söka efter den på tangentbordet: du kan helt enkelt skriva taggen; till exempel, för att få ¢ måste du skriva &cent;, non- breaking space  - &nbsp;, accent  - &#x301;etc.

Färgnamn

Följande färger definieras i HTML.

namn Hexfärgad
svart #000000
Silver #c0c0c0
rödbrun #800000
röd #ff0000
Marin #000080
blå #0000ff
lila #800080
fuchsia #ff00ff
grön #008000
kalk #00ff00
oliv #808000
gul #ffff00
kricka #008080
aqua #00ffff
grå #808080
vit #ffffff

Grundläggande tecken

Koden Symbol Menande
< < mindre
> > Mer
& & et-tecken
  icke-brytande utrymme (på detta utrymme är linjen inte bruten för omslag)
&sekt; § paragraf
№ Nej. rum
&kopiera; © upphovsrätt _ _
® ® registrerat varumärke _
™ ™ varumärke _ _ _
° ° grader
« " öppningscitat på ryska
" » slutcitat på ryska
&helli; … ellips
— — rusa
• • fet prick
± ± plus eller minus
− − minus-

Tangentbordstecken ' och " på ryska är inte citattecken. Det är också fel att ersätta №, ©, ®, ™, °C med N, (c), (R), TM, C på webbplatser.

Bindestreck, bindestreck och minus är tre olika tecken.

  1. Tangentbordssymbol - kallas bindestreck och används inuti ord.
  2. Ett minus är bredare än ett bindestreck . Den används för att skriva negativa tal och subtraktionsoperationer.
  3. Bindestrecket är ännu bredare än minus . Den används mellan ord och slås av med mellanslag, och framför - oskiljaktig . Ett bindestreck används också för att indikera numeriska intervall, men det är inte avsatt med mellanslag.

Mer information: Artemy Lebedev . Bindestreck, minus och bindestreck, eller funktioner i rysk typografi . Ledarskap (15 januari 2003). Hämtad 23 april 2013. Arkiverad från originalet 9 december 2007.

Tecknen < , > och & kan inte visas normalt i HTML eftersom de har en speciell betydelse. De visas alltid med <, > och & respektive.

För de flesta specialtecken, se about.com .

Anteckningar

  1. ↑ HTML-dokument rotelement Beskrivning
  2. ↑ HTML-standard . html.spec.whatwg.org . Hämtad: 26 september 2021.

Länkar