Halaman web semantik XHTML teg semantik_HTML/Xhtml_pengeluaran halaman web

Satu lagi aspek penting dalam memisahkan struktur dan persembahan ialah penggunaan penanda semantik untuk menstruktur kandungan dokumen. Kehadiran elemen XHTML bermakna bahagian kandungan yang ditanda mempunyai makna struktur yang sepadan, dan tidak ada sebab untuk menggunakan penanda lain. Dengan kata lain, jangan biarkan CSS menjadikan satu elemen HTML kelihatan seperti elemen HTML yang lain, seperti menggunakan

dan bukannya tajuk teg

Pertama sekali, ini mengenai perbezaan antara semantik dan gaya lalai Gaya lalai ialah ungkapan beberapa teg yang biasa digunakan oleh penyemak imbas Saya secara peribadi berpendapat tujuan utamanya adalah untuk membolehkan semua orang memahami teg secara intuitif. markup). Dan tujuan dan fungsi atribut, adalah jelas bahawa siri Hx kelihatan seperti tajuk, kerana ia mempunyai fon tebal dan saiz fon yang lebih besar. , digunakan untuk membezakannya daripada perkataan lain dan memainkan peranan dalam penekanan. Senarai dan jadual dengan jelas memberitahu anda apa yang mereka lakukan.

Kedua, faedah terpenting halaman web semantik ialah ia mesra enjin carian Dengan struktur dan semantik yang baik, kandungan halaman web anda secara semula jadi akan mudah dirangkak oleh enjin carian dan anda boleh menjimatkan wang. promosi laman web anda.

Semantik dan kegunaan khusus telah dijelaskan dalam rujukan TAG XHTML1.0 Beberapa TAGS dan atribut yang mudah dilupakan atau dikelirukan ditambah di sini.

,

,

,

,

,

;, digunakan sebagai tajuk, mengikut urutan kepentingan yang menurun.

ialah tahap tertinggi.
Contohnya:

Salin kandungan ke papan keratan

Kod:

<font face="NSimsun"><h1>Tajuk Dokumen</h1><code><font face="NSimsun"><h1>文档标题</h1><br><h2>次级标题</h2></font>

Sari Kata

Daripada menggunakan

Document Title

, atau Document Title Jelas sekali enjin carian berminat dengan I yang terakhir tidak akan menyangka bahawa dia adalah gelaran.

Tanda perenggan, jika anda tahu

sebagai perenggan, anda tidak akan lagi menggunakan
. Dan tidak ada keperluan untuk

Teks dalam

akan dibalut secara automatik dan kesan pembalut garisan adalah lebih baik daripada
. Jurang antara perenggan juga boleh dikawal menggunakan CSS, menjadikannya mudah dan jelas untuk membezakan perenggan antara satu sama lain. Menggunakan ketinggian garis boleh mentakrifkan jarak antara baris dengan mudah dan kemudian mentakrifkan kesan seperti penutup jatuh, yang sesuai.
Contohnya:

Salin kandungan ke papan keratan

Kod:

<font face="NSimsun"><p>Blue Idea www.blueidea.com dilahirkan pada Oktober 1999. Sejak awal penubuhannya, Blue Ideal telah menyasarkan untuk membina rumah untuk pereka dan pembangun laman web, dengan kandungan utama memperkenalkan teknologi pembangunan rangkaian dan penciptaan laman web serta pertukaran reka bentuk. Kandungan laman webnya dibuat dengan baik, dan ahli menerbitkan tutorial yang dibuat dengan teliti setiap hari, tanpa pamrih membantu netizen Ia juga telah mengadakan banyak pertandingan reka bentuk dan membangunkan banyak program berkaitan yang masih digunakan oleh banyak laman web. Karya dan ulasan yang diterbitkan telah menarik perhatian banyak media dan dipuji oleh pakar, dan pada masa yang sama mewujudkan status sosial mereka Akibatnya, kumpulan demi kumpulan rakan sekerja Internet telah menyertai Blue Ideal, menjadi tapak reka bentuk terbesar di China. satu. <code><font face="NSimsun"><p>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初，蓝色理想就以建设网站设计与开发人员之家为宗旨，以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良，每天都会有会员精心制作的教程发布，无私地对网友进行帮助，而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评，同时也从中确立了自己的社会地位，于是一批又一批的网络同仁加盟了蓝色理想，成为国内最大的设计类站点之一。 <br></p><br><p>多年来，蓝色理想的内容不断充实，先后被国内一些知名网站、传统媒体重点推介过，并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点收藏，并在Google、百度、Yahoo三大搜索引擎中以简体汉字关键词"网站设计与开发”搜索排名均为第一，现在蓝色理想已发展成为国内影响最大的网站设计、开发的专业网站之一。</p></font>

