XHTML အဆင်းတူအဆင်းမှ ၂: အကြောင်းကြားစရာ အချက်အလက်
မည်သည့်အတိုင်းမျှ ဒါကို ပြန်လည်ကြည့်မပါ။ ဒါတို့ကို ဖတ်ကြည့်မှုသည် သင့် အကျိုးသက်ရှိသော ပြည့်ပြည်နှင့် ကွန်တိုက်ပေါ် စကာတင်မှု ကို လျှော့ချရန် အကျိုးမဖြစ်စေရမည်။
ဒါကို မူတည်၍ သင်များကို အသုံးပြုရန် ရည်ရွယ်ထားသော အတိုင်းအတာကို လေးလား သင်များကို ကျွမ်းကျင်စေရန် ကျမ်းစာအုပ်ကို ဖတ်ကြည့်ပါ။ ကွန်တိုက်ပေါ် စကာတင်မှု ကို ကျဆင်းစေရန် အသုံးပြုသော အချက်အလက်များ ကို ဖယ်ရှားပြီး အက္ခရာအသုံးအဆောင်များ ကို ပြောင်းလဲရန် အကြောင်းအရာကို သင်များကို သိရှိပါ။
这些坏习惯折磨着网络中的许多站点，特别是那些将 CSS 代码与主要基于表格的布局混合在一起的站点。这种做法笨拙且不经济，即使是对于那些在其他领域很有经验的设计师来说。同时，出现这个问题的几率是均等的，不论是那些手写代码的站点，还是利用可见编辑工具，比如 Dreamweaver 和 GoLive，来创建的站点。
本节会提出这些常见的错误，这样你就可以识别和防范它们，并且学会如何改正错误。我们详细阐述唯一标识符属性 (id) - ，并展示它如何使你可以编写极其紧凑的 XHTML 代码，不论你创建的是混合布局还是纯粹的 CSS 布局。
每个元素都必须结构化吗？
正如上一节中我们讲到的那样，每个元素都可以被结构化，CSS 可使得一个有序或无序的列表显示为彻头彻尾的导航栏，其中还拥有反转按钮效果。文档的内容可以通过普通的元素进行标记，这些元素通过特定的结构化属性标志来指示出它们在网站设计中所扮演的语义角色。
我们在公元 2006 年创建了 CodeW3C.com 的第一个中文测试版，我们在一开始就使用了 CSS 进行布局，并使用 XHTML 来结构化文档。每一个其中的元素都是结构化的，从标题到列表，乃至段落。你可以在 CodeW3C 的每个页面看到具有反转效果的首页按钮和二级菜单按钮。下面是这两个组件的 XHTML 代码：
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML အစားအမျိုးအစား">HTML အစားအမျိုးအစား</a></li>
<li id="x"><a href="/x.asp" title="XML အစားအမျိုးအစား">XML အစားအမျိုးအစား</a></li>
<li id="b"><a href="/b.asp" title="ဘရော်ဇာတ်သုံးစွဲမှု">ဘရော်ဇာတ်သုံးစွဲမှု</a></li>
服务器脚本
dot net教程
多媒体教程
建站手册
div、id 和其他帮手
如果被正确地使用，div 可以成为结构化标记的好帮手，而 id 则是一种令人惊讶的小工具，它使你有能力编写极其紧凑的 XHTML，以及巧妙地利用 CSS，并通过标准文档对象模型 (DOM) 向站点添加复杂精巧的行为。
W3C သည် သူတို့၏ နောက်ဆုံး သဘောတူညီချက် ဖြစ်သော XHTML2 အစီအစဉ် တွင် XHTML အဆင့်အဆင့် အသစ် အဆင့်အဆင့် အဆင့်အဆင့် အဆင့်အဆင့် အဆင့်အဆင့် ကို အနက်အဓိပ္ပာယ်ပေးသည့် နည်းလမ်းဖြစ်သည်။
div အရာတွေ သည် id, class နှင့် role အချက်အလက်များ နှင့် ပူးပေါင်းခြင်းဖြင့် စာသင်္ကေတတွေ သို့ အထူးအဆင့် အဆင့် အသစ် ထည့်သွင်းရန် အသုံးပြုနိုင် သော အသုံးပြုမှု ဖြစ်သည်။ ဒါဟာ အသုံးပြုခြင်း အားဖြင့် အသုံးပြုသူ သည် အဆင့်အဆင့် အသစ် အစိတ်အစိတ် များ နှင့် ပူးပေါင်းခြင်းဖြင့် အသုံးပြုနိုင်သည်။ အမော့အမည်အချက်အလက်များ နှင့် xml:lang အချက်အလက်များ ပူးပေါင်းခြင်းဖြင့် XHTML ကို သူတို့၏ လိုချင်သော လိုက်နာချက် နှင့် အသားအရုပ် ကို လက်ခံနိုင်သည်။
div 是 division 的简写。division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。
确定结构的通用机制
所有编写 HTML 的人对段落和标题这类常见的元素都很熟悉，但是有些人对 div 就可能不那么熟悉了。在W3C的描述中我们可以找到理解 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" အမည်ဖြင့် အသုံးပြုမှု သည် သင့်ကို သတိပြုစေသည်။ ပိုမိုတိုးမြှင့်ပြီးလျှင်၊ မျက်နှာအစိတ်အပိုင်း အသုံးပြု မှတ်ချက် သည် အဆိုပါ အစိတ်အပိုင်း အစိတ်အပိုင်း ကို အသုံးပြု ပြီး အဆိုပါ အစိတ်အပိုင်း အစိတ်အပိုင်း ကို အခြေခံ အဆိုပါ အသုံးပြု မှတ်ချက် ဖြင့် အသုံးပြု လုပ်ကိုင် လျှင် သင့်ကို ပျက်ဆီးစေနိုင်ပါ၏။
id မှ class
id အခြေအနေ သည် XHTML တွင် မပျက်ဘဲရှိသည်၊ class အခြေအနေ သို့မဟုတ် div အစိတ်အပိုင်း လည်း အခြားအခြားအခြား ရှိသည်။ သူတို့ အားလုံး သည် HTML အချိန်က အစိတ်အပိုင်းဖြစ်သည်။ id အခြေအနေ သည် အစိတ်အပိုင်းတစ် အစိတ်အပိုင်း အတွက် ကိုယ်ဝင် အမည် တစ် အမည် ချီးမြှင့်ပေးသည်။ ချီးမြှင့်ထားသော အမည်တစ် အမည် သည် သုံးစွဲခဲ့သော စာကြိုး တွင် သုံးနိုင်သည်။ (ဥပမာ၊ အသုံးပြုထားသော အချက်အလက် အတွက် id အခြေအနေ "content" ဖြစ်သော div တစ် အစိတ်အပိုင်း ရှိသော်၊ အခြား div သို့မဟုတ် အခြား အစိတ်အပိုင်းတစ် အစိတ်အပိုင်း သို့မဟုတ် အခြား အစိတ်အပိုင်း သည် အမည် အသုံးပြုနိုင်ပါ။ တတိယအခြေအနေ class အခြေအနေ သည် စာကြိုး တွင် အသုံးပြုနိုင်သည်။ ဥပမာ၊ စာကြိုး တွင် နှစ်ဆယ့်ငါး အကြောင်းလုံး သည် "small" သို့မဟုတ် "footnote" အမည်ရှိ အခြေအနေ အသုံးပြုနိုင်ပါ၏)
<div id="searchform">ရှာဖွေမှု ပုံစံ အစိတ်အပိုင်းများ အကြောင်းလုံး ဖြစ်သည်။ ဤ
စာကြိုး အစိတ်အပိုင်း တစ် အစိတ်အပိုင်း သည် သီးခြားသည်
<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>
အချက်အလက် ဖုံးဝင် သည့် အရာ အချက်အလက် ကို အသုံးပြု ရန် သင့်သည်။ နောက်ပိုင်း တွင် သင့် အချက်အလက် ဖုံးဝင် သည့် အရာ အချက်အလက် ကို အသုံးပြု ရန် သင့်သည်။
သို့သော် အချက်အလက် အား အသုံးပြု သည့် စာမျက်နှာ အား အားလုံး ကို အသုံးပြု ရန် လိုမည် မဟုတ်။ blog စာမျက်နှာ ကို အသုံးပြု သည့် အချက်အလက် အား အသုံးပြု ရန် သာ အသုံးပြု သည်။ h1, H2, နှင့် h2 ခေါင်းစဉ် နှင့် <p> ပုံနှိပ် အရာအချက်အလက် ကို အသုံးပြု နိုင်ပါသည်။ သို့သော် သင့်ကို စာမျက်နှာ အတွင်း အချက်အလက် အမျိုးမျိုး ကို ပေါင်းစပ် ရန် လိုမည် မဟုတ်၊ အသုံးပြု ရန် သင့်သည်။ အချက်အလက် အတွင်း အချက်အလက် ကို အသုံးပြု ရန် သင့်သည်။
ပေါက်ကွဲ သည့် ပုံအချက်အလက်
id အချက်အလက် ကို ပေါက်ကွဲ သည့် ပုံ ဖြင့် ဝေးစိတ်ကြည်း လို့ ဝေးစိတ်ကြည်း သင့်ပါသည်။ ကျွန်ုပ် ချောက်မှာ အချက်အလက် ကို ပုံပေါင်း တစ် စင်း ပြုလုပ် ပြီး အင်္ဂါ ပန်း သတင်း ကို သုံးစွဲ ရန် ညွှန်ပြ ရန် လိုပါသည်။ အချက်အလက် အချက်အလက် ပေါ်တွင် လည်း ပုံပေါင်း တစ် စင်း ပြုလုပ် ပြီး အဆိုပါ အချက်အလက် ကို ပြုလုပ် ရန် ညွှန်ပြ ရန် လိုပါသည်။
id ဟာ အချက်အလက် တွင် အထူး နေရာ ကို ညွှန်ပြ ရန် အသုံးပြုသည်၊ အရာ အချက်အလက် ကို အထူး ပြုလုပ် ရန် လို့ ပြောချင်မှာ၊ အရာ အချက်အလက် ကို အသုံးပြု၍ စက်လုံး ရေးသား ရန် သို့မဟုတ် ဂျပန်ဘာ ဖိုင် အရင်း တွင် အသုံးပြု ရန် လိုပါသည်။ နောက်ပိုင်း တွင် သင့် အချက်အလက် ဖုံးဝင် သည့် အရာ အချက်အလက် ကို အသုံးပြု ရန် သင့်သည်။ ပုံမှာ သင့် ကျွန်ုပ်၏ ချောက်မှာ အသုံးပြု သည့် CSS ဖိုင် အရ အချက်အလက် အမျိုးမျိုး ရှိ၍၊ အမည်မှာ searchform ဖြစ် သည့် div အရာအချက်အလက် ကို သာ အသုံးပြု ရန် ပြုလုပ် သည်။
当某一 id 属性作为一个有磁性的东西（磁铁）被用于一系列特定的 CSS 规则时，它被称为CSS选择器。有许多创建选择器的方法，不过 id 是很容易使用的，并且有多的用途。
id 的力量
id 属性不可思议地强有力。它具有以下的能力：
- 作为样式表选择器，使我们有能力创作紧凑的最小化的 XHTML。
- 作为超文本的目标锚，取代过时的 name 属性。
- 作为从基于 DOM 的脚本来定位特定元素的方法。
- 作为对象元素的名称。
- 作为一种综合用途处理 (general purpose processing) 的工具（在 W3C 的例子中，“当把数据从HTML页面中提取到数据库，或将 HTML 文档转换为其他格式等情况下，作为域识别工具来使用。”）。
id အသား အားလုံး
id အသား သည် စာသားအစားသားမှ သို့မဟုတ် အော်ဒါစကားလုံး ဖြင့် စတင်သင့်သည်；စာရင်းစာချုပ်မှ စတင်ခြင်း မဟုတ်ဘူး။ သို့သော်တာဝန်သမား W3C သုံးစွဲမှု အမှားကို ချုပ်ဆိုလိမ့်မည် မဟုတ် သော်လည်း အမော်သုံးစွဲမှုကြီးများ သည် အမှားကို ချုပ်ဆိုလိမ့်မည်။ တွင်မှ သင့်မကြောင်း အချိန်မှ ဘရော်ဇာတ် နှင့် ဘာသာအမှတ်အသား ကို အသုံးပြုကြရာ၌ ဘရော်ဇာတ် အမှတ်အသား နှင့် ဘာသာအမှတ်အသား သည် ဘရော်ဇာတ် သဘောတရား ဘာသာပြန် သဘောတရား ဖြစ်သင့်သည်။ အကြမ်းချိန်း နှင့် ပတ်ဝန်းကျင် မှ သင့်မကြောင်း ဖြစ်သည်။ ထို့ပြင် အော်ဒါစကားလုံး နှင့် ဘာသာအမှတ်အသား ကို အသုံးပြုခြင်း မှ သင့်မကြောင်း ဖြစ်သည်။ အကြမ်းချိန်း နှင့် အော်ဒါစကားလုံး ကို အသုံးပြုခြင်း မှ သင့်မကြောင်း ဖြစ်သည်။ ထို့ပြင် အော်ဒါစကားလုံး နှင့် ဘာသာအမှတ်အသား ကို အသုံးပြုခြင်း မှ သင့်မကြောင်း ဖြစ်သည်။ ထို့ပြင် အော်ဒါစကားလုံး နှင့် ဘာသာအမှတ်အသား ကို အသုံးပြုခြင်း မှ သင့်မကြောင်း ဖြစ်သည်။
စကားလုံး သတင်း နှင့် အသုံးပြုမှု
ယခုအခါ ကျွန်ုပ်တို့ အသုံးပြုမှုပိုကြီးသော XHTML အအုပ်အစု (အထူးသဖြင့် div နှင့် id) ကို ဆွေးနွေးခဲ့ပြီး ကျွန်ုပ်တို့ ဒီ စားချိန်ချက် ပထမပုံအချင်း အကြောင်းကို ကြည့်ရှုကြုံ့ဆော်ပါ။ အစပျင် ဒီ ဗဟိုဆိုင်ရာ နေရာမှ ပါဝင်သော ဘာသာသတင်း ဘာသာအမှတ်အသားကို ကျွန်ုပ်တို့ ကျော်ကြားကြပါ။
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML အစားအမျိုးအစား">HTML အစားအမျိုးအစား</a></li>
<li id="x"><a href="/x.asp" title="XML အစားအမျိုးအစား">XML အစားအမျိုးအစား</a></li>
<li id="b"><a href="/b.asp" title="ဘရော်ဇာတ်သုံးစွဲမှု">ဘရော်ဇာတ်သုံးစွဲမှု</a></li>
服务器脚本
dot net教程
多媒体教程
建站手册
我们拥有七个链接，每个链接被分配一个id来对应相应的内容：例如名为 h 的 id 对应 HTML 教程，以此类推。同时这些链接被封装于名为 menu 的列表元素内，名为 menu 的 id 标明了这个列表的职能 - 一个菜单列表，而更外围的名为 navfirst 的 div 则用来标注页面中的这个节 (section)，将之与诸如主要内容 (maincontent)、侧栏 (sidebar) 和页脚 (footer) 之类的元素区别开来。
div 和 ul 两个元素提供了真实的结构，即标明了其中内容的职能（导航栏）和它在文档中所属的位置（页面的报头位置）。相反地，传统的表格布局无法提供有关数据的任何语义信息，同时会轻松地吃掉三倍的带宽。
请注意这些标记没有包含img标签，所以不会牵扯到 width、height、background 或者 border 等等属性。同时它没有使用表格单元格，也不会涉及相关的一系列属性。它非常地干净小巧，同时提供了所有可供理解它的信息。
通过与 CSS 配合使用，这些标记向网站访问者提供了可靠的可快速加载的布局。同时也提供了为访问者创造更灵活多样的外观的可能性。并且在无 CSS 的环境中，我们的结构良好的标记依然可以毫不混乱地提供所有的内容。
目光敏锐的读者也许已经发现，a 元素中包含的文本并没有被浏览器显示出来，这也要归功于结构化标记与 CSS 的完美配合，使我们可以通过几行 CSS 规则来定义一个触发机制，当用户使用图形浏览器时，他们会看到漂亮的导航按钮，而当用户使用纯文本的阅读器时，他们也可以得到全部的文本，这样，对所有的用户来说，内容都是一样的。
并且，由于标记没有包含图像和表格单元，这个导航栏组件可以在不改变结构的情况下被站点内的任何页面所引用，同时赋予它不同的视觉效果。简而言之，通过对代码进行模块化，我们提高了代码的复用性。
