คำตอบ:
HTML5 เป็นอย่างมากแต่ยังน่ากลัว
ในมุมมองของฉันมันเป็นส่วนใหญ่เกี่ยวกับการทำงานร่วมกัน ข้อมูลจำเพาะไปและระบุแม้กระทั่งกรณีขอบที่จะลองและให้แน่ใจว่าเบราว์เซอร์อ่านมาร์กอัปทางเดียวกัน
อันดับที่สอง HTML5 มีวิดีโอและเสียงซึ่งทำตามชื่อที่ใช้ หากคุณต้องการรวมวิดีโอหรือเสียง HTML5 ควรลดความต้องการปลั๊กอินของคุณ
ในที่สาม HTML5 มีการเข้าถึงและความช่วยเหลือทางความหมายจำนวนมาก ตัวอย่างเช่นองค์ประกอบที่ชอบ<section>และ<article>ช่วยให้เครื่องเข้าใจว่าเนื้อหาใดที่ควรจะเป็น ประเภทอินพุตใหม่เช่น<input type=email>นั้นอาจมีประโยชน์ด้วยเหตุผลเดียวกันแม้ว่าประเภทอินพุตใหม่จะมี UIs ที่กำหนดเองซึ่งทำให้มีประโยชน์แม้กับผู้อ่านมนุษย์ทั่วไป
โปรดทราบว่าฟีเจอร์ฟอร์มใหม่นั้นมีมากกว่าประเภทอินพุตใหม่ นอกจากนี้ยังมีการสนับสนุนข้อความตัวแทนและคุณลักษณะอื่น ๆ อีกมากมาย
HTML5 รวมถึง<canvas>ซึ่งอนุญาตให้วาดรูป 2D (และด้วย WebGL, 3D) รูปร่างเช่นแผนภูมิหรือแม้แต่แสดงเกม
พฤติกรรมเก่าเป็นมาตรฐานในขณะนี้เช่น Internet Explorer contentEditableของโบราณ
DOCTYPE ในที่สุดก็ดี! ตอนนี้คุณสามารถจดจำได้จริง!<!DOCTYPE html>
<meta charset=utf-8>ระบุการเข้ารหัสนี้ยังง่ายด้วย
หากคุณต้องการส่งข้อมูลไปยังลูกค้าและเชื่อมโยงกับองค์ประกอบตอนนี้คุณสามารถทำได้กับแอตทริบิวต์ที่กำหนดเอง ตัวอย่างเช่น<div data-status=open>Open</div>ได้รับอนุญาตในที่สุด data-โปรดทราบว่าชื่อแอตทริบิวต์ที่กำหนดเองต้องนำหน้าด้วย
ตอนนี้คุณสามารถรวม SVG และ MathML ในเอกสาร HTML ได้แล้ว ก่อนหน้านี้คุณสามารถทำได้ด้วยเอกสาร XHTML เท่านั้น
ในบรรดาฟังก์ชั่นใหม่และฟิลด์ HTML5 ที่กำหนดหนึ่งในสิ่งที่น่าประทับใจที่สุดคือ classList ซึ่งช่วยให้คุณสามารถจัดการกับแอททริบิวต์คลาสได้ง่ายขึ้น แทนที่จะต้อง getAttribute / setAttribute และใช้แฮ็กที่ซับซ้อนเพื่อหาว่าคลาสใดที่อิลิเมนต์มีและลบคลาสที่ระบุออกจากอิลิเมนต์นั้น classList ทำให้สถานการณ์ยาก ๆ เหล่านั้นง่ายมาก
นอกจากนี้ยังมีข้อกำหนดที่เกี่ยวข้องหลายอย่างเช่น Web Workers, Web Sockets และ IndexedDB ซึ่งไม่ได้เป็นส่วนหนึ่งของ HTML5 แต่ทุกคนพูดถึงพวกเขาราวกับว่าพวกเขาเป็น มีประโยชน์มากสำหรับการใช้ประโยชน์จากคอมพิวเตอร์แบบมัลติคอร์สื่อสารกับเซิร์ฟเวอร์และจัดเก็บข้อมูลในเครื่อง
สำหรับ CSS3 มันรวมถึงการสนับสนุนสำหรับภาพเคลื่อนไหว , เปลี่ยน , เส้นขอบโค้งมนและรูปแบบกล่องที่มีความยืดหยุ่น
ใหม่ใน CSS3 เป็นตัวเลือกใหม่ซึ่งทำให้การจับคู่องค์ประกอบเฉพาะในหน้าง่ายขึ้น (เช่นเฉพาะแถวคี่หรือแถวคู่ในตาราง)
ความทึบหน่วยใหม่กระโจมและทับทิมก็เป็นส่วนหนึ่งของ CSS3 เช่นกัน
ฉันคิดว่าสวยมากครอบคลุมทุกส่วนที่สำคัญ
เพื่อติดตามคุณสมบัติและข้อกำหนดสนับสนุนคุณสามารถตรวจสอบเมื่อฉันสามารถใช้ มันมีคุณสมบัติ HTML5 และ CSS3 และสิ่งต่าง ๆ เช่น SVG, PNG, CSS2.1 และ CSS2 นอกจากนี้ยังติดตามสถานะการอนุมัติของพวกเขา (คำแนะนำคำแนะนำที่เสนอคำแนะนำผู้สมัครร่างการทำงานมาตรฐาน IETF) FindMeByIPดูแลเมทริกซ์ของคุณสมบัติ CSS3 ที่สนับสนุนเท่านั้นโดยเบราว์เซอร์
บาง rejiggering และเรียบง่ายของไวยากรณ์ที่เกิดขึ้นในถั่วและสลักเกลียว:
<!DOCTYPE html>languageแอตทริบิวต์ที่ง่ายสำหรับ<html>แท็ก: <html lang="en">xmlnsและxml:langหากคุณต้องการความสอดคล้องของ XML)<meta>แท็กเฉพาะสำหรับcharset:<meta charset="utf-8" />scriptไม่ยอมรับtypeแอตทริบิวต์อีกต่อไปต้องการcharsetสคริปต์ระยะไกล: <script src="/media/js/jquery.js" charset="utf-8"></script>(สคริปต์แบบอินไลน์ไม่ต้องการแอตทริบิวต์เพิ่มเติมเลย)HTML5 นำความสามารถในการมาร์กอัปของคุณให้มีความหมายมากขึ้นและโดยรวมง่ายต่อการอ่าน / เขียนและมีขนาดไฟล์ที่เล็กลง แทนที่จะมีคุณเพียงแค่ต้อง<div id="nav"> <nav>ดูเหมือนจะไม่มาก แต่ก็เพิ่มขึ้น
องค์ประกอบจำนวนมากจาก XHTML1 และ HTML4 เลิกใช้แล้ว องค์ประกอบต่อไปนี้จะไม่ได้รับการสนับสนุนใน HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, และ<u><xmp>
องค์ประกอบใหม่ ๆ ใน HTML5 จะหมายถึงเพียง <div>แต่เพิ่มความหมายมากขึ้นมาร์กอัปและจะไม่ทำอะไรเลยยกเว้นให้เป็นทางเลือกที่มีความหมายมากขึ้นในการ องค์ประกอบใหม่เหล่านี้รวมถึง: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, และ<figure><figcaption>
ฟอร์ม HTML5 ได้รับการปรับปรุงอย่างมาก
ประเภทอินพุตใหม่
คุณสมบัติใหม่:
องค์ประกอบใหม่
เราสามารถเข้าไปในรูปแบบทุกวัน แต่นี่เป็นแหล่งข้อมูลเพื่ออธิบายสิ่งใหม่ทั้งหมดที่ดีกว่า
CSS3 นำยอดเยี่ยมของสื่อแบบสอบถาม Media Queries นั้นยอดเยี่ยมมาก ไม่พร้อมใช้งานใน IE8 และด้านล่าง แต่จะได้รับการสนับสนุนโดย IE9
CSS3 มีเคาน์เตอร์ที่เพิ่มขึ้น คุณสามารถใช้องค์ประกอบเหล่านี้กับองค์ประกอบตัวเลขอัตโนมัติโดยไม่ต้องสั่งรายการโดยใช้:beforeตัวเลือกหลอกและcontentรูปแบบเมื่อรายการสั่งซื้อหรือการเรียงลำดับหมายเลขจะไม่ถูกต้องทางความหมาย (ตัวอย่างเช่นการกำหนดหมายเลขขั้นตอนการกรอกข้อมูลในแบบฟอร์ม)
หากคุณเป็นแฟนของการรีเซ็ต CSS จะมีการรีเซ็ต HTML5 CSSจาก HTML5 Doctor ฉันได้เพิ่มการรีเซ็ตนี้สามครั้งสำหรับหน้าส่วนตัวของฉัน:
text-rendering: optimizeLegibility; เพิ่มสไตล์ในคำจำกัดความสำหรับ <body>labelรวมอยู่ในคำจำกัดความด้วยinputและselectเนื่องจากมันต้องการvertical-align: middle;insและ:focusจากการรีเซ็ต CSS ของ Eric Meyer ได้เพิ่มเข้ามาอีกครั้งมีการรีเซ็ตการแข่งขันที่เรียกว่าreset5แต่ฉันยังไม่ได้ประเมินเป็นการส่วนตัว มันขึ้นอยู่กับการรีเซ็ตทั้ง Eric Meyer และ HTML5 Doctor
HTML5 การรักษาความปลอดภัย Cheatsheetติดตามข้อบกพร่องใน HTML5 คุณสมบัติเป็นดำเนินการในเบราว์เซอร์ต่างๆและยังมีข้อบกพร่องในคุณลักษณะที่มีอยู่ที่ดีในการติดตามเช่นกัน
อย่างไรก็ตามการใช้องค์ประกอบ HTML5 ไม่ได้ทำให้ความหมายของรหัสของคุณโดยอัตโนมัติ WHATWG ได้เขียนบทความที่ชื่อว่า<section> ไม่ใช่แค่ "semantic <div>"อธิบายว่ามันไม่ได้เป็นเพียงองค์ประกอบของคอนเทนเนอร์
ใน HTML 5 มีอัลกอริทึมสำหรับสร้างมุมมองเค้าร่างของเอกสาร สิ่งนี้สามารถใช้เช่นโดย AT เพื่อช่วยผู้ใช้นำทางผ่านเอกสาร และ <ส่วน> และเพื่อน ๆ เป็นส่วนสำคัญของอัลกอริทึมนี้ ทุกครั้งที่คุณซ้อน <section> คุณจะเพิ่มความลึกของโครงร่างโดย 1 (ในกรณีที่คุณสงสัยว่าข้อดีของรุ่นนี้เปรียบเทียบกับรุ่น <h1> - <h6> แบบดั้งเดิมให้พิจารณาจากโปรแกรมอ่านบนเว็บที่ต้องการ รวมโครงสร้างเอกสารของเนื้อหาที่รวบรวมกับของไซต์โดยรอบใน HTML 4 นี่หมายถึงการแยกวิเคราะห์เนื้อหาทั้งหมดและจัดลำดับใหม่ของส่วนหัวทั้งหมดใน HTML5 ส่วนหัวจะจบที่ความลึกที่เหมาะสมฟรี)
...
หากคุณเพียงแค่แปลง <div> ทั้งหมดในหน้าของคุณเป็น <sections> ทั้งหมดก็ไม่น่าเป็นไปได้ที่หน้าของคุณจะมีโครงร่างที่คุณคาดไว้ และนอกเหนือจากการเป็นมารยาททางความหมายสิ่งนี้จะสร้างความสับสนให้กับผู้คนที่ไว้วางใจในการนำทาง
เหมือนกับทุกสิ่งทุกอย่างในโลกนี้มีเฟรมเวิร์กสำหรับเว็บแอปพลิเคชัน HTML5 ที่เรียกว่าSproutCoreซึ่งสร้างโดยวิศวกรของ Apple อดีตชื่อว่า Charles Jolley
นอกจากนี้ในการhtml5rocks.comคุณสามารถให้ทันกับhtml5doctor.comและhtml5gallery.com
มีรูปแบบพื้นฐานเช่นรัศมีเส้นขอบ, เงา (กล่อง / ข้อความ), การสนับสนุน rgba และอื่น ๆ ; นี่คือสิ่งที่ CSS3 เป็นที่รู้จักมากที่สุด ที่น่าสนใจคือแท็ก Canvas, แท็กวิดีโอ, ที่จัดเก็บในตัวเครื่อง, เว็บซ็อกเก็ตและอื่น ๆ ที่จะสร้างประสบการณ์การใช้งานที่สมบูรณ์ยิ่งขึ้นใน HTML / JS / CSS คุณสมบัติเหล่านี้มีศักยภาพที่จะเป็นทางเลือกที่ยอดเยี่ยมสำหรับ Flash บนเว็บโดยไม่ต้องใช้ปลั๊กอินเพิ่มเติม
ฉันพบว่าองค์ประกอบ HTML ใหม่ค่อนข้างน่าสนใจ ... บางองค์ประกอบกำลังสัญญาว่าจะใช้ semantic แบบแทนที่สำหรับdivs ทั่วไป องค์ประกอบใหม่ที่มีแนวโน้ม ได้แก่article, section, aside, figure, nav, headerและfooterอื่น ๆ ในกลุ่ม ฉันชอบความคิดเกี่ยวกับองค์ประกอบทางความหมายแทนคอนเทนเนอร์ที่ไม่มีความหมาย
โอ้ใช่รายการที่เกี่ยวข้อง: ง่ายมากdoctype- ในที่สุดสิ่งที่ฉันสามารถพิมพ์จากหน่วยความจำ!
( นี่คือคำตอบของฉันสำหรับคำถามที่คล้ายกันบน webapps.stackexchange.com )
หัวข้อCanvasและWeb Workerเป็นสิ่งที่น่าตื่นเต้นที่สุดของ HTML5 สำหรับฉัน ฉันเขียนเว็บแอปบางตัวที่ใช้ประโยชน์จากคุณสมบัติเหล่านี้:
GioAU หรือ [sic] ใช้ผืนผ้าใบอย่างกว้างขวางเพื่อให้คุณสามารถวางแผนเส้นทางบนแผนที่แล้วหาเส้นทางที่สั้นที่สุดตั้งแต่ต้นจนจบ (โดยใช้อัลกอริทึมของ Dijkstra ใน JavaScript)
การสาธิตเธรด JavaScriptใช้ผืนผ้าใบอย่าง จำกัด แต่แสดงการใช้เธรดผู้ทำงานพร้อมด้วยรหัสการสาธิต นอกจากนี้ยังใช้ประโยชน์จากการควบคุมแถบเลื่อนHTML5 input type = "range"
การสนับสนุนเบราว์เซอร์ HTML5 นั้นแตกต่างกันไปตามเบราว์เซอร์ มีเว็บไซต์ที่ดี (ใน HTML5, natch) เกี่ยวกับความพร้อมของ HTML5ที่แสดงว่าใครพร้อมสำหรับอะไร
เกี่ยวกับ CSS3 - ดูที่http://css3please.com/เพื่อดูว่าคุณสามารถทำอะไรได้บ้าง
เบราว์เซอร์ของคุณในภายหลังจะมีโอกาสมากขึ้นที่คุณจะเห็นผลกระทบ
แท็กเสียงและวิดีโออนุญาตให้นำเสนอสื่อโดยไม่ต้องใช้ปลั๊กอินเช่น Flash หรือ Silverlight และที่สำคัญที่สุดใช้งานได้บนเบราว์เซอร์ iPhone และ iPad มีปัญหาบางอย่างที่ต้องแก้ไขเกี่ยวกับตัวแปลงสัญญาณและการจัดการสิทธิ์ดิจิทัล
Jeremy Kieth เพิ่งเปิดตัวหนังสือที่ดีมากในหัวข้อ "HTML5 สำหรับนักออกแบบเว็บไซต์" คุณอาจต้องการตรวจสอบว่า
มันเป็นหนังสือเล่มแรกจาก A Book Apart ขอแนะนำให้นักออกแบบระดับกลางถึงระดับสูง A ++
หมายเหตุ : คุณอาจต้องรอสำเนาเอกสาร
สิ่งนี้ไม่ได้ให้ความเห็นเกี่ยวกับความสำคัญ แต่เป็นส่วนที่มีประโยชน์ระหว่าง HTML 4 และ 5
My 2 ¢ในการปรับปรุงหลัก:
<section>และอัลกอริทึมหัวสรุปใหม่ (ผมไม่บอกว่ามันเป็นเพียงแค่ของฉัน 2 ¢)<input type=email>data-* แอตทริบิวต์<audio>และ<video>เพราะยังไม่มีใครใส่สิ่งนี้:
HTML5 นั้นยอดเยี่ยมสำหรับสิ่งที่ทุกคนระบุไว้ แต่ก็รวมถึงตำแหน่งทางภูมิศาสตร์มาตรฐานเว็บเวิร์คซ็อกเก็ตผ้าใบและ LocalStorage เครื่องมือทั้งหมดนี้เป็นส่วนหนึ่งของสเป็ค HTML5 ซึ่งใช้จาวาสคริปต์มากมายเพื่อให้เกิดขึ้น