Struktura XHTML 2: Przykład: Struktura znaczników W3school

W każdym razie, nie pomijaj tego rozdziału. Przeczytanie tego rozdziału poprawi twoje umiejętności, schudnie twoją stronę internetową i pomoże ci lepiej zrozumieć różnice między znacznikami a designem. Idee w tym rozdziale są łatwe do nauki, ale mogą znacznie poprawić wydajność strony oraz ułatwić projektowanie, tworzenie i aktualizowanie stron internetowych.

W tym rozdziale nauczysz się, jak pisać logiczne i zwięzłe znaczniki, które pozwalają ci zmniejszyć przepustowość o około 50%, jednocześnie zmniejszając obciążenie i nacisk na serwer oraz缩短网站加载时间。Poprzez usunięcie tych elementów i zmianę tych złych nawyków, które nie przynoszą żadnej korzyści, możemy osiągnąć powyższy cel.

Te złe nawyki dotknięte są przez wiele stron internetowych, zwłaszcza tych, które łączą kod CSS z głównie tabelową strukturą układu. Ta metoda jest nieporęczna i nieekonomiczna, nawet dla projektantów, którzy mają doświadczenie w innych dziedzinach. Ponadto, prawdopodobieństwo wystąpienia tego problemu jest równe, niezależnie od tego, czy strona jest ręcznie tworzona, czy wykorzystuje widoczne narzędzia do edycji, takie jak Dreamweaver i GoLive.

W tym rozdziale przedstawimy te powszechne błędy, abyś mógł je rozpoznać i zapobiec im, a także nauczyć się, jak je poprawić. Szczegółowo omówimy atrybut unikalnego identyfikatora (id) - i pokażemy, jak pozwala on na tworzenie niezwykle kompaktowego kodu XHTML, niezależnie od tego, czy tworzy się mieszany układ, czy czysty układ CSS.

Czy każdy element musi być strukturyzowany?

Jak wspomniałem w poprzednim rozdziale, każdy element może być strukturyzowany, CSS może zmienić posortowaną lub niesortowaną listę w kompletną nawigację, w której znajdują się również przeciwstawne efekty przycisków. Zawartość dokumentu może być oznaczona za pomocą zwykłych elementów, które wskazują ich semantyczną rolę w projektowaniu strony za pomocą specjalnych atrybutów strukturyzujących.

Tworzyliśmy pierwszą chińską wersję testową CodeW3C.com w roku 2006, gdzie już od samego początku używaliśmy CSS do układu i XHTML do strukturyzacji dokumentu. Każdy element w tym dokumentzie jest strukturyzowany, od tytułów po listy i akapity. Możesz zobaczyć przeciwstawne efekty przycisków głównych i przycisków menu drugiego poziomu na każdej stronie CodeW3C. Oto kod XHTML dla tych dwóch komponentów:

<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</a></li>
<li id="x"><a href="/x.asp" title="教程 XML">教程 XML</a></li>
<li id="b"><a href="/b.asp" title="skrypty przeglądarki">skrypty przeglądarki</a></li>
<li id="s"><a href="/s.asp" title="Skrypty serwerowe">Skrypty serwerowe</a></li>
<li id="d"><a href="/d.asp" title="Podręcznik dot net">Podręcznik dot net</a></li>
<li id="m"><a href="/m.asp" title="Podręcznik multimedialny">Podręcznik multimedialny</a></li>
<li id="w"><a href="/w.asp" title="Pomoc w tworzeniu stron">Pomoc w tworzeniu stron</a></li>
</ul>
</div>

div, id i inne pomocniki

Jeśli jest używany poprawnie, div może być doskonałym pomocnikiem w tworzeniu struktury znaczników, a id to niespodziewanie przydatne narzędzie, które pozwala na tworzenie niezwykle kompaktowego XHTML oraz umiejętne korzystanie z CSS, a także dodawanie złożonych i precyzyjnych zachowań do strony za pomocą standardowego modelu obiektowego dokumentu (DOM).

