เคล็ดลับ HTML5 1: ความเร็วในการพัฒนาเทคโนโลยีในปัจจุบันเป็นเรื่องที่น่าอัศจรรย์ หากคุณไม่ระวังคุณอาจไม่สามารถติดตามได้ การพัฒนา HTML-HTML5 รุ่นใหม่ยังคงนำมาซึ่งความประหลาดใจใหม่ ๆ เราจะแนะนำเทคนิค HTML ให้คุณผ่านบทความนี้
1. ประเภทเอกสารใหม่ (Doctype)
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
คุณยังคงใช้ประเภทเอกสาร XHTML ด้านบนซึ่งมีทั้งปัญหาและยากที่จะจำได้หรือไม่? หากยังเป็นกรณีนี้ถึงเวลาที่จะเปลี่ยนเป็นประเภทเอกสาร HTML5 ใหม่
<! doctype html>
ตอนนี้ใช้เวลาเพียง 15 อักขระที่ง่าย (หมายเหตุ: การประกาศ doctype ของคุณจำเป็นต้องปรากฏในบรรทัดแรกของไฟล์ HTML ของคุณ)
2. องค์ประกอบกราฟิก (รูป)
คุณยังคงพิจารณาใช้รหัสต่อไปนี้เพื่อทำเครื่องหมายรูปภาพหรือไม่?
<mg src = path/to/image alt = เกี่ยวกับ image/>
<p> ภาพของดาวอังคาร </p>
รหัสข้างต้นไม่สามารถเชื่อมโยงกับชื่อของกราฟในแบบที่เรียบง่ายและมีความหมายเพราะมันถูกห่อหุ้มด้วยเครื่องหมายวรรคและองค์ประกอบภาพและ HTML5 ปรับปรุงสิ่งนี้โดยการแนะนำองค์ประกอบ <รูป> เมื่อใช้ร่วมกับองค์ประกอบ <potcaption> เราสามารถจับคู่ชื่อกราฟิกกับกราฟิก รหัสมีดังนี้:
<รูป>
<img src = path/to/image alt = เกี่ยวกับ image/>
<Figcaption>
<p> นี่คือภาพของสิ่งที่น่าสนใจ </p>
</figcaption>
</pige>
3. นิยามใหม่ <small>
ปรากฎว่าคุณสามารถใช้องค์ประกอบ <small> เพื่อสร้างคำบรรยายที่เกี่ยวข้องกับโลโก้อย่างใกล้ชิด อย่างไรก็ตามตอนนี้ HTML5 ได้ปรับเปลี่ยนการใช้งานนี้และองค์ประกอบ <small> ได้รับการนิยามใหม่หรือเหมาะสมกว่าตอนนี้มันถูกใช้เพื่อแสดงคำเล็ก ๆ หรือบันทึกย่ออื่น ๆ (เช่นประกาศลิขสิทธิ์ที่ด้านล่างของเว็บไซต์)
4. ไม่จำเป็นต้องใช้สคริปต์หรือประเภทลิงก์อีกต่อไป
เป็นไปได้มากว่าคุณจะยังคงเพิ่มคุณสมบัติของประเภทไปยังลิงก์และแท็กสคริปต์ของคุณเช่นรหัสด้านล่าง
<link rel = stylesheet href = path/to/stylesheet.css type = text/css/>
<script type = text/javascript src = path/to/script.js> </script>
ใน HTML5 ไม่จำเป็นต้องใช้อีกต่อไป หมายความว่าฉลากทั้งสองนี้แสดงถึงสไตล์และสคริปต์ตามลำดับ ดังนั้นเราสามารถลบแอตทริบิวต์ประเภททั้งหมดของพวกเขา รหัสมีดังนี้:
<link rel = stylesheet href = path/to/stylesheet.css/>
<script src = path/to/script.js> </script>
5. ใช้หรือไม่ใช้เครื่องหมายคำพูด
โปรดจำไว้ว่า HTML5 นั้นแตกต่างจาก XHTML และคุณไม่จำเป็นต้องห่อแอตทริบิวต์เป็นคำพูดหากคุณไม่ชอบ อย่างไรก็ตามหากคุณคิดว่าการใช้คำพูดจะทำให้คุณรู้สึกสะดวกสบายมากขึ้นแน่นอนว่าจะไม่มีปัญหา
<p class = myclass id = someid> เริ่มเครื่องปฏิกรณ์
6. ทำให้เนื้อหาของคุณแก้ไขได้
หนึ่งในคุณสมบัติที่ทรงพลังมากของ HTML5 นั้นเป็นที่ชื่นชอบซึ่งเป็นชื่อที่แสดงถึงจะช่วยให้ผู้ใช้สามารถแก้ไขเนื้อหาข้อความใด ๆ ที่อยู่ในองค์ประกอบ (รวมถึงองค์ประกอบลูกของเขา) มันมีการใช้งานที่หลากหลายเช่นรายการงานง่าย ๆ หรือไซต์ที่ใช้วิกิและข้อดีอย่างหนึ่งคือมันใช้ที่เก็บข้อมูลในท้องถิ่น
<! doctype html>
<html lang = en>
<head>
<meta charset = utf-8″>
<title> ไม่มีชื่อ </title>
</head>
<body>
<H2> รายการที่ต้องทำ </h2>
<ul เป็นที่ชื่นชอบ = true>
<li> แบ่งคนขับรถแท็กซี่เชิงกล </li>
<li> ขับรถไปยังโรงงานที่ถูกทอดทิ้ง
<li> ดูวิดีโอตัวเอง </li>
</ul>
</body>
</html>
หรือตามที่เคล็ดลับที่ห้าบอกว่าคุณสามารถเขียนรหัสบนบรรทัดเก้าเช่นนี้ (โดยไม่มีคำพูด):
<ul เป็นที่ชื่นชอบ = true>
7. อินพุตอีเมล
หากเราใช้ประเภทอีเมลเพื่อระบุรูปแบบของอินพุตเราสามารถสั่งเบราว์เซอร์ให้อนุญาตเฉพาะอินพุตสตริงที่สอดคล้องกับโครงสร้างที่อยู่อีเมลที่ถูกต้อง แม้ว่าการตรวจสอบแบบฟอร์มในตัวจะมาถึงเร็ว ๆ นี้เราไม่สามารถพึ่งพาสิ่งนี้ได้ทั้งหมด เบราว์เซอร์เก่าไม่เข้าใจประเภทอีเมลนี้พวกเขาเพียงแค่กลับไปที่กล่องข้อความปกติ
<! doctype html>
<html lang = en>
<head>
<meta charset = utf-8″>
<title> ไม่มีชื่อ </title>
</head>
<body>
<form action = method = get>
<label for = อีเมล> อีเมล: </label>
<อินพุต ID = ชื่ออีเมล = ประเภทอีเมล = อีเมล />
<ปุ่มประเภท = ส่ง> ส่งแบบฟอร์ม </button>
</form>
</body>
</html>
เมื่อพูดถึงองค์ประกอบและคุณลักษณะที่เบราว์เซอร์รองรับและไม่รองรับคุณต้องรู้ว่าเบราว์เซอร์ทั้งหมดไม่น่าเชื่อถือในปัจจุบัน ตัวอย่างเช่น Opera รองรับการตรวจสอบอีเมลเท่านั้นหากคุณระบุแอตทริบิวต์ชื่อ อย่างไรก็ตามไม่สนับสนุนแอตทริบิวต์ตัวยึด (ตามที่จะกล่าวถึงด้านล่าง) ในที่สุดในขณะที่คุณสามารถใช้การตรวจสอบรูปแบบนี้อย่าพึ่งพามันมากเกินไป