วันนี้ฉันจะเริ่มหลักสูตร HTML5/"> HTML5 ซีรี่ส์ใหม่ซึ่งเป็นบันทึกการศึกษาของฉันเกี่ยวกับ" คู่มือที่ชัดเจนถึง HTML5 "ฉันจะจัดระเบียบบทหรือเนื้อหาที่มีความหมายที่ฉันคิดว่าดีหรือมีความหมายสำหรับทุกคนที่จะเรียนรู้
องค์ประกอบสามารถกำหนดคุณลักษณะของตัวเองเช่นแท็ก A เพื่อกำหนดแอตทริบิวต์ HREF ซึ่งเรียกว่าแอตทริบิวต์ท้องถิ่น ตามลําดับเราสามารถตั้งค่าพฤติกรรมทั่วไปสำหรับองค์ประกอบทั้งหมดผ่านคุณลักษณะทั่วโลก แน่นอนว่าคุณสามารถตั้งค่าคุณลักษณะระดับโลกสำหรับองค์ประกอบส่วนบุคคลได้ แต่ก็ไม่สมเหตุสมผลที่จะทำเช่นนั้น ด้านล่างนี้ฉันจะแนะนำคุณลักษณะระดับโลกเหล่านี้ทีละคน
ตัวอย่างต่อไปนี้ทำงานตามปกติในเบราว์เซอร์ Chrome ตัวอย่างของ Firefox ไม่สามารถทำงานได้และฉันยังไม่ได้ทดสอบเบราว์เซอร์อื่นดังนั้นขอแนะนำให้คุณใช้เบราว์เซอร์ Chrome เป็นเบราว์เซอร์ HTML5 ที่คุณต้องการ ฉันไม่ได้มุ่งเน้นไปที่ปัญหาความเข้ากันได้ของเบราว์เซอร์ แต่ในการเรียนรู้และการใช้งาน HTML5 ยังคงได้รับการปรับปรุง ด้วยความนิยมของฉันฉันเชื่อว่าเบราว์เซอร์กระแสหลักจะรองรับได้ดีขึ้นเรื่อย ๆ และปัญหาความเข้ากันได้ของเบราว์เซอร์จะดีขึ้นมากในเวลานั้น
1. Accesskeyคุณสมบัติ AccessKey ช่วยให้คุณสามารถตั้งค่าคีย์บอร์ดทางลัดอย่างน้อยหนึ่งรายการเพื่อให้คุณสามารถเลือกองค์ประกอบบนหน้า ดูตัวอย่างต่อไปนี้:
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
</head>
<body>
<form>
ชื่อ: <อินพุต type = "text" name = "name" accessKey = "n"/>
<p/>
รหัสผ่าน: <อินพุต type = "รหัสผ่าน" ชื่อ = "รหัสผ่าน" accessKey = "p"/>
<p/>
<input type = "subment" value = "เข้าสู่ระบบ" AccessKey = "S"/>
</form>
</body>
</html>
ในตัวอย่างนี้คุณสามารถใช้ชุดค่าผสมคีย์เพื่อเลือกองค์ประกอบในหน้า ตัวอย่างเช่นภายใต้ระบบปฏิบัติการ Windows คุณสามารถใช้ ALT+XXX เพื่อเลือกองค์ประกอบ
เอฟเฟกต์การทำงาน:
2. คลาสฉันไม่อยากพูดอะไรเพิ่มเติมเกี่ยวกับคุณลักษณะนี้ มันเป็นฟังก์ชั่นขององค์ประกอบการจัดกลุ่ม เวลาส่วนใหญ่ใช้ร่วมกับ CSS เพื่อตั้งค่าเอฟเฟกต์การแสดงผลที่แตกต่างกันสำหรับองค์ประกอบในกลุ่มต่าง ๆ
3. มีการจัดการนี่คือแอตทริบิวต์ใหม่ที่เพิ่มลงใน HTML5 เพิ่มแอตทริบิวต์ที่เป็นที่ชื่นชอบในองค์ประกอบ HTML ตั้งค่าเป็นจริงช่วยให้ผู้ใช้สามารถแก้ไขเนื้อหาองค์ประกอบ; ตั้งค่าเป็นเท็จและไม่อนุญาตให้ผู้ใช้แก้ไข
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
</head>
<body>
<p contenteditable = "true"> ฝนตกในขณะนี้ </p>
</body>
</html>
4.ContextMenuContextMenu อนุญาตให้ผู้ใช้ตั้งค่าเมนูคลิกขวาขององค์ประกอบ HTML และเมนูจะปรากฏขึ้นเมื่อผู้ใช้ทริกเกอร์ เบราว์เซอร์ยังไม่รองรับคุณสมบัตินี้
5.Dir แอตทริบิวต์ DIR กำหนดการจัดตำแหน่งของตัวอักษรองค์ประกอบ HTML โดยสนับสนุนค่าสองค่าคือ LTR (จากซ้ายไปขวา) และ RTL (จากขวาไปซ้าย)<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
</head>
<body>
<p dir = "rtl"> นี่คือขวาไปซ้าย </p>
<p dir = "ltr"> นี่คือซ้ายไปขวา </p>
</body>
</html>
6. น่ากลัวDraggable เป็นคุณลักษณะที่ใช้ฟังก์ชั่นการลากและวางขององค์ประกอบ HTML ใน HTML5 ซึ่งเราจะแนะนำรายละเอียดในหลักสูตรต่อไปนี้
7. dropzoneDropzone ยังเป็นแอตทริบิวต์ที่ใช้ฟังก์ชันการลากองค์ประกอบ HTML ใน HTML5 เราจะแนะนำรายละเอียดในหลักสูตรภายหลัง
8. ติดขัดทุกคนควรคุ้นเคยกับคุณลักษณะนี้ซึ่งก็คือการซ่อนองค์ประกอบ HTML
9.IDทุกคนควรรู้คุณลักษณะนี้ มันตั้งค่าตัวระบุที่ไม่ซ้ำกันสำหรับองค์ประกอบ HTML และไม่อนุญาตให้ใช้องค์ประกอบที่มี ID จำนวนมากในหน้า HTML
10.Lang ระบุภาษาที่ใช้กับเนื้อหาขององค์ประกอบ HTML ค่าของ Lang จะต้องเป็นรหัสภาษา ISO ที่ถูกต้อง คุณสามารถเยี่ยมชมที่อยู่ด้านล่างสำหรับรายละเอียดเพิ่มเติม http://tools.ietf.org/html/bcp47 ควรสังเกตว่าการจัดการกับภาษาเป็นเรื่องที่ซับซ้อนและมีเทคนิคมาก
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
</head>
<body>
<p lang = "en"> สวัสดี - สบายดีไหม </p>
<p lang = "fr"> bonjour - ความคิดเห็นêtes -vous? </>
<p lang = "es"> hola - ¿Cómoestás? </p>
</body>
</html>
11.SpellCheck เมื่อใช้แอตทริบิวต์การสะกดเบราว์เซอร์จะช่วยให้คุณตรวจสอบว่าเนื้อหาตรวจสอบการสะกดขององค์ประกอบ HTML สะกดถูกต้องหรือไม่ เฉพาะเมื่อองค์ประกอบ HTML สามารถแก้ไขได้แอตทริบิวต์การตรวจสอบจะมีความหมาย<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
</head>
<body>
<textarea spellcheck = "true"> นี่คือข้อความที่ผิดพลาด </textarea>
</body>
</html>
เอฟเฟกต์: (ฉันไม่ได้เรียกใช้เอฟเฟกต์ที่ต้องการกับ Chrome ฉันไม่รู้ว่าทำไม)
12. สไตล์ไม่จำเป็นต้องแนะนำคุณลักษณะนี้มากเกินไปและตั้งค่าสไตล์ CSS สำหรับองค์ประกอบ HTML
13.TabindexTabIndex ช่วยให้คุณสามารถกำหนดลำดับที่องค์ประกอบ HTML เข้าถึงได้เมื่อใช้คีย์แท็บ เมื่อ TabIndex ถูกตั้งค่าเป็น -1 องค์ประกอบ HTML จะไม่ถูกเลือกโดยใช้ปุ่ม TAB
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
</head>
<body>
<form>
<label> ชื่อ: <อินพุต type = "text" name = "name" tabindex = "1"/> </label>
<p/>
<label> เมือง: <อินพุต type = "text" name = "city" tabindex = "-1"/> </lable>
</p>
<label> ประเทศ: <อินพุต type = "text" name = "country" tabindex = "2"/> </label>
</p>
<อินพุต type = "ส่ง" tabindex = "3"/>
</form>
</body>
</html>
ผล:
14.Title ชื่อเรื่องสามารถให้ข้อมูลเพิ่มเติมสำหรับองค์ประกอบ HTML ซึ่งมักใช้เพื่อแสดงข้อมูลพรอมต์<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
</head>
<body>
<a href = "http://apress.com"> เยี่ยมชมเว็บไซต์ apress </a>
</body>
</html>
ผล:
นั่นคือทั้งหมดสำหรับหลักสูตรของวันนี้ฉันหวังว่าเนื้อหาเหล่านี้จะเป็นประโยชน์กับทุกคน
ที่อยู่ดาวน์โหลดตัวอย่าง: html5guide.rar