HTML5 บทนำ
ใหม่คืออะไรใน HTML5?
ประกาศ DOCTYPE สำหรับ HTML5 เป็นง่ายมาก:
<!DOCTYPE html>
การเข้ารหัสตัวอักษร (charset) ประกาศยังง่ายมาก:
<meta charset="UTF-8">
ตัวอย่าง 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 และกำหนดรูปแบบสำหรับมัน ปัญหากับ Internet Explorer 8คุณสามารถใช้วิธีการแก้ปัญหาที่อธิบายข้างต้นสำหรับองค์ประกอบ HTML5 ใหม่ทั้งหมดอย่างไรก็ตามIE8 (และก่อนหน้า) ไม่อนุญาตให้จัดแต่งทรงผมขององค์ประกอบที่ไม่รู้จัก! โชคดีที่ชวร์ดวิส์เชอร์สร้าง HTML5Shiv! HTML5Shiv เป็นวิธีแก้ปัญหา JavaScript เพื่อเปิดใช้งานการจัดแต่งทรงผมขององค์ประกอบ HTML5 ใน Internet Explorer รุ่นก่อนที่จะมีรุ่นที่ 9 คุณจะต้อง HTML5shiv เพื่อให้เข้ากันได้สำหรับ IE เบราว์เซอร์ที่เก่ากว่า IE 9 ไวยากรณ์สำหรับ HTML5ShivHTML5Shiv วางอยู่ภายใน <head>HTML5Shiv เป็นไฟล์จาวาสคริปต์ที่ถูกอ้างถึงใน <script> แท็ก คุณควรใช้ HTML5Shiv เมื่อคุณกำลังใช้องค์ประกอบ HTML5 ใหม่ ๆ เช่น: <บทความ> <ส่วน> <กัน> <nav> <ส่วนท้าย> คุณสามารถดาวน์โหลดรุ่นล่าสุดของ HTML5shiv จาก GitHubหรืออ้างอิงรุ่น CDN ที่ https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js
<head>
ตัวอย่าง HTML5Shivหากคุณไม่ต้องการที่จะดาวน์โหลดและเก็บ HTML5Shiv บนเว็บไซต์ของคุณคุณสามารถอ้างอิงรุ่นที่พบในเว็บไซต์ CDNสคริปต์ HTML5Shiv จะต้องอยู่ใน <head> องค์ประกอบหลังจาก stylesheets ใด ๆ ทดลองกดตรงนี้ HTML5 องค์ประกอบใหม่องค์ประกอบใหม่ใน HTML5ด้านล่างเป็นรายการขององค์ประกอบ HTML5 ใหม่และรายละเอียดของสิ่งที่พวกเขาจะใช้สำหรับการเป็นใหม่ความหมาย / โครงสร้างองค์ประกอบHTML5 มีองค์ประกอบใหม่สำหรับโครงสร้างของเอกสารที่ดีกว่า: อ่านเพิ่มเติมเกี่ยวกับHTML5 ความหมาย องค์ประกอบรูปแบบใหม่ ประเภทการป้อนข้อมูลใหม่ เรียนรู้เกี่ยวกับรูปแบบการใส่เก่าและใหม่ใน HTML ประเภทการป้อนข้อมูลเรียนรู้เกี่ยวกับการป้อนข้อมูลแบบในแอตทริบิวต์การป้อนข้อมูล HTML |
|---|
HTML5 - เพิ่มคุณสมบัติไวยากรณ์HTML5 ช่วยให้สี่ไวยากรณ์ที่แตกต่างกันสำหรับแอตทริบิวต์ตัวอย่างนี้แสดงให้เห็นถึงไวยากรณ์ต่างๆที่ใช้ใน <input> tag:  กราฟิก HTML5 อ่านเพิ่มเติมเกี่ยวกับผ้าใบ HTML5 อ่านเพิ่มเติมเกี่ยวกับHTML5 SVG องค์ประกอบสื่อใหม่ อ่านเพิ่มเติมเกี่ยวกับวิดีโอ HTML5อ่านเพิ่มเติมเกี่ยวกับHTML5 และเสียง |
|---|
HTML5 ความหมายองค์ประกอบ
ความหมายคือการศึกษาความหมายของคำและวลีในภาษา
องค์ประกอบความหมาย = องค์ประกอบที่มีความหมาย
อะไรคือองค์ประกอบความหมาย?
องค์ประกอบความหมายได้อย่างชัดเจนอธิบายความหมายของมันทั้งเบราว์เซอร์และนักพัฒนาตัวอย่างของที่ไม่ใช่ความหมายองค์ประกอบ: <div> และ <span> - บอกอะไรเกี่ยวกับเนื้อหา
ตัวอย่างของความหมายองค์ประกอบ: <form> <table> และ <บทความ> - ชัดเจนกำหนดเนื้อหา
สนับสนุนเบราว์เซอร์
นอกจากนี้คุณสามารถ "สอน" เบราว์เซอร์รุ่นเก่าวิธีการจัดการ "องค์ประกอบที่ไม่รู้จัก"
อ่านเกี่ยวกับมันในการสนับสนุนเบราว์เซอร์ HTML5
องค์ประกอบความหมายใหม่ใน HTML5
เว็บไซต์จำนวนมากมีโค้ด HTML ที่ชอบ: <div id = "NAV"> <div class = "หัว"> <div id = "ส่วนท้าย">เพื่อระบุนำทาง, ส่วนหัวและส่วนท้าย
HTML5 มีองค์ประกอบความหมายใหม่ในการกำหนดส่วนต่าง ๆ ของหน้าเว็บ:
- <บทความ>
- <กัน>
- <รายละเอียด>
- <figcaption>
- <รูป>
- <ท้าย>
- <หัว>
- <หลัก>
- <เครื่องหมาย>
- <nav>
- <ส่วน>
- <สรุป>
- <เวลา>
HTML5 <section> ธาตุ
ก <section> องค์ประกอบที่กำหนดส่วนในเอกสารตามเอกสาร HTML5 ของ W3C: "ส่วนคือกลุ่มใจเนื้อหาโดยปกติจะมีหัวข้อ."
หน้าแรกอาจปกติจะแบ่งออกเป็นส่วนสำหรับการแนะนำเนื้อหาและข้อมูลการติดต่อ
ทดลองกดตรงนี้
HTML5 <บทความ> ธาตุ
ก <บทความ> องค์ประกอบระบุอิสระเนื้อหาที่ตนเองมีบทความที่ควรให้ความรู้สึกของมันเองและมันควรจะเป็นไปได้ที่จะอ่านมันเป็นอิสระจากส่วนที่เหลือของเว็บไซต์
ตัวอย่างของกรณีที่ <บทความ> องค์ประกอบที่สามารถนำมาใช้:
- โพสต์ฟอรั่ม
- โพสต์บล็อก
- บทความในหนังสือพิมพ์
ทดลองกดตรงนี้
รัง <บทความ> ใน <section> หรือทางกลับกัน?
ก <บทความ> องค์ประกอบระบุอิสระเนื้อหาที่ตนเองมีก <section> องค์ประกอบที่กำหนดส่วนในเอกสาร
เราสามารถใช้คำจำกัดความที่จะตัดสินใจว่าจะทำรังองค์ประกอบเหล่านั้นหรือไม่ ไม่เราทำไมได้!
ดังนั้นบนอินเทอร์เน็ตคุณจะพบกับหน้าเว็บ HTML <section> องค์ประกอบที่มี <บทความ> องค์ประกอบและ <บทความ> องค์ประกอบที่มี <ส่วน> องค์ประกอบ
นอกจากนี้คุณยังจะได้พบหน้าเว็บที่มี <section> องค์ประกอบที่มี <section> องค์ประกอบและ <บทความ> องค์ประกอบที่มี <บทความ> องค์ประกอบ
ตัวอย่างสำหรับหนังสือพิมพ์: กีฬาบทความในการเล่นกีฬาส่วนอาจมีเทคนิคส่วนในแต่ละบทความ
HTML5 <ส่วนหัว> ธาตุ
ก <ส่วนหัว> องค์ประกอบระบุส่วนหัวสำหรับเอกสารหรือส่วนใดส่วนหนึ่งก <ส่วนหัว> องค์ประกอบที่ควรจะใช้เป็นภาชนะสำหรับเนื้อหาเบื้องต้น
คุณสามารถมีหลาย <ส่วนหัว> องค์ประกอบในเอกสารหนึ่ง
ตัวอย่างต่อไปนี้กำหนดส่วนหัวสำหรับบทความนี้:
ทดลองกดตรงนี้
HTML5 <ท้าย> ธาตุ
ก <ท้าย> องค์ประกอบระบุท้ายสำหรับเอกสารหรือส่วนใดส่วนหนึ่ง<ท้าย> องค์ประกอบที่ควรจะมีข้อมูลเกี่ยวกับองค์ประกอบที่มีของ
ส่วนท้ายมักจะมีผู้เขียนข้อมูลเอกสารลิขสิทธิ์เชื่อมโยงกับข้อตกลงในการใช้ข้อมูลที่ติดต่อ ฯลฯ
คุณอาจจะมีหลาย <ท้าย> องค์ประกอบในเอกสารหนึ่ง
ทดลองกดตรงนี้
HTML5 <nav> ธาตุ
ก <nav> องค์ประกอบที่กำหนดชุดของการเชื่อมโยงการนำทางขอให้สังเกตว่าการเชื่อมโยงไม่ทั้งหมดของเอกสารที่ควรจะเป็นภายใน <nav> องค์ประกอบ ก <nav> องค์ประกอบที่มีวัตถุประสงค์เฉพาะสำหรับบล็อกที่สำคัญของการเชื่อมโยงการนำทาง
ทดลองกดตรงนี้
HTML5 <กัน> ธาตุ
ก <กัน> องค์ประกอบกำหนดเนื้อหาบางส่วนนอกเหนือจากเนื้อหาที่ถูกวางไว้ใน (เช่นแถบด้านข้าง)เนื้อหากันควรจะเกี่ยวข้องกับเนื้อหาโดยรอบ
ทดลองกดตรงนี้
HTML5 <รูป> และ <figcaption> องค์ประกอบ
วัตถุประสงค์ของคำอธิบายภาพร่างคือการเพิ่มคำอธิบายภาพลงในภาพใน HTML5, ภาพและคำอธิบายภาพสามารถจัดกลุ่มเข้าด้วยกันใน<ตัวเลข> องค์ประกอบ:
ทดลองกดตรงนี้
<img>องค์ประกอบที่กำหนดภาพที่<figcaption> องค์ประกอบที่กำหนดคำบรรยายใต้ภาพ
องค์ประกอบทำไมความหมาย?
ด้วย HTML4 นักพัฒนาที่ใช้ชื่อรหัส / ระดับของตัวเองเพื่อองค์ประกอบสไตล์: ส่วนหัวด้านบนด้านล่างท้ายเมนูการนำทางหลักภาชนะเนื้อหาบทความแถบด้านข้าง topnav ฯลฯนี่เองที่ทำให้มันเป็นไปไม่ได้สำหรับเครื่องมือค้นหาเพื่อระบุเนื้อหาของหน้าเว็บที่ถูกต้อง
กับองค์ประกอบ HTML5 ใหม่ (<ส่วนหัว> <ส่วนท้าย> <nav> <ส่วน> <บทความ>) นี้จะกลายเป็นเรื่องง่าย
ตาม W3C เป็นเว็บแบบ Semantic: "อนุญาตให้ข้อมูลที่จะใช้ร่วมกันและนำกลับมาใช้ในการใช้งาน, ผู้ประกอบการและชุมชน."
องค์ประกอบความหมายใน HTML5
ด้านล่างนี้เป็นรายชื่อเรียงตามตัวอักษรขององค์ประกอบความหมายใหม่ใน HTML5การเชื่อมโยงไปของเราสมบูรณ์HTML5 อ้างอิง
HTML5 โยกย้าย
การย้ายถิ่นจาก HTML4 เป็น HTML5
บทนี้เป็นทั้งหมดเกี่ยวกับวิธีการโยกย้ายจากHTML4เพื่อ HTML5ในบทนี้จะแสดงให้เห็นถึงวิธีการแปลงหน้า HTML4 เป็นหน้า HTML5 โดยไม่ต้องทำลายสิ่งที่มีเนื้อหาต้นฉบับหรือโครงสร้าง
คุณสามารถโยกย้ายจาก XHTML เป็น HTML5 โดยใช้สูตรเดียวกัน
ทั่วไป HTML4 หน้า
ทดลองกดตรงนี้เปลี่ยนเป็น HTML5 Doctype
เปลี่ยนประเภทเอกสาร :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
กับประเภทเอกสาร HTML5:
ทดลองกดตรงนี้
การเข้ารหัส HTML5:
ทดลองกดตรงนี้
เพิ่ม HTML5Shiv
ใหม่ HTML5 องค์ประกอบความหมายได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัย นอกจากนี้คุณสามารถ "สอน" เบราว์เซอร์รุ่นเก่าวิธีการจัดการ "องค์ประกอบที่ไม่รู้จัก"อย่างไรก็ตาม IE8 และก่อนหน้านี้ไม่อนุญาตให้จัดแต่งทรงผมขององค์ประกอบที่ไม่รู้จัก ดังนั้น HTML5Shiv เป็นวิธีแก้ปัญหา JavaScript เพื่อเปิดใช้งานการจัดแต่งทรงผมขององค์ประกอบ HTML5 ใน Internet Explorer รุ่นก่อนที่จะมีรุ่นที่ 9
เพิ่ม HTML5Shiv:
ทดลองกดตรงนี้
อ่านเพิ่มเติมเกี่ยวกับHTML5Shivในการสนับสนุนเบราว์เซอร์ HTML5
เปลี่ยนเป็น HTML5 ความหมายองค์ประกอบ
ซีเอสเอที่มีอยู่มี id ของและชั้นเรียนสำหรับจัดแต่งทรงผมองค์ประกอบ:body {
font-family: Verdana,sans-serif;
font-size: 0.9em; }
div#header, div#footer {
padding: 10px;
color: white;
background-color: black; }
div#content {
margin: 5px;
padding: 10px;
background-color: lightgrey; }
div.article {
margin: 5px;
padding: 10px;
background-color: white; }
div#menu ul {
padding: 0; }
div#menu ul li {
display: inline;
margin: 5px; }
แทนที่ด้วยรูปแบบ CSS ที่เท่าเทียมกันสำหรับองค์ประกอบความหมาย HTML5:
body {
font-family: Verdana,sans-serif;
font-size: 0.9em; }
header, footer {
padding: 10px;
color: white;
background-color: black; }
section {
margin: 5px;
padding: 10px;
background-color: lightgrey; }
article {
margin: 5px;
padding: 10px;
background-color: white; }
nav ul {
padding: 0; }
nav ul li {
display: inline;
margin: 5px; }
สุดท้ายเปลี่ยนองค์ประกอบองค์ประกอบความหมาย HTML5:
ทดลองกดตรงนี้
ความแตกต่างระหว่าง <บทความ> <ส่วน> และ <div>
มีความสับสน (ขาด) ความแตกต่างใน HTML5 มาตรฐานระหว่าง <บทความ> <ส่วน> และ <div> เป็นในมาตรฐาน HTML5 ที่ <section> องค์ประกอบที่ถูกกำหนดให้เป็นบล็อกขององค์ประกอบที่เกี่ยวข้อง
ก <บทความ> องค์ประกอบที่ถูกกำหนดให้เป็นที่สมบูรณ์บล็อกตนเองมีขององค์ประกอบที่เกี่ยวข้อง
ก <div> ถูกกำหนดให้เป็นบล็อกขององค์ประกอบเด็ก
วิธีการตีความที่?
ในตัวอย่างข้างต้นเราได้ใช้ <section> เป็นภาชนะสำหรับที่เกี่ยวข้อง <บทความ>
แต่เราจะได้ใช้ <บทความ> เป็นภาชนะสำหรับบทความได้เป็นอย่างดี
นี่คือตัวอย่างที่แตกต่างกัน:
ทดลองกดตรงนี้
<div> ใน <บทความ>:
ทดลองกดตรงนี้
<div> ใน <section> ใน <บทความ>:
ทดลองกดตรงนี้
HTML5 คู่มือสไตล์และการประชุมการเข้ารหัส
อนุสัญญา Coding HTML
นักพัฒนาเว็บมักจะมีความไม่แน่นอนเกี่ยวกับรูปแบบการเข้ารหัสและไวยากรณ์ที่จะใช้ในรูปแบบ HTMLระหว่างปี 2000 และปี 2010 นักพัฒนาเว็บหลายแปลงจาก HTML เพื่อ XHTML
ด้วย XHTML, นักพัฒนาจะถูกบังคับให้เขียนถูกต้องและ "ดีขึ้น" รหัส
HTML5 เป็นเลอะเทอะอีกเล็กน้อยเมื่อมันมาถึงการตรวจสอบรหัส
Be Smart และอนาคตหลักฐาน
การใช้งานที่สอดคล้องกันของรูปแบบทำให้มันง่ายขึ้นสำหรับคนอื่น ๆ ที่จะเข้าใจ HTML ของคุณในอนาคตโปรแกรมเช่นผู้อ่าน XML อาจต้องการที่จะอ่าน HTML ของคุณ
ใช้ดี formed- "ใกล้กับ XHTML ไวยากรณ์" สามารถเป็นสมาร์ท
มักจะเก็บรหัสของคุณเป็นระเบียบเรียบร้อยสะอาดและรูปแบบที่ดี
ใช้ที่ถูกต้องประเภทเอกสาร
เสมอประกาศประเภทเอกสารเป็นบรรทัดแรกในเอกสารของคุณ:
<!DOCTYPE html>
<!doctype html>
ใช้กรณีที่ต่ำกว่าธาตุชื่อ
HTML5 ช่วยให้การผสมตัวอักษรพิมพ์ใหญ่และตัวพิมพ์เล็กในชื่อองค์ประกอบเราขอแนะนำให้ใช้ชื่อองค์ประกอบตัวพิมพ์เล็กเนื่องจาก:
- ผสมชื่อพิมพ์ใหญ่และเล็กจะไม่ดี
- นักพัฒนาได้ตามปกติใช้ชื่อตัวพิมพ์เล็ก (เช่นใน XHTML)
- ทำความสะอาดดูตัวพิมพ์เล็ก
- ตัวพิมพ์เล็กจะง่ายต่อการเขียน
แย่:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
ที่เลวร้ายมาก:
<Section>
<p>This is a paragraph.</p>
</SECTION>
ดี:
<section>
<p>This is a paragraph.</p>
</section>
ปิดทุกองค์ประกอบ HTML
ใน HTML5 คุณไม่ต้องปิดองค์ประกอบทั้งหมด (ตัวอย่างเช่น <p> องค์ประกอบ)เราขอแนะนำให้ปิดองค์ประกอบ HTML ทั้งหมด
แย่:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
ดี:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
ปิดที่ว่างเปล่าองค์ประกอบ HTML
ใน HTML5 ก็เป็นตัวเลือกที่จะปิดองค์ประกอบที่ว่างเปล่าอนุญาต:
<meta
charset="utf-8">
นอกจากนี้ยังอนุญาต:
<meta charset="utf-8" />
หากคุณคาดว่าซอฟต์แวร์ XML เพื่อเข้าถึงหน้าของคุณก็เป็นความคิดที่ดีที่จะให้เฉือนปิด!
ใช้กรณีที่ต่ำกว่า Attribute ชื่อ
HTML5 ช่วยให้การผสมตัวอักษรพิมพ์ใหญ่และตัวพิมพ์เล็กในชื่อแอตทริบิวต์เราขอแนะนำให้ใช้ชื่อแอตทริบิวต์พิมพ์เล็กเนื่องจาก:
- ผสมชื่อพิมพ์ใหญ่และเล็กจะไม่ดี
- นักพัฒนาได้ตามปกติใช้ชื่อตัวพิมพ์เล็ก (เช่นใน XHTML)
- ทำความสะอาดดูตัวพิมพ์เล็ก
- ตัวพิมพ์เล็กจะง่ายต่อการเขียน
แย่:
<div CLASS="menu">
ดี:
<div
class="menu">
ค่าอ้างแอตทริบิวต์
HTML5 ช่วยให้ค่าแอตทริบิวต์ไม่ทราบราคาเราขอแนะนำให้ quoting ค่าแอตทริบิวต์เนื่องจาก:
- ผสมค่าตัวพิมพ์ใหญ่และพิมพ์เล็กไม่ดี
- ค่าที่ยกมาจะง่ายต่อการอ่าน
- คุณต้องใช้คำพูดถ้าค่ามีช่องว่าง
ที่เลวร้ายมาก:
นี้จะไม่ทำงานเพราะค่าที่มีช่องว่าง:
<table class=table striped>
แย่:
<table class=striped>
ดี:
<table
class="striped">
แอตทริบิวต์ภาพ
เสมอเพิ่มแอตทริบิวต์ "alt" ให้กับภาพ คุณลักษณะนี้เป็นสิ่งสำคัญเมื่อภาพด้วยเหตุผลบางอย่างไม่สามารถแสดงได้ นอกจากนี้ยังมักจะกำหนดความกว้างและความสูงของภาพ จะช่วยลดริบหรี่เพราะเบราว์เซอร์สามารถจองพื้นที่สำหรับภาพก่อนที่จะโหลดแย่:
<img
src="html5.gif">
ดี:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">
ช่องว่างและป้ายที่เท่าเทียมกัน
HTML5 ช่วยให้ช่องว่างรอบเครื่องหมายเท่ากับ แต่พื้นที่น้อยง่ายต่อการอ่านและหน่วยงานกลุ่มดีกว่ากันแย่:
<link
rel = "stylesheet" href = "styles.css">
ดี:
<link rel="stylesheet" href="styles.css">
หลีกเลี่ยงเส้นรหัสยาว
เมื่อใช้โปรแกรมแก้ไข HTML ก็ไม่สะดวกที่จะเลื่อนไปทางขวาและซ้ายในการอ่านรหัส HTMLพยายามที่จะหลีกเลี่ยงเส้นรหัสนานกว่า 80 ตัวอักษร
บรรทัดว่างและเยื้อง
อย่าเพิ่มบรรทัดว่างเปล่าโดยไม่มีเหตุผลสำหรับการอ่านเพิ่มบรรทัดว่างเปล่าที่จะแยกบล็อกรหัสขนาดใหญ่หรือตรรกะ
สำหรับการอ่านเพิ่มสองช่องว่างของการเยื้อง อย่าใช้คีย์แท็บ
อย่าใช้บรรทัดที่ว่างเปล่าที่ไม่จำเป็นและการเยื้อง มันไม่จำเป็นที่จะเยื้องทุกองค์ประกอบ:
ไม่จำเป็น:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
ที่ดีกว่า:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the
center of the Greater Tokyo Area,
and the most
populous metropolitan area in the world.
It is the
seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>
</body>
ตัวอย่างตาราง:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
ตัวอย่างรายการ:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
ถนัด <html> และ <body>?
ในมาตรฐาน HTML5 ที่ <html> แท็กและ <body> สามารถละเว้นรหัสต่อไปนี้จะตรวจสอบเป็น HTML5:
ตัวอย่าง
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
ก <html> องค์ประกอบรากเอกสาร มันเป็นสถานที่ที่แนะนำสำหรับการระบุภาษาหน้า:
<!DOCTYPE html>
<html lang="en-US">
ถนัด <html> หรือ <body> สามารถผิดพลาด DOM และซอฟต์แวร์ XML
ถนัด <body> สามารถผลิตข้อผิดพลาดในเบราว์เซอร์รุ่นเก่า (IE9)
ถนัด <head>?
ในมาตรฐาน HTML5, <head> แท็กยังสามารถถูกมองข้ามโดยค่าเริ่มต้นเบราว์เซอร์จะเพิ่มองค์ประกอบทั้งหมดก่อน <body> เพื่อเริ่มต้น <head> องค์ประกอบ
คุณสามารถลดความซับซ้อนของ HTML โดยถนัด <head> tag:
ตัวอย่าง
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ไม่ใส่แท็กคือไม่คุ้นเคยกับนักพัฒนาเว็บ มันต้องใช้เวลาที่จะจัดตั้งขึ้นเป็นแนวทาง
ข้อมูล Meta
ก <title> องค์ประกอบที่จำเป็นต้องใช้ใน HTML5 ให้ชื่อมีความหมายที่เป็นไปได้:
<title>HTML5
Syntax and Coding Style</title>
<!DOCTYPE html>
<html
lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5
Syntax and Coding Style</title>
</head>
การตั้ง Viewport
HTML5 แนะนำวิธีการที่จะช่วยให้นักออกแบบเว็บใช้ควบคุมวิวพอร์ตผ่าน <meta> แท็กวิวพอร์ตพื้นที่ที่มองเห็นของผู้ใช้ของหน้าเว็บ มันขึ้นอยู่กับอุปกรณ์และจะมีขนาดเล็กบนโทรศัพท์มือถือกว่าบนหน้าจอคอมพิวเตอร์
คุณควรมีดังต่อไป <meta> องค์ประกอบวิวพอร์ตในทุกหน้าเว็บของคุณ:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> องค์ประกอบวิวพอร์ตให้คำแนะนำในเบราว์เซอร์ในการควบคุมขนาดของหน้าเว็บและปรับความกว้าง = ส่วนกว้างของอุปกรณ์ชุดความกว้างของหน้าไปตามหน้าจอที่มีความกว้างของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์)
เริ่มต้นขนาด = 1.0 ส่วนกำหนดระดับการซูมเริ่มต้นเมื่อโหลดหน้าเว็บแล้วเป็นครั้งแรกโดยเบราว์เซอร์
นี่คือตัวอย่างของเว็บเพจโดยไม่ต้องเมตาแท็กวิวพอร์ตและหน้าเว็บเดียวกันกับเมตาแท็กวิวพอร์ต:
เคล็ดลับ:หากคุณกำลังดูหน้านี้ให้กับโทรศัพท์หรือแท็บเล็ต, คุณสามารถคลิกที่สองลิงค์ด้านล่างเพื่อดูความแตกต่าง
HTML ความคิดเห็น
ความคิดเห็นสั้นควรจะเขียนในบรรทัดเดียวเช่นนี้
<!-- This is a comment -->
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
ผ้าสไตล์
ใช้ไวยากรณ์ที่ง่ายสำหรับการเชื่อมโยงไปยังแผ่นสไตล์ (ประเภทแอตทริบิวต์ที่ไม่จำเป็น):
<link rel="stylesheet" href="styles.css">
p.intro {font-family: Verdana; font-size: 16em;}
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;}
- วางวงเล็บเปิดในสายเดียวกันกับตัวเลือก
- ใช้พื้นที่หนึ่งก่อนที่จะวงเล็บเปิด
- ใช้สองช่องว่างของการเยื้อง
- ใช้อัฒภาคหลังจากแต่ละคู่สถานที่ให้บริการที่มีมูลค่ารวมทั้งที่ผ่านมา
- ใช้คำพูดรอบเฉพาะค่าถ้าค่ามีช่องว่าง
- วางวงเล็บปิดในบรรทัดใหม่โดยไม่เว้นวรรคชั้นนำ
- หลีกเลี่ยงเส้นมากกว่า 80 ตัวอักษ
โหลด JavaScript ใน HTML
ใช้ไวยากรณ์ที่เรียบง่ายสำหรับการโหลดสคริปต์ภายนอก (ประเภทแอตทริบิวต์ที่ไม่จำเป็น):<script src="myscript.js">
ไม่มีความคิดเห็น:
แสดงความคิดเห็น
หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น