Cấu trúc hóa của XHTML một: Sử dụng XHTML để重构 trang web

Một trong những tiêu đề mà chúng ta đã viết cho phần này là: “XHTML: Các quy tắc đơn giản, hướng dẫn dễ dàng.” Một trong những lý do là, các quy tắc và hướng dẫn mà phần này thảo luận là đơn giản và dễ dàng. Một lý do khác là, một cuốn sách về thiết kế WEB đơn giản và dễ dàng, giống như các sản phẩm miễn phí mới tại siêu thị, mặc dù phổ biến nhưng có thể thu hút sự chú ý của mọi người, điều này có thể khơi dậy sự感兴趣 và khuyến khích mọi người thử nghiệm.

Tôi thực sự hy vọng rằng nội dung của phần này có thể khơi dậy sự感兴趣 của bạn và khuyến khích bạn thử nghiệm. Tại sao tôi lại nói như vậy? Bởi vì khi bạn đã nắm vững những ý tưởng đơn giản và dễ dàng trong chương này, bạn sẽ suy nghĩ lại về cách trang web hoạt động và bắt đầu thay đổi cách xây dựng chúng. Tuy nhiên, tôi không muốn bạn chỉ đơn giản là viết lại mã. Tôi muốn bạn thực sự suy nghĩ và làm việc theo một cách khác.

Mặt khác, việc重构 mới là ý nghĩa thực sự của XHTML.

Trong chương này, chúng ta sẽ nghiên cứu cơ chế và ý nghĩa của các thẻ định cấu trúc. Nếu bạn đang tích hợp các tiêu chuẩn trang web vào dự án phát triển của mình, bạn có thể cảm thấy nội dung của chương này có phần quen thuộc. Tuy nhiên, ngay cả những người có kinh nghiệm trong lĩnh vực này cũng có thể tìm thấy những điều bất ngờ từ chương này.

Tóm tắt các quy tắc XHTML

Việc chuyển đổi HTML truyền thống sang XHTML 1.0 là nhanh chóng và không đau khổ, chỉ cần tuân thủ một số quy tắc đơn giản và hướng dẫn dễ dàng. Không matter bạn có sử dụng HTML hay không, điều này sẽ không cản trở bạn sử dụng XHTML.

  • Sử dụng đúng bản khai báo loại tài liệu và không gian tên.
  • Sử dụng thẻ meta để thông báo loại nội dung của bạn.
  • Viết tất cả các yếu tố và thuộc tính bằng chữ thường.
  • Đặt dấu ngoặc kép quanh tất cả các giá trị thuộc tính.
  • Phân bổ giá trị cho tất cả các thuộc tính.
  • Đóng tất cả các thẻ.
  • Sử dụng khoảng trống và dấu gạch chéo để đóng thẻ trống.
  • Đừng viết dấu gạch dưới kép trong chú thích.
  • Đảm bảo rằng dấu < và & được sử dụng thay vì dấu nhỏ hơn và và.

Unicode và các bộ mã ký tự khác

Bộ mã ký tự mặc định của tài liệu XML, XHTML và HTML 4.0 là Unicode, một tiêu chuẩn được Liên minh Unicode định nghĩa. Unicode là một bộ mã ký tự toàn diện, cung cấp một số nguyên mã duy nhất cho mỗi ký tự, bất kể nền tảng, chương trình và ngôn ngữ. Unicode cũng là bộ mã gần như là bảng chữ cái tổng quát nhất mà chúng ta có, mặc dù nó không phải là một bảng chữ cái mà là một bộ phương án mã số.

Mặc dù Unicode là bộ mã ký tự mặc định của tài liệu web, nhưng các nhà phát triển vẫn có thể tự do chọn các bộ mã ký tự khác phù hợp hơn với họ. Ví dụ, các trang web của Mỹ và châu Âu thường sử dụng mã ISO-8859-1 (Latin-1), trong khi tiêu chuẩn quốc gia của Trung Hoa Cộng hòa là gb2312.

Đánh dấu tài liệu để biểu đạt ngữ nghĩa,而不是 để biểu hiện phong cách

Lưu ý: Hãy sử dụng CSS một cách tối đa để布局. Trong thế giới tiêu chuẩn web, thẻ XHTML không liên quan đến biểu hiện, nó chỉ liên quan đến cấu trúc tài liệu.

Tài liệu có cấu trúc tốt có thể truyền đạt nhiều ngữ nghĩa nhất có thể cho trình duyệt, bất kể trình duyệt nằm trên máy tính bảng hay trình duyệt đồ họa桌面 thời thượng. Tài liệu có cấu trúc tốt đều có thể truyền đạt ngữ nghĩa trực quan cho người dùng, ngay cả trong trình duyệt cũ hoặc trong trình duyệt hiện đại mà người dùng đã tắt CSS.

