Makusanyiko ya XHTML ya Pili: Mafaa ya Kuhakiki ya W3school

Kama hayo, haungatengwe kipindi hiki. Kureadika kwenye kitabu hiki kinakusaidia kufikiria uwezo wako, kumwiza tovuti inayotumiwa kwa kina na kumwambia uwezo wako kuelewa kwa kina na uchora. Maadili ya kitabu hiki ni kuelewa kwa kina, lakini inaweza kumwambia uwezo wa tovuti kwa kina, kwa uwanja wa kuzengewa, kuzengewa na kurekebisha tovuti.

Kwenye kipindi hiki, unatutafutia kuhakikisha kuhakika kufungua kina kwa uwezo wa kumwenda kwenye kipimo cha kina 50% kuzipunguza mawasiliano ya kina, kuzipunguza mawasiliano ya kina na kuzipunguza muda wa kumwinda tovuti. Kwa kumkisia vifaa vya muhimu na kumfutia habari za kina hazina mafanikio, tunaweza kumwambia maadili hayo.

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

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

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

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

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

<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教程">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 na wengine wanaosaidia

    Ikiwa inatumika kwa uharibifu, div inaweza kuwa msaidizi wa kufikia kwa haribifu, na id inaonekana kama kina kikuu, inakusaidia kusoma kwa uharibifu kwa haribifu na kusaidia kufikia kwa haribifu kwa CSS, na kusaidia kufikia kwa haribifu kwa standardi ya modeli ya kufikia kwa haribifu (DOM) kwa kufikia kwa haribifu kwa uharibifu wa kufikia kwa haribifu.

    W3C katika makala yao ya kufikia kwa haraka ya XHTML2, inaeleza div kama:

    Div ina element, inakusanya kwa id, class na role ya sababu, inafanya inabuni kufanya maeneo ya kuzingatia kusaidia katika kufanya ujumbe wa hali. Hii inaonekana kwa sababu ya uharibifu wa hali ya kufikia kwenye maudhui. Kwa hivyo, mchoraji anaweza kutumia hii ina elementi na sheet ya mtindo, xml:lang, sababu na wengine, kufikia uharibifu wa kufikia maadili yao na afya yao.

    Div ni rafiki wa division. Division ina maana ya kusababisha, eneo, kikundi. Kwa mfano, wakati unaingiza kikabla cha viungo kwa pamoja, inafanyika division ya mafanikio ya wasiaja.

    Kisakafu cha ujenzi wa muundo

    Wote waandiki wa HTML wanaonekana kwa muonekano wa kawaida kama mabaki na kichwa, lakini wengi wanaonesha div. Kwenye ujumbe wa W3C tunaweza kufikia nia ya kilele ya elementi ya div, "kisakafu cha ujenzi wa muundo wa kawaida."

    Kwenye siku ya kwanza ya tovuti hii, tunahifadhi orodha ya mafunzo katika div, kwa sababu orodha ya mafunzo haipata muonekano kama sehemu ya uandishi yoyote. Kwenye hii, elementi ya h2 inadala kwa jina kwa kila mafunzo, na elementi ya ulistawi inadala kwa orodha ya mafunzo. Kama uongozi, orodha hii ya mafunzo inadumisha muundo, inaonekana kama komponendi ya nafasi ya pili. Kuongea kwa uangalifu hii, tumetumia idadi ya navsecond kumtaarifu div hii.

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

<h2>Mafunzo ya XML</h2>
<ul>
<li><a href="/xml/index.asp" title="Mafunzo ya XML">XML</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL Lugha">XSL</a></li>
... ...
... ...

    Unaweza kutumia jina yoyote. "Gladys" na "orangebox" ni kufikia kwa kawaida ya ujenzi wa XHTML. Kwa hivyo, jina la maana (semantic) au ujenzi wa meta-structural ni bora zaidi (inaonekana kuwaonekana kufikia kazi ya uhusiano wote).

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

    因此，将 id 标注为 "menu"、"content" 或者 "searchform"会帮助你回忆。进一步讲，标记不等同于设计，结构良好的的页面可以被格式化为你希望的任何样子。这样做的结果是，无论你使用纯粹 CSS 布局或者混合布局，你都会彻底改掉使用表现标记进行思考和创作的习惯。

    id Vs. class

    id 属性对于 XHTML 并不新鲜；class 属性或者 div 元素也一样。它们都可以回溯到 HTML 时代。id 属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。（例如，假如你的页面包含 id 为 content 的 div，那么另外一个 div 或者其他别的元素都不能使用这个名字。相反地，class 属性可以被一遍又一遍地使用在页面中（例如，页面中的五个段落都可以使用名为 "small" 或者"footnote" 的 class 名称）。下面的标记将有助于阐明 id 和 class 的差异：

    Search form components go here. This
