Struktura XHTML 1: Użycie XHTML do重构 stron

Tytuł, który nadaliśmy temu rozdziałowi, brzmiał: „XHTML: Proste zasady, łatwe wskazówki”. Jeden z powodów to to, że omawiane zasady i wskazówki są proste i łatwe do zrozumienia. Drugi powód to fakt, że książka o prostym i łatwym projektowaniu stron internetowych, jak nowoczesne darmowe produkty w supermarkecie, może skutecznie przyciągnąć uwagę i zainspirować do próby.

Mam nadzieję, że treść tego rozdziału zainspiruje Cię i zachęci do próby. Dlaczego? Bo po zrozumieniu prostych i łatwych idei zawartych w tym rozdziale, zaczniesz na nowo myśleć o funkcjonowaniu stron internetowych i zaczniesz zmieniać sposób ich tworzenia. Jednakże, nie chcę, abyś po prostu przerobił kod. Chcę, abyś rzeczywiście myślał i pracował w inny sposób.

Z drugiej strony, prawdziwa esencja XHTML to jego restrukturyzacja.

W tej rozdziale omówimy mechanizmy i znaczenie strukturyzowanych znaczników. Jeśli wiesz, jak wdrażać standardy stron internetowych w swoich projektach, możesz czuć, że treść tego rozdziału jest Ci znajoma. Jednak nawet doświadczeni profesjonaliści mogą znaleźć coś nowego.

Streszczenie zasad XHTML

Konwersja tradycyjnego HTML na XHTML 1.0 jest szybka i bezbolesna, pod warunkiem, że przestrzegasz prostych zasad i wskazówek. Niezależnie od tego, czy używasz HTML, czy nie, XHTML nie będzie Cię ograniczać.

  • Użyj odpowiedniego deklarowania typu dokumentu i przestrzeni nazw.
  • Użyj elementu meta, aby zadeklarować typ zawartości.
  • Pisz wszystkie elementy i atrybuty małymi literami.
  • Dodaj cudzysłów do wartości wszystkich atrybutów.
  • Przypisz wartości do wszystkich atrybutów.
  • Zamknij wszystkie znaczniki.
  • Zamknij puste znaczniki za pomocą spacji i ukośnika.
  • Nie pisz podwójnych podkreśleń w komentarzach.
  • Upewnij się, że znak < i & są odpowiednio ustawione.

Unicode i inne zestawy znaków

Domyślnym zestawem znaków dla dokumentów XML, XHTML i HTML 4.0 jest Unicode, standard zdefiniowany przez Unicode Consortium. Unicode to kompleksowy zestaw znaków, który dla każdego znaku dostarcza unikalny numer, niezależnie od platformy, programu i języka. Unicode jest naszym najbliższym odpowiednikiem ogólnego alfabetu, chociaż nie jest alfabetem, ale zestawem mapowania cyfr.

Chociaż Unicode jest domyślnym zestawem znaków dla dokumentów web, deweloperzy mogą swobodnie wybrać inne zestawy znaków bardziej odpowiednie dla nich. Na przykład, strony internetowe w Stanach Zjednoczonych i Europie Zachodniej często używają kodowania ISO-8859-1 (Latin-1), podczas gdy chiński standard narodowy to gb2312.

Oznaczaj dokumenty do wyrażania semantyki, a nie do stylu

Pamiętaj: używaj CSS do布局u w maksymalnym stopniu. W świecie web standardów, znaczniki XHTML są niezwiązane z prezentacją, ale jedynie z strukturą dokumentu.

Dobrze zorganizowane dokumenty mogą przekazać przeglądarkom jak najwięcej semantyki, niezależnie od tego, czy przeglądarka znajduje się na przenośnym komputerze, czy nowoczesnym przeglądarce graficznej na pulpicie. Dobre dokumenty mogą przekazać użytkownikom wizualną semantykę, nawet w starych przeglądarkach lub w nowoczesnych przeglądarkach, w których użytkownik wyłączył CSS.

