HTML5 นวัตกรรม: ความงามของโครงสร้าง

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-03-27 16:00:04

HTML 5 เป็นเหมือนการปฏิวัติและเต็มไปด้วยการแกว่งในยุคหลังการแข่งขัน 22.0

HTML 5 คืออะไรฉันไม่จำเป็นต้องลงรายละเอียดที่นี่ จากความเข้าใจของฉันนวัตกรรมของ HTML 5 สามารถสรุปได้ว่าเป็นระบบฉลากความหมายการสนับสนุนสื่อที่เรียบง่ายและหลากหลายเทคโนโลยีการจัดเก็บข้อมูลในท้องถิ่นที่มีมนต์ขลังภาพเคลื่อนไหวที่หลากหลาย (ผ้าใบ) ที่ไม่ต้องการปลั๊กอินและการสนับสนุน API ที่ทรงพลัง ในระยะสั้น HTML 5 ทำให้การโต้ตอบกับคอมพิวเตอร์และการโต้ตอบกับเครือข่ายมนุษย์สะดวกสบายมากขึ้นและเหมาะกับผู้ใช้ การขาดการสนับสนุนก่อนหน้านี้สำหรับแอพพลิเคชั่นสื่อที่หลากหลายและที่เก็บข้อมูลนี้ไม่เจ็บปวดสำหรับเบราว์เซอร์อีกต่อไป ความตั้งใจดั้งเดิมของการปฏิวัติ HTML 5 คือการโปรโมตเว็บจากแพลตฟอร์มเนื้อหาไปยังแพลตฟอร์มแอปพลิเคชันมาตรฐานและรวมมาตรฐานของแต่ละแพลตฟอร์มค่าย

บทความนี้อธิบายหนึ่งในนวัตกรรมของ HTML 5: โครงสร้างที่ชัดเจนและกระชับยิ่งขึ้น

เริ่มต้นจากจุดเริ่มต้น

รหัสส่วนหัว XHTML มาตรฐานควรมีลักษณะเช่นนี้:

<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>

<head>

</head>

คุณจำได้ไหม? คุณจะจำได้ด้วยการท่องจำหรือไม่? ไม่แน่นอน! เราต้องการสำเนาเชิงกลและวางเท่านั้น

มาดูกันว่าส่วนหัว HTML 5 มาตรฐานเป็นอย่างไร:

<! doctype html>

ฉันไม่จำเป็นต้องบอกว่าอันไหนซับซ้อนกว่านี้และอันไหนง่ายดาย ใช่ส่วนหัว HTML 5 นั้นง่ายมากจนสามารถจดจำได้อย่างง่ายดาย! นอกจากนี้เคสคำพูดและแบ็คสแลชก่อนที่จะเพิกเฉยต่อวงเล็บมุมสุดท้าย

ทำไมมันถึงหลวม? ในความเป็นจริงหาก XHTML ถูกส่งเป็นข้อความ/HTML เบราว์เซอร์ยังสามารถแยกวิเคราะห์ได้ดีและเบราว์เซอร์ไม่สนใจเกี่ยวกับไวยากรณ์ของรหัส ดังนั้น HTML 5 จึงเป็นอภิปรัชญามันอาจทำลายมาตรฐานดั้งเดิมบางส่วน แต่ก็ยังสามารถทำงานได้ดีในเบราว์เซอร์

แน่นอนเพื่อความสะดวกของความช่วยเหลือจากทีมและการบำรุงรักษาที่ตามมาเราควรรวมรูปแบบการเขียนที่คุณชอบเช่น:

<! doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

นอกจากนี้แม้ว่า HTML 5 จะไม่ได้รับการสนับสนุนจากเบราว์เซอร์ทั้งหมด แต่ส่วนหัวนี้ที่สามารถประหยัดได้มากกว่า 100 ไบต์ (สำหรับไซต์ที่มีระดับ PV รายวันหรือสูงกว่าหนึ่งล้าน แต่ก็สามารถประหยัดการจราจรได้มาก) หากคุณได้ทำการวิจัยเกี่ยวกับโหมดความละเอียดของเบราว์เซอร์คุณควรรู้ว่าหน้าเว็บจะทริกเกอร์โหมดแปลก ๆ โดยไม่ต้องกำหนด Doctype และตราบใดที่เบราว์เซอร์ <!

ระบบการติดฉลากความหมายใหม่