section of the page is unique.
    

    
   
    Today's blog post
    
   
    Blog content goes here.
    
   <p>Hii ni mawili wa kichwa cha blog content.</p>
   <p>Wakati kuna madeni mengi kwenye page, hivyo yanaendelea
   ina ukurwa wa madeni katika blog. Page ya blog inaweza kutumia
   madai ya kwa kila kiume "blogentry" (au kwa kila kiume kingine)
   class).
    

    

    
   
    Yesterday's blog post
    
   
    In fact, here we are inside another div of class
   "blogentry."
    
   
    They reproduce like rabbits.
    
   
    If there are ten blog posts on this page, there might
   be ten divs of class "blogentry" as well.

    在这个例子中，名为 searchform 的 div 被用来封装包含搜索表单的页面区域，而 div class="blogentry" 则用来封装 blog 中的每个文章入口。在页面中只有一个搜索表单，所以我们选择 id 标注这个唯一的组件。但是 blog 则拥有许多的（文章）入口，所以 class 属性被应用于这种情况。同样地，新闻站点通常拥有多个 div，这些 div 的 class 可以命名为 "newsitem" 或者别的什么。

    然而不是所有的站点都需要 div。blog 站点可以仅仅使用 h1, H2, 和 h2 标题和

    段落，新闻站点也一样。我们在这里展示 class 为 blogentry 的 div，并不是鼓励你在站点中塞满 div，而仅仅是为了向你展示这个原则：在同一个 HTML 文档中，使用多次 class，但只能使用一次 id。

    粘性贴纸理论

    把 id 属性比作粘性贴纸来进行思考应该是有帮助的。我会在冰箱上拍一张贴纸来提醒自己去买牛奶，电话上面也会贴一张，提醒我给一位逾期缴纳的客户打电话。还有一个，被贴在账本夹上面，来提醒我这个月 15 号之前必须缴纳的账单。

    id同样会标注文档中的特殊区域，以便提醒你哪个区域需要特殊的处理，在这点上，id属性与粘性贴纸是相似的。为了实现所谓的特殊处理，你需要使用这个特殊的id在样式表中编写若干规则，或者在JavaScript文件中添加几行代码。比方说，你的CSS文件中有一些特定的规则，这些规则只应用于id名为searchform的div内的元素。

    当某一 id 属性作为一个有磁性的东西（磁铁）被用于一系列特定的 CSS 规则时，它被称为CSS选择器。有许多创建选择器的方法，不过 id 是很容易使用的，并且有多的用途。

    id 的力量

    id 属性不可思议地强有力。它具有以下的能力：

    Masharti ya id

    Idadi ya id lazima iwe na herufi au ujaribio kuanzia; haingekuwa na namba kuanzia. Inasikitika, W3C hakutafikia kila kosa hilo, lakini kwa uwanja wa upeuzi wa XML, wahakikisha kusikitika. Kwa uwanja wa uwanja, kama unaamua kutumia id na JavaScript katika formu, jina na thamani ya id lazima yafikie katika kifaa cha JavaScript. Hali ya kumaliza na herufi hataru ni hataru, hasa herufi hataru, hayawezi kufikia. Pia, kuitumia ujaribio kwenye class au id ni huzuni, kwa sababu ya mitezo ya CSS2.0 (na kwa uwanja wa kawaida za kiburi cha kawaida).

    Tafsiri na Uwezo wa Kuwa Hataru

    Sikuwa tumekuwa nimekuwa nimekuwa nimekushariki vitu vyenye vya XHTML (kwa ujumbe div na id), tukichukua mtaarifu kuhusu siku ya tovuti yetu. Kwanza, tukionyesha kwa menu ambalo imewa kwenye eneo la utawala:

    <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 两个元素提供了真实的结构，即标明了其中内容的职能（导航栏）和它在文档中所属的位置（页面的报头位置）。相反地，传统的表格布局无法提供有关数据的任何语义信息，同时会轻松地吃掉三倍的带宽。

    Tafadhali, matukio haya hayajakusababisha taga ya img, kwa sababu hayafanyi kusababisha hatua za kina ya muundo kama width, height, background au border na kama hayafanyi kusababisha hatua za kina ya muundo kama kina ya muundo ya huzina. Ina uwanja mkubwa na ina uwanja mdogo, na ina maudhui yote ambayo inafaa kufahamika.

    Kwa kufanya kwa CSS, matukio haya inatuma wakati wa tovuti kwa kina ya muundo ambao inafungua kwa kawaida na inafaa. Pia inafaa kufanya kwamba wakati wa tovuti waweze kufanya kina ya muundo ambalo inafaa kwa kawaida. Kwa sababu ya hii, kwa kina ya muundo ya huzina, hatuwezi kumwambia maudhui yote kwa sababu ya kina ya muundo ya huzina inafaa kwa kawaida.

    Mwana wa kuelewa anaweza kumwona, matukio ya a yenye uharibifu haikufikii huzina kwa sababu ya kufanana kwa hatua ya uandishi wa muundo na CSS, ambao inafanya kwamba tukifanya hatua mbili ya CSS tukweza kufafanua kifungo cha kufanyia kina, kama mtumiaji anastaragha kufungua kina ya picha, wataona vifungo vya kifungo vya ngumu, kama mtumiaji anastaragha kufungua kina ya maandiko wa kawaida, wataona maandiko yote, kwa sababu hiyo, kwa watu wote, mawasiliano yana uangalifu wote.

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