XHTML ແບບການຄົ້ນຄວ້າ 2: ກໍລະນີຄະແນນ: ການຄົ້ນຄວ້າສັນຍານ W3school

ບໍ່ວ່າແຕ່ຫຼືບໍ່ຈະຫຼຸດຊົງບົດນີ້. ການອ່ານບົດນີ້ຈະສົ່ງຜົນໃຫ້ການສະຕິກຳຂອງເຈົ້າຂື້ນຫຼາຍຂື້ນແລະປັບລົງບັນຊີຍອດຂອງເຈົ້າແລະເຮັດໃຫ້ເຈົ້າມີຄວາມຮູ້ຈັກຫຼາຍກວ່າເກີດຂອງການສະຫຼາດລະບາຍບັນຊີຍອດກັບການອອກແບບ. ຄວາມຄິດສະຫຼາດໃນບົດນີ້ຈະສົ່ງຜົນໃຫ້ການພັດທະນາບັນຊີຍອດຂື້ນຫຼາຍຂື້ນແລະສະຫຼາດຄວາມສະຫຼາດໃນການອອກແບບພາສາການຄົ້ນຄວ້າທີ່ສະໜອງຫຼາຍ.

ໃນບົດນີ້ເຈົ້າຈະຮຽນວ່າຈະຂຽນສັນຍາກະສານທີ່ມີຄວາມຄິດສະຫຼາດແລະຄວາມສະຫຼາດຫຼາຍກວ່າຫຼາຍສິບຫຼາຍເປັນພຽງພໍເພື່ອຫຼຸດຄວາມນ້ຳມັນຂອງບາງການລະບາຍຄວາມຫຼາຍຫຼາຍສິບຫຼາຍເປັນພຽງພໍຫຼາຍກວ່າຫຼາຍສິບຫຼາຍເພື່ອຫຼຸດຄວາມຮຸນແຮງແລະຄວາມຄວາມຄຽດຂອງບັນຊີຍອດແລະຫຼຸດເວລາຂອງບັນຊີຍອດທີ່ຫຼຸດລົງ. ຜ່ານການຍົກຍ້າຍສິນລະອຽດທີ່ບໍ່ມີຜົນຫຼາຍແລະປ່ຽນແປງພາສາທີ່ບໍ່ມີຜົນຫຼາຍພວກເຮົາສາມາດຮັບການພາຍດັ່ງກ່າວ.

这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive，来创建的站点。

本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性 (id) - ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。

每个元素都必须结构化吗？

正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。

我们在公元 2006 年创建了 CodeW3C.com 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局，并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在 CodeW3C 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 XHTML 代码：