Không phải mọi trang web đều có thể bỏ qua ngay lập tức giao diện bảng HTML. Người sáng tạo ra CSS, W3C, mới chuyển đổi trang web chính thức thành giao diện CSS vào tháng 11 năm 2002. Tuy nhiên, ngay cả những người duy nhất theo chuẩn cũng không luôn luôn tách biệt hoàn toàn giữa biểu hiện và cấu trúc, ít nhất trong XHTML 1. Nhưng bây giờ, chúng ta có thể tiến gần hơn đến mục tiêu này, bằng cách tách biệt biểu hiện khỏi cấu trúc (hoặc tách dữ liệu khỏi thiết kế), thậm chí là các giao diện truyền thống cũng có thể从中获益.

Dưới đây là một số gợi ý giúp bạn suy nghĩ theo cách có cấu trúc hơn:

Màu sắc trong mục tiêu

Tại trường ngữ pháp, hầu hết chúng ta đều bị bắt buộc phải sử dụng định dạng mục tiêu tiêu chuẩn để viết bài. Bây giờ, chúng ta đã trở thành các nhà thiết kế, có thể thoải mái摆脱 ràng buộc của mục tiêu, và dám投身 vào lĩnh vực tự do cá nhân hóa độc đáo (mặc dù tờ rơi và trang web thương mại của chúng ta có thể không quá độc đáo và cá nhân hóa). Nhưng ít nhất chúng ta sẽ không còn bị mục tiêu làm phiền rối nữa.

Thực tế, theo HTML, chúng ta nên cấu trúc nội dung thành các cấp độ tổ chức. Trong thời kỳ trình duyệt không hỗ trợ CSS, chúng ta không thể làm điều này trong khi cung cấp giao diện có thể bán được. Nhưng ngày nay, khi chúng ta có thể thực hiện thiết kế của mình một cách không giảm giá, chúng ta có khả năng cung cấp tài liệu có cấu trúc nội tại tốt.

Khi bạn đánh dấu văn bản để sử dụng trên mạng hoặc khi bạn chuyển đổi tài liệu văn bản hiện có thành trang web, hãy suy nghĩ về các mục tiêu truyền thống này.

<h1>Chủ đề của tôi</h1>
<p>Văn bản giới thiệu</p>
<h2>Ý kiến bổ sung</h2>
<p>Văn bản liên quan</p>

Đồng thời, tránh sử dụng các yếu tố HTML đã bị bỏ rơi như <font>, hoặc các yếu tố không có ý nghĩa như <br />, để mô phỏng cấu trúc logic không tồn tại.

Ví dụ, đừng làm như thế này:

<font size="7">Chủ đề của tôi</font><br />
Văn bản giới thiệu<br /><br />
<font size="6">Ý kiến bổ sung</font><br />
Văn bản liên quan<br />

Sử dụng yếu tố dựa trên ý nghĩa của chúng,而不是 dựa trên diện mạo của chúng.

Một số người trong chúng ta đã rơi vào thói quen xấu, khi chỉ cần một văn bản lớn, chúng ta sử dụng h1, hoặc khi cần thêm dấu chấm trước, chúng ta sử dụng li. Như chúng ta đã thảo luận trong chương trước, trình duyệt luôn có thói quen áp đặt thuộc tính thiết kế lên các yếu tố HTML. Chúng ta đều đã quen thuộc với việc nghĩ rằng, h1 có nghĩa là chữ lớn, li có nghĩa là dấu chấm, hoặc blockquote có nghĩa là văn bản lồi. Đa số chúng ta vẫn sử dụng cách viết HTML một cách ngẫu nhiên bằng cách mô phỏng hiệu ứng trình bày.

Cũng vậy, nếu nhà thiết kế muốn tất cả các tiêu đề sử dụng cùng kích thước chữ, cô ấy sẽ đặt tất cả các tiêu đề thành h1, mặc dù việc này không có ý nghĩa về cấu trúc ngữ nghĩa.

Đây là tiêu đề chính, trong trường hợp tôi đã tổ chức văn bản theo định dạng danh sách.
Đây không phải là tiêu đề chính, nhưng tôi muốn nó sử dụng cùng font với tiêu đề trên, nhưng tôi không biết cách sử dụng CSS.
Đây không phải là một tiêu đề. Nhưng tôi rất mong muốn văn bản trong trang sử dụng cùng một font, để đạt được điều tôi mong muốn.
Nếu tôi hiểu CSS, tôi có thể đạt được thiết kế này mà không làm rối loạn cấu trúc tài liệu.

