HTML5/"> ยุคของ HTML5 เป็นที่นิยมมาถึงถ้าคุณยังคงรอความเข้ากันได้ของเบราว์เซอร์นั่นหมายความว่าคุณไม่ได้สัมผัสกับเว็บแน่นอนนี่เป็นเพราะการพัฒนาที่เฟื่องฟูของลูกค้ามือถือ ไม่เชื่อฉันสามารถพูดได้ว่า: เชื่อหรือไม่!
มาดูโครงสร้างแท็ก HTML5 มาตรฐาน: (ฉันแค่พูดถึงแท็กที่นี่และไม่มีอะไรเกี่ยวข้อง)
<! doctype html>
<html>
<head>
<meta charset = "gb2312">
<title> html5 </title>
</head>
<body>
<ส่วนหัว>
<av> </av>
</header>
<บทความ>
<section>
<H2> </h2>
<p> </p>
</section>
</บทความ>
<footer> </ooter>
</body>
</html>
ความก้าวหน้าของแท็ก HTML5 นั้นแน่นอนเพราะความหมายของมันใช้งานง่ายกว่า แน่นอนว่านี่เป็นเพียงหนึ่งในเคล็ดลับของความคืบหน้าของ HTML5 บางคนแนะนำว่า: อย่าพูดว่าความคืบหน้าของ HTML5 เป็นการปฏิวัติ แต่พัฒนา! ฉันไม่ได้คัดค้านคำสั่งนี้ แต่มันเป็นการปฏิวัติในบางประเด็น ฉันไม่ต้องการออกจากหัวข้อที่นี่เราพูดถึงฉลากเท่านั้น
แน่นอนเมื่อตื่นเต้นกับแท็กความหมายที่ยอดเยี่ยมเช่นนี้ฉันไม่เพียง แต่ต้องถาม: IE สนับสนุนหรือไม่? น่าเสียดายที่คำตอบคือไม่ หากคุณกลัวอยู่แล้วคุณต้องอดทนต่อการทรมานอย่างไม่มีที่สิ้นสุด (IE9 และ IE10 เข้ากันได้แล้วและรองรับ HTML5 และ CSS3/"> CSS3.0)
แต่คุณต้องดีใจที่มีอัจฉริยะมากมายในยุคนี้ที่คุณอาศัยอยู่มีคนช่วยคุณแก้ปัญหานี้! แม้ว่ามันจะไม่สามารถเรียกได้ว่าสมบูรณ์แบบ!
ลองมาดูวิธีแก้ปัญหาหลายอย่างเพื่อแก้ปัญหาที่ไม่สนับสนุนแท็ก HTML5 ที่เข้ากันได้กับ IE6/7/8:
1. JavaScript: Document.createelenment (...... ) ส่วนหนึ่งของเหตุผลที่ IE6/7/8 ไม่ได้รับการสนับสนุนคือพวกเขาไม่ได้พิจารณาส่วนท้ายว่าเป็นแท็ก HTML ที่ถูกต้อง ดังนั้นเราจะไม่ทำให้มันเป็นฉลากใช่ไหม วิธีที่ตรงที่สุดคือการสร้าง JavaScript: Document.createelenment (...... )!(การทำงาน(){
var element = ['header', 'footer', 'บทความ', 'กัน', 'ส่วน', 'nav', 'เมนู', 'hgroup', 'รายละเอียด', 'กล่องโต้ตอบ', 'รูป', 'figcaption'],
len = element.length;
ในขณะที่ (len-) {
document.createElement (องค์ประกอบ [i])
-
-
นี่เป็นเพียงการสร้างแท็ก HTML5 ทั่วไปสองสามแท็กเพื่อให้พวกเขาสามารถกลายเป็นแท็กใน IE6/7/8
มีคนเขียนไฟล์ JS ที่สมบูรณ์คุณเพียงแค่ต้องแนะนำไฟล์เช่นนี้:
<!-[ถ้า LT IE 9]>
<script src = http: //html5shim.googlecode.com/svn/trunk/html5.js> </script>
<! [endif]-> นอกจากนี้ยังมีการเขียน
<!-[ถ้า lte ie 9]>
<script src = http: //html5shiv.googlecode.com/svn/trunk/html5.js> </script>
<! [endif]-> ความแตกต่างเพียงอย่างเดียวระหว่าง HTML5SHIV และ HTML5SHIM คือ M และ V และไม่มีความแตกต่างอื่น ๆ ! แน่นอนว่านี่ไม่ใช่สิ่งที่ฉันพูด ข้อความต้นฉบับคือ: ... ความแตกต่างเพียงอย่างเดียวคืออันที่มี M และหนึ่งมี av - นั่นคือ
ที่นี่เราต้องการจดบันทึกพิเศษ: นั่นคือการตัดสินคำอธิบายประกอบที่เป็นเอกลักษณ์ของ IE:
LTE: ตัวย่อน้อยกว่าหรือเท่ากับซึ่งหมายถึงน้อยกว่าหรือเท่ากับ
LT: เป็นตัวย่อที่น้อยกว่าซึ่งหมายถึงน้อยกว่า
GTE: เป็นตัวย่อที่มากกว่าหรือเท่ากับซึ่งหมายถึงมากกว่าหรือเท่ากับ
GT: เป็นตัวย่อที่ยิ่งใหญ่กว่าซึ่งมีความหมายมากกว่า
- : มันหมายถึงไม่เท่ากันเหมือนกับสัญลักษณ์การตัดสินที่ไม่เท่าเทียมกันใน JavaScript
แม้ว่า IE9 รองรับแท็ก HTML5 การสนับสนุนไม่สมบูรณ์มากดังนั้นคุณยังสามารถเขียน LTE ซึ่งขึ้นอยู่กับทางเลือกของคุณ!
แน่นอนอย่าลืมระบุคุณสมบัติการแสดงผลของแท็กที่สร้างขึ้นใหม่ ในกรณีส่วนใหญ่ฉันต้องการให้แท็กถูกบล็อก:
ส่วนหัว, ส่วนท้าย, บทความ, ด้านข้าง, ส่วน, NAV, เมนู, hGroup, รายละเอียด, กล่องโต้ตอบ, รูป, figcaption {display: block}
2. วิธีการแท็กทำรังในความเป็นจริงที่จะกล่าวอย่างตรงไปตรงมาเป็นเพราะความหมาย HTML5 แท็ก Nest Divs และแท็กอื่น ๆ ที่มีอยู่และจากนั้นเขียนสไตล์สำหรับ divs เท่านั้น ฉันไม่เห็นด้วยกับวิธีการเขียนนี้ สิ่งนี้ดีกว่าทำมันให้แท็กรหัสความหมายหรือคลาส!
<!-[ถ้า LT IE 9]>
<style>
ร่างกาย> * .section {
สี: #ff0;
-
</style>
<! [endif]->
<style>
ส่วน. ส่วน {สี: #f00;
-
</style>
<section> <div> การทดสอบเนื้อหา ... </div> </section>
แต่ถ้ามันคล้ายกับโครงสร้างนี้ก็ไม่ปลอดภัยที่จะใช้ :<av>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</av>
3. ความคิดเห็นแบบมีเงื่อนไข<!-[ถ้า lt คือ 9]> <div> <! [endif]->
<!-[ถ้าเช่น 9]> <section> <! [endif]->
<!-[ถ้า! เช่น]> <!-> <section> <!-<! [endif]->
-
<!-[ถ้า lt คือ 9]> </div> <! [endif]->
<!-[ถ้าเช่น 9]> </section> <! [endif]->
<!-[ถ้า! เช่น]> <!-> </section> <!-<! [endif]->
ดูการตัดสินความคิดเห็นที่เป็นเอกลักษณ์ของ IE อีกครั้ง:
LTE: ตัวย่อน้อยกว่าหรือเท่ากับซึ่งหมายถึงน้อยกว่าหรือเท่ากับ
LT: เป็นตัวย่อที่น้อยกว่าซึ่งหมายถึงน้อยกว่า
GTE: เป็นตัวย่อที่มากกว่าหรือเท่ากับซึ่งหมายถึงมากกว่าหรือเท่ากับ
GT: เป็นตัวย่อที่ยิ่งใหญ่กว่าซึ่งมีความหมายมากกว่า
- : มันหมายถึงไม่เท่ากันเหมือนกับสัญลักษณ์การตัดสินที่ไม่เท่าเทียมกันใน JavaScript
ฉันเชื่อว่าทุกคนเข้าใจว่าเกิดอะไรขึ้น! นี่เป็นวิธีที่เจ็บปวดมากขึ้น! รหัส HTML จำนวนมากทำให้รหัสที่ต้องการให้เกิดความสับสนมากยิ่งขึ้น และไม่เอื้อต่อการเขียนสไตล์
4. ใช้ XMLNS เพื่อกำหนดพื้นที่ชีวิตของเอกสารXMLNS เป็นตัวย่อของเนมสเปซ XHTML ซึ่งเป็นเนมสเปซที่เรียกว่า เช่นเดียวกับการประกาศ Doctype XMLNS ก็เป็นคำประกาศเช่นกัน ซึ่งแตกต่างจากการประกาศ Doctype ยังคงมีอยู่ในเอกสาร HTML, XMLNS ไม่มีอยู่ในเอกสาร HTML XMLNs ที่เราเห็นมักจะปรากฏในเอกสาร XHTML
<html xmlns = http: //www.w3.org/1999/xhtml lang = en> นี่คือเนมสเปซดั้งเดิมของ XHTML ซึ่งง่ายขึ้นหลังจาก HTML5
<html lang = en> วิธีการจากบันทึก Elco Klingen ดึงดูดความสนใจอย่างกว้างขวางในตอนต้น เทคนิคนี้มีเนมสเปซ XML และใช้องค์ประกอบที่มีคำนำหน้าเนมสเปซเช่น:
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/html5/">>
<body>
<html5: ส่วน>
<!-เนื้อหา->
</html5: ส่วน>
</body>
</html>
คำนำหน้าของ: HTML5 ไม่ใช่วิธีการเขียนมาตรฐานคุณยังสามารถใช้ตัวละครอื่น ๆ แทน: HL5 ก็โอเคเช่นกัน ด้วยคำนำหน้าเช่นรับรู้องค์ประกอบใหม่ทำให้สามารถใช้สไตล์ได้ มันทำงานได้ดีในเบราว์เซอร์อื่น ๆ ดังนั้นในที่สุดคุณก็ประสบความสำเร็จในการสร้างองค์ประกอบเดียวกันและสไตล์เดียวกันในแต่ละเบราว์เซอร์
วิธีนี้มีข้อบกพร่องที่ชัดเจน: คุณต้องใช้เนมสเปซที่จัดรูปแบบ XML ในเอกสาร HTML และคุณต้องทำสิ่งนี้ใน CSS:
html5/: ส่วน {
แสดง: บล็อก;
-
แล้วความเข้ากันได้กับ JS เป็นอย่างไร? นี่คือการทดสอบ DEML
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns: html5 = "http://www.w3.org/html5/">>
<head>
<title>; html5 </title>
<meta charset = "gb2312">
<style>
html5/: ส่วน {display: block; ความกว้าง: 100px; ความสูง: 50px; ความเป็นมา:#f00; เส้นขอบ: 1px Solid Blue; สี: #ff0; -
</style>
<script>
window.onload = function () {
การแจ้งเตือน (document.getElementById ("ทดสอบ"). innerhtml + "--- id")
การแจ้งเตือน (document.getElementsByTagname ("ส่วน") [0] .innerhtml + "--- tagname")
การแจ้งเตือน (document.getElementsByTagname ("ส่วน") [0] .innerhtml + "--- uppercase")
-
</script>
</head>
<body>
<html5: ส่วน ID = "ทดสอบ"> เนื้อหา </html5: ส่วน>
</body>
</html>
ผลการทดสอบได้รับการทดสอบโดย IE6/7/8 แต่สามารถรับ ID ได้เฉพาะใน FixFox และ Chrome ดังนั้นวิธีนี้จึงไม่ใช่วิธีที่ยอมรับได้!