HTML5 บทนำ

ใหม่คืออะไรใน HTML5?

ประกาศ DOCTYPE สำหรับ HTML5 เป็นง่ายมาก:

<!DOCTYPE html>

การเข้ารหัสตัวอักษร (charset) ประกาศยังง่ายมาก:

ตัวอย่าง HTML5:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    </head>

    <body>
    Content of the document......
    </body>

    </html>

การเข้ารหัสตัวอักษรเริ่มต้นใน HTML5 เป็น UTF-8

องค์ประกอบ HTML5 ใหม่

ที่น่าสนใจที่สุดองค์ประกอบ HTML5 ใหม่:

ใหม่องค์ประกอบความหมาย เช่น <ส่วนหัว> <ส่วนท้าย> <บทความ> และ <ส่วน>

ใหม่คุณสมบัติขององค์ประกอบของแบบฟอร์มเช่นจำนวน, วันที่, เวลา, ปฏิทินและช่วง

ใหม่องค์ประกอบภาพ : <SVG> และ <ผ้าใบ>

ใหม่องค์ประกอบมัลติมีเดีย : <เสียง> และ <วิดีโอ>

ในบทถัดไปสนับสนุน HTML5คุณจะได้เรียนรู้วิธีการ "สอน" เบราว์เซอร์รุ่นเก่าที่จะจัดการกับ "ไม่ทราบ" (ใหม่) องค์ประกอบ HTML

HTML5 API ใหม่ (การเชื่อมต่อ Application Programming)

ที่น่าสนใจที่สุด API ใหม่ใน HTML5 คือ:

Geolocation HTML
ลากและวาง HTML
HTML เก็บข้อมูลท้องถิ่น
แอพลิเคชันแคช HTML
เว็บ HTML แรงงาน
HTML SSE

เคล็ดลับ: HTML การจัดเก็บข้อมูลท้องถิ่นเป็นทดแทนที่มีประสิทธิภาพสำหรับคุกกี้

องค์ประกอบลบออกใน HTML5

องค์ประกอบ HTML4 ต่อไปนี้ได้ถูกลบออกใน HTML5:

ในบทHTML5 โยกย้ายคุณจะได้เรียนรู้วิธีการง่ายโยกย้ายจาก HTML4 เป็น HTML5

ประวัติ HTML

ตั้งแต่วันแรกของเวิลด์ไวด์เว็บมีได้หลายรุ่นของ HTML:

จาก 1991-1999, HTML พัฒนามาจากรุ่นที่ 1 ถึงรุ่นที่ 4

ในปี 2000, World Wide Web Consortium (W3C) แนะนำ XHTML 1.0 ไวยากรณ์ XHTML เข้มงวดและนักพัฒนาที่ถูกบังคับให้เขียนถูกต้องและ "ดีขึ้น" รหัส

ในปี 2004 ของ W3C ตัดสินใจที่จะปิดตัวลงในการพัฒนาของ HTML ในความโปรดปรานของ XHTML

ในปี 2004 WHATWG (Hypertext เว็บแอพลิเคชันเทคโนโลยีคณะทำงาน) ที่ถูกสร้างขึ้น WHATWG ต้องการที่จะพัฒนา HTML, สอดคล้องกับวิธีการที่เว็บถูกนำมาใช้ในขณะที่ความเข้ากันได้กับรุ่นเก่าของ HTML

ใน 2004 - 2006 ที่ WHATWG รับการสนับสนุนจากผู้ขายที่เบราว์เซอร์ที่สำคัญ

ในปี 2006 W3C ประกาศว่าพวกเขาจะสนับสนุน WHATWG

ในปี 2008 เป็นครั้งแรก HTML5 ร่างของประชาชนได้รับการปล่อยตัว

ในปี 2012 WHATWG และ W3C ตัดสินใจเกี่ยวกับการแยก:

WHATWG ต้องการที่จะพัฒนา HTML เป็น "ลิฟวิ่งมาตรฐาน" มาตรฐานที่อยู่อาศัยมีการปรับปรุงอยู่เสมอและปรับปรุงให้ดีขึ้น คุณสมบัติใหม่ที่สามารถเพิ่ม แต่การทำงานเก่าไม่สามารถลบได้

WHATWG HTML5 มาตรฐานการดำรงชีวิตที่ถูกตีพิมพ์ในปี 2012 และมีการปรับปรุงอย่างต่อเนื่อง

W3C อยากจะพัฒนา HTML5 ที่ชัดเจนและมาตรฐาน XHTML

คำแนะนำ W3C HTML5ได้รับการปล่อยตัว 28 ตุลาคม 2014

W3C ยังตีพิมพ์เป็นHTML คำแนะนำ 5.1 ผู้สมัครในวันที่ 21 มิถุนายน 2016

HTML5 สนับสนุนเบราว์เซอร์

คุณสามารถสอนเบราว์เซอร์รุ่นเก่าที่จะจัดการกับ HTML5 ได้อย่างถูกต้อง

สนับสนุนเบราว์เซอร์ HTML5

HTML5 ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัย

นอกจากนี้เบราว์เซอร์เก่าและใหม่, การจัดการองค์ประกอบที่ไม่รู้จักกับองค์ประกอบแบบอินไลน์โดยอัตโนมัติ

ด้วยเหตุนี้คุณสามารถ "สอน" เบราว์เซอร์รุ่นเก่าที่จะจัดการกับ "ไม่ทราบ" องค์ประกอบ HTML

คุณยังสามารถสอน IE6 (Windows XP 2001) วิธีการจัดการกับองค์ประกอบ HTML ที่ไม่รู้จัก

