Bahasa Markup - Elemen Frasa

Penulis：Eve Cole Waktu Pembaruan：2025-05-15 13:48:02

Klik di sini untuk kembali ke kolom tutorial Wulin.com HTML.

Atas: Bahasa Markup - Formulir

Sumber Asli Bab 6 , dan elemen frasa lainnya

Dalam bab -bab Pendahuluan dan sebelumnya, konsep tag semantik telah sedikit disebutkan, menggunakan tag untuk mengidentifikasi arti file alih -alih hanya mengatur efek tampilan dengan tag. Merancang halaman web yang sepenuhnya menggunakan tag semantik adalah ide yang bagus. Namun, saya pikir tujuan ini terlalu ideal. Tentu saja, tidak mencapai tujuan sepenuhnya tidak berarti bahwa proses upaya tidak berharga. Setidaknya sangat berharga untuk bekerja menuju tujuan ini.

Pada kenyataannya, seringkali perlu untuk menambahkan tag non-semantik untuk mencapai tujuan desain tertentu, terutama karena browser terkenal saat ini tidak dapat mendukung standar sebesar 100%. Beberapa aturan CSS tidak dapat menampilkan efek yang benar di beberapa browser, dan sayangnya, kita harus menggunakan tag tambahan dalam proses mencapai tujuan desain tertentu.

Ada konsep penting yang harus dianggap serius: yaitu, mencoba menulis struktur semantik sebanyak mungkin akan membawa manfaat praktis. Pada saat yang sama, meskipun dukungan untuk standar belum mencapai 100%, ia telah melewati titik kritis sehingga kita sekarang dapat menulis halaman web menggunakan metode yang memenuhi standar jaringan. Terkadang kita harus melakukan pengorbanan, tetapi semakin banyak label yang memenuhi standar, semakin mudah untuk masa depan. Efek tampilan vs. label struktur

Bab ini akan membahas perbedaan antara efek tampilan dan label struktural, atau lebih tepatnya, perbedaan antara menggunakan penggantian dan menggunakan penggantian . Kemudian dalam bab ini, kita juga akan membahas beberapa elemen frasa lain dan kepentingannya dalam tata bahasa label terstruktur yang sesuai dengan standar.

Anda mungkin pernah mendengar bahwa beberapa orang menyarankan menggunakan penggantian ketika mereka membutuhkan teks tebal, tetapi mereka tidak memberi tahu Anda mengapa penggantian tersebut diperlukan. Tanpa mengetahui mengapa , sangat sulit untuk mengharapkan desainer web lain untuk mengubah kebiasaan penggunaan tag mereka hanya karena mereka telah mendengarnya. Mengapa lebih baik dari ?

Apa manfaat menghapus tag dan dan menggantinya dengan dan ? Bahkan, semua ini untuk mengekspresikan semantik dan struktur , tidak hanya untuk menunjukkan efeknya . Semua contoh dalam buku ini juga berusaha untuk mengikuti konsep ini. Lihat apa yang dikatakan para ahli

Pertama, mari kita lihat bagaimana W3C menggambarkan dan dalam spesifikasi elemen frase html4.01 (http://www.w3.org/tr/html4/struct/text.html#h-9.2.1):

Elemen frasa dapat menambahkan informasi struktural ke fragmen teks. Elemen frasa umum memiliki makna berikut:

 Perwakilan ditekankan

 mewakili penekanan yang lebih kuat

Jadi di sini kita membahas dua tingkat penekanan yang berbeda. Misalnya, itu adalah satu kata atau frasa. Ketika diucapkan, itu harus lebih keras, dengan nada yang lebih tinggi, diucapkan lebih cepat, atau ... yah, itu lebih ditekankan daripada konten teks umum.

W3C kemudian menjelaskan paragraf berikut:

Efek tampilan elemen frasa bervariasi dengan browser. Secara umum, browser visual harus menampilkan konten teks dalam huruf miring dan konten teks dalam huruf tebal. Perangkat lunak sintesis suara dapat mengubah parameter sintesis dengan konten, seperti volume, nada dan kecepatan, dll.

Ahh! Kalimat terakhir sangat menarik. Perangkat lunak sintesis ucapan (kami dulu menyebutnya pembaca layar) akan menangani teks yang harus ditekankan dengan benar, yang memang merupakan hal yang baik.

Sebaliknya, atau hanyalah tag efek tampilan sederhana. Jika tujuan kami adalah memisahkan struktur dari efek tampilan, menggunakan dan adalah pilihan yang tepat. Hanya ingin menampilkan teks tebal dan miring dengan CSS. Lebih banyak contoh akan dibahas nanti dalam bab ini.

Selanjutnya, lihat dua contoh identifikasi untuk membantu kita memahami perbedaan mereka. Metode a

Nomor pesanan Anda untuk referensi di masa mendatang adalah: 6474-82071 .method b

Nomor pesanan Anda untuk referensi di masa mendatang adalah: 6474-82071 .rough and Beautiful

Situasi ini adalah contoh sempurna untuk menggunakan lebih dari . Kami bermaksud membuat teks spesifik dalam kalimat lebih penting. Selain menampilkan nomor pesanan dalam huruf tebal, kami juga berharap bahwa pembaca layar juga akan mengubah cara mereka mengekspresikan konten ini: meningkatkan volume, mengubah nada atau kecepatan. Metode B dapat mencapai kedua tujuan secara bersamaan. Jadi apa?

Demikian pula, mengganti dengan dapat mengungkapkan kepentingan pada saat yang sama, daripada hanya menampilkan konten teks dalam huruf miring. Mari kita lihat dua contoh ini: Metode a

Butuh saya tidak ada, tapi tiga jam untuk menyekop jalan masuk saya pagi ini.method b

Butuh saya tidak ada, tetapi tiga jam untuk menyekop jalan masuk saya pagi ini.

Dalam contoh sebelumnya (situasi nyata ketika buku ini ditulis), tujuan saya adalah untuk membuat kata tiga ekspres dengan nada penekanan, seperti saya membaca kata ini dengan keras, secara visual, metode B akan ditampilkan dalam huruf miring di sebagian besar browser, dan pembaca layar akan menyesuaikan nada, kecepatan atau volume dengan tepat. Selama berani atau miring, tidak apa -apa

Harus dicatat bahwa dalam banyak kasus, hanya efek teks dari tebal dan huruf miring yang diperlukan untuk ditampilkan secara visual. Dengan kata lain, misalkan Anda memiliki daftar tautan di bilah sisi, dan Anda ingin membiarkan semua tautan ditampilkan dengan efek yang sama: yaitu, tebal (Gambar 6-1)

Gambar 6-1. Contoh tautan tebal yang ditempatkan di bilah samping

Selain fitur visual, kami tidak bermaksud menekankan konten tautan. Ini adalah tempat yang baik untuk mengubah tampilan tautan dengan CSS, sehingga mereka tidak akan ditekankan oleh pembaca layar dan browser non-visual lainnya.

Misalnya, apakah Anda benar -benar ingin tautan tebal dibaca lebih cepat, lebih keras, dan nada yang lebih tinggi? Mungkin tidak, tebal di sini hanyalah efek tampilan. Font-weight setara dengan berani

Untuk mencapai efek tampilan dari Gambar 6-1, mari kita asumsikan bahwa bilah tautan ditempatkan di <div> dengan ID yang disetel ke bilah samping, sehingga kita dapat menggunakan CSS untuk menentukan bahwa tautan di dalam #sideebar harus ditampilkan dalam huruf tebal:

#sideebar a {

font-weight: tebal;

}

