ఎక్సిఎమ్ఎల్ సంకేతాలు రెండవ భాగం: కేస్ స్టడీ: డబ్ల్యు త్రి స్కూల్ యొక్క సంకేతాలు

ఏ విధంగా కూడా, ఈ భాగాన్ని పసిగట్టకూడదు. ఈ పాఠ్యం మీ నెట్ స్క్రిప్టింగ్ నైపుణ్యాలను పెంచుతుంది, మీ వెబ్ పేజీని కండిషన్ చేసి, టాగ్లు మరియు డిజైనింగ్ మధ్య ఉన్న తేడాను మీరు చక్కగా అర్థం చేసుకోగలరు. ఈ సెక్షన్ లోని సిద్ధాంతాలు సులభంగా నేర్చుకోగలవి కానీ, వెబ్ సైట్ యాచీవ్ మరియు డిజైనింగ్, తయారీ మరియు అప్డేట్ చేయడంలో సులభతనం ను పెంచుతాయి.

ఈ భాగంలో, మీరు వివిధమైన, కట్టుకుని టాగ్లను రాయడాన్ని నేర్చుకుంటారు, దీని ద్వారా బ్యాండ్ ఫ్లో ను రెండింటికి ముందుకు తగ్గించవచ్చు, సర్వర్ భారాన్ని మరియు ప్రెషర్ ను తగ్గించడంతో పాటు వెబ్ సైట్ లోడ్ టైమ్ ను తగ్గించవచ్చు. అలాంటి ప్రదర్శన కార్యకలాపాలను తొలగించి, ఏ మేలు చేయదు అనే దుష్పదాలను మార్చడం ద్వారా మేము పైన పేర్కొన్న లక్ష్యాలను సాధించవచ్చు.

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

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

ప్రతి ఎలమెంటూ సంక్రమణాత్మకం చేయాలి లేదా?

ముంది చిప్పలో చెప్పినట్లుగా, ప్రతి ఎలమెంటూ సంక్రమణాత్మకం చేయబడవచ్చు, CSS ఒక క్రమవారంగా లేదా క్రమరహితమైన జాబితాను పూర్తి గా నేవిగేషన్ బార్రును చేయవచ్చు, దీనిలో పునరావృత బటన్ ప్రభావం కూడా ఉంటుంది. డాక్యుమెంట్ కంటెంట్ని సాధారణ ఎలమెంట్లతో మార్కర్లవచ్చు, ఇవి ప్రత్యేకమైన సంక్రమణాత్మక అట్రిబ్యూట్లతో సూచించబడతాయి, ఇవి వెబ్ సైట్ డిజైన్లో వాటి సైమానిక్ పాత్రను సూచిస్తాయి.

మేము 2006 వ సంవత్సరంలో CodeW3C.com యొక్క మొదటి చైనీస్ పరీక్షా సంస్కరణను సృష్టించాము, మేము మొదటిసారి స్టైల్షీట్ను ఉపయోగించాము మరియు డాక్యుమెంట్ను సంక్రమణాత్మకంగా చేసాము. ఈవిషయంలోని ప్రతి ఎలమెంటూ సంక్రమణాత్మకం, శీర్షికలు నుండి జాబితాలకు, మరియు పేరాలకు వరకు. మీరు 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 శిక్షణ">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教程
    • 

  • 多媒体教程
    • 

  • 建站手册
    • 
