HTML (5) ข้อมูลจำเพาะรหัส
อนุสัญญารหัส HTML
พัฒนาเว็บจำนวนมากสเปโค้ด HTML เข้าใจ
ใน 2000-2010, นักพัฒนาเว็บจำนวนมากที่จะแปลงจาก HTML เพื่อ XHTML
นักพัฒนาใช้ XHTML ค่อยๆพัฒนาข้อกำหนดการเขียน HTML ดี
และสำหรับใน HTML5 เราควรเป็นบรรทัดฐานรหัสค่อนข้างดีคำแนะนำหลายด้านล่างนี้สเปค
ใช้ประเภทที่ถูกต้องของเอกสาร
การประกาศประเภทของเอกสารในแถวแรกของเอกสาร HTML:
หากคุณต้องการที่จะใช้ค่ายอื่น ๆ เช่นกรณีที่ต่ำกว่าคุณสามารถใช้รหัสต่อไปนี้:
ชื่อองค์ประกอบตัวพิมพ์เล็ก
HTML5 ชื่อองค์ประกอบสามารถใช้ตัวอักษรพิมพ์ใหญ่และเล็ก
แนะนำการใช้อักษรตัวพิมพ์เล็ก:
- สไตล์กรณีผสมไม่ดีมาก
- นักพัฒนามักจะใช้ตัวพิมพ์เล็ก (XHTML คล้ายกัน)
- รูปแบบตัวพิมพ์เล็กดูสดชื่นมากขึ้น
- อักษรตัวพิมพ์เล็กง่ายต่อการเขียน
ไม่แนะนำ:
<p> นี้เป็นวรรค </ p>
</ section>
ไม่ดีมาก ๆ :
<p> นี้เป็นวรรค </ p>
</ section>
แนะนำ:
<p> นี้เป็นวรรค </ p>
</ มาตรา>
ปิดองค์ประกอบ HTML ทั้งหมด
ใน HTML5 คุณไม่ต้องการที่จะปิดทุกองค์ประกอบ (ตัวอย่างเช่น <p> องค์ประกอบ) แต่เราขอแนะนำให้แต่ละองค์ประกอบจะต้องเพิ่มแท็กปิด
ไม่แนะนำ:
<p> นี้เป็นวรรค
<p> นี้เป็นวรรค
</ มาตรา>
แนะนำ:
<p> นี้เป็นวรรค </ p>
<p> นี้เป็นวรรค </ p>
</ มาตรา>
ปิดองค์ประกอบ HTML ที่ว่างเปล่า
ใน HTML5, องค์ประกอบ HTML ที่ว่างเปล่าไม่ได้มีการปิดตัวลง:
เราสามารถเขียน:
นอกจากนี้คุณยังสามารถเขียน:
XML, XHTML และทับ (/) เป็นต้อง
หากคุณคาดหวังที่จะใช้หน้า XML ซอฟต์แวร์ของคุณรูปแบบนี้เป็นสิ่งที่ดีมาก
ชื่อแอตทริบิวต์ตัวพิมพ์เล็ก
HTML5 ช่วยให้การใช้งานของตัวพิมพ์ใหญ่ชื่อคุณสมบัติและตัวอักษรตัวพิมพ์เล็ก
เราขอแนะนำให้ใช้ตัวพิมพ์เล็กชื่อแอตทริบิวต์:
- กรณีใช้เป็นนิสัยที่ไม่ดีมาก
- นักพัฒนามักจะใช้ตัวพิมพ์เล็ก (XHTML คล้ายกัน)
- รูปแบบตัวพิมพ์เล็กดูสดชื่นมากขึ้น
- อักษรตัวพิมพ์เล็กง่ายต่อการเขียน
ไม่แนะนำ:
แนะนำ:
มูลค่าทรัพย์สิน
ค่าแอตทริบิวต์ HTML5 ไม่สามารถอ้าง
เราขอแนะนำให้ใช้คำพูดค่าแอตทริบิวต์:
- หากมูลค่าทรัพย์สินมีช่องว่างต้องใช้เครื่องหมายคำพูด
- รูปแบบผสมไม่แนะนำสไตล์แบบครบวงจรที่นำเสนอ
- ค่าทรัพย์สินใช้เครื่องหมายคำพูดง่ายต่อการอ่าน
ตัวอย่างต่อไปนี้ค่าแอตทริบิวต์มีช่องว่างไม่ได้ใช้เครื่องหมายคำพูดก็ไม่สามารถทำงานได้:
ต่อไปนี้จะใช้อัญประกาศคู่มันเป็นเรื่องที่ถูกต้อง:
คุณสมบัติของภาพ
alt ภาพมักจะแอตทริบิวต์ที่ใช้ เมื่อภาพที่ไม่สามารถแสดงได้ก็สามารถเปลี่ยนการแสดงภาพ
ขนาดของภาพที่กำหนดไว้สามารถจองได้ในช่วงเวลาของการโหลดระบุพื้นที่ลดการสั่นไหว
ช่องว่างและเครื่องหมายเท่ากับ
คุณสามารถใช้ช่องว่างก่อนและหลังเครื่องหมายเท่ากับ
แต่เราขอแนะนำให้ใช้พื้นที่น้อย:
หลีกเลี่ยงสายยาวของรหัส
การใช้โปรแกรมแก้ไข HTML ซ้ายและขวาเลื่อนรหัสไม่สะดวก
บรรทัดของรหัสมากที่สุดเท่าที่เป็นไปได้น้อยกว่า 80 ตัวอักษรแต่ละ
บรรทัดที่ว่างเปล่าและเยื้อง
ไม่ต้องเพิ่มบรรทัดว่างไม่มีเหตุผล
สำหรับแต่ละฟังก์ชั่น Block Logic เพิ่มบรรทัดว่างซึ่งจะทำให้มันง่ายต่อการอ่าน
เยื้องสองช่องว่าง, TAB ไม่แนะนำ
อย่าใช้บรรทัดที่ว่างเปล่าที่ไม่จำเป็นจะเยื้องระหว่างรหัสสั้น
บรรทัดที่ว่างเปล่าที่ไม่จำเป็นและเยื้อง:
<h1> กวดวิชานี้ </ h1>
<h2> HTML </ h2>
<p>
กวดวิชานี้จะเรียนรู้ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน
กวดวิชานี้จะเรียนรู้ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน
กวดวิชานี้จะเรียนรู้ไม่ได้เป็นเทคโนโลยีเพียง แต่ยังฝัน
กวดวิชานี้จะเรียนรู้ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน
</ p>
</ body>
แนะนำ:
<h1> กวดวิชานี้ </ h1>
<h2> </ h2>
<p> การกวดวิชานี้เรียนรู้ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน
กวดวิชานี้จะเรียนรู้ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน
กวดวิชานี้จะเรียนรู้ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน
กวดวิชานี้จะเรียนรู้ไม่ได้เป็นเพียงเทคโนโลยี แต่ยังฝัน </ p>
</ body>
รูปแบบตัวอย่าง:
<tr>
<Th> ชื่อ </ TH>
<Th> รายละเอียด </ TH>
</ tr>
<tr>
<td> เอ </ td>
<td> รายละเอียดของ </ td>
</ tr>
<tr>
<td> B </ td>
<td> คำอธิบายของ B </ td>
</ tr>
</ table>
ตัวอย่างรายการ:
<li> ลอนดอน </ li>
<li> ปารีส </ li>
<li> โตเกียว </ li>
</ ol>
ละเว้น <html> และ <body>?
ในมาตรฐาน HTML5, <html> และ <body> สามารถละเว้น
เอกสารต่อไปนี้เป็น HTML5 ที่ถูกต้อง:
ตัวอย่าง:
<head>
<title> ชื่อหน้า </ title>
</ head>
<h1> นี่คือหัวข้อ </ h1>
<p> นี้เป็นวรรค </ p>
ลอง»
ไม่แนะนำให้ละเว้น <html> และ <body>
<html> องค์ประกอบคือองค์ประกอบหลักของเอกสารภาษาที่ใช้ในการอธิบายหน้า:
<html lang = "zh">
คำสั่งภาษาเพื่ออำนวยความสะดวกให้ผู้อ่านหน้าจอและเครื่องมือค้นหา
ละเว้น <html> หรือ <body> ใน DOM และ XML เกิดปัญหาซอฟแวร์
งด <body> ข้อผิดพลาดเกิดขึ้นในเบราว์เซอร์รุ่นเก่า (IE9)
งด <head>?
ในมาตรฐาน HTML5 <head> สามารถละเว้น
โดยค่าเริ่มต้นเบราเซอร์จะเนื้อหา <body> ก่อนที่จะเพิ่มให้กับการเริ่มต้น <head>
ตัวอย่าง
<html>
<title> ชื่อหน้า </ title>
<body>
<h1> นี่คือหัวข้อ </ h1>
<p> นี้เป็นวรรค </ p>
</ body>
</ html>
ลอง»
 | ตอนนี้งดแท็กหัวไม่แนะนำ |
