อีกแง่มุมที่สำคัญของการแยกโครงสร้างและการเป็นตัวแทนคือการใช้มาร์กอัปความหมายเพื่อสร้างเนื้อหาเอกสาร การมีอยู่ขององค์ประกอบ XHTML หมายความว่าส่วนของเนื้อหาที่ติดแท็กมีความหมายที่มีโครงสร้างที่สอดคล้องกันและไม่มีเหตุผลที่จะใช้แท็กอื่น กล่าวอีกนัยหนึ่งอย่าปล่อยให้ CSS สร้างองค์ประกอบ HTML หนึ่งองค์ประกอบดูเหมือนองค์ประกอบ HTML อื่นเช่นการใช้ <div> แทน <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> Dog </dt>
<Dd> สัตว์เลี้ยงลูกด้วยนมที่กินเนื้อเป็นอาหารของครอบครัว Canidae </dd>
</dl> คัดลอกเนื้อหาไปยังคลิปบอร์ด
<dl><Dt> หาดเซี่ยงไฮ้ </dt>
<DD> เรื่องนี้ "เซี่ยงไฮ้ Bund" ถ่ายทำในปี 1980 เป็นละครที่ประสบความสำเร็จและคลาสสิกมากที่สุดในประวัติศาสตร์ของฮ่องกงทีวี
หลังจากออกอากาศในฮ่องกงในปีนั้นมันทำให้เกิดความรู้สึกอย่างมาก </dd>
<Dt> Chow Yun-fat </dt>
<DD> เช่นเดียวกับดาราภาพยนตร์ยอดเยี่ยม Chow Yun-Fat ยืนยัน ERA ซึ่งเป็นยุคทองของภาพยนตร์ฮ่องกง
เสื้อโค้ทลมแว่นกันแดดปืนสองเท่าเลือดเย็นและรอยยิ้มที่มีแดดล้วนถูกปิดผนึกในภาพยนตร์ เมื่อเรามองย้อนกลับไป FA GE ได้รับการจารึกเป็นพิกัดของยุค </dd>
</dl> <cite>, อ้างอิง, <q>, <blockquote>
ฟอรัมและบล็อกมักใช้คำพูดจากผู้อื่นโดยใช้ <q> เพื่อทำเครื่องหมายคำพูดบรรทัดเดียวสั้น ๆ เว็บเบราว์เซอร์จะรับรู้เนื้อหาระหว่าง <Q> โดยอัตโนมัติ น่าเสียดายที่ IE ไม่สามารถรับรู้ได้และบางครั้ง <q> อาจทำให้เกิดปัญหาการเข้าถึงได้ ด้วยเหตุนี้บางคนจึงไม่แนะนำให้ใช้ <q> และแทรกเครื่องหมายอ้างอิงด้วยตนเอง เพิ่มเนื้อหาอ้างอิงบรรทัดเดียวลงใน <span> ที่มีคลาสที่เหมาะสมจากนั้นคุณสามารถใช้ CSS เพื่อจัดสไตล์การอ้างอิง แต่สิ่งนี้ไม่มีความหมายทางความหมาย คุณสามารถอ่านมุมมองของแท็ก Q (http://diveintomark.org/archives/2002/05/04/the_q_tag) เกี่ยวกับการจัดการ <q> ปัญหาที่เกี่ยวข้องเขียนโดย Mark Pilgrim
สำหรับคำพูดยาวของหนึ่งหรือหลายย่อหน้าควรใช้ <blockquote> CSS สามารถใช้เพื่อกำหนดรูปแบบการอ้างอิง โปรดทราบว่าบทความไม่สามารถวางโดยตรงใน <blockquote> และเนื้อหาที่ยกมาจะต้องรวมอยู่ในองค์ประกอบโดยปกติ <p> แอตทริบิวต์อ้างอิงสามารถใช้กับ <q> หรือ <blockquote> เพื่อให้ที่อยู่แหล่งที่มาของเนื้อหาที่อ้างอิง ควรสังเกตว่าหากคุณใช้ <pan> แทน <Q> เนื้อหาอ้างอิงแท็กคุณจะไม่สามารถใช้แอตทริบิวต์ CITE ได้
ตัวอย่างเช่น: คัดลอกเนื้อหาไปยังคลิปบอร์ด
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman. Content<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>, <คำอธิบาย>, สรุป
ไม่ควรวางตารางใน XHTML อย่างไรก็ตามหากเป็นการทำเครื่องหมายข้อมูลของรายการควรใช้ตาราง <th> คือชื่อตารางสรุปแอตทริบิวต์คือสรุปแท็ก <Ction> คือคำอธิบายส่วนหัวแท็ก <head> คือส่วนหัวแท็ก <tbody> เป็นเนื้อหาหลักของตารางและแท็ก <tfoot> คือจุดสิ้นสุดของตาราง
นอกจากนี้ยังสามารถใช้เพื่อแทนที่แอตทริบิวต์ส่วนหัวและทำเครื่องหมายเซลล์ที่มีข้อมูลส่วนหัวซึ่งเนื้อหาของแต่ละค่ามีดังนี้:
แถวระบุเซลล์ปัจจุบันให้ข้อมูลส่วนหัวที่เกี่ยวข้องสำหรับแถวที่มีเซลล์ปัจจุบัน
COL ระบุเซลล์ปัจจุบันโดยให้ข้อมูลส่วนหัวที่สอดคล้องกันสำหรับคอลัมน์ที่ระบุตามเซลล์ปัจจุบัน
กลุ่มแถวระบุเซลล์ปัจจุบันโดยให้ข้อมูลส่วนหัวที่เกี่ยวข้องสำหรับกลุ่มแถวที่เหลือที่มีเซลล์ปัจจุบัน
Colgroup ระบุเซลล์ปัจจุบันโดยให้ข้อมูลส่วนหัวที่สอดคล้องกันสำหรับกลุ่มคอลัมน์ที่เหลือที่ระบุตามเซลล์ปัจจุบัน
ABBR ใช้เพื่อกำหนดชื่อตัวย่อในเซลล์ส่วนหัว หากคุณสมบัตินี้ไม่ได้กำหนดเนื้อหาของเซลล์เริ่มต้นจะถูกละเว้น
ตัวอย่างเช่น: คัดลอกเนื้อหาไปยังคลิปบอร์ด
<table id=mytable cellspacing=0 summary=The technical specifications of the Apple PowerMac G5 series><Caption> ตารางที่ 1: Power Mac G5 Tech Specs </section>
<tr>
<th scope = col abbr = configurations class = nebg> การกำหนดค่า </th>
<th scope = col abbr = dual 1.8> dual 1.8GHz </th>
<th scope = col abbr = dual 2> dual 2GHz </th>
<th scope = col abbr = dual 2.5> dual 2.5GHz </th>
</tr>
<tr>
<th scope = row abbr = model class = spec> model </th>
<TD> M9454LL/A </TD>
<TD> M9455LL/A </TD>
<TD> M9457LL/A </TD>
</tr>
<tr>
<th scope = row abbr = g5 processor class = specalt> g5 โปรเซสเซอร์ </th>
<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>
</tr>
<tr>
<th scope = row abbr = bus class frontside = spec> bus frontside </th>
<TD> 900MHz ต่อโปรเซสเซอร์ </td>
<TD> 1GHz ต่อโปรเซสเซอร์ </td>
<TD> 1.25GHz ต่อโปรเซสเซอร์ </td>
</tr>
<tr>
<th scope = row abbr = l2 cache class = specalt> cache ระดับ 2 </th>
<td class = alt> 512k ต่อโปรเซสเซอร์ </td>
<td class = alt> 512k ต่อโปรเซสเซอร์ </td>
<td class = alt> 512k ต่อโปรเซสเซอร์ </td>
</tr>
</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> เป็น strikethrough อีกต่อไป การใช้ 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> <bbr>, <คำย่อ>แท็ก <Abbr> แสดงถึงตัวย่อบนหน้าเว็บและแท็ก <Scronym> เป็นตัวย่อ (หมายเหตุ: ที่นี่เราแยกตัวย่อและตัวย่อช่วงของตัวย่อมีขนาดใหญ่กว่าตัวย่อเพื่อใช้ตัวย่อของตัวอักษรตัวแรก
เขียนด้วยแท็ก <คำย่อ> แท็ก) เบราว์เซอร์ภายใต้ Windows IE6.0 ไม่รองรับแท็ก <BBR> ใน IE คุณสามารถใช้ CSS to <sadronym> แต่ไม่ใช่ <abbr> แท็ก
IE จะแสดงพรอมต์สำหรับแอตทริบิวต์ชื่อเรื่องของแท็ก <sconronym> แต่จะไม่สนใจแท็ก <abbr>
ดู: http://www.w3cn.org/article/translate/2005/115.html
ตัวอย่างเช่น: คัดลอกเนื้อหาไปยังคลิปบอร์ด
<abbr title=Cascading Style Sheets>CSS</abbr> คัดลอกเนื้อหาไปยังคลิปบอร์ด<acronym title=Cascading Style Sheets>CSS</acronym > แอตทริบิวต์และแอตทริบิวต์ชื่อเรื่องแอตทริบิวต์ชื่อเรื่องใช้เพื่อให้คำแนะนำเพิ่มเติมสำหรับแอตทริบิวต์ชื่อองค์ประกอบสามารถใช้กับแท็กทั้งหมดยกเว้นฐาน, 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