جانب آخر مهم لفصل الهيكل والتمثيل هو استخدام الترميز الدلالي لإنشاء محتوى المستند. يعني وجود عنصر XHTML أن جزء المحتوى الموسومة له معنى منظم المقابل ، ولا يوجد سبب لاستخدام علامات أخرى. بمعنى آخر ، لا تدع CSS تجعل عنصر HTML واحد يبدو وكأنه عنصر HTML آخر ، مثل استخدام <viv> بدلاً من <p> عنوان العلامة.
بادئ ذي بدء ، يتعلق الأمر بالفرق بين الدلالات والأنماط الافتراضية. النمط الافتراضي هو التعبير عن بعض العلامات الشائعة الاستخدام التي تم تعيينها بواسطة المتصفح. أنا شخصياً أعتقد أن الغرض الرئيسي منه هو السماح للجميع بفهم استخدامات ووظائف العلامات والسمات بشكل حدسي. من الواضح أن سلسلة HX تشبه إلى حد كبير العنوان لأنها ذات أحجام خطوط جريئة وأكبر. <strong> ، <em> يستخدم لتمييزه عن الكلمات الأخرى ويلعب دور التركيز. أما بالنسبة للقائمة والجدول ، فمن الواضح أن تخبرك بما يفعلونه.
ثانياً ، أهم شيء في صفحات الويب الدلالية هو أنها ودية لمحركات البحث. ببنية جيدة ودلالات جيدة ، من السهل بطبيعة الحال أن يتم الزحف من قبل محركات البحث ، ويمكن ترويج موقع الويب الخاص بك أن يوفر الكثير من الجهد.
تم شرح الدلالات والاستخدامات المحددة في مرجع علامة XHTML1.0. سيتم استكمال بعض العلامات والسمات التي يسهل نسيانها أو الخلط بينها.
<hx><h1> ، <h2> ، <h3> ، <h4> ، <h5> ، <h6> ، يتم استخدامها كعناوين ويتم تقليلها وفقًا للأهمية. <H1> هو أعلى مستوى.
على سبيل المثال:
نسخ المحتوى إلى الحافظة<h1>文档标题</h1> <h2>次级标题</h2>
لا تستخدم<div class = title> عنوان المستند </div> ، أو <span class = title> عنوان المستند </span>. من الواضح أن محركات البحث لن تعتبرها عنوانًا للأخير.
<p>علامات الفقرة ، مع العلم <p> كفقرات ، لن تستخدم <br/> لكسر الخطوط ، ولا تحتاج إلى التمييز بين الفقرات والفقرات. سوف يلف النص في <p> </p> تلقائيًا ، وتأثير التفاف أفضل من <br>. يمكن أيضًا التحكم في الفجوات بين الفقرات باستخدام CSS ، مما يجعل من السهل وواضح التمييز بين الفقرات من الفقرات. سيكون مثاليًا إذا تمكنت من تحديد تباعد السفر بسهولة ثم تحديد تأثيرات غرق في المركز الأول باستخدام ارتفاع الخط.
على سبيل المثال: نسخ المحتوى إلى الحافظة
<p>蓝色理想www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。</p>
<p> لسنوات عديدة ، تم إثراء محتوى Blue Ideal بشكل مستمر ، وقد تم تسليط الضوء عليه من قبل بعض المواقع المحلية المعروفة والوسائط التقليدية. تم جمعها بواسطة مواقع البحث الرئيسية مثل Google و Baidu و Yahoo و Sohu و Sina و Excite. احتلت المرتبة الأولى في البحث عن تصميم موقع الويب وتطوير الكلمات الرئيسية الصينية المبسطة بين محركات البحث الرئيسية الثلاث في Google و Baidu و Yahoo. الآن تطورت Blue Ideal إلى واحدة من أكثر المواقع المهنية نفوذاً في تصميم موقع الويب وتطويرها في الصين. </p> <ul> ، <ol> ، <li>
<ul> القوائم غير المرتبة شائعة جدًا وتستخدم على نطاق واسع. <ol> القوائم غير المطلوبة هي أيضا شائعة الاستخدام. أثناء عملية توحيد الويب ، يتم استخدام <ul> أيضًا المزيد من قضبان التنقل. في الأصل ، قضبان التنقل هي قائمة ، وهي صحيحة تمامًا للقيام بذلك. عندما لا يدعم متصفحك CSS ، فإن رابط التنقل لا يزال جيدًا جدًا ، لكنه أقل جمالًا.
على سبيل المثال: نسخ المحتوى إلى الحافظة
<ul><li> المشروع 1 </li>
<li> المشروع 2 </li>
<li> المشروع 3 </li>
</ul> نسخ المحتوى إلى الحافظة
<ol><li> الفصل 1 </li>
<li> الفصل 2 </li>
<li> الفصل 3 </li>
</ol> <dl> ، <dt> ، <dd>
DL هي قائمة التعريف. على سبيل المثال ، يمكن استخدام شرح وتعريف الكلمات في القاموس في هذه القائمة.
على سبيل المثال: نسخ المحتوى إلى الحافظة
<dl><dt> الكلب </dt>
<dd> ثدييات آكلة اللحوم للعائلة Canidae. </dd>
</gl> نسخ المحتوى إلى الحافظة
<dl><dt> شاطئ شنغهاي </dt>
<dd> هذا "Shanghai Bund" ، الذي تم تصويره في عام 1980 ، هو الدراما الأكثر نجاحًا والكلاسيكية في تاريخ تلفزيون هونغ كونغ.
بعد بثه في هونغ كونغ في ذلك العام ، تسبب في إحساس كبير. </dd>
<dt> Chow yun-fat </dt>
<dd> مثل كل نجوم السينما الرائعين ، أكد تشاو يون فال عصرًا ، وهو عصر ذهبي لأفلام هونغ كونغ.
معاطف الرياح والنظارات الشمسية والبنادق المزدوجة بدم بارد وابتسامات مشمسة جميعها مغلقة في الفيلم. عندما ننظر إلى الوراء ، تم نقش FA GE كإحداثيات للعصر. </dd>
</dl> <site> ، cite ، <q> ، <blockquote>
غالبًا ما تستخدم المنتديات والمدونات عروض أسعار من الآخرين ، باستخدام <Q> لوضع علامات اقتباس قصيرة في خط واحد. سيتعرف متصفح الويب تلقائيًا على المحتوى بين <Q>. لسوء الحظ ، لا يمكن أن يتعرف ، وأحيانًا يمكن أن يتسبب <Q> في بعض مشكلات إمكانية الوصول. لهذا السبب ، يوصي بعض الناس بعدم استخدام <Q> وإدراج العلامات المرجعية يدويًا. أضف سطرًا مرجعيًا واحدًا إلى <span> يحتوي على الفئة المناسبة ، ثم يمكنك استخدام CSS لتصميم المرجع ، ولكن هذا ليس له معنى دلالي. يمكنك قراءة وجهات نظر علامة Q (http://diveintomark.org/archives/2002/05/04/the_q_tag) حول التعامل مع <Q> المشكلات ذات الصلة التي كتبها Mark Pilgrim.
للحصول على عروض أسعار طويلة من فقرات واحدة أو عدة فقرات ، يجب استخدام <Lockquote>. يمكن استخدام CSS لتحديد نمط المرجع. لاحظ أنه لا يمكن وضع مقال مباشرة في <Lockquote> ، ويجب أيضًا تضمين المحتوى المقتبس في عنصر ، عادة <p>. يمكن استخدام Cite Attribute مع <Q> أو <Nockquote> لتوفير عنوان مصدر المحتوى المشار إليه. تجدر الإشارة إلى أنه إذا كنت تستخدم <span> بدلاً من المحتوى المرجعي <Q> ، فلا يمكنك استخدام سمة Cite.
على سبيل المثال: نسخ المحتوى إلى الحافظة
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman. تأليف جيفري زيلدمان.<p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p> انسخ المحتوى إلى الحافظة<p>The W3C says that <q cite=http://www.w3.org/TR/REC-html40/struct/text.html#h-9.2.1> عرض عناصر العبارة
نسخ المحتوى إلى الحافظة
<blockquote cite=http://www.w3cn.org/><p> معظمنا لديه تجربة عميقة. كلما تمت ترقية إصدار المتصفح السائد ، قد يصبح الموقع الذي قمنا ببنائه قديمًا.
نحن بحاجة إلى ترقية أو إعادة بناء الموقع. على سبيل المثال ، حرب المتصفح النموذجية من 1996 إلى 1999 ،
لكي تكون متوافقة مع Netscape و IE ، كان على موقع الويب أن يكتب رمزًا مختلفًا لهذين المتصفحين. بصورة مماثلة،
عندما تظهر تقنية الشبكة الجديدة والأجهزة التفاعلية ، نحتاج أيضًا إلى إنشاء إصدار جديد لدعم هذه التكنولوجيا الجديدة أو الجهاز الجديد.
على سبيل المثال ، تقنية WAP التي تدعم الوصول إلى الإنترنت عبر الهاتف المحمول. هناك أسئلة مماثلة لا حصر لها: رمز الموقع متضخم ومعقد ، وهو ما يهدر الكثير من النطاق الترددي لدينا ؛
المؤثرات الخاصة DHTML لمتصفح معين تمنع بعض العملاء المحتملين ؛ لا يمكن للأشخاص الذين يصعب استخدامه ، لا يمكن للأشخاص المعوقين تصفح المواقع ، إلخ.
هذه دورة مفرغة ونفايات ضخمة. </p>
</blockquote> <em> ، <strong>
<em> يستخدم للتركيز ، <strong> يستخدم للتأكيد. تستخدم معظم المتصفحات مائل لعرض المحتوى المميز والجرأة لعرض المحتوى المميز. ومع ذلك ، هذا ليس ضروريا. إذا كان الأمر كذلك لتحديد كيفية عرض التركيز ، فإن أفضل طريقة هي استخدام CSS لتحديد أدائها. لا تستخدم التركيز عندما يكون كل ما تريده هو المؤثرات البصرية. وإذا كنت ترغب في التأكيد ولكن لا تزال تشعر أن الجريئة أو المائل ليست جيدة في التأثير البصري ، وخاصة المائل للصينيين ، فيمكنك تحديد بعض الأساليب الأخرى اللذيذة لتحقيق تأثير التركيز.
على سبيل المثال: نسخ المحتوى إلى الحافظة
<p><em>强调</em> 的文本通常用斜体显示，ومع ذلك ، عادة ما تظهر النصوص ذات التركيز الخاص بالخط العريض. </p> <table> ، <td> ، <th> ، <caption> ، ملخص
لا ينبغي وضع الجداول في XHTML. ومع ذلك ، إذا كان من الممكن تحديد بيانات القائمة ، فيجب استخدام جدول. <Th> هو عنوان الجدول ، ملخص السمة هو الملخص ، العلامة <aption> هي وصف الرأس ، العلامة <Thead> هي الرأس ، العلامة <tbody> هي المحتوى الرئيسي للجدول ، وعلامة <Tfoot> هي نهاية الجدول.
يمكن أيضًا استخدامه لاستبدال سمة الرؤوس وعلامات العلامات التي تحتوي على معلومات الرأس ، حيث يكون محتوى كل قيمة كما يلي:
يشير الصف إلى الخلية الحالية ، مما يوفر معلومات الرأس ذات الصلة للصفوف التي تحتوي على الخلية الحالية.
يشير COL إلى الخلية الحالية ، مما يوفر معلومات الرأس المقابلة للأعمدة المحددة وفقًا للخلية الحالية.
تشير Rowgroup إلى الخلية الحالية ، مما يوفر معلومات الرأس ذات الصلة لمجموعات الصف المتبقية التي تحتوي على الخلية الحالية.
يشير Colgroup إلى الخلية الحالية ، مما يوفر معلومات الرأس المقابلة لمجموعات الأعمدة المتبقية المحددة بناءً على الخلية الحالية.
يستخدم ABBR لتحديد اسم الاختصار في خلية الرأس. إذا لم يتم تعريف هذه الخاصية ، يتم حذف محتوى الخلية الافتراضية.
على سبيل المثال: نسخ المحتوى إلى الحافظة
<table id=mytable cellspacing=0 summary=The technical specifications of the Apple PowerMac G5 series><Caption> الجدول 1: مواصفات Power Mac G5 Tech </caption>
<tr>
<Th Scope = Col Abbr = Configurations Class = nobg> التكوينات </th>
<th scope = col abbr = dual 1.8> dual 1.8ghz </th>
<th scope = col abbr = dual 2> dual 2ghz </h>
<th scope = col abbr = dual 2.5> dual 2.5ghz </th>
</r>
<tr>
<th scope = row abbr = model class = spec> model </h>
<td> m9454ll/a </td>
<td> m9455ll/a </td>
<td> m9457ll/a </td>
</r>
<tr>
<th scope = row abbr = g5 class = specalt> g5 Processor </h>
<td class = alt> dual 1.8ghz powerpc g5 </td>
<td class = alt> dual 2ghz powerpc g5 </td>
<td class = alt> dual 2.5ghz powerpc g5 </td>
</r>
<tr>
<th scope = row abbr = frontside bus class = spec> Frontside Bus </h>
<td> 900MHz لكل معالج </td>
<td> 1 جيجا هرتز لكل معالج </td>
<td> 1.25 جيجا هرتز لكل معالج </td>
</r>
<tr>
<th scope = row abbr = l2 cache class = specalt> level2 cache </h>
<td class = alt> 512k لكل معالج </td>
<td class = alt> 512k لكل معالج </td>
<td class = alt> 512k لكل معالج </td>
</r>
</table> عرض التأثير: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm
<DFN> نسخ المحتوى إلى الحافظة<p><dfn title=Microsoft web browser>Internet Explorer</dfn> is the most popular browser used underwater.</p> <ins> ، <del>إذا كنت تعرف Del ، فلا تستخدم <S> كخطوط بعد الآن. من الواضح أن استخدام DEL أكثر دلالية. بالإضافة إلى ذلك ، يأتي DEL أيضًا مع Cite و DateTime للإشارة إلى سبب الحذف ووقت الحذف. INS تعني الإدراج ، وهناك مثل هذه السمات.
على سبيل المثال: نسخ المحتوى إلى الحافظة
<p>It really was <ins cite=rarara.html datetime=20031024>very</ins> good.</p> <code>وهذا يعني رمز الكمبيوتر. النمط الافتراضي هو الخط. غالبًا ما يتم مواجهته في المنتديات والمدونات الفنية.
على سبيل المثال: نسخ المحتوى إلى الحافظة
<code>p{margin:2px 0;}</code> <abbr> ، <اختصار>تمثل علامة <ABBR> الاختصار على صفحة الويب ، وعلامة <eradlay> عبارة عن اختصار. (ملاحظة: هنا نفصل الاختصار والاختصار. نطاق الاختصار أكبر من الاختصار ، وذلك لاتخاذ اختصار للحرف الأول
اكتب باستخدام <Hadlow> علامة) المتصفحات تحت Windows IE6.0 لا تدعم علامات <abbr>. في IE ، يمكنك تطبيق CSS على <اختصار> ولكن ليس للعلامات <abbr>.
ستعرض IE موجهًا لسمة العنوان لعلامة <Carmow> ، ولكنها ستتجاهل علامة <abbr>.
انظر: http://www.w3cn.org/article/translate/2005/115.html
على سبيل المثال: نسخ المحتوى إلى الحافظة
<abbr title=Cascading Style Sheets>CSS</abbr> نسخ المحتوى إلى الحافظة<acronym title=Cascading Style Sheets>CSS</acronym > alt attributيتم استخدام سمة العنوان لتوفير تعليمات إضافية للعناصر يمكن استخدام سمات العنوان على جميع العلامات باستثناء القاعدة ، BaseFont ، Head ، HTML ، META ، Param ، البرنامج النصي والعنوان. لكنها ليست ضرورية.
خاصية ALT هي وكيل مستخدم (UA) لا يمكنه عرض الصور أو النماذج أو التطبيقات ، وتحدد نصًا بديلاً. يتم تحديد لغة النص البديل بواسطة سمة Lang. نسخ المحتوى إلى الحافظة
<img src=/img/common/logo.gif width=90 height=27 alt=bluediea.com> نسخ المحتوى إلى الحافظة<a href=http://www.jluvip.com/blog/article.asp?id=260 title=js获取单选按钮的数据>js获取单选按钮的数据</a> المراجع:النمط الافتراضي:
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/tr/css21/sample.html
دلالات:
http://www.456bereastreet.com/lab/developing_with_web_standards/zh
http://www.456bereastreet.com/lab/developing_with_web_standards
http://www.w3cn.org/article/translate/2005/114.html
http://www.w3cn.org/article/translate/2005/114.html
http://www.junchenwu.com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.w3.org/tr/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/
رابط الموارد:علامات سيئة:
http://www.htmldog.com/guides/htmlintermediate/badtags/
علامة Q
http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML ، XHTML ، دلالات ومستقبل الويب
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html