XHTML Structurering 2: Casestudie: De gestructureerde markering van W3school

Over het algemeen moet je dit hoofdstuk niet overslaan. Het lezen van dit hoofdstuk verbetert je vaardigheden, maakt je website lichter en geeft je een duidelijker inzicht in het verschil tussen merken en ontwerp. De ideeën in dit hoofdstuk zijn gemakkelijk te leren, maar kunnen de prestaties van de website aanzienlijk verbeteren, evenals de gemakkelijkheid van het ontwerpen, maken en bijwerken van de website.

In dit hoofdstuk leer je hoe je logische en compacte merken schrijft, waardoor je in staat bent om de bandbreedteverkeer met ongeveer 50% te verminderen, terwijl je de belasting en druk op de server vermindert en de laadtijd van de website verkort. Door die elementen te verwijderen die geen voordelen bieden en die slechte gewoonten te veranderen, kunnen we het genoemde doel bereiken.

Deze slechte gewoonten beïnvloeden veel websites op het net, vooral die die CSS-code combineren met een hoofdzakelijk tabellengebaseerde lay-out. Dit is een拙劣且不经济的做法，zelfs voor designers die in andere gebieden ervaring hebben. Bovendien is de kans op dit probleem gelijk, of je nu handmatig code schrijft of websites maakt met behulp van zichtbare editietools zoals Dreamweaver en GoLive.

In dit gedeelte zullen we deze gebruikelijke fouten bespreken, zodat je ze kunt herkennen en voorkomen, en hoe je ze kunt corrigeren. We leggen in detail uit hoe de unieke identifier eigenschap (id) - je in staat stelt om zeer compacte XHTML te schrijven, ongeacht of je een gemengde lay-out of een puur CSS-lay-out maakt.

Moet elk element worden gestructureerd?

Net zoals we in het vorige gedeelte hebben besproken, kan elk element worden gestructureerd, en CSS kan een gestructureerde lijst weergeven als een volledige navigatiebalk, inclusief een omgekeerde knop. De inhoud van het document kan worden gemarkeerd met gewone elementen, die door specifieke structuur-eigenschappen worden aangeduid om hun semantische rol in de websiteontwerp te beschrijven.

We hebben CodeW3C.com in 2006 de eerste Chinese testversie gelanceerd, en we hebben van het begin af aan CSS gebruikt voor de lay-out en XHTML om de documenten te structureren. Elk van deze elementen is gestructureerd, van titels tot lijsten en zelfs paragrafen. Je kunt op elke pagina van CodeW3C de homeknop met omgekeerde effecten en de secundaire menuknop zien. Hier zijn de XHTML-code van deze twee componenten:

<div id="header"><h1><a href="/">codew3c online tutorial</a></h1></div>
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Server script">Server script</a></li>
<li id="d"><a href="/d.asp" title="dot net tutorial">dot net tutorial</a></li>
<li id="m"><a href="/m.asp" title="Multimedia tutorial">Multimedia tutorial</a></li>
<li id="w"><a href="/w.asp" title="Website handleiding">Website handleiding</a></li>
</ul>
</div>

div, id en andere hulpmiddelen

Wanneer correct gebruikt, kan div een waardevolle hulp zijn voor gestructureerde markering, en id is een verbazingwekkend klein hulpmiddel dat je in staat stelt om zeer compacte XHTML te schrijven, en om op slimme wijze CSS te gebruiken, en complexe en subtiel gedrag toe te voegen aan de site via de standaard Document Object Model (DOM).

W3C definieert div op deze manier in het structuurmodel van de nieuwste XHTML2-ontwerp.

De div-element, in combinatie met de eigenschappen id, class en role, biedt een algemene methode om extra structuur aan een document toe te voegen. Dit element definieert geen stijl voor de weergave. Daarom kunnen makers deze elementen combineren met stijlsheets, xml:lang, eigenschappen enz., zodat XHTML zich aan hun eigen behoeften en smaak aanpast.

Div is een afkorting van division. Division betekent splitsen, gebied, groeperen. Bijvoorbeeld, wanneer je een reeks links samenbrengt, vormt dit een division in het document.

Algemeen structuurmechanisme bepalen

Iedereen die HTML schrijft, is bekend met elementen zoals paragrafen en titels, maar sommigen zijn minder bekend met div. In de beschrijving van de W3C kunnen we de sleutel tot het begrijpen van het div-element vinden, "een algemeen mechanisme voor het toevoegen van structuur."

Op de homepage van deze site plaatsen we de lijst van tutorials in een div, omdat de lijst van tutorials geen onderdeel is van enige element van de正文. De h2-elementen markeren elke titel van de tutorial, en de ul-lijstelementen markeren elke gedetailleerde lijst van de tutorial. Maar in een bredere en specifiekere betekenis speelt deze lijst van tutorials een gestructureerde rol, namelijk een secundaire navigatiecomponent. Om deze rol te benadrukken, gebruiken we de id 'navsecond' om deze div aan te markeren.