การเข้ารหัสความหมายเป็นทักษะที่จำเป็นสำหรับนักพัฒนาส่วนหน้าที่ผ่านการรับรอง แต่เมื่อหน้าเว็บกลายเป็นที่นิยมมากขึ้นเรื่อย ๆ ก็เห็นได้ชัดว่าพวกเขาไม่สามารถทำได้โดยใช้แท็ก XHTML ดั้งเดิมเพื่อ Desemanate พระเจ้าตรัสว่า: ต้องมีแสงสว่าง! จากนั้นก็มีแสงสว่าง ดังนั้น HTML 5 จึงมีชุดของแท็กใหม่และคุณลักษณะที่สอดคล้องกันเพื่อสะท้อนความหมายทั่วไปของเว็บไซต์สมัยใหม่ ฝึกฝนเพื่อสร้างความจริง มาเขียนตัวอย่าง:

<H1> คำบรรยายไซต์ </h1>

</div>

<ul>

<li> JavaScript </li>

</ul>

</div>

<!-// ส่วนหัวสิ้นสุด->

<p> นี่คือบทความเกี่ยวกับแท็กโครงสร้าง HTML 5 ใหม่ </p>

</div>

<p> นี่เป็นบทความเกี่ยวกับแท็กโครงสร้าง HTML 5 ใหม่ </p>

</div>

<!-// left end->

<H1> โปรไฟล์ผู้แต่ง </h1>

<p> Mr. Think บุคคลทั่วไปที่มุ่งเน้นไปที่เทคโนโลยีส่วนหน้าเว็บ </p>

</div>

<!-// ปลายด้าน->

ด้านล่างของหน้า

</div>

<!-// ท้ายท้าย->

ด้านบนเป็นส่วนหน้าบล็อกอย่างง่าย HTML ซึ่งประกอบด้วยส่วนหัวพื้นที่แสดงบทความคอลัมน์ด้านขวาและด้านล่าง การเข้ารหัสนั้นเรียบร้อยและสอดคล้องกับความหมายของ XHTML ซึ่งสามารถทำได้ดีแม้ใน HTML 5 แต่สำหรับเบราว์เซอร์นี่คือรหัสชิ้นส่วนที่ไม่แยกความแตกต่างระหว่างน้ำหนักมากกว่าแท็กที่ช่วยให้เครื่องเข้าใจความหมายเพื่อกำหนดบล็อกที่สอดคล้องกัน ตัวอย่างเช่นเบราว์เซอร์มาตรฐาน (เช่น Firefox, Chrome และแม้แต่เวอร์ชันใหม่ของ IE) มีคีย์ทางลัดที่สามารถนำลูกค้าไปข้ามไปยังการนำทางของหน้าโดยตรง แต่ปัญหาคือบล็อกทั้งหมดถูกกำหนดโดย DIV และค่า ID ของ DIV จะถูกกำหนดโดยนักพัฒนา การเกิดขึ้นของแท็ก HTML 5 ใหม่นั้นเกิดขึ้นสำหรับข้อบกพร่องนี้ จากนั้นหากรหัสด้านบนถูกแทนที่ด้วย HTML 5 คุณสามารถเขียนได้เช่นนี้:

<ส่วนหัว>

<H1> คำบรรยายไซต์ </h1>

</hgroup>

<av>

<ul>

<li> JavaScript </li>

</ul>

</av>

</header>

<บทความ>

<p> นี่คือบทความเกี่ยวกับแท็กโครงสร้าง HTML 5 ใหม่ </p>

</บทความ>

<บทความ>

<p> นี่เป็นบทความเกี่ยวกับแท็กโครงสร้าง HTML 5 ใหม่ </p>

</บทความ>

</div>

<นอกเหนือจาก>

<H1> โปรไฟล์ผู้แต่ง </h1>

<p> Mr. Think บุคคลทั่วไปที่มุ่งเน้นไปที่เทคโนโลยีส่วนหน้าเว็บ </p>

</side>

ด้านล่างของหน้า

</footer>

ปรากฎว่าโครงสร้างหน้า HTML นั้นสวยงามมากจนสามารถมองเห็นได้อย่างรวดเร็วโดยไม่มีความคิดเห็น สำหรับเบราว์เซอร์คุณจะไม่สูญเสียอีกต่อไปเมื่อคุณพบบล็อกที่เกี่ยวข้อง

วิธีการจัดโครงสร้างองค์ประกอบด้วย HTML 5 แท็กใหม่:

ผ่านตัวอย่างข้างต้นเราเข้าใจนวัตกรรมของแท็ก HTML 5 ใหม่สำหรับโครงสร้าง แต่เมื่อเปลี่ยนเป็นการใช้งานจริงเราจะใช้มันได้อย่างไร ฉันคิดว่านี่เป็นคำถามที่ผู้เรียน HTML 5 หลายคนต้องการถาม เช่นเดียวกับ XHTML semantics ควรใช้แท็กความหมาย HTML 5: แต่ละแท็กมีความหมายเฉพาะและความหมายหมายความว่าเราใช้แท็กที่เหมาะสมในสถานที่ที่เหมาะสมเพื่อให้ผู้คนและเครื่องจักรดีขึ้น ตัวอย่างเช่นแท็กส่วนหัวโดยทั่วไปเป็นองค์ประกอบบล็อกแรกของหน้า (แท็กส่วนหัวยังสามารถใช้ในองค์ประกอบส่วนหัวของประเภทเช่นชื่อของบล็อกบทความ) ซึ่งมีข้อมูลหัวข้อของหน้า; โดยทั่วไปแท็ก NAV จะใช้ในการห่อข้อมูลการนำทาง โดยทั่วไปส่วนท้ายจะใช้ในการห่อข้อมูลด้านล่างของหน้า; และอื่น ๆ

ด้านล่างนี้เป็นคำอธิบายเชิงความหมายและแนวทางการใช้งานสำหรับแท็กใหม่ทั่วไปสำหรับคลาสโครงสร้างที่ระบุไว้ในคู่มือ HTML 5:

<ส่วนหัว> แท็ก

คำจำกัดความด้วยตนเอง: กำหนดส่วนหัวของส่วนหรือเอกสาร

แนวทางการใช้งาน: โดยทั่วไปใช้เพื่อรวมส่วนหัวของหน้าและยังสามารถใช้สำหรับส่วนหัวของพื้นที่อื่น ๆ เช่นส่วนหัวบทความ:

<ส่วนหัว>

<H1> คำบรรยายไซต์ </h1>

</hgroup>

</header>

<hgroup> แท็ก

คำจำกัดความด้วยตนเอง: ใช้เพื่อรวมชื่อของหน้าเว็บหรือส่วน

แนวทางการใช้งาน: ใช้สำหรับการรวมกันของคลาสชื่อเช่นชื่อและคำบรรยายของบทความ:

<H1> นี่คือบทความที่แนะนำแท็กโครงสร้าง HTML 5 </h1>

<H2> HTML 5 นวัตกรรม </h2>

</hgroup>

แท็ก <AV>

คำจำกัดความด้วยตนเอง: กำหนดส่วนที่กำหนดลิงก์การนำทาง

แนวทางการใช้งาน: ส่วนการนำทางสำหรับการกำหนดหน้า:

<av>

<ul>

<li> JavaScript </li>

</ul>

</av>

<side> แท็ก

กำหนดเนื้อหานอกเหนือจากบทความ เนื้อหาของกันควรเกี่ยวข้องกับเนื้อหาของบทความ

แนวทางการใช้งาน: ใช้สำหรับเนื้อหาที่แบ่งส่วนส่วนใหม่จะเริ่มต้นในสตรีมเอกสารซึ่งโดยทั่วไปจะใช้ในแถบด้านข้างที่เกี่ยวข้องกับเนื้อหาบทความ:

<นอกเหนือจาก>

<H1> โปรไฟล์ผู้แต่ง </h1>

<p> Mr. Think บุคคลทั่วไปที่มุ่งเน้นไปที่เทคโนโลยีส่วนหน้าเว็บ </p>

</side>

<section> แท็ก

คำจำกัดความด้วยตนเอง: กำหนดส่วนในเอกสาร ตัวอย่างเช่นบทส่วนหัวส่วนท้ายหรือส่วนอื่น ๆ ของเอกสาร

แนวทางการใช้งาน: เนื้อหาที่ใช้สำหรับส่วนต่างๆจะเริ่มต้นส่วนใหม่ในสตรีมเอกสาร:

ส่วน <H1> คืออะไร? </h1>

<H2> บทใหม่ </h2>

<บทความ>

<H2> เกี่ยวกับส่วน </h1>

<p> บทนำส่วน </p>

</บทความ>

</section>

<footer> แท็ก

คำจำกัดความด้วยตนเอง: กำหนดส่วนท้ายของส่วนหรือเอกสาร โดยทั่วไปจะมีชื่อของผู้สร้างวันที่สร้างเอกสารและ/หรือข้อมูลการติดต่อ

แนวทางการใช้งาน: โดยทั่วไปจะใช้ในการห่อหน้าทั้งหมดด้วยด้านล่างทั่วไปและยังสามารถใช้ในด้านล่างของพื้นที่อื่น ๆ เช่นด้านล่างของบทความ:

[email protected]

</footer>

<บทความ> แท็ก

คำจำกัดความด้วยตนเอง: กำหนดเนื้อหาภายนอก ตัวอย่างเช่นบทความใหม่จากผู้ให้บริการข่าวภายนอกไม่ว่าจะมาจากบล็อกหรือจากฟอรัม หรือมาจากแหล่งข้อมูลภายนอกอื่น ๆ