Nie każdy serwis może natychmiast porzucić układ tabel HTML. Twórca CSS, W3C, dopiero w listopadzie 2002 roku przeniósł swoją stronę internetową na układ CSS. Jednak nawet nieprzejednani zwolennicy standardów nie zawsze całkowicie oddzielali prezentację od struktury, przynajmniej w XHTML 1. Ale teraz możemy uczynić duży krok w kierunku tego ideału, oddzielając prezentację od struktury (czyli dane od designu), nawet tradycyjne układy mogą z tego skorzystać.

Poniżej znajdują się niektóre wskazówki, które pomogą Ci myśleć w sposób bardziej strukturalny:

Kolor w planie

W szkole językowej większość z nas zmuszana była do pisania artykułów w standardowych formatach planu. Teraz, jako projektanci, możemy swobodnie wyzwolić się z ograniczeń planu i odważnie zanurzyć się w wolnej dziedzinie unikalnego osobistego wyrażania (może nasze ulotki i strony firmowe nie są tak unikalne i osobiste). Ale przynajmniej nie będziemy już mieli problemów z planem.

W rzeczywistości, zgodnie z HTML, powinniśmy strukturalnie organizować zawartość w hierarchiczny sposób. W okresie, gdy przeglądarki nie obsługiwały CSS, nie mogliśmy dostarczyć układu dostępного do sprzedaży jednocześnie. Ale dzisiaj, realizując nasz projekt bez kompromisów, mamy możliwość dostarczenia dokumentów o wewnętrznie dobrej strukturze.

Kiedy oznaczasz tekst przeznaczony do sieci lub gdy konwertujesz istniejący dokument tekstowy na stronę internetową, rozważ te pozycje tradycyjnego planu.

<h1>Mój temat</h1>
<p>Wprowadzające teksty</p>
<h2>Dodatkowe uwagi</h2>
<p>Związane teksty</p>

Również, unikaj użycia zdeprecjonowanych elementów HTML, takich jak <font>, lub bezsemantycznych elementów, takich jak <br />, aby symulować rzeczywiste struktury logiczne.

Na przykład, unikaj tego:</h1>

<font size="7">Mój temat</font><br />
Wprowadzające teksty<br /><br />
<font size="6">Dodatkowe uwagi</font><br />
Związane teksty<br />

Używaj elementów na podstawie ich znaczenia, a nie wyglądu

Niektórzy z nas wpadli w zły nawyk, używając h1, gdy potrzebujemy tylko dużego tekstu, lub li, gdy potrzebujemy kropek na początku. Jak omówiliśmy w poprzednim rozdziale, przeglądarki zawsze przywiązywały wagę do przymuszania atrybutów projektu do elementów HTML. Wszyscy jesteśmy przyzwyczajeni do tego, że h1 oznacza duży tekst, li oznacza kroki, a blockquote oznacza wcięcie tekstu. Większość z nas nadal pisze HTML, używając strukturalnych elementów do symulowania efektów wizualnych.

Podobnie, jeśli projektant chce, aby wszystkie tytuły miały tę samą wielkość, może ustawić wszystkie tytuły jako h1, nawet jeśli nie ma to żadnego znaczenia semantycznego.

<h1> To jest główny tytuł, gdy organizuję tekst w formacie提纲.</h1>
<h1> To nie jest główny tytuł, ale chciałbym, aby miał tę samą czcionkę co wyżej wymieniony tytuł, ale nie wiem, jak używać CSS.</h1>
<h1>To wcale nie jest tytuł. Ale bardzo chciałbym, aby tekst na stronie miał tę samą czcionkę, aby osiągnąć to,
Jeśli znam CSS, mogę osiągnąć ten projekt bez zakłócania struktury dokumentu.</h1>

