คลิกที่นี่เพื่อกลับไปที่คอลัมน์การสอน Wulin.com HTML
ด้านบน: ภาษามาร์กอัป - แบบฟอร์ม
ต้นฉบับต้นฉบับบทที่ 6 <strong>, <em> และองค์ประกอบวลีอื่น ๆ
ในบทนำและบทก่อนหน้าแนวคิดของแท็กความหมายได้รับการกล่าวถึงเล็กน้อยโดยใช้แท็กเพื่อระบุความหมายของไฟล์แทนการตั้งค่าเอฟเฟกต์การแสดงผลด้วยแท็ก การออกแบบหน้าเว็บที่ใช้แท็กความหมายอย่างสมบูรณ์เป็นความคิดที่ดี อย่างไรก็ตามฉันคิดว่าเป้าหมายนี้เหมาะเกินไป แน่นอนว่าการไม่บรรลุเป้าหมายอย่างสมบูรณ์ไม่ได้หมายความว่ากระบวนการความพยายามนั้นไร้ค่า อย่างน้อยก็มีค่าที่จะทำงานเพื่อบรรลุเป้าหมายนี้
ในความเป็นจริงมันมักจะจำเป็นที่จะต้องเพิ่มแท็กที่ไม่ใช่ความหมายเพื่อให้บรรลุเป้าหมายการออกแบบที่เฉพาะเจาะจงส่วนใหญ่เป็นเพราะเบราว์เซอร์ที่มีชื่อเสียงในวันนี้ไม่สามารถรองรับมาตรฐานได้ 100% กฎ CSS บางอย่างไม่สามารถแสดงผลที่ถูกต้องในเบราว์เซอร์บางตัวและน่าเสียดายที่เราต้องใช้แท็กเพิ่มเติมในกระบวนการบรรลุเป้าหมายการออกแบบบางอย่าง
มีแนวคิดที่สำคัญที่ต้องดำเนินการอย่างจริงจังนั่นคือการพยายามเขียนโครงสร้างความหมายให้มากที่สุดเท่าที่จะเป็นไปได้จะนำมาซึ่งประโยชน์ในทางปฏิบัติ ในเวลาเดียวกันแม้ว่าการสนับสนุนมาตรฐานยังไม่ถึง 100%แต่ก็ข้ามจุดวิกฤติเพื่อให้เราสามารถเขียนหน้าเว็บโดยใช้วิธีการที่ตรงตามมาตรฐานเครือข่าย บางครั้งเราต้องเสียสละบางอย่าง แต่ยิ่งฉลากที่สอดคล้องกับมาตรฐานมากเท่าไหร่มันก็จะง่ายขึ้นสำหรับอนาคต แสดงเอฟเฟกต์กับฉลากโครงสร้าง
บทนี้จะกล่าวถึงความแตกต่างระหว่างเอฟเฟกต์การแสดงผลและฉลากโครงสร้างหรือมากกว่าความแตกต่างระหว่างการใช้ <strong> การเปลี่ยน <b> และการใช้ <em> การเปลี่ยน <i> ต่อมาในบทนี้เราจะหารือเกี่ยวกับองค์ประกอบวลีอื่น ๆ และความสำคัญของพวกเขาภายในไวยากรณ์ฉลากที่มีโครงสร้างมาตรฐาน
คุณอาจเคยได้ยินว่าบางคนแนะนำให้ใช้ <strong> ทดแทน <b> เมื่อพวกเขาต้องการข้อความที่เป็นตัวหนา แต่พวกเขาไม่ได้บอกคุณเพิ่มเติมว่าทำไมจำเป็นต้องมีการทดแทนดังกล่าว โดยที่ไม่รู้ว่า ทำไม มันยากที่จะคาดหวังให้นักออกแบบเว็บไซต์คนอื่นเปลี่ยนนิสัยการใช้งานของแท็กเพียงเพราะพวกเขาเคยได้ยินเรื่องนี้ ทำไม <strong> ดีกว่า <b> <i>
อะไรคือประโยชน์ของการลบแท็ก <b> และ <i> และแทนที่ด้วย <strong> และ <em>? ในความเป็นจริงทั้งหมดนี้คือการแสดง ความหมาย และ โครงสร้าง ไม่ใช่ แค่เพื่อแสดงผล ตัวอย่างทั้งหมดในหนังสือเล่มนี้ยังพยายามทำตามแนวคิดนี้ ดูสิ่งที่ผู้เชี่ยวชาญพูด
ก่อนอื่นมาดูกันว่า W3C อธิบาย <strong> และ <em> ในข้อมูลจำเพาะองค์ประกอบวลี html4.01 อย่างไร (http://www.w3.org/tr/html4/struct/text.html#h-9.2.1):
องค์ประกอบวลีสามารถเพิ่มข้อมูลโครงสร้างให้กับชิ้นส่วนข้อความ องค์ประกอบวลีทั่วไปมีความหมายต่อไปนี้:
<em> ตัวแทนเน้น <strong> หมายถึงการเน้นที่แข็งแกร่งขึ้นดังนั้นที่นี่เรากำลังพูดถึงสององศาที่แตกต่างกันของการเน้น ตัวอย่างเช่นมันเป็นคำหรือวลีเดียว เมื่อออกเสียงมันควรจะดังขึ้นด้วยน้ำเสียงที่สูงขึ้นออกเสียงเร็วกว่าหรือ ... ดีมันเน้นมากกว่าเนื้อหาข้อความทั่วไป
W3C จะอธิบายย่อหน้าต่อไปนี้:
ผลการแสดงผลขององค์ประกอบวลีแตกต่างกันไปตามเบราว์เซอร์ โดยทั่วไปแล้วเบราว์เซอร์ Visual ควรแสดงเนื้อหาข้อความเป็นตัวเอียงและเนื้อหาข้อความเป็นตัวหนา ซอฟต์แวร์การสังเคราะห์เสียงสามารถเปลี่ยนพารามิเตอร์การสังเคราะห์ด้วยเนื้อหาเช่นระดับเสียงเสียงและความเร็ว ฯลฯ
อ่า ประโยคสุดท้ายน่าสนใจเป็นพิเศษ ซอฟต์แวร์การสังเคราะห์คำพูด (เราเคยเรียกมันว่าเครื่องอ่านหน้าจอ) จะจัดการกับข้อความที่ต้องเน้นอย่างถูกต้องซึ่งเป็นสิ่งที่ดี
ในทางตรงกันข้าม <b> หรือ <i> เป็นเพียงแท็กเอฟเฟกต์การแสดงผลง่ายๆ หากเป้าหมายของเราคือการแยกโครงสร้างออกจากเอฟเฟกต์การแสดงผลโดยใช้ <strong> และ <em> เป็นตัวเลือกที่เหมาะสม แค่ต้องการแสดงข้อความตัวหนาและตัวเอียงด้วย CSS ตัวอย่างเพิ่มเติมจะกล่าวถึงในภายหลังในบทนี้
จากนั้นดูตัวอย่างการระบุสองตัวอย่างเพื่อช่วยให้เราเข้าใจความแตกต่างของพวกเขา วิธี A
หมายเลขคำสั่งซื้อของคุณสำหรับการอ้างอิงในอนาคตคือ: <b> 6474-82071 </b> .method B
หมายเลขคำสั่งซื้อของคุณสำหรับการอ้างอิงในอนาคตคือ: <strong> 6474-82071 </strong> .Rough และสวยงาม
สถานการณ์นี้เป็นตัวอย่างที่สมบูรณ์แบบของการใช้ <strong> มากกว่า <b> เราตั้งใจที่จะทำให้ข้อความเฉพาะในประโยคสำคัญยิ่งขึ้น นอกเหนือจากการแสดงหมายเลขคำสั่งซื้อเป็นตัวหนาเรายังหวังว่าผู้อ่านหน้าจอจะเปลี่ยนวิธีที่พวกเขาแสดงเนื้อหานี้: เพิ่มระดับเสียงเปลี่ยนเสียงหรือความเร็ว วิธี B สามารถบรรลุเป้าหมายทั้งสองในเวลาเดียวกัน แล้วอะไร?
ในทำนองเดียวกันการแทนที่ <em> ด้วย <i> สามารถแสดงความสำคัญในเวลาเดียวกันแทนที่จะแสดงเนื้อหาข้อความเป็นตัวเอียง มาดูตัวอย่างทั้งสองนี้: วิธีการก
ฉันใช้เวลาไม่ได้ แต่ <i> สามชั่วโมง </i> ชั่วโมงในการตักถนนรถแล่นของฉันเมื่อเช้านี้วิธี B
ฉันใช้เวลาไม่ได้ แต่ <em> สามชั่วโมง </em> ชั่วโมงเพื่อตักถนนรถแล่นของฉันเมื่อเช้านี้
ในตัวอย่างก่อนหน้านี้ (สถานการณ์จริงเมื่อหนังสือเล่มนี้เขียน) จุดประสงค์ของฉันคือการทำให้คำว่าสามแสดงออกในน้ำเสียงเน้นเช่นเดียวกับที่ฉันอ่านคำนี้เสียงดังมองเห็นวิธี B จะแสดงเป็นตัวเอียงในเบราว์เซอร์ส่วนใหญ่และเครื่องอ่านหน้าจอจะปรับโทนเสียงความเร็วหรือปริมาณอย่างเหมาะสม ตราบใดที่มันเป็นตัวหนาหรือตัวเอียงมันก็ใช้ได้
จะต้องสังเกตว่าในหลาย ๆ กรณีจำเป็นต้องมีผลกระทบจากข้อความของตัวหนาและตัวเอียงเพื่อแสดงด้วยสายตา กล่าวอีกนัยหนึ่งสมมติว่าคุณมีรายการลิงก์ในแถบด้านข้างและคุณต้องการให้ลิงก์ทั้งหมดแสดงด้วยเอฟเฟกต์เดียวกัน: นั่นคือตัวหนา (รูปที่ 6-1)
รูปที่ 6-1 ตัวอย่างของลิงก์ตัวหนาที่วางไว้ในแถบด้านข้าง
นอกเหนือจากคุณสมบัติด้านภาพแล้วเราไม่ได้ตั้งใจจะเน้นเนื้อหาลิงก์ นี่เป็นสถานที่ที่ดีในการเปลี่ยนการปรากฏตัวของลิงก์ด้วย CSS เพื่อที่พวกเขาจะไม่ได้รับการเน้นโดยผู้อ่านหน้าจอและเบราว์เซอร์ที่ไม่ใช่ภาพอื่น ๆ
ตัวอย่างเช่นคุณต้องการให้ลิงก์ตัวหนาอ่านเร็วขึ้นดังขึ้นและสูงขึ้นหรือไม่? อาจไม่ใช่ตัวหนาที่นี่เป็นเพียงเอฟเฟกต์การแสดงผล Font-Weight เทียบเท่ากับตัวหนา
เพื่อให้ได้เอฟเฟกต์การแสดงผลของรูปที่ 6-1 สมมติว่าแถบลิงค์ถูกวางไว้ใน <div> ด้วยการตั้งค่า ID เป็นแถบด้านข้างเพื่อให้เราสามารถใช้ CSS เพื่อระบุว่าลิงก์ภายใน #sidesbar ควรแสดงเป็นตัวหนา:
#SideBar a {
Font-Weight: ตัวหนา;
-
ง่ายมากฉันคิดว่ามันไร้สาระเล็กน้อยเมื่อฉันพูดถึงมัน แต่นี่เป็นวิธีที่ดีในการช่วยแยกโครงสร้างและเอฟเฟกต์การแสดงผล มันเป็นตัวหนา!
ในทำนองเดียวกันคุณสามารถใช้ความคิดที่คล้ายกันเมื่อคิดถึงข้อความตัวเอียง เมื่อคุณไม่ต้องการเน้นเนื้อหาและต้องการแสดงข้อความเป็นตัวเอียงคุณสามารถใช้แอตทริบิวต์สไตล์ตัวอักษรเพื่อจัดการกับสถานการณ์เหล่านี้ผ่าน CSS อีกครั้ง
ลองใช้ #sidesbar เดียวกันเป็นตัวอย่าง ตัวอย่างเช่นหากคุณต้องการให้ลิงก์ทั้งหมดใน #SideBar แสดงเป็นตัวเอียงคุณสามารถเขียนสิ่งนี้:
#SideBar a {
แบบฟอนต์: ตัวเอียง;
-
มันเป็นอีกหนึ่งแนวคิดที่เรียบง่าย แต่ในด้านไวยากรณ์การทำเครื่องหมายที่มีโครงสร้างฉันคิดว่ามันสำคัญมากที่จะพูดคุยเกี่ยวกับสถานการณ์เหล่านี้ - การใช้ CSS เพื่อประมวลผลกล้องวงจรปิดแทนการแสดงฉลากเอฟเฟกต์ บางครั้งการแก้ปัญหาที่ง่ายที่สุดก็เป็นวิธีที่ง่ายที่สุดที่จะเพิกเฉย แบ่งปันตัวหนาและตัวเอียง
เมื่อฉันวางแผนที่จะแสดงเนื้อหาข้อความเป็นตัวหนาและตัวเอียงในเวลาเดียวกันฉันคิดว่าฉันต้องคิดเกี่ยวกับคำถามก่อนคุณวางแผนที่จะถ่ายทอดในระดับใด จากคำตอบของคำถามนี้ฉันจะเลือกฉลากที่เหมาะสม: <em> (เน้น) หรือ <เน้นที่มากขึ้น) จากนั้นทำเครื่องหมายข้อความด้วยฉลากที่เลือก
ตัวอย่างเช่นสำหรับตัวอย่างต่อไปนี้ฉันวางแผนที่จะให้ความสนุกสนานแสดงเป็นตัวหนาและตัวเอียงในเวลาเดียวกัน แต่ในที่สุดฉันก็เลือกที่จะใช้ <em> เพื่อเน้นคำนี้
การสร้างเว็บไซต์ที่มีมาตรฐานเว็บสามารถ <em> ความสนุก </em>!
เบราว์เซอร์ส่วนใหญ่จะแสดงคำนี้เป็นตัวเอียงเท่านั้น ในการใช้ทั้งตัวหนาและตัวเอียงเรามีตัวเลือกมากมาย โอ้ฉันหวังว่าคุณจะเห็นด้วยกับประโยคข้างต้น ธรรมดา <pan>
วิธีหนึ่งคือการใช้แพ็คเกจ <Span> ปกตินอกความสนุกและระบุกฎ CSS เพื่อแสดง <span> ทั้งหมดเป็นตัวหนา ไวยากรณ์แท็กมีลักษณะเช่นนี้:
การสร้างเว็บไซต์ที่มีมาตรฐานเว็บสามารถ <em> <span> ความสนุก </span> </em>!
และ CSS มีลักษณะเช่นนี้:
EM ช่วง {
Font-Weight: ตัวหนา;
-
ส่วนความหมายที่ชัดเจนไม่ดีเพราะเราเพิ่มแท็กพิเศษ แต่วิธีนี้ยังคงมีประโยชน์สำหรับทุกคน เน้นด้วยชั้นเรียน
อีกวิธีหนึ่งคือการระบุคลาสสำหรับแท็ก <em> และเพิ่มเอฟเฟกต์ตัวหนาใน CSS ไวยากรณ์แท็กมีลักษณะเช่นนี้:
การสร้างเว็บไซต์ที่มีมาตรฐานเว็บสามารถ <em class = bold> fun </em>!
และ CSS มีลักษณะเช่นนี้:
em.bold {
Font-Weight: ตัวหนา;
-
การใช้ <em> สามารถบรรลุเอฟเฟกต์ตัวเอียง (แม้ว่าจะเน้นเนื้อหาข้อความเชิงความหมาย) และการเพิ่มคลาส BOLD ลงในนั้นจะทำให้ข้อความภายใน <em> ปรากฏเป็นตัวหนา
วิธีการที่คล้ายกันสามารถใช้ในการแก้ไข <strong> ในเวลานี้เมื่อเราเน้นย่อหน้าที่แน่นอนเราสามารถออกแบบคลาสตัวเอียงด้วยเอฟเฟกต์ตัวเอียงแล้วจับคู่เอฟเฟกต์ตัวหนาดั้งเดิม
ภาษามาร์กอัปมีลักษณะเช่นนี้:
การสร้างเว็บไซต์ที่มีมาตรฐานเว็บสามารถ <strong class = italic> fun </strong>!
และ CSS ก็เป็นเช่นนี้:
strong.italic {
แบบฟอนต์: ตัวเอียง;
-
หน้า ก่อนหน้า 1 2 3 4 5 หน้าถัดไปอ่านข้อความเต็ม