</ul>
</div>

    div, id మరియు ఇతర సహాయకలు

    సరైన విధంగా ఉపయోగించబడితే, div సంక్రమణ మార్కర్లకు మంచి సహాయకారి అవుతుంది, మరియు id ఒక ఆశ్చర్యకరమైన చిన్న సాధనం, దీని ద్వారా మీరు అత్యంత సంక్షిప్తమైన XHTML ను రాయవచ్చు, మరియు CSS ను చక్కగా ఉపయోగించవచ్చు, మరియు ప్రామాణిక డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) ద్వారా సైట్కు సంక్రమణాత్మకమైన మరియు చక్కగా నిర్మించిన ప్రవర్తనలను జోడించవచ్చు.

    W3C తన అత్యంత నూతన XHTML2 ముసాయిదాలో XHTML నిర్మాణ మోడల్లో డివ్ ను ఈ విధంగా నిర్వచించింది:

    డివ్ ఎలమెంట్ ద్వారా ఐడి, క్లాస్ మరియు రోల్ అట్రిబ్యూట్లతో సహకరించి, డాక్యుమెంట్కు అదనపు నిర్మాణాన్ని అందించే సాధారణ యంత్రాంగం. ఈ ఎలమెంట్ కంటెంట్ని ప్రదర్శన శైలిని నిర్వచించదు. అందువల్ల, రచయితలు ఈ ఎలమెంట్ను స్టైల్షీట్, xml:lang, అట్రిబ్యూట్లతో కలిసి ఉపయోగించవచ్చు, వారి సొంత అవసరాలు మరియు రుచికరమైన రీతిలో XHTML అనుకూలంగా చేయవచ్చు.

    div అనేది division యొక్క లఘువు. division అనేది విభజన, ప్రాంతం, గుంపు అని అర్థం. ఉదాహరణకు, మీరు ఒక సరిహద్దులను కలిపినప్పుడు, అప్పుడు డాక్యుమెంట్ యొక్క ఒక division అవుతుంది.

    స్ట్రక్చరల్ మెకానిజం నిర్ధారించండి

    అన్ని HTML రచయితలు పారాగళాలు మరియు పేర్లు వంటి సాధారణ మూలకాలకు తెలుసు, కానీ కొంతమంది div కు అంటే తెలియకపోతారు. W3C యొక్క వివరణలో మేము div మూలకాన్ని అర్థం చేసుకోవడానికి ముఖ్యమైన కీలకం కనుగొంటాము, "ఒక అనుకూలమైన స్ట్రక్చరల్ మెకానిజం."

    ఈ సైట్ ప్రధాన పేజీలో, మేము పాఠ్యక్రమ జాబితా జాబితాను ఒక div లో ప్రత్యక్షంగా చుట్టివేస్తాము, ఎందుకంటే పాఠ్యక్రమ జాబితా ఏ ప్రధాన పాఠకంలోనైనా భాగం కాదు. ఈ h2 మూలకం ప్రతి పాఠ్యక్రమం పేరును గుర్తిస్తుంది, మరియు ul జాబితా మూలకం ప్రతి పాఠ్యక్రమం వివరణను గుర్తిస్తుంది. కానీ ఎక్కువ మరియు ప్రత్యేక అర్థంలో, ఈ పాఠ్యక్రమ జాబితా ఒక స్ట్రక్చరేటిడ్ పాత్రను పోషిస్తుంది, అది రెండవ నేవిగేషన్ కమ్పోనెంట్. ఈ పాత్రను ప్రత్యక్షంగా ప్రస్తావించడానికి, మేము navsecond ఈ id ను వాడతాము.

    <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>
</ul>
<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>
... ...
... ...
</div>

    మీరు ఏ పేరు వాడవచ్చు. "Gladys" మరియు "orangebox" రెండింటికీ XHTML పేరు నియమాలు పరిమితం. కానీ సెమాంటిక్ లేదా మెటా-స్ట్రక్చరల్ పేర్లు ఉత్తమం (అనగా అందులోని మూలకాలు చేసే విధులను వివరించే పేర్లు).

    కాబట్టి, కస్టమర్ నీలి వర్ణాన్ని ఉపయోగించడానికి నిర్ణయించినప్పుడు, మీరు స్టేటింగ్ షేడ్స్ ను మార్చడం ప్రారంభించినా చివరి డెలివరీ నుండి ఆరు నెలల తరువాత, "Gladys" (స్త్రీ పేరు) పేరు గుర్తుంచుకోవడానికి కష్టపడుతుంటే నిజంగా మీరు విద్యార్థిని అని భావించవచ్చు, అలాగే ఇక్కడ కూడా గుర్తుంచుకోవడానికి కష్టపడుతుంటే మీరు మరింత విద్యార్థిని అని భావించవచ్చు.

    అందువల్ల, id అటువంటి "menu"、"content" లేదా "searchform" అనే పేరులను అనుసరించడం మీకు గుర్తుంచుకోవడానికి సహాయపడుతుంది. అంతేకాక, టాగులు రూపకల్పనకు సమానం కాదు; రచనాత్మకమైన పేజీ ఏ రీతిలోనైనా రూపకల్పన చేయబడవచ్చు. ఈ విధంగా చేయడం ద్వారా, సత్వరమైన CSS సంరచనను లేదా మిశ్రమంగా సంరచనను ఉపయోగించినా, మీరు ప్రస్తుతం ఉపయోగించే ప్రదర్శన టాగులను ఉపయోగించి రచనను లేదా రచనను అనుసరించే అభ్యాసాన్ని పూర్తిగా బదిలీ చేయవచ్చు.

    id మరియు class

    id అటువంటి నైట్మాన్ లేదు; class అటువంటి లేదా div కేంద్రకం కూడా. వాటిని పూర్తిగా హెచ్చరికగా ఉంచవచ్చు. id అటువంటి ఒక కేంద్రకానికి ఒక ప్రత్యేక పేరును అప్పగిస్తుంది. పేరు ఒకసారి మాత్రమే ఉపయోగించబడవచ్చు అని వాటిలో ప్రతి పేరు ఒక పేజీలో ఉపయోగించబడుతుంది. (ఉదాహరణకు, మీ పేజీలో id అటువంటి డివ్ ఉన్నట్లయితే, మరొక డివ్ లేదా ఇతర అంశాలు ఈ పేరును ఉపయోగించకూడదు. ప్రతికరంగా, class అటువంటి ఒక పేరును పునరావృతంగా ఉపయోగించవచ్చు అని వాటిలో ప్రతి పేరు ఒక పేజీలో ఉపయోగించబడుతుంది. ఉదాహరణకు, పేజీలోని ఐదు పేరాఫ్రాజులు "small" లేదా "footnote" అనే పేరులను ఉపయోగించవచ్చు). ఈ మేరకు గా గాని id మరియు class యొక్క వ్యత్యాసాన్ని తెలుపే టాగులు ఉన్నాయి:

    <div id="searchform">శోధన ఫారమ్ కాంపోనెంట్స్ ఈ విధంగా ఉంటాయి. ఈ