<div id="navsecond">
<h2>HTML-tutorial</h2>
<ul>
<li><a href="/html/index.asp" title="HTML-tutorial">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML-tutorial">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS-tutorial">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP-tutorial">TCP/IP</a></li>
</ul>
<h2>XML-tutorial</h2>
<ul>
<li><a href="/xml/index.asp" title="XML-tutorial">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL-talen">XSL</a></li>
... ...
... ...
</div>

U kunt elke naam gebruiken. "Gladys" en "orangebox" voldoen volledig aan de naamgevingsregels van XHTML. Maar semantische of meta-structurale namen zijn het beste (dat wil zeggen, namen die de functie van de elementen in het binnenwerk kunnen uitleggen).

Wanneer de klant beslist om blauw te gebruiken, lijkt het je zeer dom om een deel van de site "orangebox" (oranje doos) te noemen. In onderstaande situatie voel je je nog dommer, wanneer je na zes maanden voor de laatste levering begint met het aanpassen van de stylesheet, en je kunt je niet herinneren wat "Gladys" (vrouwelijke naam) precies vertegenwoordigt: navigatiegebied, zijbalk of zoekbalk.

Daarom helpt het om id's zoals "menu", "content" of "searchform" te markeren, om je te helpen onthouden. Bovendien is markering niet hetzelfde als ontwerp; een goed gestructureerde pagina kan worden geformatteerd naar elke gewenste vorm. Het resultaat hiervan is dat je, ongeacht of je een puur CSS-lay-out of een gemengde lay-out gebruikt, volledig de gewoonte van het denken en werken met presentatiemarkeringen aflegt.

id vs. class

