มาตรฐาน HTML5 เพิ่มองค์ประกอบความหมายใหม่จำนวนมาก
ที่นี่เราแนะนำองค์ประกอบใหม่ในโครงสร้างหน้าเป็นหลัก
องค์ประกอบความหมายคืออะไรในแง่ง่ายองค์ประกอบความหมายคือการให้ความหมายกับองค์ประกอบ (ฉลาก)
เช่น <sweader> เป็นตัวแทนของส่วนหัว <shoof> เพื่อระบุส่วนท้าย
ลักษณะ①การบำรุงรักษาง่าย: การใช้องค์ประกอบความหมายจะมีข้อมูลโครงสร้างหน้าชัดเจนซึ่งง่ายต่อการบำรุงรักษาการบำรุงรักษาหน้าเว็บ ไม่จำเป็นต้องดูรหัสอีกครั้ง: ค้นหาส่วนก่อนค้นหาชื่อคลาสเฉพาะ
②ตู้ -ฟรี: ช่วยอ่านเครื่องอ่านหน้าจอและเครื่องมือเสริมอื่น ๆ
③การเพิ่มประสิทธิภาพกลไกค้นหาที่ดีที่สุด: หลังจากตรวจสอบองค์ประกอบความหมายบางอย่างของ HTML5 หุ่นยนต์ค้นหาสามารถรวบรวมข้อมูลในหน้าดัชนี
เค้าโครงอินเทอร์เฟซดั้งเดิมในรูปแบบของหน้า <div> เป็นองค์ประกอบที่พบบ่อยมาก
เพื่ออำนวยความสะดวกในการบำรุงรักษานักออกแบบมักจะให้ <div> คลาสคลาส (หมวดหมู่สไตล์) หรือ ID ที่มีชื่อพิเศษ
ตัวอย่างเช่นองค์ประกอบ <div> ที่แสดงถึงส่วนหัวชื่อคลาสหรือ ID ของมันอาจเป็นหัวหน้าส่วนหัว ฯลฯ
ตัวอย่าง:
องค์ประกอบโครงสร้างหน้าความหมาย อธิบายองค์ประกอบความหมายของโครงสร้างหน้าส่วนใหญ่ใช้สำหรับเค้าโครงโดยรวมของหน้า
และมันไม่มีสไตล์พิเศษมันยังคงต้องใช้กับ CSS
แนะนำรายละเอียด <ส่วนหัว>: กำหนดพื้นที่ส่วนหัวของหน้าเว็บหรือบทความ มันสามารถมีโลโก้การนำทางแถบค้นหาและอื่น ๆเบราว์เซอร์รุ่นต่ำสุด: เช่น 9, Chrome 5
คำแนะนำสำหรับการใช้งาน:
①เมื่อใช้ในการติดฉลากเว็บเพจอาจรวมถึงข้อมูลเช่นโลโก้การนำทางแถบค้นหา
②เมื่อมีการใช้ชื่อเรื่องเพื่อทำเครื่องหมายเนื้อหาเฉพาะเมื่อชื่อถูกแนบกับข้อมูลอื่น ๆ <ส่วนหัว> จะถูกพิจารณาโดยทั่วไป
<ain>: กำหนดเนื้อหาหลักของหน้าเว็บเบราว์เซอร์รุ่นต่ำสุด: IE ไม่รองรับ Chrome 35
<Footer>: กำหนดพื้นที่หางของหน้าเว็บหรือบทความ อาจรวมถึงลิขสิทธิ์และการยื่นเบราว์เซอร์รุ่นต่ำสุด: เช่น 9, Chrome 5
คำแนะนำสำหรับการใช้งาน:
①เป็นหน้าเว็บมักจะมีลิขสิทธิ์เว็บไซต์ข้อ จำกัด ทางกฎหมายและลิงก์
②เป็นเชิงอรรถของบทความมักจะมีข้อมูลที่เกี่ยวข้องของผู้เขียน
<AV>: ทำเครื่องหมายลิงก์นำทางหน้า มีหลายพื้นที่ที่ทับซ้อนกันเบราว์เซอร์รุ่นต่ำสุด: เช่น 9, Chrome 5
คำแนะนำสำหรับการใช้งาน:
①หน้าหนึ่งสามารถมีองค์ประกอบ <av> หลายองค์ประกอบเช่นการนำทางและคำแนะนำบทความที่เกี่ยวข้อง
②ข้อมูลการติดต่อและข้อมูลการรับรองในพื้นที่ <fooster> ไม่จำเป็นต้องรวมอยู่ในองค์ประกอบ <av>
<section>: มันมักจะถูกทำเครื่องหมายว่าเป็นพื้นที่อิสระบนหน้าเว็บเบราว์เซอร์รุ่นต่ำสุด: เช่น 9, Chrome 5
คำแนะนำสำหรับการใช้งาน:
①สามารถใช้เป็นพื้นที่อิสระในหน้าเว็บเช่นส่วนในบทความ
<Artticle>: บล็อกเนื้อหาที่สมบูรณ์และเป็นอิสระ; เช่นข่าวบทความบล็อกและเนื้อหาอิสระอื่น ๆ (ไม่รวมความคิดเห็นหรือโปรไฟล์ผู้เขียน)เบราว์เซอร์รุ่นต่ำสุด: เช่น 9, Chrome 5
<side>: กำหนดบล็อกเนื้อหานอกเนื้อหาหลักของรอบ ๆ เช่น: คำอธิบายประกอบเบราว์เซอร์รุ่นต่ำสุด: เช่น 9, Chrome 5
<รูปที่>: มันแสดงถึงส่วนของเนื้อหาอิสระและมักจะใช้กับ <figcaption> (แทน) ซึ่งสามารถใช้สำหรับรูปภาพภาพประกอบรูปแบบส่วนโค้ด ฯลฯ ในบทความเบราว์เซอร์เวอร์ชันต่ำสุด: เช่น 9, Chrome 8 <Potcaption>: กำหนดชื่อขององค์ประกอบ <รูป>
เบราว์เซอร์รุ่นต่ำสุด: เช่น 9, Chrome 8
ตัวอย่างไดอะแกรม
การสนับสนุนเบราว์เซอร์เวอร์ชันเก่า IE8 ด้านบนเบราว์เซอร์จะถูกใช้เป็นองค์ประกอบภายในสำหรับองค์ประกอบที่ไม่ทราบ องค์ประกอบความหมายที่เกี่ยวข้องกับหน้าเป็นองค์ประกอบระดับบล็อกดังนั้นคุณจะต้องตั้งค่าเบราว์เซอร์ที่ไม่สนับสนุนองค์ประกอบเหล่านี้เพื่อแสดงเป็นองค์ประกอบระดับบล็อก
เพิ่มรหัสต่อไปนี้ในสไตล์:
บทความ, นอกเหนือ, รายละเอียด, figcaption, รูป, ส่วนท้าย, ส่วนหัว, hgroup, main, nav, ส่วน, สรุป {display: block;} IE8 และ IE8 ด้านล่างเบราว์เซอร์ด้านล่าง IE8 และ IE8 ไม่รองรับสไตล์แอปพลิเคชันองค์ประกอบที่มีประโยชน์ซึ่งไม่สามารถจดจำได้
ดังนั้นสร้างองค์ประกอบความหมายเหล่านี้ผ่าน JS และเพิ่มสไตล์พื้นฐาน
นำส่วนหัวเป็นตัวอย่าง <Script> Document.createElement ('Header'); แอปพลิเคชันไฟล์ภายนอกการสร้างสรรค์ที่น่าเบื่อเหล่านี้ได้เขียน Lei Feng ไปแล้วเพียงแค่โหลด IE เวอร์ชันเก่า
<!