ไขปริศนา HTML5 และ CSS3

การพัฒนาอินเทอร์เน็ตทำให้เกิดเทคโนโลยีใหม่ ๆ อยู่เสมอ และ HTML5 และ CSS3 เป็นหัวข้อยอดนิยมที่มีการพูดคุยกันเมื่อเร็ว ๆ นี้ สำหรับนักพัฒนาอินเทอร์เน็ตทุกคน โดยเฉพาะนักพัฒนาส่วนหน้า พวกเขาเต็มไปด้วยความอยากรู้อยากเห็นและความปรารถนา แล้วอะไรคือสิ่งที่เกี่ยวกับ HTML5 และ CSS3 ที่ทำให้เราโดดเด่น? ฉันแบ่งปัน "เปิดเผยความลับของ HTML5 และ CSS3 " กับคุณที่ WebRebuild Beijing Exchange Conference และกลุ่มชานมไข่มุก PPT อยู่ที่นี่:
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8

HTML5

รุ่นก่อนของร่าง HTML 5 เรียกว่า Web Applications 1.0 เสนอโดย WHATWG ในปี 2547 และยอมรับโดย W3C ในปี 2550 และมีการจัดตั้งทีมงาน HTML ใหม่ เมื่อวันที่ 22 มกราคม พ.ศ. 2551 ได้มีการเผยแพร่ร่างอย่างเป็นทางการฉบับแรก HTML 5 เป็นการก้าวกระโดดครั้งใหญ่ที่สุดในมาตรฐานการพัฒนาเว็บไซต์ในทศวรรษที่ผ่านมา แตกต่างจากเวอร์ชันก่อนหน้า HTML 5 ไม่ได้ใช้เพียงเพื่อแสดงเนื้อหาเว็บเท่านั้น ภารกิจใหม่คือการนำเว็บเข้าสู่แพลตฟอร์มแอปพลิเคชันที่สมบูรณ์ บนแพลตฟอร์ม HTML 5 วิดีโอ เสียง รูปภาพ ภาพเคลื่อนไหว และการโต้ตอบทางคอมพิวเตอร์ได้รับมาตรฐาน . มาดูภาพรวมทางเทคนิคของ HTML5 กัน:

องค์ประกอบใหม่และองค์ประกอบที่ถูกลบ HTML5

HTML5 เพิ่มองค์ประกอบมัลติมีเดียและการโต้ตอบใหม่ ๆ มากมาย เช่น วิดีโอและเสียง ใน HTML4 หากคุณต้องการฝังวิดีโอหรือเสียง คุณจะต้องแนะนำส่วนโค้ดขนาดใหญ่และเข้ากันได้กับเบราว์เซอร์ต่างๆ อย่างไรก็ตาม HTML5 จำเป็นเท่านั้น เพียงเท่านี้ก็สะดวกพอๆ กับแท็ก img ในแง่ของเค้าโครงหน้าและการใช้งานเนื้อหา HTML5 ได้เพิ่มองค์ประกอบแท็กที่มีโครงสร้างใหม่มากมาย รวมถึงองค์ประกอบระดับบล็อกและความหมาย หากคุณต้องการใช้ HTML เพื่อแสดงแถบความคืบหน้าในการอัปโหลดของไฟล์ ใน HTML5 คุณสามารถใช้ความคืบหน้าได้ องค์ประกอบที่จะแสดง มีแอตทริบิวต์ value อธิบายจำนวนงานที่ทำเสร็จแล้ว และแอตทริบิวต์สูงสุดอธิบายจำนวนงานที่จำเป็นทั้งหมด คุณยังสามารถรับแอตทริบิวต์ตำแหน่ง (อ่านอย่างเดียว) ของแถบความคืบหน้านี้ผ่าน DOM อินเทอร์เฟซซึ่งเป็นเปอร์เซ็นต์ของความสำเร็จของงาน Youtube ได้ลองใช้เทคโนโลยี HTML5 แล้ว http://www.youtube.com/html5 (จำเป็นต้อง หลีกเลี่ยงไฟร์วอลล์ ) เป็นการสาธิตที่สร้างขึ้นโดยใช้ HTML5 เมื่อพิจารณาจากซอร์สโค้ดทั้งหน้า มันง่ายมาก แน่นอนว่า HTML5 ยังเพิ่มคุณลักษณะใหม่ให้กับองค์ประกอบบางอย่าง เช่น คุณลักษณะตัวยึดตำแหน่งของอินพุตและพื้นที่ข้อความ ซึ่งเทียบเท่ากับพรอมต์อินพุตของกล่องอินพุต สคริปต์มีแอตทริบิวต์อะซิงก์ที่จะส่งผลต่อการโหลดและการทำงานของ สคริปต์ สำหรับคุณลักษณะทั้งหมดที่เหมือนกันใน HTML เรามักจะเรียกคุณลักษณะเหล่านั้นว่า "คุณลักษณะส่วนกลาง" เช่น class, id, tabindex, title นอกจากนี้ HTML5 ยังเพิ่มคุณลักษณะส่วนกลางใหม่บางอย่าง เช่น contenteditable, contextmenu, ซ่อนเร้น และคุณลักษณะอื่นๆ HTML5 ยังเพิ่มการรองรับ Microdata เช่นแอตทริบิวต์ใหม่ของ HTML5 เช่น item, itempro และ subject

