คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน Wulin.com HTML
ด้านบน: บทที่ 1 รายการ
ต้นฉบับ
โซลูชั่นการออกแบบที่ได้มาตรฐาน - คู่มือมาร์กอัป
และสไตล์ ส่วนที่ 1: ลงมาร์กอัปเริ่มต้นด้วยมาร์กอัป บทที่ 2 ชื่อเรื่อง ภาพรวม:ไม่เพียง แต่หน้าเว็บทั้งหมดจะต้องมีชื่อเรื่องเท่านั้น แต่ยังสามารถเพิ่มสีสันให้กับการออกแบบเว็บและใช้งานได้ง่ายหากทำเครื่องหมายถูกต้อง
ในแง่ของลักษณะที่ปรากฏชื่อของหน้าเว็บมักจะมีขนาดตัวอักษรที่ใหญ่กว่าและอาจใช้สีหรือฟอนต์ที่แตกต่างจากข้อความหลัก ฟังก์ชั่นของชื่อเรื่องคือการอธิบายหัวข้อสั้น ๆ ที่กล่าวถึงในบทต่อ ๆ ไป W3C อธิบายเช่นนี้ - แสดงบทสรุปของแต่ละย่อหน้าในหน้าเว็บ
วิธีการสร้างชื่อหน้าเพื่อสร้างข้อมูลที่เราต้องการนำเสนอการใช้งานที่มีประสิทธิภาพมากที่สุด? ในบทนี้เราจะศึกษาวิธีการที่ใช้กันทั่วไปหลายวิธีในการจัดการกับชื่อเรื่องพยายามหาวิธีที่เป็นประโยชน์ที่สุดอย่างหนึ่งสำหรับเราจากนั้นเราจะใช้เคล็ดลับและเคล็ดลับ CSS บางอย่างเพื่อตกแต่งวิธีที่ดีที่สุด
วิธีที่ดีที่สุดในการสร้างชื่อเอกสารคืออะไร?ก่อนที่จะตอบคำถามนี้สมมติว่าชื่อกำลังถูกวางไว้ที่ด้านบนของเอกสารแล้วลองดูที่สามวิธีเพื่อให้ได้เอฟเฟกต์ที่คล้ายกัน
วิธี A: มันสมเหตุสมผลหรือไม่?<span class = หัวเรื่อง> ชื่อหน้าสุดยอดสุดยอด </span>
แม้ว่าแท็ก <span> เป็นแท็กที่สะดวกในบางกรณี แต่ก็ไม่สมเหตุสมผลสำหรับชื่อเรื่องหน้า ประโยชน์เพียงอย่างเดียวของการใช้วิธีนี้คือเราสามารถระบุสไตล์ CSS สำหรับคลาสหัวเรื่องเพื่อให้ข้อความดูเหมือนชื่อ
. หัวหน้า {
ขนาดตัวอักษร: 24px;
Font-Weight: ตัวหนา;
สี: สีน้ำเงิน;
-
ตอนนี้ส่วนหัวทั้งหมดที่ทำเครื่องหมายด้วยหัวเรื่องจะใหญ่ขึ้นหนาขึ้นและสีน้ำเงินซึ่งเป็นสิ่งที่ยอดเยี่ยมใช่มั้ย แต่ถ้ามีคนใช้เบราว์เซอร์ที่ไม่รองรับ CSS เพื่อเข้าถึงหน้านี้
ตัวอย่างเช่นจะเกิดอะไรขึ้นถ้าเราใส่สไตล์ CSS ในไฟล์สไตล์ชีทภายนอกที่ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์เก่า - หรือเมื่อหน้าจออ่านหน้าสำหรับผู้ใช้ที่ปิดการใช้งาน? ผู้ใช้ที่เข้าถึงหน้านี้ผ่านช่องทางเหล่านี้จะไม่เห็น (ไม่มีเสียง) ความแตกต่างระหว่างชื่อและข้อความ
วิธีการเพิ่มความคิดเห็นเช่น class = หัวเรื่องอธิบายความหมายของเนื้อหาแท็กเล็กน้อย แต่ <span> เป็นเพียงคอนเทนเนอร์วัตถุประสงค์ทั่วไปซึ่งอนุญาตให้เบราว์เซอร์ส่วนใหญ่เปลี่ยนรูปแบบการแสดงผลเริ่มต้น
เมื่อเครื่องมือค้นหาคลานหน้านี้พวกเขาจะข้ามแท็ก <span> ราวกับว่ามันไม่ได้อยู่ที่นั่นและจะไม่เพิ่มน้ำหนักสำหรับคำหลักที่อาจรวมอยู่ด้วย ต่อมาจะมีการกล่าวถึงความสัมพันธ์เพิ่มเติมระหว่างเครื่องมือค้นหาและชื่อหน้าในบทนี้
ในที่สุดเนื่องจากแท็ก <span> เป็นองค์ประกอบอินไลน์เราจึงจำเป็นต้องวางเนื้อหาของวิธี A ลงในคอนเทนเนอร์ระดับบล็อกอื่นเช่น <p> หรือ <div> เพื่อให้สามารถครอบครองบรรทัดเดียวได้ สิ่งนี้จะสร้างรหัสที่ไม่จำเป็นจำนวนมาก แม้ว่าคุณจะเพิ่มคอนเทนเนอร์ที่ต้องการเบราว์เซอร์ที่ไม่รองรับ CSS จะยังคงแสดงข้อความในแบบดั้งเดิมของพวกเขาเพื่อให้ผู้ใช้ไม่สามารถเห็นความแตกต่างระหว่างชื่อและร่างกาย
หน้า ก่อนหน้า 1 2 3 4 5 หน้าถัดไปอ่านข้อความเต็ม