Selama bertahun-tahun, kandungan Blue Ideal telah diperkaya secara berterusan, dan telah dipromosikan oleh beberapa laman web tempatan dan media tradisional yang terkenal, dan telah dipromosikan secara berturut-turut oleh Google, Baidu, Yahoo, Sohu, Ia telah dikumpulkan oleh tapak carian utama seperti Sina dan Excite, dan menduduki tempat pertama dalam kedudukan carian untuk kata kunci "reka bentuk dan pembangunan tapak web" dalam bahasa Cina ringkas dalam tiga enjin carian utama Google, Baidu, dan Yahoo Now Blue Ideal telah berkembang menjadi salah satu laman web yang paling berpengaruh di negara ini.

,
,
1. 
   
   
   
   Senarai tidak tersusun adalah sangat biasa dan digunakan secara meluas oleh semua orang,
   Senarai tersusun Ia juga agak biasa digunakan. Dalam proses penyeragaman web,
   juga lebih banyak digunakan dalam bar navigasi Pada asalnya, bar navigasi adalah senarai ini betul-betul, dan apabila penyemak imbas anda tidak menyokong CSS, pautan navigasi masih sangat mudah. Ia berfungsi dengan baik, tetapi estetikanya agak terkeluar.
   Contohnya: Salin kandungan ke papan keratan
   Kod:<font face="NSimsun"><ul><br><li>项目一</li><br><li>项目二</li><br><li>项目三</li><br></ul></font> <font face="NSimsun"><ul></font>
   • Projek 1
   • Projek 2
   • ;/li>
   Salin kandungan ke papan keratan
   Kod:
   <font face="NSimsun"><ol><br><li>第一章</li><br><li>第二章</li><br><li>第三章</li><br></ol></font>

   ,

   ,

   
   
   dl ialah "senarai definisi". Sebagai contoh, senarai jenis ini boleh digunakan untuk penjelasan dan definisi perkataan dalam kamus.
   Contohnya:

   Salin kandungan ke papan keratan

   Kod:

   <font face="NSimsun"><dl><code><font face="NSimsun"><dl><br><dt>Dog</dt><br><dd>A carnivorous mammal of the family Canidae.</dd><br></dl> </font>

   Anjing

Mamalia karnivor keluarga Canidae.

Salin kandungan ke papan keratan

<font face="NSimsun"><dl><br><dt>上海滩</dt><br><dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。<br>当年在香港播出以后，产生了巨大的轰动效应。</dd><br><dt>周润发</dt><br><dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。<br>风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd><br></dl></font>Kod:

<font face="NSimsun"><dl><strong><dt>Shanghai Beach</dt></strong><dd>Ini "Shanghai Beach" yang difilemkan pada tahun 1980 boleh dipanggil Paling berjaya dan siri drama klasik dalam sejarah televisyen Hong Kong. <br>Selepas disiarkan di Hong Kong, ia mencipta sensasi yang hebat. </dd><br><dt>Chow Yun-fat</dt><br><dd>Seperti semua bintang filem hebat, Chow Yun-fat mengesahkan satu era, zaman kegemilangan filem Hong Kong. <br>Jermin mata, cermin mata hitam, pistol berdarah dingin, dan senyuman cerah semuanya dimeterai dalam filem itu. Apabila kita melihat ke belakang, Fa Ge telah terukir sebagai koordinat suatu era. </dd><br></dl></font>