W3C tak definiuje div w swojej najnowszej koncepcji XHTML2:

Element div, w współpracy z atrybutami id, class oraz role, dostarcza ogólny mechanizm do dodawania dodatkowej struktury do dokumentu. Ten element nie definiuje stylu prezentacji dla zawartości. Dlatego twórcy mogą używać tego elementu w połączeniu z arkuszami stylów, xml:lang oraz atrybutami, aby dostosować XHTML do swoich potrzeb i gustów.

Div to skrót od division. Division oznacza podział, obszar, grupę. Na przykład, gdy kombinujesz serię linków, tworzy się division dokumentu.

Uniwersalne mechanizmy strukturyzujące

Każdy piszący HTML zna powszechne elementy, takie jak akapity i tytuły, ale niektórzy mogą nie być tak dobrze znani z div. W opisie W3C możemy znaleźć klucz do zrozumienia elementu div, "uniwersalne mechanizmy strukturyzujące."

Na stronie głównej umieszczamy listę podręczników w div, ponieważ lista podręczników nie jest częścią żadnego elementu głównego. Element h2 oznacza tytuł każdego podręcznika, a element lista ul oznacza szczegółową listę każdego podręcznika. Ale w szerszym znaczeniu, ta lista podręczników odgrywa rolę strukturyzującą, jak komponent nawigacji drugiego poziomu. Aby podkreślić tę rolę, używamy id navsecond do oznaczenia tego div.

<div id="navsecond">
<h2>Podręcznik HTML</h2>
<ul>
<li><a href="/html/index.asp" title="Podręcznik HTML">HTML</a></li>
<li><a href="/xhtml/index.asp" title="Podręcznik XHTML">XHTML</a></li>
<li><a href="/css/index.asp" title="Podręcznik CSS">CSS</a></li>
<li><a href="/tcpip/index.asp" title="Podręcznik TCP/IP">TCP/IP</a></li>
</ul>
<h2>Podręcznik XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Podręcznik XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="Języki XSL">XSL</a></li>
... ...
... ...
</div>

Możesz używać dowolnej nazwy. "Gladys" i "orangebox" są całkowicie zgodne z zasadami nazewnictwa XHTML. Jednak najlepsze są nazwy semantyczne lub meta-strukturalne (te, które mogą wyjaśnić funkcję elementów).

Kiedy klient zdecyduje się użyć niebieskiego koloru, możesz czuć się głupio, jeśli nazwiesz część strony "orangebox" (pomarańczowy bok). W takim przypadku możesz czuć się jeszcze głupszy, gdy tylko sześć miesięcy przed końcowym dostarczeniem zaczynasz dostosowywać arkusz stylów, a nie możesz przypomnieć sobie, czy "Gladys" (imię żeńskie) reprezentuje obszar nawigacji, panel boczny czy pole wyszukiwania.

Dlatego oznaczenie id jako "menu", "content" lub "searchform" pomoże ci przypomnieć. Dalej, znaczniki nie są synonimem projektowania, dobrze strukturyzowana strona może być sformatowana w dowolny sposób, który chcesz. W rezultacie, niezależnie od tego, czy używasz czystego układu CSS czy mieszanej struktury, całkowicie zmienisz nawyk myślenia i tworzenia za pomocą znaczników prezentacyjnych.

id Przeciwko class

