Aspek penting lainnya dari struktur dan representasi yang memisahkan adalah penggunaan markup semantik untuk membangun konten dokumen. Keberadaan elemen XHTML berarti bahwa bagian dari konten yang ditandai memiliki makna terstruktur yang sesuai, dan tidak ada alasan untuk menggunakan tag lain. Dengan kata lain, jangan biarkan CSS membuat satu elemen HTML terlihat seperti elemen HTML lainnya, seperti menggunakan <div> alih -alih judul tag <p>.
Pertama -tama, ini adalah tentang perbedaan antara semantik dan gaya default. Gaya default adalah ekspresi dari beberapa tag yang umum digunakan yang ditetapkan oleh browser. Saya pribadi berpikir bahwa tujuan utamanya adalah untuk membiarkan semua orang secara intuitif memahami penggunaan dan fungsi tag dan atribut. Jelas bahwa seri HX terlihat sangat mirip dengan judul karena memiliki ukuran font yang berani dan lebih besar. <strong>, <em> digunakan untuk membedakannya dari kata lain dan memainkan peran penekanan. Adapun daftar dan meja, jelas untuk memberi tahu Anda apa yang mereka lakukan.
Kedua, hal terpenting tentang halaman web semantik adalah mereka ramah pada mesin pencari. Dengan struktur dan semantik yang baik, konten halaman web Anda secara alami mudah dirangkak oleh mesin pencari, dan promosi situs web Anda dapat menghemat banyak upaya.
Semantik dan penggunaan spesifik telah dijelaskan dalam referensi tag XHTML1.0. Beberapa tag dan atribut yang mudah dilupakan atau disamakan akan ditambah di sini.
<Hx><h1>, <h2>, <h3>, <h4>, <h5>, <h6>, digunakan sebagai judul dan dikurangi sesuai dengan pentingnya. <h1> adalah level tertinggi.
Misalnya:
Salin konten ke clipboard<h1>文档标题</h1> <h2>次级标题</h2>
Jangan gunakan<Div class = title> judul dokumen </div>, atau <span class = title> judul dokumen </span>. Jelas bahwa mesin pencari tidak akan menganggapnya sebagai judul untuk yang terakhir.
<p>Paragraf menandai, mengetahui <p> sebagai paragraf, Anda tidak akan lagi menggunakan <br/> untuk memecahkan garis, dan Anda tidak perlu membedakan antara paragraf dan paragraf. Teks di <p> </p> akan membungkus secara otomatis, dan efek pembungkus lebih baik daripada <br>. Kesenjangan antara paragraf juga dapat dikontrol menggunakan CSS, membuatnya mudah dan jelas untuk membedakan paragraf dari paragraf. Akan sempurna jika Anda dapat dengan mudah mendefinisikan jarak perjalanan dan kemudian menentukan efek tenggelam karakter pertama menggunakan ketinggian garis.
Misalnya: Salin konten ke clipboard
<p>蓝色理想www.blueidea.com 诞生于1999年的10月。从成立之初,蓝色理想就以建设网站设计与开发人员之家为宗旨,以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良,每天都会有会员精心制作的教程发布,无私地对网友进行帮助,而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评,同时也从中确立了自己的社会地位,于是一批又一批的网络同仁加盟了蓝色理想,成为国内最大的设计类站点之一。</p>
<p> Selama bertahun-tahun, konten Blue Ideal telah terus diperkaya, dan telah disorot oleh beberapa situs web domestik dan media tradisional yang terkenal. Telah dikumpulkan oleh situs pencarian utama seperti Google, Baidu, Yahoo, Sohu, Sina, dan Excite. Ini peringkat pertama dalam pencarian desain situs web dan pengembangan kata kunci Cina yang disederhanakan di antara tiga mesin pencari utama Google, Baidu dan Yahoo. Sekarang Blue Ideal telah berkembang menjadi salah satu situs web profesional paling berpengaruh dalam desain dan pengembangan situs web di Cina. </p> <ul>, <Ol>, <li>
<ul> Daftar yang tidak tertib sangat umum dan banyak digunakan. <Ol> Daftar yang tidak tertib juga cukup umum digunakan. Selama proses standardisasi web, <ul> juga digunakan lebih banyak untuk bilah navigasi. Awalnya, bilah navigasi adalah daftar, yang benar -benar benar untuk melakukannya. Ketika browser Anda tidak mendukung CSS, tautan navigasi masih sangat bagus, tetapi sedikit kurang indah.
Misalnya: Salin konten ke clipboard
<ul><li> Proyek 1 </li>
<li> Proyek 2 </li>
<li> Proyek 3 </li>
</ul> Salin konten ke clipboard
<ol><li> Bab 1 </li>
<li> Bab 2 </li>
<li> Bab 3 </li>
</l> <ll>, <dt>, <dd>
DL adalah daftar definisi. Misalnya, penjelasan dan definisi kata -kata dalam kamus dapat digunakan dalam daftar ini.
Misalnya: Salin konten ke clipboard
<dl><dt> anjing </dt>
<dd> mamalia karnivora dari keluarga Canidae. </dd>
</ll> Salin konten ke clipboard
<dl><dt> Pantai Shanghai </dt>
<dd> "Shanghai Bund" ini, difilmkan pada tahun 1980, adalah drama paling sukses dan klasik dalam sejarah Hong Kong TV.
Setelah disiarkan di Hong Kong tahun itu, itu menyebabkan sensasi besar. </dd>
<dt> chow yun-fat </dt>
<dd> Seperti semua bintang film hebat, Chow Yun-Fat mengkonfirmasi sebuah era, zaman keemasan film-film Hong Kong.
Mantel angin, kacamata hitam, senjata ganda berdarah dingin, dan senyum cerah semuanya disegel dalam film. Ketika kita melihat ke belakang, fa ge telah diukir sebagai koordinat era. </dd>
</ll> <cite>, CITE, <Q>, <BLOCKQUOTE>
Forum dan blog sering menggunakan kutipan dari orang lain, menggunakan <Q> untuk menandai kutipan barisan pendek. Browser Web akan secara otomatis mengenali konten antara <Q>. Sayangnya, IE tidak dapat mengenali, dan kadang -kadang <Q> dapat menyebabkan beberapa masalah aksesibilitas. Karena itu, beberapa orang merekomendasikan untuk tidak menggunakan <Q> dan secara manual memasukkan tanda referensi. Tambahkan satu baris konten referensi ke <span> yang berisi kelas yang sesuai, maka Anda dapat menggunakan CSS untuk menata referensi, tetapi ini tidak memiliki makna semantik. Anda dapat membaca tampilan tag Q (http://diveintomark.org/archives/2002/05/04/the_q_tag) tentang penanganan <Q> Masalah terkait yang ditulis oleh Mark Pilgrim.
Untuk kutipan panjang dari satu atau beberapa paragraf, <Blockquote> harus digunakan. CSS dapat digunakan untuk menentukan gaya referensi. Perhatikan bahwa sebuah artikel tidak dapat ditempatkan langsung di <BlockQuote>, dan konten yang dikutip juga harus dimasukkan dalam elemen, biasanya <p>. Kutipan atribut dapat digunakan dengan <Q> atau <Blockquote> untuk memberikan alamat sumber dari konten yang direferensikan. Perlu dicatat bahwa jika Anda menggunakan <span> alih -alih konten referensi tag, maka Anda tidak dapat menggunakan atribut CITE.
Misalnya: Salin konten ke clipboard
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman. Content to Clipboard<p> <cite>孔子</cite>曰:<q>学而不思则罔,思而不学则殆</q>.</p> Salin konten ke clipboard<p>The W3C says that <q cite=http://www.w3.org/TR/REC-html40/struct/text.html#H-9.2.1> Presentasi elemen frasa
Salin konten ke clipboard
<blockquote cite=http://www.w3cn.org/><p> Sebagian besar dari kita memiliki pengalaman mendalam. Setiap kali versi browser arus utama ditingkatkan, situs web yang baru saja kami bangun dapat usang.
Kita perlu meningkatkan atau membangun kembali situs web. Misalnya, perang browser khas dari tahun 1996 hingga 1999,
Agar kompatibel dengan Netscape dan IE, situs web harus menulis kode yang berbeda untuk dua browser ini. Demikian pula,
Setiap kali teknologi jaringan baru dan perangkat interaktif muncul, kita juga perlu membuat versi baru untuk mendukung teknologi baru atau perangkat baru ini.
Misalnya, teknologi WAP yang mendukung akses internet seluler. Ada banyak pertanyaan serupa: kode situs web membengkak dan rumit, yang membuang banyak bandwidth kami;
DHTML Efek khusus untuk browser tertentu memblokir beberapa pelanggan potensial; Kode yang sulit digunakan, orang cacat tidak dapat menelusuri situs web, dll.
Ini adalah lingkaran setan dan limbah besar. </p>
</blockquote> <em>, <strong>
<em> digunakan untuk penekanan, <strong> digunakan untuk penekanan. Sebagian besar browser menggunakan huruf miring untuk menampilkan konten yang disorot dan tebal untuk menampilkan konten yang disorot. Namun, ini tidak perlu. Jika ingin menentukan bagaimana penekanan ditampilkan, cara terbaik adalah dengan menggunakan CSS untuk menentukan kinerja mereka. Jangan gunakan penekanan saat yang Anda inginkan hanyalah efek visual. Dan jika Anda ingin menekankan tetapi masih merasa bahwa berani atau miring tidak terlalu baik dalam efek visual, terutama huruf miring untuk bahasa Cina, maka Anda dapat sepenuhnya mendefinisikan beberapa gaya lain yang lebih menarik untuk mencapai efek penekanan.
Misalnya: Salin konten ke clipboard
<p><em>强调</em> 的文本通常用斜体显示,Namun, teks dengan penekanan khusus biasanya ditunjukkan dalam huruf tebal. </p> <able>, <td>, <t th>, <laption>, ringkasan
Tabel dalam xhtml tidak boleh ditata. Namun, jika ingin menandai data daftar, tabel harus digunakan. <t th> adalah judul tabel, ringkasan atribut adalah ringkasan, tag <comption> adalah deskripsi header, tag <head> adalah header, tag <tbody> adalah konten utama tabel, dan tag <tfoot> adalah ujung tabel.
Ini juga dapat digunakan untuk mengganti atribut header dan menandai sel yang berisi informasi header, di mana konten masing -masing nilai adalah sebagai berikut:
Baris menunjukkan sel saat ini, memberikan informasi header yang relevan untuk baris yang berisi sel saat ini.
COL menunjukkan sel saat ini, memberikan informasi header yang sesuai untuk kolom yang ditentukan sesuai dengan sel saat ini.
RowGroup menunjukkan sel saat ini, memberikan informasi header yang relevan untuk kelompok baris yang tersisa yang berisi sel saat ini.
ColGroup menunjukkan sel saat ini, memberikan informasi header yang sesuai untuk kelompok kolom yang tersisa yang ditentukan berdasarkan sel saat ini.
ABBR digunakan untuk mendefinisikan nama singkatan dalam sel header. Jika properti ini tidak ditentukan, konten sel default dihilangkan.
Misalnya: Salin konten ke clipboard
<table id=mytable cellspacing=0 summary=The technical specifications of the Apple PowerMac G5 series><caption> Tabel 1: Spesifikasi Teknologi Power Mac G5 </class>
<tr>
<TH SCOPE = COL ABBR = Konfigurasi Kelas = Nobg> Konfigurasi </th>
<TH SCOPE = col ABBR = ganda 1.8> ganda 1.8GHz </th>
<TH SCOPE = COL ABBR = Dual 2> Dual 2GHz </t>
<TH SCOPE = COL ABBR = Dual 2.5> Dual 2.5GHz </t>
</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 Processor </t th>
<td class = alt> ganda 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 = frontside bus class = spec> frontside bus </th>
<td> 900MHz per prosesor </td>
<td> 1GHz per prosesor </td>
<td> 1.25GHz per prosesor </td>
</tr>
<tr>
<TH SCOPE = ROW ABBR = L2 Cache Class = Specalt> Level2 Cache </th>
<td class = alt> 512k per prosesor </td>
<td class = alt> 512k per prosesor </td>
<td class = alt> 512k per prosesor </td>
</tr>
</boable> Efek Melihat: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm
<dfn> Salin konten ke clipboard<p><dfn title=Microsoft web browser>Internet Explorer</dfn> is the most popular browser used underwater.</p> <sc>, <del>Jika Anda tahu Del, jangan gunakan <s> sebagai serangan lagi. Menggunakan Del jelas lebih semantik. Selain itu, DEL juga dilengkapi dengan CITE dan DATETIME untuk menunjukkan alasan penghapusan dan waktu penghapusan. Ins berarti penyisipan, dan ada atribut seperti itu.
Misalnya: Salin konten ke clipboard
<p>It really was <ins cite=rarara.html datetime=20031024>very</ins> good.</p> <code>Itu berarti kode komputer. Gaya default adalah font. Ini sering ditemui di forum dan blog teknis.
Misalnya: Salin konten ke clipboard
<code>p{margin:2px 0;}</code> <brbr>, <cr SCHONMEN>Tag <bbr> mewakili singkatan pada halaman web, dan tag <RACKONYM> adalah singkatan. (Catatan: Di sini kami memisahkan singkatan dan singkatan. Kisaran singkatan lebih besar dari singkatan, sehingga mengambil singkatan dari huruf pertama
Tulis dengan tag <Acronym>) Browser di bawah Windows IE6.0 tidak mendukung tag <brbs ABBR>. Di IE, Anda dapat menerapkan CSS ke <Arptronim> tetapi tidak untuk <abbr> tag.
IE akan menampilkan prompt untuk atribut judul tag <RACKONYM>, tetapi akan mengabaikan tag <brbs.
Lihat: http://www.w3cn.org/article/translate/2005/115.html
Misalnya: Salin konten ke clipboard
<abbr title=Cascading Style Sheets>CSS</abbr> Salin konten ke clipboard<acronym title=Cascading Style Sheets>CSS</acronym > atribut alt dan atribut judulAtribut judul digunakan untuk memberikan instruksi tambahan untuk atribut judul elemen dapat digunakan pada semua tag kecuali base, Basefont, head, html, meta, param, skrip dan judul. Tapi itu tidak perlu.
Properti ALT adalah agen pengguna (UA) yang tidak dapat menampilkan gambar, formulir, atau applet, dan menentukan teks pengganti. Bahasa teks pengganti ditentukan oleh atribut Lang. Salin konten ke clipboard
<img src=/img/common/logo.gif width=90 height=27 alt=bluediea.com> Salin konten ke clipboard<a href=http://www.jluvip.com/blog/article.asp?id=260 title=js获取单选按钮的数据>js获取单选按钮的数据</a> Referensi:Gaya default:
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/tr/css21/sample.html
Semantik:
http://www.456bereAstreet.com/lab/develeving_with_web_standards/zh
http://www.456bereAstreet.com/lab/develdin_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/struktur/
http://www.w3.org/tr/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/
Tautan Sumber Daya:Tag yang buruk:
http://www.htmldog.com/guides/htmlinceriate/badtags/
Tag Q.
http://diveintomark.org/archives/2002/05/04/the_q_tag
Html, xhtml, semantik dan masa depan web
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html