పేజీ యొక్క సెక్షన్ ఒకేమాత్రం ఉంటుంది.</div>

    
   <h2>ఈ రోజు యొక్క బ్లాగు పోస్ట్</h2>
   <p>బ్లాగు కంటెంట్ ఈ విధంగా ఉంటుంది.</p>
   <p>బ్లాగు కంటెంట్ యొక్క మరొక పేరాఫ్రాజు ఇక్కడ ఉంది.</p>
   <p>ఒక పేజీలో అనేక పేరాఫ్రాజులు ఉండవచ్చు అలాగే ఇక్కడ కూడా
   బ్లాగులో అనేక ప్రవేశాలు ఉండవచ్చు. బ్లాగు పేజీ ఈ విధంగా ఉపయోగించవచ్చు
   క్లాస్ "blogentry" (లేదా మరొక విధంగా బహుళ ఉనికిలు ఉంటాయి
   class).
    
</div>

    
   
    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
   బయటికి కూడా క్లాస్ "blogentry" కలిగిన పది div ఉంటాయి.</p>
</div>

    ఈ ఉదాహరణలో, searchform నామం కలిగిన div ప్రాంతాన్ని సర్చ్ ఫారమ్ కలిగిన ప్రాంతాన్ని ప్రసారం చేయడానికి ఉపయోగించబడింది, div class="blogentry" అనేది blog లోని ప్రతి వ్యాసం ప్రవేశాన్ని ప్రసారం చేయడానికి ఉపయోగించబడింది. ప్రాంతంలో ఒక మాత్రమే సర్చ్ ఫారమ్ ఉంది కాబట్టి, మేము ఈ ఏక కాంపోనెంట్ ను గుర్తించడానికి id ఉపయోగించాము. కానీ blog లో అనేక ప్రవేశాలు ఉన్నాయి కాబట్టి, class అటీవు ఉపయోగించబడింది. అలాగే, న్యూస్ సైట్లు సాధారణంగా అనేక డివ్స్ కలిగి ఉంటాయి, ఈ డివ్స్ క్లాస్ ను "newsitem" లేదా ఇతర పేరులు పేర్కొనవచ్చు.

    అన్ని సైట్లు div అవసరం లేవు. blog సైట్లు కేవలం h1, H2, మరియు h2 శీర్షికలు మరియు <p> ప్రారంభం ఉపయోగించవచ్చు. న్యూస్ సైట్లు కూడా అలాగే. మేము ఇక్కడ blogentry క్లాస్ కలిగిన div ప్రదర్శించడం వల్ల మీరు సైట్లో div లను పూర్తిగా ఉపయోగించకుండా ఉండండి అని ప్రోత్సహించడం కాదు, మరియు మాత్రమే ఈ సూత్రాన్ని చూపిస్తున్నాము: ఒకే HTML పత్రంలో బహుళ క్లాస్లను ఉపయోగించండి, కానీ id ను మాత్రమే ఒకసారి ఉపయోగించండి.

    స్టిక్ టిక్స్ థియోరీ

    id అటీవు స్టిక్ టిక్స్ తో పోలిస్తే చూడండి ఆలోచించడం మంచిది. నేను మిఠాయిలు కొనాలి అని గుర్తుంచుకోవడానికి ఫ్రిజ్లో ఒక స్టిక్ టిక్స్ పెట్టినాను, ఫోన్లో ఒక స్టిక్ టిక్స్ పెట్టినాను, ఒక పాటు పామను చెల్లించవలసిన కస్టమర్ కు ఫోన్ చేయాలి అని గుర్తుంచుకోవడానికి. ఇంకా ఒక మరికొన్ని స్టిక్ టిక్స్ బుక్ క్లాచ్ మీద ఉన్నాయి, ఈ స్టిక్ టిక్స్ మీరు ఈ నెల 15వ తేదీ ముందు చెల్లించవలసిన బిల్లులను గుర్తుంచుకోవడానికి ఉపయోగిస్తారు.

    id పత్రంలో ప్రత్యేక ప్రాంతాలను గుర్తించడానికి మార్గదర్శకంగా ఉపయోగిస్తారు, మీరు ఏ ప్రాంతాన్ని ప్రత్యేక ప్రాసెస్ చేయాలో గుర్తుంచుకోవడానికి ఉపయోగిస్తారు. ఈ విషయంలో, id అటీవు స్టిక్ టిక్స్ తో సమానం. ప్రత్యేక ప్రాసెస్ అనే పదాన్ని ఉపయోగించడానికి, మీరు స్టైల్ షేర్లో కొన్ని నియమాలు రాయాలి లేదా JavaScript ఫైల్లో కొన్ని కోడ్స్ జోడించాలి. ఉదాహరణకు, మీ CSS ఫైల్లో కొన్ని ప్రత్యేక నియమాలు ఉన్నాయి, ఈ నియమాలు మాత్రమే searchform నామం కలిగిన div లోని అంశాలకు వర్తిస్తాయి.

    కొన్ని id అటారిట్యుబల్ ఒక ప్రత్యేక క్లాస్ స్టైల్ రుల్స్ సరళంగా ఉపయోగించబడుతుంది మరియు అనేకసెలెక్టర్స్ సృష్టించడంవిధానం, అయితే id సులభంగా ఉపయోగించబడగలదు మరియు ఎక్కువ వినియోగాలు ఉన్నాయి.

    id యొక్క శక్తి

    id అటారిట్యుబల్ అనుకూలంగా చాలా బలవంతం. ఇది క్రింది సామర్ధ్యాలను కలిగి ఉంటుంది:

    • స్టైల్ షీట్ సెలెక్టర్స్ గా, మాకు కంప్యక్ట్ మరియు మినిమాలైజ్డ్ XHTML సృష్టించడానికి సామర్ధ్యం కలిగిస్తుంది.
    • పాత name అంశాన్ని పునఃస్థాపించడానికి హైపర్ టెక్స్ట్ లింక్ గా
    • DOM ఆధారిత స్క్రిప్ట్స్ నుండి ప్రత్యేక ఎలమెంట్స్ ను గుర్తించడానికి మార్గం
    • ఆబ్జెక్ట్ ఎలమెంట్స్ పేర్లు గా
    • విస్తృత వినియోగం పరిపాలన ఉపకరణం (W3C ఉదాహరణలో, "డేటాను HTML పేజీ నుండి డేటాబేస్ కు పంపడం లేదా HTML డాక్యుమెంట్ను ఇతర ఫార్మాట్లకు మార్చడం వంటి సందర్భాల్లో, రంగం గుర్తింపు ఉపకరణం గా వాడబడుతుంది." అని పరిభాషించబడింది).

    id నియమాలు

    id విలువలు అక్షరం లేదా అండర్ స్కోర్ తో మొదలవుతాయి; అంకా సంఖ్యలతో మొదలవుతారు కాదు. ఇకనుండి W3C పరిశీలన ఈ తప్పును పట్టుకోదానికి సిద్ధం కాదు, కానీ XML పరిశీలకం అది పట్టుకుంటుంది. మరియు మీరు ఫారమ్స్ లో JavaScript తో id ను వాడితే, id పేరు మరియు విలువలు క్రమం తప్పక ఉండాలి. అంతేకాక, క్లాస్ లేదా id పేర్లలో అండర్ స్కోర్ వాడకం మంచి పద్ధతి కాదు, ఎందుకంటే CSS2.0 (మరియు కొన్ని బ్రౌజర్స్) లో పరిమితులు ఉన్నాయి.

    సెమాంటిక్ మార్కర్స్ మరియు అందుబాటుతాన్ని ఉంటుంది

    ఇప్పుడు మేము విస్తృత వినియోగం ఉన్న ఎక్సిహ్ట్ఎమ్ ఎలమెంట్స్ ను చర్చించాము (ప్రత్యేకించి 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教程
    • 

  • 多媒体教程
    • 

  • 建站手册
    • 
</ul>
</div>

    మేము ఏడు లింకులను కలిగి ఉన్నాము, ప్రతి లింకుకు ఒక id ను ప్రదర్శించడం ద్వారా అనుబంధ కంటెంట్ను అనుసరిస్తాము: ఉదాహరణకు, h అనే id హెచ్చి ట్యూటోరియల్ను అనుసరిస్తుంది. ఈ లింకులు menu అనే జాబితా మూలకంలో ఆవరణబడి ఉన్నాయి, menu అనే id ఈ జాబితా యొక్క పనిని సూచిస్తుంది - ఒక మెనూ జాబితా, మరియు ముఖ్యమైన ప్రాంతాన్ని సూచించడానికి ఉపయోగించే navfirst అనే div ఉంది, ఇది ముఖ్యమైన ప్రాంతాన్ని ముఖ్యమైన ప్రాంతం (maincontent), సైడ్బార్ మరియు ఫూటర్ వంటి అనేక అంశాలను వేరు చేస్తుంది.

    div మరియు ul రెండు మూలకాలు వాస్తవమైన స్ట్రక్చర్ను అందిస్తాయి, అనేక అంశాలను సూచిస్తాయి (నేవిగేషన్ బార్), మరియు దాని ప్రాంతాన్ని సూచిస్తాయి (పేజీ హెడర్ స్థానం). ప్రత్యామ్నాయంగా, పరంపరాత్మక టేబుల్ లేఆఉట్ లో కొన్ని అంశాలను సూచించడానికి సాధ్యం కాదు, మరియు మూడు రెట్ల బ్యాండ్విడ్తును వీలు చేస్తుంది.

    ఈ మార్కర్స్ లో img టాగ్ లు లేవు, కాబట్టి width, height, background లేదా border వంటి అనేక అంశాలలో పాల్గొనబడలేదు. అలాగే, టేబల్ సెల్స్ ను ఉపయోగించలేదు, అందువల్ల అనేక అంశాలలో పాల్గొనబడలేదు. ఇది చాలా శుభ్రమైనది మరియు దానిని అర్థం చేసే సమాచారం అందిస్తుంది.

    CSS తో సహకారం ద్వారా, ఈ మార్కర్స్ వెబ్సైట్ సందర్శకులకు వేగవంతమైన, విశ్వసనీయమైన సంరచనను అందిస్తాయి. అలాగే, సందర్శకులకు మరింత వివిధమైన మరియు సులభమైన దృశ్యాన్ని సృష్టించడానికి అవకాశం కల్పిస్తాయి. మరియు CSS లేని పరిస్థితిలో, మా చక్కగా స్ట్రక్చరైజ్డ్ మార్కర్స్ అన్ని కంటెంట్ను సరళంగా అందిస్తాయి.

    దృష్టివంతమైన పఠకులు మనగలిగినప్పుడు, a మూలకంలో ఉన్న పదబంధం బ్రౌజర్ ద్వారా ప్రదర్శించబడలేదు, ఇది కూడా స్ట్రక్చరైజ్డ్ మార్కప్ మరియు CSS యొక్క పరిపూర్ణ సహకారం కారణంగా ఉంది, దీని ద్వారా మేము కొన్ని క్రమానుసరణల ద్వారా ఒక ట్రిగ్గర్ మెకానిజంను నిర్వచించవచ్చు. ఉపయోగదారులు గ్రాఫిక్ బ్రౌజర్ ఉపయోగించినప్పుడు, వారు అందమైన నేవిగేషన్ బటన్లను చూడగలరు, మరియు ఉపయోగదారులు పరిమిత పదబంధం రీడర్లను ఉపయోగించినప్పుడు, వారు అన్ని పదబంధాన్ని పొందవచ్చు. ఈ విధంగా, అన్ని ఉపయోగదారులకు కంటెంట్ అదే ఉంటుంది.

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