<div id="header"><h1><a href="/">codew3cເລື່ອງຫຼັງ</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>

  • 服务器脚本
    • 

  • dot net教程
    • 

  • 多媒体教程
    • 

  • 建站手册
    •

    div, id ແລະ ຜູ້ຊ່ວຍອື່ນໆ

    ຖ້ານຳໃຊ້ຢ່າງຖືກຕ້ອງ, div ສາມາດເປັນຜູ້ຊ່ວຍທີ່ດີໃຫ້ກັບກົນລະບຽບທີ່ສະໜອງ, ແລະ id ແມ່ນເຄື່ອງຊອງທີ່ບໍ່ອາດຈະຄາດຄິດ, ທີ່ສາມາດໃຫ້ທາງເຂົ້າກັບ XHTML ທີ່ຫຼາຍຢ່າງຄວາມລວມງາຍ, ແລະນຳໃຊ້ CSS ທີ່ມີຄວາມຫຼາຍຢ່າງຫຼວງຫຼາຍ, ແລະສະແດງປະຕິບັດທີ່ຊັບຊ້ອນໃນເວັບໄຊໂດຍໃຊ້ໂປຣແກມເອກະສານໂດຍສະເພາະ (DOM).

    W3C ໃນແບບສະເພາະຫຼັງຂອງ XHTML2 ຂອງພາບຂອງ XHTML ແບບ div ວ່າ:

    div ປະກອບສະບັບທີ່ສາມາດນຳໃຊ້ກັບ id, class ແລະ role ອາສາລະນະມັດເພື່ອສະໜອງກົນລະບຽບພາບທີ່ຫຼາຍຢ່າງສຳຄັນໃຫ້ໃຊ້ສຳລັບເພີ່ມຕົວອາສານໃຫ້ແກ່ເອກະສານ. ປະກອບດັ່ງກ່າວຈະບໍ່ປະກອບກົນລະບຽບການສະແດງຈຸດສັນຍາ. ດັ່ງນັ້ນ, ຜູ້ສ້າງອາສານສາມາດນຳໃຊ້ປະກອບດັ່ງກ່າວກັບແບບແບບ, xml:lang, ອາສາລະນະມັດອື່ນໆເພື່ອດັບສິ່ງທີ່ຕ້ອງການແລະມີອາການຂອງຕົນ.

    div ແມ່ນຄວາມສັ້ນຂອງ division. Division ຄົງວ່າການແຍກຫຼາຍ, ເຂດ, ກຸ່ມ. ຕົວຢ່າງ, ເມື່ອທ່ານຈະປິດການການສະໜາມການເຊື່ອມຕໍ່ອື່ນອື່ນ, ພວກມັນຈະສ້າງຫຼັກສູດຂອງເອກະສານມັນເປັນ division.

    ມາດຕະການສ້າງຄວາມກຳລັງ

    ທຸກຄົນທີ່ໄດ້ຂຽນ HTML ແມ່ນຮູ້ຈັກວ່າປະກອບສະໜາມ ແລະ ຫົວຂໍ້ຫຼັກຫຼາຍຫຼາຍ, ແຕ່ບາງຄົນອາດບໍ່ຮູ້ກ່ຽວກັບ div. ໃນຄຳອະທິບາຍຂອງ W3C, ພວກເຮົາສາມາດຫາຄຳກ່ຽວກັບ div ພິທີສະບາຍ, "ມາດຕະການສ້າງຄວາມກຳລັງຂອງພະຍາຍາມຂອງການສ້າງຄວາມຂອງປະກອບຂອງຂໍ້ຄວາມ."

    ໃນເວລາເທີມໃນຮູບແບບຂອງພວກເຮົາພວກເຮົາຈະປິດການລາຍການລາຍການສະໜາມຂອງຫຼັກສູດຢູ່ໃນ div, ຍ້ອນວ່າລາຍການສະໜາມຫຼັກສູດບໍ່ແມ່ນສ່ວນໜຶ່ງຂອງປະກອບຂອງຂໍ້ຄວາມ. ປະກອບ h2 ຄົງພິມຂອງຫຼັກສູດ, ແລະ ul ບັນຊີຢູ່ວ່າລາຍການລາຍການຫຼັກສູດ. ແຕ່ໃນຄວາມໝາຍຫຼາຍຫຼາຍແລະຫຼາຍຫຼາຍກວ່ານັ້ນ, ລາຍການສະໜາມຫຼັກສູດກຳລັງຫຼິ້ນບົດບາດຂອງສະໜາມຫຼັກສູດລະບົບອີກອີກຫຼາຍຫຼາຍ. ເພື່ອກ້າວຫນ້າຄວາມຫນັງຄວາມທີ່ນັ້ນ, ພວກເຮົາໃຊ້ id navsecond ເພື່ອບັນທຶກ div.

    <div id="navsecond">
<h2>HTML教程</h2>
<ul>
<li><a href="/html/index.asp" title="HTML教程">HTML</a></li>
<li><a href="/xhtml/index.asp" title="XHTML教程">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS教程">CSS</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP教程">TCP/IP</a></li>