แนวทางการใช้งาน: ตามชื่อหมายถึงโดยทั่วไปจะใช้ในบล็อกบทความ:

<บทความ>

<ส่วนหัว>

<H1> นี่คือบทความที่แนะนำแท็กโครงสร้าง HTML 5 </h1>

<H2> HTML 5 นวัตกรรม </h2>

</hgroup>

</header>

<p> รายละเอียดเนื้อหาบทความ </p>

</บทความ>

<รูป> แท็ก

คำจำกัดความด้วยตนเอง: ใช้เพื่อรวมองค์ประกอบ

แนวทางการใช้งาน: ส่วนใหญ่ใช้สำหรับการรวมรูปภาพและคำอธิบายภาพ:

<รูป>

<Potcaption> นี่คือข้อมูลคำอธิบายของรูปภาพ </pigcaption>

</pige>

<เมนู> แท็ก

คำจำกัดความด้วยตนเอง: กำหนดรายการเมนู ใช้แท็กนี้เมื่อคุณต้องการแสดงรายการการควบคุมแบบฟอร์ม

คู่มือการใช้งาน: ใช้ในบล็อกคลาสเมนูที่ใช้เพื่อกำหนดรายการเมนูหรือตัวเลือกเมนู:

<เมนู>

<li> JavaScript </li>

</เมนู>

แท็กใหม่อื่น ๆ ใน HTML 5 จะไม่ถูกอธิบายทีละคน โปรดตรวจสอบคู่มือด้วยตัวเอง

ในความเป็นจริงสิ่งเหล่านี้เป็นเหมือน div, h1, inpu และแท็กอื่น ๆ ใน xhtml ตราบใดที่คุณฝึกฝนมากขึ้นในชีวิตประจำวันมันก็ใช้งานได้ง่ายอย่างอิสระ

เกี่ยวกับความเข้ากันได้

หากคุณเป็นคนที่ชอบศึกษาและให้ความสนใจกับส่วนหน้าคุณควรรู้ว่ามีการใช้แท็ก HTML 5 ใหม่ในโครงสร้างหน้าของ Taobao ดังนั้นสิ่งที่ฉันอยากจะพูดก็คือตราบใดที่คุณกล้าลองความเข้ากันได้ก็ไม่ใช่ปัญหา มีวิธีการเข้ากันได้หลายวิธีออนไลน์ (บทความนี้เกี่ยวกับโครงสร้างฮ่า ~)

เรื่องต่อมา

เทคโนโลยีใหม่ใด ๆ ต้องใช้กระบวนการปรับตัว หากคุณพร้อมที่จะเป็นนักพัฒนาส่วนหน้าเว็บที่ยอดเยี่ยมคุณต้องพยายามและยอมรับเทคโนโลยีส่วนหน้าล่าสุดต่อไป

Sun Wen เคยกล่าวไว้ว่าหากคุณต้องการสร้างความสุขของอารยธรรมคุณต้องทำให้ความเจ็บปวดจากอารยธรรม นี่เป็นเรื่องจริงสำหรับการปฏิวัติมนุษยชาติและการปฏิวัติของ HTML 5 การลดลงอย่างค่อยเป็นค่อยไปของ IE ได้อนุญาตให้ผู้ผลิตเบราว์เซอร์รายใหญ่เข้าสู่ช่วงเวลาสงครามและแข่งขันกัน สำหรับนักพัฒนาเราหวังว่าผู้ผลิตเบราว์เซอร์รายใหญ่ควรทำตามมาตรฐานเดียวกันให้มากที่สุดเท่าที่จะเป็นไปได้แทนที่จะแยกผู้เล่นออกจากการแข่งขัน เพราะการนำเสนอที่มีประสิทธิภาพและสมบูรณ์แบบของแอปพลิเคชันเดียวกันกับผู้ใช้ทุกประเภทเป็นเป้าหมายสูงสุดของเรา

ด้วยวิธีนี้บทความนี้เริ่มต้นจาก doctype ของหน้าเพื่อใช้แท็ก HTML 5 ใหม่เพื่อสร้างโครงสร้างหน้าความหมายมากขึ้นจากนั้นอธิบายแท็กใหม่ที่เกี่ยวข้องกับโครงสร้างหน้า ฉันเชื่อว่าทุกคนมีความเข้าใจใหม่เกี่ยวกับแท็กโครงสร้างใหม่ของ HTML 5 หากคุณสนใจให้เปิด IDE ของคุณเขียนโค้ดชิ้นหนึ่งที่สร้างโดยแท็กใหม่ของ HTML 5 จากนั้นใช้ CSS เพื่ออธิบายพิมพ์เขียวที่ยิ่งใหญ่ของคุณ!