|---|
เมตาดาต้า
HTML5 ใน <title> องค์ประกอบที่จำเป็นต้องมีชื่อของชื่ออธิบายรูปแบบของหน้า:
ชื่อเรื่องและภาษาที่ช่วยให้เครื่องมือค้นหาเร็ว ๆ นี้จะเข้าใจรูปแบบของหน้าเว็บของคุณ:
<html lang = "zh">
<head>
<Meta charset = "UTF-8 ">
<title> กวดวิชานี้ </ title>
</ head>
ความคิดเห็น HTML
ความคิดเห็นสามารถเขียนได้ใน <- และ -> ใน:
ความเห็นอีกต่อไปใน <! - และ -> เขียนไว้ในสาขา:
นี่เป็นความเห็นอีกต่อไป นี่เป็นความเห็นอีกต่อไป นี่เป็นความเห็นอีกต่อไป
นี่เป็นความเห็นอีกต่อไปนี้เป็นความเห็นอีกต่อไป นี่เป็นความเห็นอีกต่อไป
->
แสดงความคิดเห็นของตัวอักษรตัวแรกเยื้องสองช่องว่างให้อ่านง่ายขึ้น
สไตล์ชีต
สไตล์ชีตไวยากรณ์สั้น (ประเภทแอตทริบิวต์ไม่จำเป็นต้องใช้):
กฎสามารถเขียนเป็นเส้นสั้น:
กฎหลายคู่สายยาวสามารถเขียน:
สีพื้นหลัง: lightgrey;
font-family: "Arial ดำ" , Helvetica, Sans-serif;
font-size: 16em;
สี: สีดำ;
}
- รั้งอยู่ในสายเดียวกันกับเตอร์
- เลือกระหว่างรั้งซ้ายและเพิ่มช่องว่าง
- ผมใช้สองช่องว่างเพื่อเยื้อง
- ได้เพิ่มช่องว่างระหว่างลำไส้ใหญ่และค่าคุณสมบัติ
- ใช้ช่องว่างหลังเครื่องหมายจุลภาคและสัญลักษณ์
- ค่าทรัพย์สินต้องใช้จุดสิ้นสุดของแต่ละสัญลักษณ์
- เฉพาะเมื่อมูลค่าทรัพย์สินมีช่องว่างใช้เครื่องหมายคำพูด
- รั้งขวาบนบรรทัดใหม่
- ได้ถึง 80 ตัวอักษรต่อบรรทัด
| หลังจากที่จุลภาคและอัฒภาคเพิ่มช่องว่างเป็นกฎทั่วไป |
|---|
โหลด JavaScript ใน HTML
ใช้ไวยากรณ์ง่ายๆในการโหลดไฟล์สคริปต์ภายนอก (ประเภทแอตทริบิวต์ไม่จำเป็นต้องใช้):
ใช้ JavaScript เพื่อการใช้องค์ประกอบ HTML
รูปแบบ HTML ที่ไม่ดีอาจทำให้เกิดข้อผิดพลาดในการทำงานของจาวาสคริปต์
ต่อไปนี้สองงบ JavaScript เพื่อให้ผลลัพธ์ที่แตกต่างเอาท์พุท:
HTML, JavaScript พยายามที่จะใช้แผนการตั้งชื่อเดียวกัน
รายละเอียดรหัสการเข้าถึง JavaScript
ชื่อไฟล์ตัวพิมพ์เล็ก
ส่วนใหญ่เว็บเซิร์ฟเวอร์ (Apache, Unix) เป็นกรณีที่สำคัญ: london.jpg london.jpg ไม่สามารถเข้าถึง
เว็บเซิร์ฟเวอร์อื่น ๆ (ไมโครซอฟท์ IIS) ไม่สำคัญ case: london.jpg สามารถเข้าถึงได้ผ่าน london.jpg หรือ london.jpg
คุณต้องรักษารูปแบบครบวงจรเราขอแนะนำให้ใช้ที่สอดคล้องกันชื่อไฟล์ตัวพิมพ์เล็ก
นามสกุลของแฟ้ม
คำต่อท้ายไฟล์ HTML สามารถ .html (หรือ R .htm)
นามสกุลไฟล์ CSS เป็น .css
JavaScript .js ไฟล์ต่อท้าย
ความแตกต่างระหว่าง .htm และ .html
.htm นามสกุลไฟล์และ .html กับธรรมชาติไม่มีความแตกต่าง เบราว์เซอร์และเว็บเซิร์ฟเวอร์จะรักษาพวกเขาเป็นไฟล์ HTML เพื่อจัดการกับ
ความแตกต่างคือ:
แอพลิเคชัน .htm ในระบบ DOS ต้นหรือระบบในขณะนี้มีเพียงสามตัวอักษร
ต่อท้ายไม่ได้ จำกัด อยู่เฉพาะอย่างยิ่งกับระบบปฏิบัติการ Unix มักจะมี .html
ความแตกต่างในทางเทคนิค
หาก URL ไม่ได้ระบุชื่อแฟ้ม (เช่น http://www.w3big.com/css/) เซิร์ฟเวอร์จะกลับไปที่ชื่อแฟ้มเริ่มต้น ชื่อแฟ้มเริ่มต้นมักจะ index.html, index.htm, default.html และ default.htm
ถ้าเซิร์ฟเวอร์ที่มีการกำหนดค่าที่มีเพียง "index.html" เป็นไฟล์เริ่มต้นคุณต้องตั้งชื่อไฟล์ "index.html" มากกว่า "index.htm"
โดยทั่วไป แต่เซิร์ฟเวอร์สามารถตั้งค่าแฟ้มเริ่มต้นหลายรายการคุณสามารถตั้งค่าไฟล์เริ่มต้นได้ตามต้องการ
อย่างไรก็ตาม HTML ต่อท้ายเต็มคือ ".html"