atrybut id dla XHTML nie jest nowy; atrybut class lub element div jest podobnie. Wszystko to można śledzić do ery HTML. Atrybut id przypisuje elementowi unikalną nazwę. Każda nazwa może być używana tylko na przypisanej stronie. (Na przykład, jeśli twoja strona zawiera div o id "content", to żaden inny div ani inny element nie może używać tej nazwy. W przeciwieństwie do tego, atrybut class może być używany wielokrotnie na stronie (na przykład, pięć akapitów na stronie mogą używać nazwy "small" lub "footnote"). Poniższe znaczniki pomogą wyjaśnić różnicę między id a class:

<div id="searchform">Komponenty formularza wyszukiwania znajdują się tutaj. To
sekcja strony jest unikalna.</div>
<div class="blogentry">
   <h2> dzisiejszy wpis blogowy</h2>
   <p> Treść bloga znajduje się tutaj.</p>
   <p> Oto inny akapit treści bloga.</p>
   <p> Tak jak na stronie może być wiele akapitów, tak samo
   może być wiele wpisów w blogu. Strona bloga może używać
   wiele instancji klasy "blogentry" (lub innego
   klasie).</p>
</div>
<div class="blogentry">
   <h2>Post blogowy z wczoraj</h2>
   W rzeczywistości, jesteśmy wewnątrz innego diva o klasie
   "blogentry."
   Rozmnażają się jak króliki.
   Jeśli na tej stronie są dziesięć postów blogowych, może
   Być może będą dziesięć divów o klasie "blogentry".
</div>

W tym przykładzie div o nazwie searchform jest używany do opakowania obszaru strony zawierającego formularz wyszukiwania, a div class="blogentry" jest używany do opakowania każdego wejścia do artykułu w blogu. Na stronie jest tylko jeden formularz wyszukiwania, więc wybraliśmy oznaczenie tego jedynego komponentu za pomocą ID. Ale blog ma wiele wejść do artykułów, więc zastosowano atrybut klasę w tym przypadku. Podobnie, witryny z wiadomościami często mają wiele div, które mogą być nazwane "newsitem" lub inną nazwą.

Nie każdy witryna potrzebuje div. Witryny blogowe mogą używać tylko h1, H2 i h2 tytułów oraz <p> akapitów, podobnie jak witryny z wiadomościami. Wyświetlamy div o klasie blogentry, aby pokazać zasadę: w jednym dokumencie HTML można używać wielu klas, ale tylko jednego ID.

Teoria lepkiej etykiety

Myślenie o atrybucie ID jako o lepkiej etykiecie może być pomocne. Na lodówce mogę umieścić etykietę, aby przypomnieć sobie, że muszę kupić mleko, a na telefonie także etykietę, aby przypomnieć sobie, że muszę zadzwonić do klienta, który spóźnił się z płatnościami. Jest jeszcze jedna, umieszczona na zeszytze z rachunkami, aby przypomnieć mi, że muszę uiścić rachunki przed 15. dniem tego miesiąca.

ID również oznacza specjalne obszary dokumentu, aby przypomnieć, które obszary wymagają specjalnego przetwarzania. W tym względzie atrybut ID jest podobny do lepkiej etykiety. Aby osiągnąć tak zwane specjalne przetwarzanie, musisz napisać kilka reguł w arkuszu stylów za pomocą tego specjalnego ID lub dodać kilka linii kodu do pliku JavaScript. Na przykład, w pliku CSS mogą być pewne reguły, które mają zastosowanie tylko do elementów wewnątrz div o nazwie searchform.

当某一 id 属性作为一个有磁性的东西（磁铁）被用于一系列特定的 CSS 规则时，它被称为CSS选择器。有许多tworzenie selektorówmetoda, ale id jest łatwy do użycia i ma wiele zastosowań.

siła id

właściwość id jest niesamowicie potężna. Ma następujące możliwości:

  • jako selektor arkusza stylów, pozwalając na tworzenie kompaktowego, minimalizowanego XHTML.
  • jako cel hipertekstu, zastępując przestarzałą właściwość name.
  • jako metoda lokalizacji konkretnych elementów z skryptów opartych na DOM.
  • jako nazwa elementu obiektowego.
  • jako narzędzie do ogólnego przetwarzania (general purpose processing) (w przykładach W3C, "do wyodrębniania danych z HTML strony do bazy danych, lub konwersji dokumentów HTML do innych formatów itp., jako narzędzie do identyfikacji obszarów").

reguły id

wartość id musi zaczynać się od litery lub podkreślenia; nie może zaczynać się od liczby. Chociaż walidacja W3C nie uchwytuje tego błędu, to analizator XML będzie. W dodatku, jeśli używasz id z JavaScript w formularzu, nazwa i wartość id musi być legalnym zmiennym JavaScript. Spacje i myślniki, zwłaszcza myślniki, są niedozwolone. Ponadto, użycie podkreślenia w nazwach class lub id nie jest dobrym pomysłem, ze względu na ograniczenia w CSS2.0 (i niektórych przeglądarkach).

semantyczne znaczniki i dostępność

Teraz już omówiliśmy szeroko stosowane elementy XHTML (zwłaszcza div i id), teraz przyjrzyjmy się przykładom z naszej strony głównej. Najpierw przypomnijmy sobie menu znajdujące się w nagłówku:

<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="教程 html">tutorial html</a></li>
<li id="x"><a href="/x.asp" title="教程 XML">教程 XML</a></li>
<li id="b"><a href="/b.asp" title="skrypty przeglądarki">skrypty przeglądarki</a></li>
<li id="s"><a href="/s.asp" title="Skrypty serwerowe">Skrypty serwerowe</a></li>
<li id="d"><a href="/d.asp" title="Podręcznik dot net">Podręcznik dot net</a></li>
<li id="m"><a href="/m.asp" title="Podręcznik multimedialny">Podręcznik multimedialny</a></li>
<li id="w"><a href="/w.asp" title="Pomoc w tworzeniu stron">Pomoc w tworzeniu stron</a></li>
</ul>
</div>

Mamy siedem linków, każdemu z nich przypisany jest unikalny identyfikator id odpowiadający odpowiedniej treści: na przykład id 'h' odpowiada podręcznikowi HTML, itd. Te linki są zawarte w elemencie listy o nazwie 'menu', który oznacza funkcję tej listy - lista menu, a bardziej zewnętrzny element 'div' o nazwie 'navfirst' jest używany do oznaczenia tego sekcji (section) w dokumencie, różnicując go od elementów takich jak główne treści (maincontent), boczne paneli (sidebar) i stopka (footer).

Elementy 'div' i 'ul' dostarczają prawdziwej struktury, oznaczając funkcję zawartości (nawigacja) oraz jej pozycję w dokumencie (miejsce nagłówka strony). Z kolei tradycyjne układy tabel nie dostarczają żadnych semantycznych informacji o danych i mogą zabrać trzy razy więcej przestrzeni.

Proszę zauważyć, że te znaczniki nie zawierają znacznika 'img', więc nie dotyczą takich właściwości jak width, height, background czy border itp. Nie używają również komórek tabeli, co nie obejmuje serii związanych z nimi właściwości. Są one bardzo czyste i małe, jednocześnie dostarczając wszystkich informacji potrzebnych do zrozumienia.

Dzięki współpracy z CSS, te znaczniki oferują odwiedzającym strony niezawodne i szybko ładujące się układy. Również umożliwiają tworzenie bardziej elastycznych i różnorodnych wyglądów. W środowisku bez CSS, nasze dobrze strukturyzowane znaczniki wciąż mogą bez porządku dostarczać wszystkie treści.

Czujliwi czytelnicy może zauważyli, że tekst zawarty w elemencie 'a' nie jest wyświetlany przez przeglądarkę, co zasługa idealnej współpracy między strukturalnymi znacznikami a CSS, która pozwala nam zdefiniować mechanizm wywołania za pomocą kilku reguł CSS. Kiedy użytkownik używa graficznej przeglądarki, widzi ładne przyciski nawigacyjne, a użytkownicy korzystający z czytników tekstu mogą uzyskać pełen tekst. W ten sposób treść jest taka sama dla wszystkich użytkowników.

I ponieważ znaczniki nie zawierają obrazów i komórek tabeli, ten komponent nawigacyjny może być odniesiony do każdej strony w witrynie, nie zmieniając struktury, jednocześnie nadając mu różne efekty wizualne. Krótko mówiąc, poprzez modularyzację kodu, zwiększyliśmy jego powtarzalność.