กำหนดองค์ประกอบความหมายเป็นบล็อกองค์ประกอบ

HTML5 กำหนดใหม่แปดความหมายองค์ประกอบ ทั้งหมดเหล่านี้เป็นระดับบล็อกองค์ประกอบ

เพื่อความปลอดภัยของพฤติกรรมที่ถูกต้องในเบราว์เซอร์รุ่นเก่าคุณสามารถตั้งค่าแบบ CSS จอแสดงผลอสังหาริมทรัพย์สำหรับองค์ประกอบ HTML เหล่านี้ไปยังบล็อก :

    header, section, footer, aside, nav, main, article, figure {
   display: block;
    }

เพิ่มองค์ประกอบใหม่เพื่อ HTML

นอกจากนี้คุณยังสามารถเพิ่มองค์ประกอบใหม่ในหน้า HTML กับเคล็ดลับเบราว์เซอร์
ตัวอย่างนี้เพิ่มองค์ประกอบใหม่ที่เรียกว่า<myHero>ในหน้า HTML และกำหนดรูปแบบสำหรับมัน

ทดลองกดตรงนี้

จาวาสคริปต์คำสั่งdocument.createElement ( "myHero")เป็นสิ่งจำเป็นในการสร้างองค์ประกอบใหม่ใน IE 9 และก่อนหน้านี้

ปัญหากับ Internet Explorer 8

คุณสามารถใช้วิธีการแก้ปัญหาที่อธิบายข้างต้นสำหรับองค์ประกอบ HTML5 ใหม่ทั้งหมด
อย่างไรก็ตามIE8 (และก่อนหน้า) ไม่อนุญาตให้จัดแต่งทรงผมขององค์ประกอบที่ไม่รู้จัก!
โชคดีที่ชวร์ดวิส์เชอร์สร้าง HTML5Shiv! HTML5Shiv เป็นวิธีแก้ปัญหา JavaScript เพื่อเปิดใช้งานการจัดแต่งทรงผมขององค์ประกอบ HTML5 ใน Internet Explorer รุ่นก่อนที่จะมีรุ่นที่ 9
คุณจะต้อง HTML5shiv เพื่อให้เข้ากันได้สำหรับ IE เบราว์เซอร์ที่เก่ากว่า IE 9

ไวยากรณ์สำหรับ HTML5Shiv

HTML5Shiv วางอยู่ภายใน <head>
HTML5Shiv เป็นไฟล์จาวาสคริปต์ที่ถูกอ้างถึงใน <script> แท็ก
คุณควรใช้ HTML5Shiv เมื่อคุณกำลังใช้องค์ประกอบ HTML5 ใหม่ ๆ เช่น: <บทความ> <ส่วน> <กัน> <nav> <ส่วนท้าย>
คุณสามารถดาวน์โหลดรุ่นล่าสุดของ HTML5shiv จาก GitHubหรืออ้างอิงรุ่น CDN ที่ https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

ตัวอย่าง HTML5Shiv

หากคุณไม่ต้องการที่จะดาวน์โหลดและเก็บ HTML5Shiv บนเว็บไซต์ของคุณคุณสามารถอ้างอิงรุ่นที่พบในเว็บไซต์ CDN
สคริปต์ HTML5Shiv จะต้องอยู่ใน <head> องค์ประกอบหลังจาก stylesheets ใด ๆ

ทดลองกดตรงนี้

HTML5 องค์ประกอบใหม่

องค์ประกอบใหม่ใน HTML5

ด้านล่างเป็นรายการขององค์ประกอบ HTML5 ใหม่และรายละเอียดของสิ่งที่พวกเขาจะใช้สำหรับการเป็น

ใหม่ความหมาย / โครงสร้างองค์ประกอบ

HTML5 มีองค์ประกอบใหม่สำหรับโครงสร้างของเอกสารที่ดีกว่า:

อ่านเพิ่มเติมเกี่ยวกับHTML5 ความหมาย

องค์ประกอบรูปแบบใหม่

อ่านทั้งหมดเกี่ยวกับเก่าและใหม่องค์ประกอบของแบบฟอร์มในองค์ประกอบฟอร์ม HTML

ประเภทการป้อนข้อมูลใหม่

เรียนรู้เกี่ยวกับรูปแบบการใส่เก่าและใหม่ใน HTML ประเภทการป้อนข้อมูล
เรียนรู้เกี่ยวกับการป้อนข้อมูลแบบในแอตทริบิวต์การป้อนข้อมูล HTML

HTML5 - เพิ่มคุณสมบัติไวยากรณ์

HTML5 ช่วยให้สี่ไวยากรณ์ที่แตกต่างกันสำหรับแอตทริบิวต์
ตัวอย่างนี้แสดงให้เห็นถึงไวยากรณ์ต่างๆที่ใช้ใน <input> tag:

ใน HTML5 ทั้งสี่ไวยากรณ์อาจจะใช้ขึ้นอยู่กับสิ่งที่จำเป็นสำหรับแอตทริบิวต์

กราฟิก HTML5

อ่านเพิ่มเติมเกี่ยวกับผ้าใบ HTML5
อ่านเพิ่มเติมเกี่ยวกับHTML5 SVG

องค์ประกอบสื่อใหม่

อ่านเพิ่มเติมเกี่ยวกับวิดีโอ HTML5
อ่านเพิ่มเติมเกี่ยวกับHTML5 และเสียง

การออกแบบและพัฒนาเว็บไซด์

วันอังคารที่ 27 มิถุนายน พ.ศ. 2560

ภาษา HTML ช่วงที่ 5