id-eigenschap is voor XHTML niet nieuw; class-eigenschap of div-elementen ook niet. Ze kunnen allemaal teruggaan tot de HTML-tijdperk. De id-eigenschap.assigneert een unieke naam aan een element. Elke naam kan slechts een keer op de toekende pagina worden gebruikt. (Bijvoorbeeld, als je pagina bevat een div met id "content", dan kan een andere div of een ander element deze naam niet gebruiken. In tegenstelling hiertoe kan de class-eigenschap meerdere keren in een pagina worden gebruikt (bijvoorbeeld, vijf paragrafen in een pagina kunnen de classnaam "small" of "footnote" gebruiken). Onderstaande markeringen helpen om het verschil tussen id en class te verduidelijken:

<div id="searchform">De componenten van het zoekformulier gaan hier. Dit
een sectie van de pagina uniek is.</div>
<div class="blogentry">
   <h2>Het vandaagse blogbericht</h2>
   <p>Bloginhoud komt hier.</p>
   <p>Hier is nog een paragraaf van bloginhoud.</p>
   <p>Net als er veel paragrafen op een pagina kunnen zijn, zo ook
   er kunnen veel berichten in een blog zijn. Een blogpagina kan
   meerdere instanties van de klasse "blogentry" (of enige andere
   class).</p>
</div>
<div class="blogentry">
   <h2>Blogpost van gisteren</h2>
   <p>Feitelijk zijn we binnen een andere div van class
   "blogentry."</p>
   <p>Ze reproduceren zoals konijnen.</p>
   <p>Als er tien blogposts op deze pagina staan, er kunnen
   Er kunnen ook tien div's van class "blogentry" zijn.</p>
</div>

In dit voorbeeld wordt de div met de naam searchform gebruikt om de pagina-gebieden die de zoekformulier bevatten te omhullen, en de div met class="blogentry" wordt gebruikt om elke artikel-ingang in het blog te omhullen. Er is maar één zoekformulier op de pagina, dus we kiezen voor het markeren van dit unieke component met behulp van ID. Maar een blog heeft vele (artikelen) ingangen, dus de class-eigenschap wordt toegepast in deze situatie. Op dezelfde manier hebben nieuwswebsites vaak meerdere div's, en deze div's kunnen de class "newsitem" of iets anders heten.

Maar niet alle websites vereisen een div. Een blog-site kan bijvoorbeeld alleen h1, H2 en h2-koppen en <p>-paragrafen gebruiken, net als nieuwswebsites. We tonen hier een div met de class blogentry, niet om je te overhalen om je site vol te stoppen met div's, maar om je te laten zien dat het principe is: gebruik meerdere classes in dezelfde HTML-document, maar gebruik maar één ID.

The sticky note theory

Het helpen om de ID-eigenschap te vergelijken met een plakstrip, om erover na te denken. Ik zal een plakstrip op het refrigerator plakken om me te herinneren om melk te kopen, er zal ook een op de telefoon zijn om me te herinneren om een klant te bellen die zijn betaling heeft achtergehouden. En er is er nog een, op het rekeningboek om me te herinneren dat ik de rekening voor deze maand voor 15 moet betalen.

ID zal ook speciale gebieden in documenten markeren, zodat je kunt zien welke gebieden speciale behandeling vereisen. In dit opzicht is de ID-eigenschap vergelijkbaar met een plakstrip. Om de zogenaamde speciale behandeling te realiseren, moet je enkele regels in het stijlbestand schrijven met behulp van deze speciale ID, of enkele regels toevoegen aan het JavaScript-bestand. Bijvoorbeeld, als je CSS-bestand enkele specifieke regels bevat die alleen van toepassing zijn op elementen binnen een div met de naam searchform, zullen deze regels worden toegepast.

Wanneer een id-eigenschap als een magnetisch object (magneet) wordt gebruikt voor een reeks specifieke CSS-regels, wordt het een CSS-selector. Er zijn veelSelectoren makenmethode, hoewel id eenvoudig te gebruiken is en meerdere toepassingen heeft.

De kracht van id

De id-eigenschap is ongelooflijk krachtig. Het heeft de volgende mogelijkheden:

  • Als een selector in een stylesheet, waardoor we in staat zijn compacte, geoptimaliseerde XHTML te maken.
  • Als een doel van hyperlinks in HTML, vervangend het verouderde name-eigenschap.
  • Als een methode om specifieke elementen te lokaliseren vanuit DOM gebaseerde scripts.
  • Als de naam van een object-element.
  • Als een tool voor algemene bestandsverwerking (general purpose processing) (in de voorbeelden van W3C, 'gebruikt om gegevens van HTML-pagina's naar databases te extraheren, of HTML-documenten te converteren naar andere formaten, enz.).

Regels voor id

De waarde van id moet beginnen met een letter of een onderstrepingsteken; het mag niet beginnen met een cijfer. Hoewel de W3C-validatie deze fout niet zal vangen, zal een XML-parser dat wel doen. Bovendien moeten de naam en waarde van id, wanneer deze samen met JavaScript in een formulier worden gebruikt, legitieme JavaScript-variabelen zijn. Spaties en koppeltekens, vooral koppeltekens, zijn niet toegestaan. Bovendien is het geen goed idee om onderstrepingstekens te gebruiken voor class of id-namen, vanwege beperkingen in CSS2.0 (en sommige browsers).

Semantische markering en toegankelijkheid

Nu hebben we besproken de veelzijdige XHTML-elementen (vooral div en id), laten we een voorbeeld bekijken van de homepage van deze site. Laten we eerst deze menu op de kop van de pagina doornemen:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="html tutorial">html tutorial</a></li>
<li id="x"><a href="/x.asp" title="XML tutorial">XML tutorial</a></li>
<li id="b"><a href="/b.asp" title="browser script">browser script</a></li>
<li id="s"><a href="/s.asp" title="Server script">Server script</a></li>
<li id="d"><a href="/d.asp" title="dot net tutorial">dot net tutorial</a></li>
<li id="m"><a href="/m.asp" title="Multimedia tutorial">Multimedia tutorial</a></li>
<li id="w"><a href="/w.asp" title="Website handleiding">Website handleiding</a></li>
</ul>
</div>

We hebben zeven koppelingen, waarbij elke koppeling een id krijgt om overeen te komen met de betreffende inhoud: bijvoorbeeld een id genaamd h komt overeen met de HTML-tutorial, enzoverder. Deze koppelingen zijn verpakt in een lijstelement genaamd menu, waarbij het id menu de functie van deze lijst aangeeft - een menu-lijst, en de div genaamd navfirst wordt gebruikt om deze sectie in de pagina te markeren, om het te onderscheiden van elementen zoals hoofdinhoud (maincontent), zijbalk (sidebar) en voettekst (footer).

De elementen div en ul bieden een echte structuur, wat betekent dat ze de functie van de inhoud (navigatiebalk) en de positie ervan in het document (de koppositie van de pagina) markeren. In tegenstelling daartoe biedt de traditionele tabelindeling geen semantische informatie over de gegevens en consumeert het gemakkelijk drie keer zoveel bandbreedte.

Let op dat deze markeringen geen img标签 bevatten, dus zijn ze niet betrokken bij eigenschappen zoals width, height, background of border enzovoort. Ze gebruiken ook geen tabelcellen en raken geen van de gerelateerde eigenschappen. Ze zijn zeer eenvoudig en klein en bieden alle informatie die nodig is om ze te begrijpen.

Met de samenwerking van CSS bieden deze markeringen bezoekers van de website een betrouwbare en snel laadbare lay-out. Ze bieden ook de mogelijkheid om een flexibelere en diverse uitstraling voor bezoekers te creëren. En in een omgeving zonder CSS kunnen onze goed geordende markeringen de inhoud zonder verwarring blijven bieden.

Scherpzinnige lezers hebben mogelijk al opgemerkt dat de tekst die in het element 'a' wordt opgenomen niet wordt weergegeven door de browser, wat ook te danken is aan de perfecte samenwerking tussen gestructureerde markering en CSS, die het ons mogelijk maakt om een triggermechanisme te definiëren met enkele regels CSS-regels, wanneer gebruikers een grafische browser gebruiken, zien ze prachtige navigatieknoppen, en wanneer gebruikers een puur tekstuele lezer gebruiken, kunnen ze ook de volledige tekst krijgen, zodat de inhoud voor alle gebruikers hetzelfde is.

En aangezien de markering geen afbeeldingen en tabelcellen bevat, kan dit navigatiecomponent zonder verandering van structuur door elke pagina binnen de site worden geciteerd en het een verschillende visuele effecten geven. Kortom, door de code te modulariseren, hebben we de herbruikbaarheid van de code verbeterd.