แน่นอนว่า HTML5 ยังลบองค์ประกอบบางอย่างที่แสดงถึงการนำเสนอหน้า เช่น แบบอักษร ตรงกลาง การขีดฆ่า ฯลฯ ซึ่งควรจะดำเนินการโดย CSS ดังนั้นจึงยังคงเข้าใจได้ง่าย นอกจากนี้ยังลบองค์ประกอบบางอย่างที่ส่งผลต่อการเข้าถึงเว็บไซต์ด้วย เช่น frame, frameset, noframe และองค์ประกอบบางอย่างที่ไม่ธรรมดา เช่น ตัวย่อ ให้ใช้ abbr แทนตัวย่อ HTML5 ยังลบความคุ้นเคย HTML บางอย่างที่ส่งผลต่อความเข้ากันได้ของไคลเอ็นต์ เช่น คุณลักษณะ rev ของลิงก์และคุณลักษณะขอบเขตของ td นอกจากนี้ HTML5 ยังลบคุณลักษณะบางอย่างที่ระบุถึงการนำเสนอหน้า เช่น คุณลักษณะการจัดตำแหน่งและ bgcolor ขององค์ประกอบบางอย่าง

รองรับ HTML5 สำหรับแบบฟอร์ม

HTML5 มีประเภทการควบคุมที่มีประสิทธิภาพ เช่น url, อีเมล, วันที่, โทรศัพท์ ฯลฯ คุณลักษณะข้อจำกัดที่มีประสิทธิภาพ เช่น จำเป็นต้องระบุ ยอมรับแอตทริบิวต์สำหรับการอัปโหลดไฟล์ และการสนับสนุนสำหรับรูปแบบองค์ประกอบที่ซ้ำกันบางรูปแบบ HTML5 ยังให้การสนับสนุนเมื่อส่ง แบบฟอร์ม คุณสามารถตั้งค่าวิธีการส่งเป็นการส่ง XML เพื่อให้ข้อมูลที่เซิร์ฟเวอร์ได้รับอยู่ในรูปแบบ XML ถูกกำหนดให้เป็น "Web Forms 2.0" ปัจจุบันมีการรองรับ Web Forms อย่างสมบูรณ์แบบ 2.0.

คลิกที่นี่เพื่อดู Web Forms 2.0 DEMO ต้องใช้ Opera9.5+

การเปลี่ยนแปลง HTML5 DOM

HTML5 มีอินเทอร์เฟซมากมายที่สืบทอดมาจาก HTMLDocument ใน DOM ระดับ 2 HTML แน่นอนว่า HTML5 ยังมีสมาชิกใหม่ที่น่าสนใจใน DOM เช่น: รองรับ getElementsByClassName ซึ่งช่วยให้คุณสามารถเลือกองค์ประกอบตามชื่อคลาส getSelection() จะส่งคืนค่าปัจจุบัน การเลือกวัตถุ มีสองวิธี querySelector และ querySelectorAll บนตัวเลือกซึ่งสามารถรับองค์ประกอบที่จะสอบถามตามตัวเลือก CSS ซึ่งเทียบเท่ากับ Y.one และ Y.all ใน YUI3

API จาวาสคริปต์ HTML5

API ใหม่ใดบ้างที่ HTML5 เพิ่มลงใน Javascript

