XHTML strukturerad 1: Använd XHTML för att omstrukturera webbplatsen

Titeln vi har skrivit för denna sektion är: “XHTML: Enkla regler, enkla riktlinjer.” En av anledningarna är att reglerna och riktlinjerna som denna sektion diskuterar är enkla och lätta. En annan anledning är att en enkel och lätt webbdesignbok, liknande en ny gratis produkt i en stormarknad, kan effektivt locka människors uppmärksamhet och stimulera deras intresse, vilket uppmuntrar dem att försöka.

Jag hoppas verkligen att innehållet i denna sektion kan väcka ditt intresse och uppmuntra dig att försöka. Varför säjer jag så? Eftersom när du har förstått de enkla och lätta idéer som detta kapitel innehåller, kommer du att börja tänka om hur webbsidor fungerar och börja ändra sättet du bygger dem på. Men jag vill inte att du bara omformulerar koden. Jag vill att du verkligen tänker och arbetar på ett annat sätt.

Å andra sidan är omstrukturering verkligen XHTML:s verkliga mening.

I detta kapitel kommer vi att undersöka mekanismen och innebörden av strukturerade taggar. Om du håller på att integrera webbstandarder i dina utvecklingsprojekt, kanske du känner igen innehållet i detta kapitel. Men även erfarna experter kan upptäcka oväntade insikter här.

Sammanfattning av XHTML-regler

Att konvertera traditionell HTML till XHTML 1.0 är snabbt och smärtfritt, förutsatt att du följer några enkla regler och riktlinjer. Oavsett om du har använt HTML tidigare eller inte, kommer det inte att förhindra dig från att använda XHTML.

  • Använd lämplig dokumenttypsdeklaration och namnrymd.
  • Använd meta-element för att deklarera innehållstypen.
  • Skriv alla element och egenskaper med små bokstäver.
  • Lägg till citattecken kring alla egenskapsvärden.
  • Tilldela ett värde till alla egenskaper.
  • Stäng alla taggar.
  • Använd mellanslag och snedstreck för att stänga tomma taggar.
  • Skriv inte med dubbla understrecks TEcken i kommentarer.
  • Säkerställ att mindre än-tecknet och och-tecknet är < och &

Unicode och andra teckenuppsättningar

Standardteckenuppsättningen för XML, XHTML och HTML 4.0-dokument är Unicode, en standard definierad av Unicode-unionen. Unicode är en omfattande teckenuppsättning som tillhandahåller ett unikt nummer för varje tecken, oavsett plattform, program och språk. Unicode är också det närmaste vi har till en universell alfabet, även om det inte är en alfabet, utan ett nummerschema.

Trots att Unicode är den förvalda teckenuppsättningen för webbdokument, kan utvecklare fritt välja andra teckenuppsättningar som passar dem bättre. Till exempel använder webbplatser i USA och Västeuropa ofta ISO-8859-1 (Latin-1) kodning, medan Kinas nationella standard är gb2312.

Markera dokument för att uttrycka semantik, inte för att skapa stil

Kom ihåg: använd CSS så mycket som möjligt för layout. I världen av webbstandarder är XHTML-märkning inte relaterad till utseende, utan endast till dokumentstruktur.

Strukturerade dokument kan kommunicera så mycket semantik som möjligt till webbläsare, oavsett om de är på en handdator eller en modern dator med avancerad grafisk webbläsare. Strukturerade dokument kan kommunicera visuella semantik till användare, även i gamla webbläsare eller i moderna webbläsare där användaren har stängt av CSS.

Inte alla webbplatser kan omedelbart överge HTML-tabelllayout. Skaparen av CSS, W3C, först bytte sin officiella webbplats till CSS-layout 2002-11-01. Men även de mest inflexibla standardister har inte alltid separerat utseende från struktur helt, åtminstone inte i XHTML 1. Men nu kan vi göra ett stort steg mot detta ideal genom att separera utseende från struktur (eller data från design), även om den traditionella layouten kan dra nytta av det.

Här är några tips som kan hjälpa dig att tänka på ett mer strukturerat sätt:

Färg i dispositionen

I grammatikskolan tvingades de flesta av oss att använda den standardiserade dispositionen för att skriva artiklar. Nu, som designers, kan vi fritt bryta oss loss från dispositionens begränsningar och vågat dyka in i fältet för unik personlig uttrycksfrihet (trots att våra broschyrer och kommersiella webbplatser kanske inte är så unika och personliga). Men minst kommer vi inte att vara besvärade av dispositionen längre.

Faktiskt, enligt HTML, bör vi strukturerar innehållet i en organiserad hierarki. Under perioden då webbläsare inte stödde CSS, kunde vi inte leverera layouter som var tillgängliga för försäljning samtidigt. Men idag, medan vi implementerar vårt design utan kompromisser, har vi förmågan att leverera dokument med en väl strukturerad inre struktur.

När du markerar text för användning på nätet eller när du konverterar befintliga textdokument till webbsidor, tänk på dessa punkter från den traditionella dispositionen.

<h1>Mitt ämne</h1>
<p>Introducerande text</p>
<h2>Tilläggsuppfattning</h2>
<p>Relaterad text</p>

