เอกสาร HTML มีการประกาศประเภทเอกสารและองค์ประกอบรูท <html>
องค์ประกอบที่ฝังอยู่ในองค์ประกอบ <html>
คือส่วนหัวของเอกสารและเนื้อหาเอกสาร แม้ว่าผู้เข้าชมที่มองเห็นจะมองไม่เห็นหัวของเอกสาร แต่สิ่งสำคัญก็คือการทำให้เว็บไซต์ของคุณใช้งานได้ ซึ่งประกอบด้วยข้อมูลเมตาทั้งหมด รวมถึงข้อมูลสำหรับเครื่องมือค้นหาและผลลัพธ์ในโซเชียลมีเดีย ไอคอนสำหรับแท็บเบราว์เซอร์และทางลัดหน้าจอหลักของอุปกรณ์เคลื่อนที่ ตลอดจนลักษณะการทำงานและการนำเสนอเนื้อหา ในส่วนนี้ คุณจะพบคอมโพเนนต์ที่แม้จะไม่แสดงอยู่ในเกือบทุกหน้าเว็บ
ในการสร้างเว็บไซต์ MachineLearningWorkshop.com (MLW) ให้เริ่มด้วยการใส่คอมโพเนนต์ที่ควรพิจารณาว่าจำเป็นต่อหน้าเว็บทุกหน้า ได้แก่ ประเภทของเอกสาร ภาษามนุษย์ของเนื้อหา ชุดอักขระ และชื่อของเว็บไซต์หรือแอปพลิเคชัน
เพิ่มไปยังเอกสาร HTML ทั้งหมด
มีฟีเจอร์หลายอย่างที่ควรได้รับการพิจารณาว่าจำเป็นสำหรับทุกหน้าเว็บ เบราว์เซอร์จะยังแสดงผลเนื้อหาหากองค์ประกอบเหล่านี้ขาดหายไป แต่รวมองค์ประกอบเหล่านี้เอาไว้ ตลอดเวลา
<!DOCTYPE html>
สิ่งแรกในเอกสาร HTML ก็คือคำย่อ ใช้ <!DOCTYPE html>
เพียงอย่างเดียวสำหรับ HTML นี่อาจดูเหมือนองค์ประกอบ HTML แต่ที่จริงแล้วไม่เป็นเช่นนั้น ซึ่งเป็นโหนดชนิดพิเศษที่เรียกว่า "doctype" DOCTYPE จะบอกเบราว์เซอร์ให้ใช้โหมดมาตรฐาน หากไม่ระบุ เบราว์เซอร์จะใช้โหมดการแสดงผลอื่นที่เรียกว่าโหมดที่ไม่มาตรฐาน การรวม DOCTYPE จะช่วยป้องกันโหมดที่ไม่มาตรฐาน
<html>
องค์ประกอบ <html>
เป็นองค์ประกอบรูทสำหรับเอกสาร HTML เป็นระดับบนสุดของ <head>
และ <body>
ที่มีทุกอย่างในเอกสาร HTML นอกเหนือจาก DOCTYPE หากไม่ใส่ จะถือว่าระบุเป็นนัย แต่สิ่งสำคัญคือต้องใส่ไว้ด้วย เนื่องจากนี่คือองค์ประกอบที่ใช้ประกาศภาษาของเนื้อหาในเอกสาร
ภาษาของเนื้อหา
แอตทริบิวต์ภาษา lang
ที่เพิ่มลงในแท็ก <html>
จะกำหนดภาษาหลักของเอกสาร ค่าของแอตทริบิวต์ lang
คือรหัสภาษา ISO 2 หรือ 3 ตัวอักษรตามด้วยภูมิภาค ภูมิภาคเป็นตัวเลือกที่ไม่บังคับ แต่แนะนำให้มี เนื่องจากภาษาในแต่ละภูมิภาคอาจแตกต่างกันอย่างมาก ตัวอย่างเช่น ภาษาฝรั่งเศสแตกต่างกันมากในแคนาดา (fr-CA
) เทียบกับบูร์กินาฟาโซ (fr-BF
) การประกาศภาษานี้ช่วยให้โปรแกรมอ่านหน้าจอ เครื่องมือค้นหา และบริการแปลภาษารู้ภาษาของเอกสาร
แอตทริบิวต์ lang
ไม่ได้จำกัดเฉพาะแท็ก <html>
หากมีข้อความในหน้าเว็บที่เป็นภาษาอื่นที่ไม่ใช่ภาษาของเอกสารหลัก ควรใช้แอตทริบิวต์ lang
เพื่อระบุข้อยกเว้นสำหรับภาษาหลักภายในเอกสาร แอตทริบิวต์ lang
ในร่างกายจะไม่แสดงผลเช่นเดียวกับเวลาที่อยู่ในส่วนหัว วิธีนี้เป็นเพียงการเสริมความหมายโดยเปิดให้เทคโนโลยีความช่วยเหลือพิเศษและบริการอัตโนมัติทราบภาษาของเนื้อหาที่ได้รับผลกระทบ
นอกเหนือจากการตั้งค่าภาษาสำหรับเอกสารและข้อยกเว้นสำหรับภาษาฐานนั้นแล้ว ยังสามารถใช้แอตทริบิวต์ในตัวเลือก CSS ได้ด้วย กำหนดเป้าหมาย <span lang="fr-fr">Ceci n'est pas une pipe.</span>
ได้ด้วยตัวเลือกแอตทริบิวต์และภาษา [lang|="fr"]
และ :lang(fr)
<head>
เราพบแท็กย่อย 2 รายการคือ <head>
และ <body>
ซึ่งอยู่ระหว่างแท็กเปิดและแท็กปิด <html>
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head>
หรือส่วนหัวข้อมูลเมตาของเอกสารมีข้อมูลเมตาทั้งหมดสำหรับเว็บไซต์หรือแอปพลิเคชัน ส่วนเนื้อหามีเนื้อหาที่มองเห็นได้ ส่วนที่เหลือของส่วนนี้เน้นที่คอมโพเนนต์ที่พบว่าฝังอยู่ภายในการเปิดและปิด <head></head>
คอมโพเนนต์ที่จำเป็นภายใน <head>
ข้อมูลเมตาของเอกสาร ได้แก่ ชื่อเอกสาร, ชุดอักขระ, การตั้งค่าวิวพอร์ต, คำอธิบาย, URL ฐาน, ลิงก์สไตล์ชีต และไอคอนในองค์ประกอบ <head>
แม้ว่าคุณอาจไม่จำเป็นต้องใช้ฟีเจอร์เหล่านี้ทั้งหมด แต่ให้ใส่ชุดอักขระ ชื่อ และการตั้งค่าวิวพอร์ตไว้ด้วยเสมอ
การเข้ารหัสอักขระ
องค์ประกอบแรกใน <head>
ควรเป็นการประกาศการเข้ารหัสอักขระ charset
ซึ่งอยู่ก่อนชื่อเพื่อให้มั่นใจว่าเบราว์เซอร์จะแสดงอักขระในชื่อนั้นและอักขระทั้งหมดในส่วนที่เหลือของเอกสารได้
การเข้ารหัสเริ่มต้นในเบราว์เซอร์ส่วนใหญ่คือ windows-1252
ขึ้นอยู่กับภาษา อย่างไรก็ตาม คุณควรใช้ UTF-8
เพราะตัวเลือกนี้จะเปิดใช้การเข้ารหัสแบบ 1-4 ไบต์ของอักขระทั้งหมด แม้แต่อักขระที่คุณไม่รู้ตัวด้วยซ้ำว่ามีอยู่ และยังเป็นประเภทการเข้ารหัสที่ HTML5 กำหนดด้วย
หากต้องการตั้งค่าการเข้ารหัสอักขระเป็น UTF-8 ให้ใส่โค้ดต่อไปนี้
<meta charset="utf-8" />
เมื่อประกาศ UTF-8
(ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) คุณจะใส่อีโมจิในชื่อได้ด้วย (แต่โปรดอย่า)
การเข้ารหัสอักขระจะรับช่วงอยู่ในทุกๆ อย่างในเอกสาร แม้กระทั่ง <style>
และ <script>
การประกาศเล็กๆ น้อยๆ นี้หมายความว่าคุณจะใส่อีโมจิในชื่อคลาสและ selectorAPI ได้ (ขอย้ำอีกครั้งว่าอย่าใส่) หากใช้อีโมจิ อย่าลืมใช้อีโมจิในลักษณะที่จะช่วยเพิ่มความสามารถในการใช้งานโดยไม่ส่งผลเสียต่อการช่วยเหลือพิเศษ
ชื่อเอกสาร
หน้าแรกและหน้าเพิ่มเติมทั้งหมดควรมีชื่อไม่ซ้ำกัน เนื้อหาของชื่อเอกสาร ข้อความระหว่างแท็กเปิดและแท็กปิด <title>
จะแสดงในแท็บเบราว์เซอร์ รายการหน้าต่างที่เปิดอยู่ ประวัติ ผลการค้นหา และในการ์ดโซเชียลมีเดีย เว้นแต่จะมีคำจำกัดความใหม่ด้วยแท็ก <meta>
<title>Machine Learning Workshop</title>
ข้อมูลเมตาของวิวพอร์ต
เมตาแท็กอื่นๆ ที่ควรพิจารณาว่าจำเป็นคือเมตาแท็กวิวพอร์ต ซึ่งช่วยในการตอบสนองของเว็บไซต์ ทำให้เนื้อหาแสดงได้ดีโดยค่าเริ่มต้นโดยไม่คำนึงถึงความกว้างของวิวพอร์ต แม้ว่าเมตาแท็กวิวพอร์ตจะมีมาตั้งแต่เดือนมิถุนายน 2007 แต่เมื่อ iPhone รุ่นแรกเปิดตัว เราก็มีการบันทึกลงในข้อกำหนดเท่านั้น เนื่องจากช่วยให้ควบคุมขนาดและการปรับขนาดของวิวพอร์ตได้ และป้องกันไม่ให้เนื้อหาของเว็บไซต์ถูกลดขนาดลงให้พอดีกับหน้าจอขนาด 320 พิกเซล เราจึงขอแนะนำเป็นอย่างยิ่งให้ใช้
<meta name="viewport" content="width=device-width" />
โค้ดที่อยู่ก่อนหน้านี้หมายถึง "ทำให้เว็บไซต์ปรับเปลี่ยนตามอุปกรณ์ โดยเริ่มจากทำให้ความกว้างของเนื้อหาเป็นความกว้างของหน้าจอ" นอกเหนือจาก width
แล้ว คุณยังตั้งค่าการซูมและความสามารถในการปรับขนาดได้ แต่ทั้ง 2 อย่างนี้จะมีค่าเริ่มต้นเป็นค่าที่เข้าถึงได้ หากต้องการแสดงเนื้อหาที่ชัดเจน ให้ใส่ข้อมูลต่อไปนี้
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
วิวพอร์ตเป็นส่วนหนึ่งของการตรวจสอบความสามารถเข้าถึงได้ง่ายของ Lighthouse โดยเว็บไซต์ของคุณจะผ่านการตรวจสอบหากสามารถปรับขนาดได้และไม่ได้ตั้งค่าขนาดสูงสุดไว้
ถึงตอนนี้ โครงร่างสำหรับไฟล์ HTML ของเราคือ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
เนื้อหา <head>
อื่นๆ
ยังมีอีกมากมายที่จะปรากฏใน <head>
ที่จริงแล้วข้อมูลเมตาทั้งหมด องค์ประกอบส่วนใหญ่ที่คุณจะพบใน <head>
ครอบคลุมไว้ที่นี่ และในขณะเดียวกันก็ยังบันทึกตัวเลือก <meta>
ไว้อีกมากมายสำหรับบทถัดไปด้วย
คุณได้เห็นชุดอักขระเมตาและชื่อเอกสารแล้ว แต่ยังมีข้อมูลเมตาอีกมากที่อยู่นอกแท็ก <meta>
ที่ควรรวมไว้
CSS
<head>
เป็นที่ที่คุณใส่รูปแบบสำหรับ HTML เรามีเส้นทางการเรียนรู้สำหรับ CSS โดยเฉพาะ หากคุณต้องการเรียนรู้เกี่ยวกับสไตล์ แต่ต้องทราบวิธีใส่สไตล์ลงในเอกสาร HTML
คุณรวม CSS ได้ 3 วิธี ได้แก่ <link>
, <style>
และแอตทริบิวต์ style
2 วิธีหลักในการรวมรูปแบบไว้ในไฟล์ HTML คือการรวมแหล่งข้อมูลภายนอกโดยใช้องค์ประกอบ <link>
ที่ตั้งค่าแอตทริบิวต์ rel
เป็น stylesheet
หรือการรวม CSS ไว้ในส่วนหัวของเอกสารโดยตรงภายในแท็กเปิดและปิด <style>
แท็ก <link>
เป็นวิธีที่แนะนำในการรวมสไตล์ชีต การลิงก์สไตล์ชีตภายนอกเพียงหน้าเดียวหรือไม่กี่รายการส่งผลดีต่อทั้งประสบการณ์ของนักพัฒนาซอฟต์แวร์และประสิทธิภาพของเว็บไซต์ โดยคุณจะสามารถรักษา CSS ไว้ในจุดเดียวแทนที่จะมีการโจมตีไว้ทุกที่ และเบราว์เซอร์สามารถแคชไฟล์ภายนอกได้ ซึ่งหมายความว่าคุณจะไม่ต้องดาวน์โหลดซ้ำอีกเมื่อไปยังส่วนต่างๆ ของหน้าเว็บ
ไวยากรณ์คือ <link rel="stylesheet" href="styles.css">
โดยสไตล์ชีต.css คือ URL ของสไตล์ชีต ซึ่งบ่อยครั้งคุณจะเห็น type="text/css"
ไม่จำเป็น หากใส่รูปแบบที่เขียนด้วยสิ่งอื่นที่ไม่ใช่ CSS คุณจะต้องใช้ type
แต่เนื่องจากไม่มีประเภทอื่นๆ จึงไม่จำเป็นต้องใช้แอตทริบิวต์นี้ แอตทริบิวต์ rel
กำหนดความสัมพันธ์: ในกรณีนี้คือ stylesheet
หากคุณไม่เลือกช่องนี้ ระบบจะไม่ลิงก์ CSS ของคุณ
คุณจะได้พบกับค่า rel
อีก 2-3 ค่าในเร็วๆ นี้ แต่ก่อนอื่น มาพูดถึงวิธีอื่นๆ ในการรวม CSS กัน
หากต้องการให้รูปแบบสไตล์ชีตภายนอกอยู่ภายในเลเยอร์แบบ Cascade แต่คุณไม่มีสิทธิ์แก้ไขไฟล์ CSS เพื่อใส่ข้อมูลเลเยอร์ คุณจะต้องรวม CSS ที่มี @import
ไว้ใน <style>
ดังนี้
<style>
@import "styles.css" layer(firstLayer);
</style>
เมื่อใช้ @import
เพื่อนำเข้าสไตล์ชีตไปยังเอกสาร (ไม่บังคับ) ลงในเลเยอร์แบบ Cascade คำสั่ง @import
จะต้องเป็นคำสั่งแรกใน <style>
หรือสไตล์ชีตที่ลิงก์ นอกการประกาศชุดอักขระ
เลเยอร์การเรียงซ้อนยังใหม่พอสมควรและคุณอาจไม่เห็น @import
ในส่วนหัว <style>
แต่คุณจะเห็นการประกาศพร็อพเพอร์ตี้ที่กำหนดเองในบล็อกรูปแบบส่วนหัวบ่อยๆ ดังนี้
<style>
:root {
--theme-color: #226DAA;
}
</style>
สไตล์ต่างๆ ไม่ว่าจะผ่าน <link>
หรือ <style>
หรือทั้ง 2 อย่าง ควรอยู่ในหัว แท็กเหล่านี้จะทำงานได้หากอยู่ในเนื้อหาของเอกสาร แต่คุณต้องการให้รูปแบบอยู่ในส่วนหัวเพื่อเหตุผลด้านประสิทธิภาพ นี่อาจฟังดูขัดกับสิ่งที่ควรจะเป็น เพราะคุณอาจคิดว่าต้องการให้เนื้อหาโหลดขึ้นมาก่อน แต่จริงๆ แล้วคุณต้องการให้เบราว์เซอร์รู้วิธีแสดงผลเนื้อหาเมื่อโหลด การเพิ่มรูปแบบก่อนจะเป็นการป้องกันการทำซ้ำที่ไม่จำเป็นซึ่งเกิดขึ้นหากมีการจัดรูปแบบองค์ประกอบหลังจากแสดงผลครั้งแรก
จากนั้นคุณจะมีวิธีหนึ่งในการรวมรูปแบบที่คุณจะไม่ใช้ใน <head>
ของเอกสาร นั่นก็คือ รูปแบบแทรกในบรรทัด คุณคงไม่ใช้รูปแบบแทรกในบรรทัดในส่วนหัว เพราะสไตล์ชีตของ User Agent จะซ่อนส่วนหัวโดยค่าเริ่มต้น แต่ถ้าคุณต้องการสร้างโปรแกรมแก้ไข CSS โดยไม่มี JavaScript เพื่อให้ทดสอบองค์ประกอบที่กำหนดเองของหน้าเว็บได้ คุณอาจทำให้ส่วนหัวปรากฏด้วย display: block
จากนั้นซ่อนทุกอย่างในส่วนหัว จากนั้นด้วยแอตทริบิวต์ style
ในบรรทัด ทำให้แสดงบล็อกสไตล์ที่แก้ไขเนื้อหาได้
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
แม้ว่าคุณจะเพิ่มรูปแบบแทรกในบรรทัดใน <style>
ได้ แต่การจัดรูปแบบ <style>
ใน style
ก็เป็นเรื่องที่สนุกขึ้น ฉันออกนอกเรื่อง
การใช้งานอื่นๆ ขององค์ประกอบ <link>
องค์ประกอบ link
จะใช้ในการสร้างความสัมพันธ์ระหว่างเอกสาร HTML และทรัพยากรภายนอก แหล่งข้อมูลเหล่านี้บางส่วนอาจมีการดาวน์โหลดไว้ ในขณะที่อื่นๆ มีไว้เพื่อให้ข้อมูล ประเภทของความสัมพันธ์จะกำหนดโดยค่าของแอตทริบิวต์ rel
ปัจจุบันมีค่าที่ใช้ได้ 25 ค่าสำหรับแอตทริบิวต์ rel
ที่สามารถใช้กับ <link>
, <a>
และ <area>
หรือ <form>
โดยมี 2-3 ค่าที่ใช้ได้กับทุกค่า แต่แนะนำให้รวมรายการที่เกี่ยวข้องกับข้อมูลเมตาในส่วนหัว และรายการที่เกี่ยวข้องกับประสิทธิภาพใน <body>
ตอนนี้คุณจะต้องรวมประเภทอื่น 3 ประเภทไว้ในส่วนหัว ได้แก่ icon
, alternate
และ canonical
(คุณได้ใส่ประเภทที่ 4 rel="manifest"
ในโมดูลถัดไป)
ไอคอน Fav
ใช้แท็ก <link>
พร้อมด้วยคู่แอตทริบิวต์/ค่า rel="icon"
เพื่อระบุไอคอน Fav ที่จะใช้สำหรับเอกสาร ไอคอน Fav เป็นไอคอนขนาดเล็กมากซึ่งปรากฏบนแท็บเบราว์เซอร์ ซึ่งมักจะอยู่ทางด้านซ้ายของชื่อเอกสาร เมื่อคุณเปิดแท็บไว้เป็นจำนวนมาก แท็บจะย่อลงและชื่ออาจหายไปทั้งหมด แต่ไอคอนจะยังคงปรากฏให้เห็นตลอดเวลา ไอคอน Fav ส่วนใหญ่จะเป็นโลโก้บริษัทหรือแอปพลิเคชัน
หากคุณไม่ประกาศไอคอน Fav เบราว์เซอร์จะมองหาไฟล์ชื่อ favicon.ico
ในไดเรกทอรีระดับบนสุด (โฟลเดอร์รูทของเว็บไซต์) คุณสามารถใช้ชื่อไฟล์และตำแหน่งอื่นได้ด้วย <link>
:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
โค้ดที่อยู่ก่อนหน้าระบุว่า "ใช้ mlwicon.png
เป็นไอคอนสำหรับสถานการณ์ที่ 16 พิกเซล, 32 พิกเซล หรือ 48 พิกเซลจะเหมาะสม" แอตทริบิวต์ขนาดจะยอมรับค่า any
สำหรับไอคอนที่รองรับการปรับขนาดหรือรายการที่คั่นด้วยช่องว่างของค่าสี่เหลี่ยมจัตุรัส widthXheight
โดยที่ค่าความกว้างและความสูงคือ 16, 32, 48 ขึ้นไปในลำดับเรขาคณิตนั้น หน่วยพิกเซลจะถูกละไว้ และค่า X จะไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
มีไอคอนพิเศษที่ไม่ได้มาตรฐาน 2 ประเภทสำหรับเบราว์เซอร์ Safari ได้แก่ apple-touch-icon
สำหรับอุปกรณ์ iOS และmask-icon
สำหรับแท็บที่ปักหมุดใน macOS ระบบจะใช้ apple-touch-icon
เมื่อผู้ใช้เพิ่มเว็บไซต์ลงในหน้าจอหลักเท่านั้น คุณสามารถระบุไอคอนหลายรายการด้วย sizes
ที่แตกต่างกันสำหรับอุปกรณ์ต่างๆ ระบบจะใช้ mask-icon
ในกรณีที่ผู้ใช้ปักหมุดแท็บใน Safari บนเดสก์ท็อปเท่านั้น โดยตัวไอคอนควรเป็น SVG แบบโมโนโครม และแอตทริบิวต์ color
จะแสดงสีที่จำเป็นให้กับไอคอน
ถึงแม้ว่าคุณสามารถใช้ <link>
เพื่อกำหนดรูปภาพที่แตกต่างกันโดยสิ้นเชิงในแต่ละหน้า หรือแม้กระทั่งการโหลดหน้าเว็บแต่ละครั้ง ก็อย่าใช้ โปรดใช้รูปภาพเดียวเพื่อความสอดคล้องและประสบการณ์ที่ดีของผู้ใช้ Twitter ใช้นกสีน้ำเงิน เมื่อคุณเห็นนกสีน้ำเงินในแท็บเบราว์เซอร์ แสดงว่าแท็บนั้นเปิดไปยังหน้า Twitter โดยไม่คลิกแท็บ Google ใช้ไอคอน Fav ที่ต่างกันสำหรับแต่ละแอปพลิเคชัน เช่น ไอคอนจดหมาย ไอคอนปฏิทิน แต่ไอคอน Google ทั้งหมดใช้รูปแบบสีเดียวกัน ขอย้ำอีกครั้งว่า คุณรู้แน่ชัดแล้วว่าเนื้อหาของแท็บที่เปิดอยู่มาจากไอคอนอย่างไร
เว็บไซต์เวอร์ชันทางเลือก
เราใช้ค่า alternate
ของแอตทริบิวต์ rel
เพื่อระบุคำแปลหรือการนำเสนอแบบอื่นของเว็บไซต์
สมมติว่าเรามีเว็บไซต์ในเวอร์ชันต่างๆ ที่แปลเป็นภาษาฝรั่งเศสและโปรตุเกสแบบบราซิล
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
เมื่อใช้ alternate
สำหรับการแปล ต้องตั้งค่าแอตทริบิวต์ hreflang
ค่าสำรองเป็นมากกว่าคำแปล เช่น แอตทริบิวต์ type
จะกำหนด URI ทางเลือกสำหรับฟีด RSS ได้เมื่อตั้งค่าแอตทริบิวต์ type
เป็น application/rss+xml
หรือ application/atom+xml
มาลิงก์เว็บไซต์เวอร์ชัน PDF ปลอมกัน
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
หากค่า rel
คือ alternate stylesheet
จะเป็นการกำหนดสไตล์ชีตสำรองและต้องตั้งค่าแอตทริบิวต์ title
เพื่อตั้งชื่อสไตล์ทางเลือกนั้น
หน้า Canonical
หากสร้างเวิร์กช็อปแมชชีนเลิร์นนิงหลายเวอร์ชันหรือหลายเวอร์ชัน เครื่องมือค้นหาอาจสับสนว่าเวอร์ชันใดเป็นแหล่งที่มาที่เชื่อถือได้ สำหรับกรณีนี้ ให้ใช้ rel="canonical"
เพื่อระบุ URL ที่ต้องการสำหรับเว็บไซต์หรือแอปพลิเคชัน
ใส่ Canonical URL ไว้ในหน้าที่แปลแล้วทุกหน้า และในหน้าแรกซึ่งระบุ URL ที่เราต้องการ ดังนี้
<link rel="canonical" href="https://www.machinelearning.com" />
ลิงก์ Canonical ของ rel="canonical"
มักใช้สําหรับการโพสต์ข้ามแพลตฟอร์มกับสื่อเผยแพร่และแพลตฟอร์มการเขียนบล็อก เพื่อให้เครดิตแหล่งที่มาต้นฉบับ หากเว็บไซต์เผยแพร่เนื้อหา ก็ควรมีลิงก์ Canonical ไปยังแหล่งที่มาต้นฉบับด้วย
สคริปต์
แท็ก <script>
จะใช้เพื่อรวมสคริปต์ ประเภทเริ่มต้นคือ JavaScript หากคุณใส่ภาษาสคริปต์อื่นๆ ให้ใส่แอตทริบิวต์ type
พร้อมด้วยประเภท MIME หรือ type="module"
หากเป็นโมดูล JavaScript เฉพาะโมดูล JavaScript และ JavaScript เท่านั้นที่จะได้รับการแยกวิเคราะห์และเรียกใช้
คุณสามารถใช้แท็ก <script>
เพื่อห่อหุ้มโค้ดหรือดาวน์โหลดไฟล์ภายนอก ใน MLW ไม่มีไฟล์สคริปต์ภายนอก เพราะขัดแย้งกับความเชื่อยอดนิยม คุณไม่จำเป็นต้องใช้ JavaScript สำหรับเว็บไซต์ที่ใช้งานได้ และนี่เป็นเส้นทางการเรียนรู้ HTML ไม่ใช่ JavaScript
คุณจะต้องใส่ JavaScript สั้นๆ เพื่อสร้างไข่อีสเตอร์ในภายหลัง
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
ข้อมูลโค้ดนี้จะสร้างเครื่องจัดการเหตุการณ์สำหรับองค์ประกอบที่มีรหัส switch
เมื่อใช้ JavaScript คุณไม่ต้องการอ้างอิงองค์ประกอบใดองค์ประกอบหนึ่งก่อนที่จะมีอยู่ ยังไม่มีข้อมูล เราจึงยังไม่รวมข้อมูลดังกล่าว เมื่อเราเพิ่มองค์ประกอบสวิตช์ไฟ เราจะเพิ่ม <script>
ที่ด้านล่างของ <body>
แทนใน <head>
เหตุผล เหตุผล 2 ประการ เราต้องการตรวจสอบว่ามีองค์ประกอบอยู่ก่อนที่จะพบสคริปต์ที่อ้างอิงองค์ประกอบดังกล่าว เนื่องจากเราไม่ได้วางสคริปต์นี้ไว้ในเหตุการณ์DOMContentLoaded หลักๆ แล้ว JavaScript ไม่เพียงแค่บล็อกการแสดงผลเท่านั้น แต่เบราว์เซอร์จะหยุดดาวน์โหลดเนื้อหาทั้งหมดเมื่อมีการดาวน์โหลดสคริปต์ และจะไม่ดาวน์โหลดเนื้อหาอื่นๆ ต่อจนกว่า JavaScript จะเสร็จสิ้นการดำเนินการ ด้วยเหตุนี้ คุณจึงมักจะเห็นคำขอ JavaScript ที่ส่วนท้ายของเอกสารมากกว่าที่จะพบในส่วนหัว
มีแอตทริบิวต์ 2 รายการที่ลดลักษณะการบล็อกของการดาวน์โหลดและเรียกใช้ JavaScript ได้ ได้แก่ defer
และ async
เมื่อใช้ defer
การแสดงผล HTML จะไม่ถูกบล็อกระหว่างการดาวน์โหลด และ JavaScript จะทำงานหลังจากที่เอกสารแสดงผลเสร็จแล้วเท่านั้น เมื่อใช้ async
การแสดงผลจะไม่ถูกบล็อกระหว่างการดาวน์โหลด แต่เมื่อดาวน์โหลดสคริปต์เสร็จแล้ว การแสดงผลจะหยุดชั่วคราวขณะเรียกใช้ JavaScript
หากต้องการรวม JavaScript ของ MLW ในไฟล์ภายนอก คุณสามารถเขียนสิ่งต่อไปนี้
<script src="js/switch.js" defer></script>
การเพิ่มแอตทริบิวต์ defer
จะเลื่อนการดำเนินการของสคริปต์ไปจนกว่าจะแสดงผลทุกอย่างแล้ว ซึ่งจะป้องกันไม่ให้สคริปต์ส่งผลเสียต่อประสิทธิภาพ แอตทริบิวต์ async
และ defer
ใช้ได้กับสคริปต์ภายนอกเท่านั้น
ฐาน
มีอีกองค์ประกอบหนึ่งที่พบเฉพาะใน <head>.
เท่านั้น องค์ประกอบ <base>
อนุญาตให้ตั้งค่าเป้าหมายและ URL ของลิงก์เริ่มต้น แอตทริบิวต์ href
กำหนด URL ฐานสำหรับลิงก์ที่เกี่ยวข้องทั้งหมด
แอตทริบิวต์ target
ซึ่งใช้ได้ใน <base>
รวมทั้งลิงก์และแบบฟอร์ม จะกำหนดตำแหน่งที่ควรเปิดลิงก์เหล่านั้น ค่าเริ่มต้นของ _self
จะเปิดไฟล์ที่ลิงก์ในบริบทเดียวกับเอกสารปัจจุบัน ตัวเลือกอื่นๆ ได้แก่ _blank
ซึ่งจะเปิดทุกลิงก์ในหน้าต่างใหม่ _parent
ของเนื้อหาปัจจุบันซึ่งอาจเหมือนกับไฟล์เปิดเองหากเครื่องมือเปิดไม่ใช่ iframe หรือ _top
ที่อยู่ในแท็บเบราว์เซอร์เดียวกัน แต่เด้งออกจากบริบทใดๆ เพื่อใช้ทั้งแท็บ
นักพัฒนาซอฟต์แวร์ส่วนใหญ่เพิ่มแอตทริบิวต์ target
ลงในลิงก์บางรายการ (หากมี) ที่ต้องการเปิดในหน้าต่างใหม่บนลิงก์หรือแบบฟอร์มเอง แทนที่จะใช้ <base>
<base target="_top" href="https://machinelearningworkshop.com" />
หากเว็บไซต์ของเราพบว่าตัวเองฝังอยู่ใน iframe บนเว็บไซต์อย่าง Yummly รวมถึงองค์ประกอบ <base>
เมื่อผู้ใช้คลิกลิงก์ใดก็ตามภายในเอกสารของเรา ลิงก์ดังกล่าวจะโหลดขึ้นมาจาก iframe และกินพื้นที่หน้าต่างเบราว์เซอร์ทั้งหมด
ข้อเสียประการหนึ่งขององค์ประกอบนี้คือลิงก์ Anchor จะได้รับการแก้ไขด้วย <base>
<base>
แปลงลิงก์ <a href="#ref">
เป็น <a target="_top" href="https://machinelearningworkshop.com#ref">
ได้อย่างมีประสิทธิภาพ ซึ่งจะทริกเกอร์คำขอ HTTP เป็น URL พื้นฐานที่มีส่วนย่อยแนบอยู่
สิ่งอื่นๆ ที่ควรทราบเกี่ยวกับ <base>
: จะมีองค์ประกอบ <base>
ได้เพียง 1 รายการในเอกสาร และควรมีก่อนการใช้ URL สัมพัทธ์ รวมทั้งการอ้างอิงสคริปต์หรือสไตล์ชีตที่เป็นไปได้
ตอนนี้โค้ดจะมีลักษณะดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
ความคิดเห็น HTML
โปรดทราบว่าสคริปต์จะถูกคั่นระหว่างวงเล็บสามเหลี่ยม ขีดกลาง และปัง นี่คือวิธีแสดงความคิดเห็นเกี่ยวกับ HTML เราจะปล่อยให้มีความคิดเห็นสคริปต์จนกว่าจะมีเนื้อหาจริงในหน้านั้น ระบบจะไม่แสดงหรือแยกวิเคราะห์ข้อมูลที่อยู่ระหว่าง <!--
ถึง -->
คุณสามารถวางความคิดเห็น HTML ไว้ที่ไหนก็ได้ในหน้าเว็บ รวมถึงส่วนหัวหรือส่วนเนื้อหา ยกเว้นสคริปต์หรือสไตล์บล็อก ซึ่งคุณควรใช้ความคิดเห็น JavaScript และ CSS ตามลำดับ
คุณได้พูดถึงข้อมูลเบื้องต้นเกี่ยวกับสิ่งที่อยู่ใน<head>
ไปแล้ว แต่ยังต้องการเรียนรู้มากกว่าพื้นฐาน ในส่วนถัดไป เราจะเรียนรู้เกี่ยวกับเมตาแท็กและวิธีควบคุมสิ่งที่จะแสดงเมื่อมีการลิงก์เว็บไซต์ของคุณบนโซเชียลมีเดีย
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับโครงสร้างของเอกสาร
โปรดระบุภาษาของเอกสาร
language
ลงในแท็ก HTMLlang
ลงในแท็ก HTMLAdd the <lang>
ไปยัง <head>
เลือกองค์ประกอบที่สามารถรวมอยู่ใน <head>
<p>
<title>
<meta>