• วิดีโอ/เสียง: HTML5 มี API สำหรับวิดีโอและเสียงเพื่อให้นักพัฒนาสามารถควบคุมอินเทอร์เฟซผู้ใช้ของตนเอง เช่น การเล่นหรือการหยุดเนื้อหาสื่อชั่วคราว
• Canvas: Canvas เป็นองค์ประกอบ HTML ใหม่ที่สามารถใช้ในการวาดกราฟิกโดยใช้ภาษาสคริปต์ (โดยปกติคือ JavaScript) ตัวอย่างเช่น คุณสามารถใช้มันในการวาดภาพ ภาพรวม หรือทำแอนิเมชั่นง่ายๆ (และไม่ง่ายนัก) Canvas เป็นสิ่งมหัศจรรย์ ความรู้สึกแรกๆ ที่มอบให้ฉันก็เหมือนกับการใช้ Photoshop ทุกวิธี คุณสามารถรับ Canvas API ผ่านทาง canvas.getContext('2d') คุณสามารถตั้งค่าสีเติมได้ fillStyle หรือตั้งค่าสีเส้นโครงร่างผ่าน strokeStyle แม้แต่การทำงานของเส้นทางการวาดก็เกิดขึ้นพร้อมกับการทำงานของปากกาของ Photoshop Canvas ถูกนำมาใช้ในเว็บไซต์หลายแห่ง เช่น สถิติสถานะการดาวน์โหลดแบบเรียลไทม์ของ Firefox และ Canvas ยังสามารถใช้เพื่อเขียนเกมบนเว็บได้ด้วย
• Drag&Drop: ในสื่อภาพของอุปกรณ์ชี้ตำแหน่ง การทำงานของ "Drag" คือเหตุการณ์ที่เมาส์ลง (mousedown) พร้อมด้วยการเคลื่อนไหวของเมาส์ (mousemove) ในขณะที่ "Drop" เป็นเหตุการณ์ที่เกิดขึ้นเมื่อปล่อยเมาส์ อินเทอร์เฟซ DataEvent และ DataTransfer ถูกกำหนดไว้ใน Drag&Drop ในเวลาเดียวกัน เมื่อการดำเนินการลากเกิดขึ้น เหตุการณ์ต่างๆ เช่น Dragstart, Dragenter, Dragleave, Drop และ Dragend จะถูกทริกเกอร์
• Web Workers: ทำให้ Javascript เป็นแบบมัลติเธรดและสามารถทำงานได้มากมายในเบื้องหลังโดยไม่ปิดกั้นการทำงานของเบราว์เซอร์ปัจจุบัน
• ตำแหน่งทางภูมิศาสตร์: ตำแหน่งทางภูมิศาสตร์ เมื่อคุณเรียกใช้เมธอด navigator.geolocation.getCurrentPosition(success, error) เบราว์เซอร์จะแจ้งว่าคุณต้องการแชร์ตำแหน่งทางภูมิศาสตร์ของคุณหรือไม่ หากคุณเลือกที่จะแชร์ ฟังก์ชัน Success จะถูกเรียกกลับ ฟังก์ชันความสำเร็จคือวัตถุตำแหน่ง วัตถุตำแหน่งนี้มีวัตถุพิกัดประกอบด้วยข้อมูลตำแหน่งทางภูมิศาสตร์จำนวนมาก เช่น ละติจูด (มิติ) และลองจิจูด (ลองจิจูด) เพื่อให้คุณสามารถทราบตำแหน่งเฉพาะของคุณได้ มีการใช้กันอย่างแพร่หลายในโทรศัพท์มือถือบางรุ่นเช่น Iphone
• แคชแอปพลิเคชัน: นี่คือการสนับสนุนของ HTML5 สำหรับแอปพลิเคชันออฟไลน์ โดยการเพิ่มรายการแอตทริบิวต์ให้กับองค์ประกอบ html เบราว์เซอร์จะแจ้งให้คุณทราบว่าคุณต้องการแคชข้อมูลไปยังไคลเอนต์หรือไม่ หากผู้ใช้เลือกที่จะอนุญาต ข้อมูลนั้นจะเป็นไปตามที่ระบุ รายการไฟล์รายการ แคชไฟล์ที่คุณต้องการเพื่อให้คุณยังคงสามารถใช้แอปได้เมื่อเครือข่ายของคุณไม่พร้อมใช้งาน สำหรับแอปพลิเคชันออฟไลน์ Google ยังได้พัฒนาส่วนขยายเบราว์เซอร์ Google Gears อีกด้วย แต่ท้ายที่สุดแล้ว Google ก็เปลี่ยนมาใช้ HTML5 และอาจเห็นข้อดีของที่เก็บข้อมูล HTML5 และแอปพลิเคชันออฟไลน์แล้ว
• ที่เก็บข้อมูล: Webkit ได้ใช้ที่เก็บข้อมูลฐานข้อมูล คุณสามารถสืบค้นข้อมูลและดำเนินการบางอย่างได้เช่นเดียวกับการดำเนินการฐานข้อมูลส่วนหลัง พื้นที่เก็บข้อมูลอีกประเภทหนึ่งคือพื้นที่จัดเก็บคีย์-ค่า เช่น sessionStorage และ localStorage ซึ่งสามารถจัดเก็บและรับค่าผ่าน setItem และ getItem เมื่อเทียบกับพื้นที่จัดเก็บคุกกี้แล้ว ความจุจะใหญ่กว่ามาก
• การส่งข้อความ X-Document: เบราว์เซอร์ป้องกันการสื่อสารเอกสารระหว่างโดเมนต่างๆ ด้วยเหตุผลด้านความปลอดภัยและความเป็นส่วนตัว แม้ว่านี่จะเป็นข้อจำกัดด้านความปลอดภัย แต่ก็นำปัญหามากมายมาสู่การสื่อสารเอกสารในโดเมนที่แตกต่างกันซึ่งไม่เป็นอันตราย แต่เป็น HTML5 ข้ามเอกสารนี้ การสื่อสารสามารถทำได้ ทำให้เราไม่สนใจว่าโดเมนต้นทางมาจากไหนและป้องกันการโจมตีด้วยสคริปต์

HTML5 ทำให้คุณตื่นเต้นหรือไม่? แล้วเมื่อไร HTML5 จะกลายเป็นมาตรฐาน? ว่ากันว่าต้องรอถึงปี 2022 มีเว็บที่น่าสนใจ http://ishtml5readyyet.com/ ที่จะมาบอกคุณว่า HTML5 จะมาถึงจริงกี่วัน