Chúng ta phải để lại trò chơi nhỏ của mình một bên và bắt đầu sử dụng chúng dựa trên ý nghĩa của yếu tố,而不是 dựa trên cách chúng trông. Thực tế, h1 có thể trở thành bất kỳ hình dạng nào mà bạn mong muốn. Qua CSS, h1 có thể trở thành chữ罗马 nhỏ và không đậm, trong khi văn bản p có thể trở thành chữ lớn và đậm, li cũng có thể không có dấu chấm (hoặc bạn có thể sử dụng hình ảnh PNG, GIF hoặc JPEG của mèo con, chó con hoặc biểu tượng công ty thay thế) và nhiều thứ khác.

Từ ngày hôm nay, chúng ta sẽ sử dụng CSS để quyết định diện mạo của các yếu tố. Chúng ta thậm chí có thể thay đổi diện mạo của chúng dựa trên vị trí của chúng trong trang hoặc trong trang web. CSS có thể tách biệt hoàn toàn việc trình bày với cấu trúc và cho phép bạn định dạng bất kỳ yếu tố nào theo phong cách mà bạn thích.

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

Lý do bạn làm điều này là để đạt được外观 và cảm giác thương hiệu hóa trong trình duyệt hình ảnh, trong khi cấu trúc tài liệu được duy trì trong trình duyệt văn bản, thiết bị di động, email có định dạng HTML.

Chúng tôi không muốn nói nhiều về CSS trong phần về XHTML. Chỉ muốn minh họa rằng cấu trúc tài liệu và biểu đạt視 giác là hai điều hoàn toàn khác nhau, và các yếu tố cấu trúc hóa nên được sử dụng để chuyển đổi văn bản,而不是 áp đặt hiệu ứng hiển thị.

Sử dụng các yếu tố cấu trúc hóa thay vì rác vô nghĩa

Do chúng ta đã quên hoặc không biết mục đích của HTML và XHTML là truyền đạt ý nghĩa cấu trúc hóa, nhiều người tranh luận HTML sử dụng thẻ để chèn danh sách như sau:

Item một<br />
Item hai<br />
Item ba<br />

Hãy suy nghĩ về việc sử dụng danh sách có thứ tự hoặc không có thứ tự thay thế:

<ul>
<li>Item một</li>
<li>Item hai</li>
<li>Item ba</li>
</ul>

"Nhưng li lại cho tôi một dấu chấm tròn, trong khi tôi không cần dấu chấm tròn!" Bạn có thể nói như vậy. Theo phần trước, CSS không giả định bất kỳ外观 nào cho các yếu tố. Nó chờ bạn cho biết外观 mà bạn mong đợi. Tắt dấu chấm tròn là khả năng cơ bản nhất của CSS. Nó có thể làm cho danh sách trông như văn bản thông thường, cũng có thể làm cho danh sách trông như thanh dẫn hướng hình ảnh, có hiệu ứng lật ngược hoàn chỉnh.

Vậy, hãy sử dụng các yếu tố danh sách để đánh dấu danh sách. Tương tự, hãy sử dụng strong thay thế cho b, sử dụng em thay thế cho i, v.v. Trong hầu hết các trình duyệt桌面 mặc định, hiệu ứng hiển thị của strong và b là tương tự, em và i cũng tương tự, đồng thời bạn cũng có thể tạo ra hiệu ứng視 giác mà bạn mong đợi mà không làm hỏng cấu trúc tài liệu.

Mặc dù CSS không giả định bất kỳ hiệu ứng hiển thị nào cho bất kỳ yếu tố nào, trình duyệt lại có rất nhiều giả định, và chúng tôi vẫn chưa gặp một trình duyệt nào hiển thị strong khác ngoài chữ đậm (trừ khi được chỉ định bởi CSS của nhà thiết kế để hiển thị theo cách khác). Nếu bạn lo lắng rằng trình duyệt lạ không hiển thị strong là chữ đậm, bạn có thể viết quy tắc CSS như sau:

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

Các yếu tố trực quan và cấu trúc

Các tiêu chuẩn web không chỉ yêu cầu chúng ta sử dụng công nghệ nào mà còn tuân thủ cách sử dụng các công nghệ đó. Sử dụng XHTML để viết đánh dấu, đồng thời sử dụng CSS để xử lý một phần hoặc toàn bộ布局, không nhất thiết sẽ làm cho trang web dễ sử dụng và nhẹ hơn, đồng thời tiết kiệm bao nhiêu băng thông. Như chúng ta đã sử dụng công nghệ trong thời kỳ đầu, XHTML và CSS cũng có thể bị sử dụng sai và lạm dụng. XHTML dài và HTML dài cũng sẽ lãng phí băng thông và thời gian của người dùng. CSS quá dài cũng không thể hoàn toàn thay thế mã HTML biểu diễn; điều này chỉ là một thứ xấu hơn thay thế cho một thứ khác mà thôi.