, cite, ,

Forum dan blog sering menggunakan petikan daripada orang lain dan menggunakan untuk menandakan petikan satu baris pendek . Pelayar web secara automatik akan mengenali kandungan antara . Malangnya, IE tidak mengenalinya, dan kadangkala, boleh menyebabkan beberapa masalah kebolehaksesan. Oleh sebab itu, sesetengah orang mengesyorkan agar anda mengelak daripada menggunakan dan memasukkan teg petikan secara manual. Dengan menambahkan satu baris kandungan rujukan dalam yang mengandungi kelas yang sesuai, anda boleh menggayakan rujukan dengan CSS, tetapi ini tidak mempunyai makna semantik. Anda boleh membaca teg Q (http://diveintomark.org/archives/2002/05/04/the_q_tag) yang ditulis oleh Mark Pilgrim untuk pandangannya tentang menangani isu berkaitan <font face="NSimsun"><cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.</font>Untuk petikan panjang satu atau lebih perenggan, gunakan

. CSS boleh digunakan untuk menentukan gaya untuk rujukan. Ambil perhatian bahawa perenggan artikel tidak boleh diletakkan terus dalam

, kandungan yang dipetik juga mesti disertakan dalam elemen, biasanya

. Atribut petikan boleh digunakan dengan kedua-dua dan

Perlu diingat bahawa jika anda menggunakan dan bukannya

Contohnya: Salin kandungan ke papan keratan

Kod:<font face="NSimsun"><p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p></font>

Salin kandungan ke papan keratan

Kod:<font face="NSimsun"><p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/<br />struct/text.html#h-9.2.1">The presentation of phrase elements<br>depends on the user agent.</q>.</p></font>

Salin kandungan ke papan keratan Kod: <font face="NSimsun"><p>W3C mengatakan bahawa <q cite="http://www.w3.org/TR/REC-html40/<🎜>struct/text.html# h-9.2.1">Penyampaian elemen frasabergantung pada ejen pengguna.</q>.</p></font>

Salin kandungan ke papan keratan

Kod:

<font face="NSimsun"><blockquote cite="http://www.w3cn.org/"><br><p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，<br>     我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，<br>     为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，<br>     每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，<br>     例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；<br>     针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。<br>     这是一种恶性循环，是一种巨大的浪费。”</p><br></blockquote></font>

,

digunakan untuk penegasan, Kebanyakan penyemak imbas memaparkan kandungan yang ditekankan dalam huruf condong dan tebal untuk kandungan yang diserlahkan Namun, ini tidak perlu jika anda ingin menentukan cara kandungan yang diserlahkan itu dipaparkan, cara terbaik ialah menggunakan CSS untuk menentukan penampilan mereka. Jangan gunakan penekanan apabila anda hanya mahukan kesan visual. Dan jika anda ingin menekankan tetapi masih merasakan kesan visual huruf tebal atau condong tidak begitu bagus, terutamanya huruf condong untuk bahasa Cina, maka anda boleh menentukan beberapa gaya lain yang lebih menarik perhatian untuk mencapai kesan penekanan.
Contohnya:

Salin kandungan ke papan keratan

Kod:

<font face="NSimsun"><p><em>Teks yang menekankan</em> biasanya dicetak condong,<code><font face="NSimsun"><p><em>强调</em> 的文本通常用斜体显示，<br>然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p></font>Namun, teks yang menekankan .

, , , , ringkasan

Jadual dalam XHTML tidak boleh digunakan untuk reka letak. Walau bagaimanapun, jika anda ingin melabelkan data dalam senarai, anda harus menggunakan jadual. ialah tajuk jadual, rumusan atribut ialah ringkasan, teg kandungan utama jadual, dan teg
Anda juga boleh menggunakan skop, yang boleh digunakan untuk menggantikan atribut pengepala dan menandakan sel yang mengandungi maklumat pengepala Kandungan setiap nilai adalah seperti berikut:
baris menunjukkan sel semasa dan menyediakan jadual berkaitan untuk baris yang mengandungi. maklumat pengepala sel semasa.
col menunjukkan sel semasa dan menyediakan maklumat pengepala yang sepadan untuk lajur yang ditentukan berdasarkan sel semasa.
Kumpulan baris menunjukkan sel semasa dan menyediakan maklumat pengepala yang berkaitan untuk kumpulan baris yang tinggal yang mengandungi sel semasa.
Colgroup menunjukkan sel semasa dan menyediakan maklumat pengepala yang sepadan untuk kumpulan lajur selebihnya yang ditentukan berdasarkan sel semasa.
abbr digunakan untuk mentakrifkan nama singkatan dalam sel pengepala Jika atribut ini tidak ditakrifkan, kandungan sel lalai akan berada dalam bentuk singkatan.
Contohnya:

Salin kandungan ke papan keratan

Kod:

<font face="NSimsun"><table id="mytable" cellspacing="0" summary="Spesifikasi teknikal siri Apple PowerMac G5"><code><font face="NSimsun"><table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"><br><caption>Table 1: Power Mac G5 tech specs </caption><br>   <tr><br><th scope="col" abbr="Configurations" class="nobg">Configurations</th><br><th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th><br><th scope="col" abbr="Dual 2">Dual 2GHz</th><br>     <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th><br>   </tr><br>   <tr><br><th scope="row" abbr="Model" class="spec">Model</th><br><td>M9454LL/A</td><br><td>M9455LL/A</td><br><td>M9457LL/A</td><br>   </tr><br>   <tr><br><th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th><br><td class="alt">Dual 1.8GHz PowerPC G5</td><br><td class="alt">Dual 2GHz PowerPC G5</td><br><td class="alt">Dual 2.5GHz PowerPC G5</td><br>   </tr><br>   <tr><br><th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th><br><td>900MHz per processor</td><br><td>1GHz per processor</td><br><td>1.25GHz per processor</td><br>   </tr><br>   <tr><br><th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th><br><td class="alt">512K per processor</td><br><td class="alt">512K per processor</td><br><td class="alt">512K per processor</td><br>   </tr><br></table></font>Jadual 1: Kuasa Spesifikasi teknologi Mac G5

Configurations
Dual 1.8GHzDual 2GHz  < th scope="col" abbr="Dual 2.5">Dual 2.5GHz

    Model

M9454LL/A

M9455LL/A<font face="NSimsun"><p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p></font>

G5 ProcessorDual 1.8GHz PowerPC G5
Dual 2GHz PowerPC G5
Dual 2.5GHz PowerPC G5

    Bas hadapan

900MHz setiap pemproses

1GHz setiap pemproses<font face="NSimsun"><p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p></font> ;/td>

Level2 Cache512K setiap pemproses512K setiap pemproses512K setiap pemproses Lihat kesannya: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm Salin kandungan ke papan keratan Kod: , Jika anda tahu del, jangan gunakan sebagai tanda garis jelas. Dan del juga mempunyai petikan dan tarikh masa untuk menunjukkan sebab pemadaman dan masa pemadaman. ins bermaksud memasukkan dan juga mempunyai sifat-sifat tersebut. Contohnya: Salin kandungan ke papan keratan Kod: </strong><br><br> bedeutet Computercode. Der Standardstil ist Schriftart. Wird häufig in technischen Foren und Blogs angetroffen. <br>Zum Beispiel: <div class="blockcode"> <em>Inhalt in die Zwischenablage kopieren</em> <h5>Code:</h5> <code><font face="NSimsun"><code>p{margin:2px 0;}