Samtidigt, undvik att använda föråldrade HTML-element som <font>, eller osänsmakerska element som <br />, för att simulera egentligen inte existerande logiska strukturer.

Till exempel, undvik att göra så här:

<font size="7">Mitt ämne</font><br />
Introducerande text<br /><br />
<font size="6">Tilläggsuppfattning</font><br />
Relaterad text<br />

Använd element baserat på deras innebörd, inte hur de ser ut.

Några av oss har fallit i en dålig vana, att använda h1 när vi bara behöver stor text, eller att använda li när vi behöver en punkt framför texten. Som vi diskuterade i föregående kapitel, är webbläsare alltid vanliga att lägga designegenskaper på HTML-element. Vi har alla varit vanliga att tro att h1 innebär stor text, och li innebär punkter, eller att blockquote innebär indragen text. De flesta av oss använder fortfarande strukturerade element för att simulera presentationseffekter när vi skriver HTML.

På samma sätt, om en designer vill att alla rubriker ska använda samma storlek, kommer hon att sätta alla rubriker till h1, även om detta inte innebär någon strukturerad semantik.

<h1>Det här är huvudrubriken, när jag organiserar texten efter en översiktlig struktur.</h1>
<h1>Det här är inte huvudrubriken, men jag vill att den ska använda samma font som den ovanstående, men jag vet inte hur jag använder CSS.</h1>
<h1>Det här är inte en rubrik. Men jag skulle vilja att texten på sidan använde samma font, för att uppnå det jag vill:
Om jag förstår CSS, kan jag uppnå detta utseende utan att förstöra dokumentets struktur.</h1>

Vi måste lägga våra små knep till侧面，och börja använda dem baserat på deras semantik, inte hur de ser ut. Faktiskt kan h1 bli precis hur du vill. Genom CSS kan h1 bli en icke-kraftig, liten romansk font, medan p-text kan bli fet och stor, och li kan inte ha punkter (du kan använda små katter och hundar eller företagslogotypens PNG, GIF eller JPEG-bilder istället) och så vidare.

Från och med idag kommer vi att använda CSS för att bestämma elementens utseende. Vi kan till och med ändra deras utseende beroende på deras plats på sidan eller i webbplatsen. CSS kan helt avskilja presentation från struktur och tillåter dig att formatera alla element efter din favoritstil.

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

Varför gör du detta? Syftet är att få en brandad utseende och känsla i grafiska webbläsare samtidigt som dokumentets struktur bevaras i textwebbläsare, trådlösa enheter, HTML-formaterade e-postmeddelanden.

Vi vill inte att vi ska prata mer om CSS-teknik i kapitlet om XHTML. Vi vill bara visa att dokumentstruktur och visuell uttryck är två helt olika saker, och att strukturerade element bör användas för att omvandla text, inte för att påtvinga visuell effekt.

Använd strukturerade element i stället för meningslösa skräp

Eftersom vi har glömt bort eller inte ens vet vad HTML och XHTML används till, använder många HTML-argumentatorer etiketter för att lägga in listor på detta sätt:

Projekt ett<br />
Projekt två<br />
Projekt tre<br />

Överväg att använda ordnade eller icke-ordnade listor istället:

<ul>
<li>Projekt ett</li>
<li>Projekt två</li>
<li>Projekt tre</li>
</ul>

"Men li ger mig en punkt, och jag behöver ingen punkt!" Kan du kanske säga. Enligt de ovanstående kapitlen gör CSS inga antaganden om hur elementen ska se ut. Det väntar på att du ska säga vad du förväntar dig av elementens utseende. Att stänga av punkten är CSS:s mest grundläggande förmåga. Den har förmågan att göra listor att se ut som vanlig text, och också att göra listor att se ut som grafiska navigationsmenyer med fulla omvändningseffekter.

Så, använd listelement för att markera listor. På samma sätt, använd strong istället för b, em istället för i, och så vidare. Under de flesta datorwebbläsares standardinställningar är strongs visningseffekt densamma som b, och em och i är densamma, och du kan också skapa den visuella effekten du förväntar dig utan att förstöra dokumentets struktur.

Trots att CSS inte gör några antaganden om hur element ska visas, gör webbläsare många antaganden, och vi har inte stött på en webbläsare som visar strong som något annat än fet text (utom om det är instruerat av en designer att visa det på ett annat sätt). Om du är orolig för att en okänd webbläsare inte kommer att visa strong som fet text, kan du skriva en sådan CSS-regel:

strong {
	font-weight: bold;
	font-style: normal;
	{}

Visuella element och struktur

Webbstandarder kräver inte bara vilka teknologier vi använder, utan också att vi följer användningen av dessa teknologier. Använd XHTML för att skriva markeringar, samtidigt som CSS används för att hantera en del eller all layout, behöver det inte nödvändigtvis göra webbplatsen mer användarvänlig och lättare, och spara hur mycket bandbredd. Som vi använde teknologier i tidigare tid, kan XHTML och CSS också missbrukas och missbrukas. Långa XHTML och långa HTML kommer att slösa användarens bandbredd och tid. Långa överdrivna CSS kan inte helt ersätta den visuella HTML-koden; detta är bara att ersätta ett dåligt东西 med ett annat.