Musimy odłożyć nasze małe sztuczki na bok i zacząć używać ich na podstawie semantyki elementów, a nie ich wyglądu. W rzeczywistości, h1 może być dowolnym wyglądem, który chcesz. Dzięki CSS, h1 może być cienkim, nieboldowanym rzymskim czcionką, a tekst p może być粗体的大号字，li może nie mieć kropki (możesz użyć obrazka małego kotka, psa lub logo firmy w formacie PNG, GIF lub JPEG zamiast niej) itp.

Od dzisiaj będziemy używać CSS do określania wyglądu elementów. Możemy nawet zmieniać ich wygląd w zależności od ich pozycji na stronie lub w całym serwisie. CSS pozwala całkowicie oddzielić prezentację od struktury i pozwala na formatowanie dowolnego elementu według własnego gustu.

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;
	{}

Dlaczego robisz to? Celem tego jest uzyskanie spersonalizowanego wyglądu i odczucia w graficznych przeglądarkach, jednocześnie zachowując strukturę dokumentu w przeglądarkach tekstowych, urządzeniach bezprzewodowych oraz w e-mailach w formacie HTML.

Nie chcemy omawiać więcej technik CSS w rozdziale o XHTML. Chcemy tylko pokazać, że struktura dokumentu i jego wizualna ekspresja to dwa zupełnie różne rzeczy, a elementy strukturalne powinny być używane do przekształcania tekstu, a nie do narzucania efektów wizualnych.

Używaj elementów strukturalnych, a nie bez znaczenia śmieci

Ponieważ zapomnieliśmy lub w ogóle nie wiemy, że celem HTML i XHTML jest przekazywanie strukturyzowanej treści, wielu zwolenników HTML używa tagów do wstawiania list:

Projekt pierwszy<br />
Projekt drugi<br />
Projekt trzeci<br />

Rozważ użycie uporządkowanej lub nieuporządkowanej listy zamiast tego:

<ul>
<li>Projekt pierwszy</li>
<li>Projekt drugi</li>
<li>Projekt trzeci</li>
</ul>

"Ale li daje mi kropkę, a mi nie potrzebuję kropki!" Może tak powiesz. Jak mówi powyższy rozdział, CSS nie zakłada żadnych założeń dotyczących oczekiwanej apariacji elementów. Czeka, aż powiesz mu, jakiego wyglądu oczekujesz od elementów. Zamykanie kropek to podstawowa zdolność CSS. Ma możliwość sprawienia, że lista wygląda tak samo jak zwyczajny tekst, ale także może sprawić, że wygląda jak graficzny pasek nawigacyjny z pełnym efektem odwrócenia.

Dlatego, używaj elementów listy do oznaczania list. Podobnie, używaj strong zamiast b, em zamiast i, itp. W większości przeglądarek desktopowych domyślnie strong wyświetla się tak samo jak b, a em i i, jednocześnie możesz tworzyć oczekiwane efekty wizualne bez uszkodzenia struktury dokumentu.

Chociaż CSS nie zakłada żadnych założeń dotyczących wyświetlania elementów, przeglądarki robią wiele założeń, i jeszcze nie napotkaliśmy przeglądarki, która wyświetla strong jako coś innego niż grubą czcionkę (oprócz takiej, która została wskazana przez CSS w inny sposób). Jeśli obawiasz się, że nieznany przeglądarka nie wyświetli strong jako grubą czcionkę, możesz napisać taką regułę CSS:

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

Elementy wizualne i struktura

Standardy webowe wymagają nie tylko określenia technologii, ale także przestrzegania sposobu ich użycia. Użycie XHTML do tworzenia znaczników, jednocześnie używanie CSS do przetwarzania części lub całej布局u, niekoniecznie sprawi, że strona będzie bardziej użyteczna i lżejsza, ani że zaoszczędzi więcej przepustowości. Jak w przypadku technologii używanych w przeszłości, XHTML i CSS mogą być używane niewłaściwie i nadużywane. Długie XHTML i długie HTML tak samo marnują przepustowość użytkownika i czas. Długie i nadmiarowe CSS nie mogą w pełni zastąpić prezentacji HTML; to tylko złe rzeczy zastępują inne.