Hem Sociala medier Hur man använder semantiska taggar för HTML5 och CSS3 programmering - dummies

Hur man använder semantiska taggar för HTML5 och CSS3 programmering - dummies

Innehållsförteckning:

Video: Web Development - Computer Science for Business Leaders 2016 2025

Video: Web Development - Computer Science for Business Leaders 2016 2025
Anonim

Eftersom webbutvecklare började använda flytande layouttekniker skapade de nästan alltid div dividerat nav, sidhuvud och sidfot. Utvecklarna av HTML5 bestämde sig för att skapa nya element med dessa namn. Ta en titt på följande kod för att se de semantiska taggarna i åtgärd.

semantisk header {border-bottom: 5px dubbel svart;} nav {float: left; bredd: 20%; rensa: vänster; minhöjd: 400px; gräns-höger: 1px solid svart;} avsnitt {float: left; bredd: 75%; padding-left: 1em;} artikel {float: left; bredd: 75%; padding-left: 1em;} footer {clear: both; border-top: 5px dubbel svart; text-align: center;}

Detta är min rubrik

Navigering

  • länka en
  • länk b
  • länk c
  • länk d
  • länk e

Avsnitt 1

Avdelningskropp …

Avsnitt 2

Kroppsdel ​​…

Artikel

Artikel kropp …

Footer

Andy Harris

andy @ aharrisbooks. netto

Som du kan se finns det ett antal nya semantiska märkningstaggar i HTML5:

  • header: Detta är inte detsamma som h1-h6-taggarna. Den betecknar en bit av sidan som innehåller en rubrik för sidan. Ofta fyller sidhuvudet sidbredd och kommer att ha någon form av bannerbild. Det innehåller ofta h1-innehåll.

  • nav: Den här taggen indikerar någon form av navigationssektion. Den har ingen speciell stil, men används ofta som antingen en horisontell eller vertikal meny för sidnavigering.

  • avsnitt: En sektion används för att ange en generisk del av sidan. Du kan ha flera sektioner på samma sida.

  • artikel: En artikel är som en sektion, men den är avsedd att användas med externa resurser. Många sidor byggs automatiskt av programvara, och när dessa sidor integrerar innehåll från andra källor är det avsett att använda artikeln för att integrera detta innehåll.

  • footer: En sidfot är avsedd att visa sidfoten längst ner på en sida. Vanligtvis täcker en sidfot på undersidan av en sida, även om detta inte är standardbeteendet.

Observera att inget av dessa element har någon specifik formatering. Det är upp till dig att tillhandahålla formatering via CSS-kod. Var och en av elementen kan formateras direkt som ett HTML-element (eftersom det är vad det är). Alla webbläsare med senaste versionen stöder de semantiska märkningstaggarna, men om du vill stödja äldre webbläsare (speciellt IE före version 8) behöver du fortfarande använda divs.

Hur man använder semantiska taggar för HTML5 och CSS3 programmering - dummies

Redaktörens val

Office 365 Grupper - Dummies

Office 365 Grupper - Dummies

Du kan använda Office 365 Grupper, eller helt enkelt grupper, för att snabbt bandet tillsammans med medarbetare till samarbeta utan administrationsansvar som följer med en SharePoint-webbplats. Grupper är inte en del av SharePoint Online. Det är faktiskt en funktion i Exchange Online, men den använder SharePoint Online-funktioner, till exempel OneDrive for Business för att lagra gruppfiler ...

Office 365 Mobil Dokument i molnet - Dummies

Office 365 Mobil Dokument i molnet - Dummies

Varje Office 365-abonnent med en kvalificerad plan kan installera Office mobilappar på upp till fem tabletter och fem smartphones. Kvalificeringsplanerna är: Office for Business Premium, Office 365 Business, Office 365 Pro Plus, Office 365 E3 och Office 365 E5. Kärnan Office-appar finns i Windows, iOS och Android ...

Office Graph och Delve - dummies

Office Graph och Delve - dummies

Office Graph i Office 365 ger en möjlighet för människor att dra nytta av relationer och aktiviteter och göra dem till meningsfulla insikter. De signaler du skickar från e-postkonversationer och möten i Outlook, snabbmeddelanden i Skype for Business, sociala interaktioner på Yammer och dokument i SharePoint Online och OneDrive samlas alla och ...

Redaktörens val

Elektronik Komponenter: Sätt in induktorer till arbete - dummies

Elektronik Komponenter: Sätt in induktorer till arbete - dummies

Om du har undrat vad induktorer används egentligen i elektroniska kretsar i verkligheten, här är några av de vanligaste användningarna för induktorer: Utjämning av spänning i en strömförsörjning: Det sista steget i en typisk strömförsörjningskrets som omvandlar 120 VAC hushållsström till en användbar direkt Nuvarande är ofta en ...

Elektronik Komponenter: Introduktion av mikrokontroller - dummies

Elektronik Komponenter: Introduktion av mikrokontroller - dummies

En mikrokontroller är en komplett dator på en enda elektronisk chip. De kan köpas för $ 50 eller mindre. Liksom alla datorsystem består mikrodatorer av flera grundläggande delsystem: Central Processor (CPU): En CPU utför de instruktioner som tillhandahålls av ett program. CPU kan göra alla nödvändiga åtgärder för ...

Elektronik Komponenter: Motstånd Power Ratings - dummies

Elektronik Komponenter: Motstånd Power Ratings - dummies

Motstånd är som bromsar för ström som strömmar genom en elektronisk krets. Liksom bromsarna i din bil arbetar motstånd genom att använda den elektriska ekvivalenten av friktion till strömningsströmmen. Denna friktion hämmar strömmen av ström genom att absorbera en del av strömens energi och sprida den i form av värme. När du använder en ...

Redaktörens val

Hur man konfigurerar SSH för din webbplats - dummies

Hur man konfigurerar SSH för din webbplats - dummies

Secure shell (SSH) är ett nätverksprotokoll för att tillåta säker datakommunikation. I själva verket är det som en webbhotell bakdörr i ditt system - en som borde förbli låst om du inte behöver använda den. Naturligtvis är exakt hur du konfigurerar SSH olika på alla typer av webbhotell, men som ...

Hur man skapar en ny webbhotell - dummies

Hur man skapar en ny webbhotell - dummies

Du måste skapa din databas inom din webbhotellskontrollpanel och skapa en speciell databasanvändare som har behörighet att komma åt den. När du installerar en webbapplikation eller ett skript som kräver en databas från kontrollpanelen, kommer installationsprogrammet sannolikt att kunna skapa en egen databas och användare. ...

Hur man skapar nya konton på webbhotell med FTP-dummies

Hur man skapar nya konton på webbhotell med FTP-dummies

Du kanske vill att skapa ytterligare konton på en webbhanterad ftp av olika orsaker. Detta möjliggör viss mångsidighet och kontroll för att förbättra din företagsfunktionalitet. Några skäl till att lägga till ett konto är följande: Du vill ge någon annan FTP-åtkomst till din webbplats. Du vill ge någon FTP-åtkomst ...