Sangat sederhana, saya pikir ini agak konyol ketika saya menyebutkannya, tetapi ini memang cara yang baik untuk membantu memisahkan struktur dan menampilkan efek. Ini berani!

Demikian pula, Anda dapat menerapkan ide -ide serupa saat memikirkan teks miring. Ketika Anda tidak ingin menekankan konten dan hanya ingin menampilkan teks dalam huruf miring, Anda dapat menggunakan atribut gaya font untuk menangani situasi ini melalui CSS lagi.

Mari kita gunakan #sideebar yang sama sebagai contoh. Misalnya, jika Anda ingin semua tautan di #SideBar ditampilkan dalam huruf miring, Anda dapat menulis ini:

#sideebar a {

Font-style: Italic;

}

Ini adalah konsep sederhana lainnya, tetapi di bidang tata bahasa penandaan terstruktur, saya pikir sangat penting untuk membahas situasi ini - menggunakan CSS untuk memproses CCTV alih -alih menampilkan label efek. Terkadang solusi paling sederhana juga yang paling mudah diabaikan. Bagikan dengan berani dan miring

Ketika saya berencana untuk menampilkan konten teks dalam huruf tebal dan miring pada saat yang sama, saya pikir saya harus terlebih dahulu memikirkan pertanyaan, tingkat penekanan apa yang Anda rencanakan untuk disampaikan? Berdasarkan jawaban atas pertanyaan ini, saya akan memilih label yang sesuai: (penekanan) atau <penekanan yang lebih kuat), dan kemudian tandai teks dengan label yang dipilih.

Misalnya, untuk contoh berikut, saya awalnya berencana untuk membiarkan kesenangan ditampilkan dalam huruf tebal dan miring pada saat yang sama, tetapi pada akhirnya saya memilih untuk menggunakan untuk menekankan kata ini.

Membangun situs dengan standar web bisa fun !

Sebagian besar browser hanya akan menampilkan kata ini dalam huruf miring. Untuk menggunakan BOLD dan huruf miring, kami memiliki beberapa opsi. Oh, saya sangat berharap Anda setuju dengan kalimat di atas. biasa

Salah satu metode adalah menggunakan paket normal di luar kesenangan, dan tentukan aturan CSS untuk menampilkan semua S dalam huruf tebal. Sintaks tag terlihat seperti ini:

Membangun situs dengan standar web dapat menjadi fun !

Dan CSS terlihat seperti ini:

em span {

font-weight: tebal;

}

Bagian semantik yang jelas tidak baik karena kami menambahkan tag tambahan, tetapi metode ini masih berguna untuk semua orang. Menekankan dengan kelas

Metode lain adalah menentukan kelas untuk tag dan menambahkan efek tebal di CSS. Sintaks tag terlihat seperti ini:

Membangun situs dengan standar web dapat fun !

Dan CSS terlihat seperti ini:

em.bold {

font-weight: tebal;

}

Menggunakan dapat mencapai efek miring (meskipun secara semantik menekankan konten teks), dan menambahkan kelas tebal ke dalamnya akan membuat teks di dalam muncul dalam huruf tebal.

Metode serupa juga dapat digunakan untuk memodifikasi . Pada saat ini, ketika kami menekankan paragraf tertentu, kami dapat merancang kelas miring dengan efek miring, dan kemudian mencocokkan efek tebal asli.

Bahasa markup terlihat seperti ini:

Membangun situs dengan standar web dapat menjadi fun !

Dan CSS seperti ini:

Strong.italic {

Font-style: Italic;

}

Page sebelumnya 2 3 4 5 Halaman berikutnya Baca teks lengkapnya