<h2>XML教程</h2>
<ul>
<li><a href="/xml/index.asp" title="XML教程">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL语言">XSL</a></li>
... ...
... ...

    ທ່ານສາມາດໃຊ້ຊື່ນຳຄືນຫຼາຍຫຼາຍຢ່າງ. "Gladys" ແລະ "orangebox" ທັງສອງຢູ່ວ່າຕາມກົດລະບຽບຊື່ນຳຂອງ XHTML. ແຕ່ຊື່ທີ່ມີຄວາມໝາຍ (semantic) ຫຼື meta-structural ແມ່ນທີ່ດີທີ່ສຸດ (ສິ່ງທີ່ສາມາດອະທິບາຍການດຳເນີນວຽກຂອງປ່ຽນປະກອບຂອງພວກມັນ).

    当客户决定使用蓝色时，你会觉得将站点某部分命名为 orangebox（橙色框）会非常地傻。下面的这种情况中，你会觉得自己更傻，当距离最后交付只有六个月时，你开始调校样式表，却怎么也想不起来 "Gladys"（格拉迪斯，女子名）到底代表导航区、侧栏还是搜索框。

    ດັ່ງນັ້ນ, ການຂັ້ນຕັ້ງ id ທີ່ "menu"、"content" ຫຼື "searchform" ຈະຊ່ວຍພັດທະນາ. ຕື່ມອີກ, ປະກາດບໍ່ແມ່ນການອອກແບບ, ຫົວຂໍ້ທີ່ມີຄວາມອາຍຸອາຍຸຫຼາຍສາມາດຖືກຈັດຕັ້ງເປັນຮູບແບບທີ່ເຈົ້າຕ້ອງການ. ຜົນຂອງດັ່ງນັ້ນ, ບໍ່ວ່າເຈົ້ານຳໃຊ້ການຈັດຕັ້ງ CSS ອາຍຸອາຍຸຫຼາຍຫຼືການຈັດຕັ້ງຮ່ວມ, ເຈົ້າຈະປ່ຽນແປງການຄິດຂອງພວກເຈົ້າໃນການນຳໃຊ້ຕົວຊີວິດຈຳນວນສາຍລັກສະນະ.

    id Vs. class

    ຜົນງານ id ສຳລັບ XHTML ບໍ່ເປັນຫຼາຍ; ຜົນງານ class ຫຼື ປະເພດ div ກໍ່ບໍ່. ພວກມັນທັງສອງສາມາດຕົກຕ້ານຕໍ່ກັບ HTML ໄດ້. ຜົນງານ id ສໍາລັບປະເພດແມ່ນສໍາລັບປະເພດໜຶ່ງຫົວຂໍ້ທີ່ມີຄວາມສະເພາະພຽງພຽງ. ແຕ່ລະຫົວຂໍ້ພຽງພຽງສາມາດນຳໃຊ້ພຽງພຽງໃນຫົວຂໍ້ທີ່ມີຄວາມສະເພາະ (ຕົວຢ່າງ, ຖ້າຫົວຂໍ້ຂອງທີ່ມີ id ຂອງ content, ບໍ່ມີ div ຫຼືປະເພດອື່ນໆສາມາດນຳໃຊ້ຫົວຂໍ້ນັ້ນ. ພວກມັນ, ຜົນງານ class ສາມາດນຳໃຊ້ຫຼາຍຄັ້ງໃນຫົວຂໍ້ (ຕົວຢ່າງ, ຫ້າຄຳຂອງຫົວຂໍ້ໃນຫົວຂໍ້ສາມາດນຳໃຊ້ຄຳຂອງ "small" ຫຼື "footnote"). ປະກາດດັ່ງຕໍ່ມັນຈະຊ່ວຍອະທິບາຍຄວາມແຕກຕ່າງຂອງ id ແລະ class:

    <div id="searchform">ປ່ຽນປະກອບຂອງຟັດສະນະຄົ້ນຫານຳໃຊ້ບ່ອນນີ້. ນີ້
ຂອງໜ້າແມ່ນສະເພາະພຽງພຽງ.</div>
<div class="blogentry">
   <h2>ບັນທຶກບອກຂອງມື້ນີ້</h2>
   <p>ບັນທຶກບອກນຳໃຊ້ບ່ອນນີ້.</p>
   <p>ນີ້ແມ່ນຄຳຂອງບັນທຶກບອກອີກ.</p>
   <p>ຄືກັບມີຫຼາຍຄຳຂອງວັດສະດຸໃນໜ້າ, ຄືກັບນັ້ນ
   ມີຫຼາຍບັນທຶກໃນບອກ. ຫົວຂໍ້ບອກສາມາດນຳໃຊ້
   ມີຫຼາຍຢ່າງຂອງປະເພດ "blogentry" (ຫຼືອື່ນໆອີກ)
   class).</p>
    <div class="blogentry"> <h2>Yesterday's blog post</h2> <p>In fact, here we are inside another div of class "blogentry."</p> <p>They reproduce like rabbits.</p> <p>If there are ten blog posts on this page, there might be ten divs of class "blogentry" as well.</p>

    ໃນກໍານົດນີ້ div ທີ່ມີຊື່ searchform ໄດ້ຖືກໃຊ້ເພື່ອລວມເຂດທີ່ມີຫົວຂໍ້ການຄົ້ນຫາ, div class="blogentry" ໄດ້ຖືກໃຊ້ເພື່ອລວມເຂດຫົວຂໍ້ຂອງບົດຂໍ້ຂອງ blog. ໃນເວັບໄຊທີ່ມີຫົວຂໍ້ການຄົ້ນຫາດຽວພຽງໜຶ່ງຫຼັງຈາກນັ້ນພວກເຮົາເລືອກ id ເພື່ອຂຽນບັບບາບສະແດງດັ່ງກ່າວຈະມີຫຼາຍຫຼັງຈາກນັ້ນ blog ມີຫຼາຍຫົວຂໍ້ຂອງບົດຂໍ້ທີ່ຈະມີພາສາປະເພດດຽວກັນ. ຄືກັນເວັບໄຊຂ່າວຈະມີຫຼາຍ div, ພາສາປະເພດຂອງ div ສາມາດຊື່ວ່າ "newsitem" ຫຼື ອື່ນໆ.

    ບໍ່ແມ່ນທຸກເວັບໄຊທີ່ຕ້ອງມີ div. ເວັບໄຊ blog ສາມາດໃຊ້ພຽງແຕ່ h1, H2, ແລະ h2 ຫົວຂໍ້ແລະ <p> ຂໍ້ຄວາມ, ເວັບໄຊຂ່າວກໍ່ດຽວກັນ. ພວກເຮົາສະແດງ div ທີ່ມີພາສາປະເພດ blogentry ບໍ່ແມ່ນສະແຫຼງວ່າເຮົາຈະຂຽນບັບບາບ div ໃນເວັບໄຊຂອງພວກເຮົາຈະຫຼາຍຫຼັງຈາກນັ້ນພວກເຮົາສະແດງດັ່ງກ່າວວ່າໃນເອກະສານ HTML ດຽວກັນຈະມີພາສາປະເພດຫຼາຍຫຼັງຈາກນັ້ນຈະມີພາສາປະເພດດຽວກັນ.

    ຕາມຫຼັກສາບັບບາບ

    ຄິດວ່າ id ທີ່ຖືກສະແດງວ່າສິ່ງງານບັບບາບຈະມີຜົນດີຫຼາຍ. ຂ້ອຍຈະຫັກການບັບບາບໃນຕູບັດກະບວງເພື່ອຊີ້ວັດແທນວ່າຂ້ອຍຕ້ອງຊື້ນັກຍັງທະນຸນານ, ກະບວງທີ່ຫັກການບັບບາບວ່າຂ້ອຍຕ້ອງໂທຫາລູກຄ້າທີ່ບໍ່ຈັບຄ່າທີ່ຫຼັງຈາກນັ້ນຍັງມີບັບບາບທີ່ຫັກການບັບບາບວ່າຂ້ອຍຕ້ອງຈ່າຍເງິນຫຼັງຈາກມື້ທີ່ກໍານົດໄວ້.

    id ຈະໄດ້ຂຽນໃນເອກະສານເພື່ອຊີ້ວັດແທນຂອງເຂດພິເສດໃນເອກະສານທີ່ຕ້ອງຂັ້ວນຫຼາຍຫຼັງຈາກນັ້ນ id ທີ່ສະແດງດັ່ງກ່າວກັບການເຊື່ອມຕໍ່ງານບັບບາບນິວເຊຍຈະຍັງຢູ່ໃນການຂຽນຫຼັກສະຖານທີ່ທີ່ຈະນຳມານຳມາໃຊ້ທີ່ບັບບາບສະແດງດັ່ງກ່າວກັບ id ພິເສດດັ່ງກ່າວຈະມີຫຼາຍຫຼັງຈາກນັ້ນທີ່ຈະມີຫຼາຍບັບບາບໃນບັບບາບສະແດງດັ່ງກ່າວຈະມີຫຼາຍບັບບາບໃນບັບບາບສະແດງດັ່ງກ່າວຈະມີຫຼາຍບັບບາບໃນບັບບາບສະແດງດັ່ງກ່າວ.

    When an id attribute is used as a magnetic thing (magnet) for a series of specific CSS rules, it is called a CSS selector. There are manyCreating selectorsmethods, but id is easy to use and has many uses.

    The power of id

    The id attribute is incredibly powerful. It has the following capabilities:

    Rules of id

    The id value must start with a letter or underscore; it cannot start with a number. Although W3C validation will not catch this error, XML parsers will. At the same time, if you use id with JavaScript in a form, the id name and value must be valid JavaScript variables. Spaces and hyphens, especially hyphens, are not allowed. Moreover, using an underscore for class or id names is not a good idea, due to the limitations in CSS2.0 (and some browsers).

    Semantic tags and accessibility

    Now, we have discussed the widely used XHTML elements (especially div and id), let's look at some examples about the homepage of this site. First, let's review the menu located at the header position:

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

  • 服务器脚本
    • 

  • dot net教程
    • 

  • 多媒体教程
    • 

  • 建站手册
    •

    我们拥有七个链接，每个链接被分配一个id来对应相应的内容：例如名为 h 的 id 对应 HTML 教程，以此类推。同时这些链接被封装于名为 menu 的列表元素内，名为 menu 的 id 标明了这个列表的职能 - 一个菜单列表，而更外围的名为 navfirst 的 div 则用来标注页面中的这个节 (section)，将之与诸如主要内容 (maincontent)、侧栏 (sidebar) 和页脚 (footer) 之类的元素区别开来。

    div ແລະ ul ສອງເຄື່ອງສະແດງຄວາມຄົງກັນທີ່ແທ້ຈິງ, ສະແດງເບີລາີເຊີຫນັງຄົງສະແດງເບີລາີເຊີທີ່ມີຄວາມຫນັງຄົງສະແດງເບີລາີເຊີ, ແລະສະແດງເບີລາີເຊີຫນັງຄົງສະແດງເບີລາີເຊີທີ່ມີຄວາມຫນັງຄົງສະແດງເບີລາີເຊີ. ພຽງແຕ່ການກໍ່ສ້າງການສະແດງເບີລາີເຊີທີ່ມີຄວາມຫນັງຄົງສະແດງເບີລາີເຊີ.

    ບໍ່ມີການຕິດຕັ້ງເອກະສານພາບimg, ດັ່ງນັ້ນຈະບໍ່ມີຄວາມຄິດຂອງ width, height, background ຫລື border ແລະອີກ. ຍັງບໍ່ໃຊ້ສາຍບາດເບີລາີເຊີ, ຈະບໍ່ມີການກ່ຽວຂ້ອງກັບການສະແດງເບີລາີເຊີອີກ. ມັນອາດຫນັງຄົງກັບຄວາມພິຈາລະນາຫນັງຄົງສະແດງເບີລາີເຊີທັງໝົດ.

    ດ້ວຍການຮ່ວມມືທັງຄວາມສະແດງຂອງຄວາມຄົງກັນ, ການຕິດຕັ້ງຕໍ່ຜູ້ເຂົ້າຫາເວັບໄຊສະແດງເບີລາີເຊີທີ່ມີຄວາມເຊື່ອຖືຫນັງຄົງສະແດງເບີລາີເຊີທີ່ມີຄວາມຫນັງຄົງສະແດງເບີລາີເຊີ, ແລະຍັງສະແດງເບີລາີເຊີທີ່ມີຄວາມຫນັງຄົງສະແດງເບີລາີເຊີຫນັງຄົງສະແດງເບີລາີເຊີທີ່ມີຄວາມຫນັງຄົງສະແດງເບີລາີເຊີ.

    ຜູ້ອ່ານທີ່ມີຄວາມຫນັງຄາຍຄົງຈະສາມາດພົບໄດ້ວ່າຂໍ້ຄວາມໃນເອັມເອັນຢູມັນບໍ່ໄດ້ຖືກສະແດງໂດຍສາຍບາດເບີລາີເຊີ, ນັ້ນຍັງຄືກັບການຮ່ວມມືທັງຄວາມສະແດງຂອງຄວາມຄົງກັນລະບົບສະແດງສະແດງເບີລາີເຊີຫນັງຄວາມຄົງກັນກັບການປັບສະແດງຊີບີຊີສະແດງເບີລາີເຊີ, ສາມາດພົບຂໍ້ຄວາມທັງໝົດຂອງບາດເບີລາີເຊີ, ສະນັ້ນສິ່ງນີ້ສິ່ງທັງໝົດຂອງຜູ້ອ່ານທັງໝົດຈະເປັນດຽວກັນ.

    并且，由于标记没有包含图像和表格单元，这个导航栏组件可以在不改变结构的情况下被站点内的任何页面所引用，同时赋予它不同的视觉效果。简而言之，通过对代码进行模块化，我们提高了代码的复用性。