โครงสร้างเอกสาร

เอกสาร HTML มีการประกาศประเภทเอกสารและองค์ประกอบ<html>รูท องค์ประกอบ<html>มีส่วนหัวและเนื้อหาของเอกสาร แม้ว่าส่วนหัวของเอกสารจะไม่ปรากฏนอกโค้ด แต่ก็มีความสำคัญ ต่อการทำงานของเว็บไซต์ โดยมีข้อมูลเมตาทั้งหมด ซึ่งรวมถึง ข้อมูลสำหรับเครื่องมือค้นหาและผลการค้นหาในโซเชียลมีเดีย ไอคอนสำหรับแท็บเบราว์เซอร์ และทางลัดหน้าจอหลักบนอุปกรณ์เคลื่อนที่ รวมถึงลักษณะการทำงานและการนำเสนอเนื้อหา ในส่วนนี้ คุณจะได้พบกับคอมโพเนนต์ที่แม้ว่าจะไม่ ปรากฏ แต่ก็มีอยู่ในหน้าเว็บเกือบทุกหน้า

หากต้องการสร้างเว็บไซต์ MachineLearningWorkshop.com (MLW) ให้เริ่มต้นด้วยการรวมคอมโพเนนต์ที่ควรพิจารณาว่าจำเป็นสำหรับทุกหน้าเว็บ ได้แก่ ประเภทเอกสาร ภาษาที่มนุษย์ใช้ในเนื้อหา ชุดอักขระ และแน่นอนว่าชื่อหรือชื่อของเว็บไซต์หรือแอปพลิเคชัน

เพิ่มลงในเอกสาร HTML ทุกรายการ

มีองค์ประกอบหลายอย่างที่จำเป็นสำหรับทุกหน้าเว็บ เบราว์เซอร์จะแสดงผล เนื้อหาหากไม่มีองค์ประกอบเหล่านี้ แต่คุณควรระบุองค์ประกอบดังกล่าว

<!DOCTYPE html>

สิ่งแรกในเอกสาร HTML คือส่วนนำ สำหรับ HTML คุณต้องมีเพียง <!DOCTYPE html> ซึ่งดูเหมือนองค์ประกอบ HTML แต่จริงๆ แล้วเป็น โหนดพิเศษที่เรียกว่า doctype DOCTYPE จะบอกเบราว์เซอร์ให้ใช้โหมดมาตรฐาน หากไม่มีการระบุ เบราว์เซอร์จะใช้โหมดการแสดงผลอื่นที่เรียกว่าโหมดที่ไม่มาตรฐาน การรวม DOCTYPE จะช่วยป้องกันโหมดที่ไม่มาตรฐาน

<html>

องค์ประกอบ <html> เป็นองค์ประกอบรูทของเอกสาร HTML ซึ่งเป็นองค์ประกอบหลักของ <head> และ <body> ที่มีทุกอย่างในเอกสาร HTML ยกเว้น Doctype หากละเว้นไว้ ระบบจะถือว่าใช้ภาษาที่ระบุ แต่คุณควรระบุเพื่อประกาศภาษาของเอกสาร

ภาษาของเนื้อหา

lang แอตทริบิวต์ ในแท็ก <html> จะกำหนดภาษาหลักของเอกสาร ค่าคือรหัสภาษา ISO ตามด้วยภูมิภาค (ไม่บังคับ) เช่น ภาษาฝรั่งเศสในแคนาดาคือ fr-CA ส่วนในบูร์กินาฟาโซคือ fr-BF การประกาศนี้ช่วยให้โปรแกรมอ่านหน้าจอ เครื่องมือค้นหา และ บริการแปลระบุภาษาของเอกสารได้

คุณใช้แอตทริบิวต์ lang ในแท็กอื่นๆ เพื่อระบุข้อยกเว้นสำหรับภาษาหลักของเอกสารได้ เช่นเดียวกับการใช้งานในส่วนหัว แอตทริบิวต์ lang ภายในเนื้อหาจะไม่มีผลต่อภาพ ซึ่งจะเพิ่มความหมายเพื่อให้เทคโนโลยีความช่วยเหลือ และบริการอัตโนมัติระบุภาษาของเนื้อหาที่เฉพาะเจาะจงได้

นอกเหนือจากการตั้งค่าภาษาสำหรับเอกสารและข้อยกเว้นสำหรับภาษาพื้นฐานนั้นแล้ว คุณยังใช้แอตทริบิวต์ในตัวเลือก CSS ได้ด้วย <span lang="fr-fr">Ceci n'est pas une pipe.</span>สามารถกำหนดเป้าหมายได้ด้วย แอตทริบิวต์และตัวเลือกภาษา [lang|="fr"] และ :lang(fr)

เราพบแท็กย่อย 2 แท็กต่อไปนี้อยู่ระหว่างแท็ก <html> เปิดและปิด <head> และ <body>

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head>มีข้อมูลเมตาสำหรับเว็บไซต์หรือแอปพลิเคชัน ส่วน <body> มีเนื้อหาที่มองเห็นได้ ส่วนที่เหลือของส่วนนี้จะมุ่งเน้นที่คอมโพเนนต์ ที่ซ้อนอยู่ภายในองค์ประกอบ <head>

คอมโพเนนต์ที่จำเป็นภายใน <head>

ข้อมูลเมตาของเอกสาร ซึ่งรวมถึงชื่อเอกสาร ชุดอักขระ การตั้งค่า Viewport คำอธิบาย URL ฐาน ลิงก์สไตล์ชีต และไอคอน จะอยู่ในองค์ประกอบ <head> แม้ว่าคุณอาจไม่จำเป็นต้องใช้ฟีเจอร์ทั้งหมดนี้ แต่ควรระบุชุดอักขระ ชื่อ และการตั้งค่า Viewport เสมอ

การเข้ารหัสอักขระ

องค์ประกอบแรกสุดใน <head> ควรเป็นประกาศการเข้ารหัสอักขระ charset ซึ่งอยู่ก่อนชื่อเพื่อให้มั่นใจว่าเบราว์เซอร์จะแสดงอักขระในชื่อนั้นและอักขระทั้งหมดในส่วนที่เหลือของเอกสารได้

การเข้ารหัสเริ่มต้น ในเบราว์เซอร์ส่วนใหญ่คือ windows-1252 โดยขึ้นอยู่กับภาษา อย่างไรก็ตาม คุณควร ใช้ UTF-8 ซึ่งช่วยให้ เข้ารหัสอักขระทั้งหมดได้ตั้งแต่ 1-4 ไบต์

หากต้องการตั้งค่าการเข้ารหัสอักขระเป็น UTF-8 ให้ระบุ

<meta charset="utf-8" />

การประกาศ UTF-8 (ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) จะช่วยให้คุณใส่อีโมจิในชื่อได้ด้วย

การเข้ารหัสอักขระจะสืบทอดไปยังทุกอย่างในเอกสาร แม้กระทั่ง <style> และ <script> การประกาศเล็กๆ นี้หมายความว่าคุณสามารถใส่อีโมจิในชื่อชั้นเรียนและselectorAPIได้ หากใช้อีโมจิ โปรดตรวจสอบว่าใช้อีโมจิในลักษณะที่ช่วยเพิ่มความสามารถในการใช้งานโดยไม่ส่งผลเสียต่อการช่วยเหลือพิเศษ

ชื่อเอกสาร

ทุกหน้า หน้าแรก และหน้าเพิ่มเติมทั้งหมดควรมีชื่อที่ไม่ซ้ำกัน เนื้อหาสำหรับชื่อเอกสาร ข้อความระหว่างแท็กเปิดและปิด <title> จะแสดงในแท็บเบราว์เซอร์ รายการหน้าต่างที่เปิดอยู่ ประวัติ ผลการค้นหา และการ์ดโซเชียลมีเดีย เว้นแต่จะมีการกำหนดใหม่ด้วยแท็ก <meta>

<title>Machine Learning Workshop</title>

ข้อมูลเมตาของวิวพอร์ต

เมตาแท็กวิวพอร์ต มีความสำคัญต่อการตอบสนองของเว็บไซต์ เนื่องจากช่วยให้มั่นใจได้ว่าเนื้อหาจะแสดงผลได้ดีไม่ว่าวิวพอร์ตจะมีความกว้างเท่าใด แม้ว่าเมตาแท็กวิวพอร์ต จะมีมาตั้งแต่ปี 2007 แต่เพิ่งมีการบันทึกไว้ในข้อกำหนดเมื่อไม่นานมานี้ โดยจะควบคุมขนาดและการปรับขนาดวิวพอร์ต เพื่อป้องกันไม่ให้เนื้อหามีขนาดเล็กลงเพื่อให้พอดีกับหน้าจอขนาดเล็ก

<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> ที่ควรใส่ไว้

CSS

<head> คือที่ที่คุณใส่สไตล์สำหรับ HTML ของคุณ มีเส้นทางการเรียนรู้เฉพาะสำหรับ CSS หากคุณต้องการเรียนรู้เกี่ยวกับสไตล์ แต่คุณจำเป็นต้องทราบวิธีใส่สไตล์ในเอกสาร HTML

คุณสามารถรวม CSS ได้ 3 วิธี ได้แก่ <link>, <style> และแอตทริบิวต์ style

วิธีหลักๆ 2 วิธีในการรวมสไตล์ไว้ในไฟล์ HTML คือการรวม แหล่งข้อมูลภายนอกโดยใช้องค์ประกอบ <link> ที่มีแอตทริบิวต์ rel ตั้งค่าเป็น stylesheet หรือการรวม CSS ไว้ในส่วนหัวของเอกสารโดยตรงภายใน แท็กเปิดและปิด <style>

แท็ก <link> เป็นวิธีที่แนะนำในการรวมสไตล์ชีต การลิงก์สไตล์ชีตภายนอกรายการเดียวหรือ 2-3 รายการเป็นวิธีที่ดีทั้งสำหรับประสบการณ์ของนักพัฒนาซอฟต์แวร์และประสิทธิภาพของเว็บไซต์ เนื่องจากคุณสามารถดูแล CSS ได้ในที่เดียวแทนที่จะกระจายอยู่ทุกที่ และเบราว์เซอร์จะแคชไฟล์ภายนอกได้ ซึ่งหมายความว่าไม่ต้องดาวน์โหลดอีกครั้งทุกครั้งที่มีการไปยังหน้าเว็บ

ไวยากรณ์คือ <link rel="stylesheet" href="styles.css"> โดยที่ styles.css คือชื่อไฟล์และตำแหน่งสัมพัทธ์ของชีตสไตล์ คุณอาจเห็นแอตทริบิวต์ type="text/css" แต่ไม่จำเป็นต้องระบุ แอตทริบิวต์ rel จะกำหนด ความสัมพันธ์ ซึ่งในกรณีนี้คือ stylesheet หากไม่ระบุแอตทริบิวต์ rel ระบบจะไม่ลิงก์ CSS ของคุณ

คุณจะได้เห็นค่าอื่นๆ ของ rel ในเร็วๆ นี้ แต่ก่อนอื่นคุณจะได้เรียนรู้วิธีอื่นๆ ในการรวม CSS

หากต้องการให้รูปแบบชีตสไตล์ภายนอกอยู่ในเลเยอร์แบบเรียงซ้อน แต่ คุณไม่มีสิทธิ์แก้ไขไฟล์ CSS คุณจะต้องรวม CSS ที่มี@import ไว้ภายใน <style>

<style>
  @import "styles.css" layer(firstLayer);
</style>

เมื่อใช้ @import เพื่อนำเข้าชีตสไตล์ลงในเอกสารของคุณ หรือจะนำเข้าไปยัง เลเยอร์แบบเรียงซ้อนก็ได้ คำสั่ง @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> ได้

องค์ประกอบ link ใช้เพื่อสร้างความสัมพันธ์ระหว่างเอกสาร HTML กับ แหล่งข้อมูลภายนอก คุณอาจดาวน์โหลดแหล่งข้อมูลบางอย่างได้ แต่บางอย่างก็เป็นเพียงข้อมูล ประเภทความสัมพันธ์กำหนดโดยค่าของแอตทริบิวต์ rel แอตทริบิวต์ rel มีค่าที่ใช้ได้ 25 ค่า ซึ่งใช้ได้กับ <link>, <a> และ <area> หรือ <form> โดยมีค่าบางค่าที่ใช้ได้กับแอตทริบิวต์ทั้งหมด เราขอแนะนำให้ใส่ข้อมูลที่เกี่ยวข้องกับข้อมูลเมตาในส่วนหัว และใส่ข้อมูลที่เกี่ยวข้องกับประสิทธิภาพในส่วน <body>

ตอนนี้คุณจะรวมอีก 3 ประเภทไว้ในส่วนหัว ได้แก่ icon, alternate และ canonical ส่วนประเภทที่ 4 คือ rel="manifest" จะเพิ่มในโมดูลถัดไป

ไอคอน Fav

ใช้แท็ก <link> กับ rel="icon" เพื่อระบุ favicon สำหรับเอกสารของคุณ Favicon คือไอคอนขนาดเล็กที่ปรากฏในแท็บเบราว์เซอร์ โดยปกติจะอยู่ทางด้านซ้ายของชื่อเอกสาร เมื่อแท็บมีขนาดเล็กลง ชื่ออาจหายไป แต่ไอคอนจะยังคงปรากฏอยู่ Favicon ส่วนใหญ่เป็นโลโก้ของบริษัทหรือแอปพลิเคชัน

หากไม่ได้ประกาศ favicon เบราว์เซอร์จะค้นหาไฟล์ชื่อ favicon.ico ในไดเรกทอรีระดับบนสุด (โฟลเดอร์รูทของเว็บไซต์) เมื่อใช้ <link> คุณจะใช้ชื่อไฟล์และตำแหน่งอื่นได้

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/https/web.developers.google.cn/images/mlwicon.png" />

โค้ดข้างต้นระบุว่า "ใช้ mlwicon.png เป็นไอคอนสำหรับสถานการณ์ที่ขนาด 16 พิกเซล 32 พิกเซล หรือ 48 พิกเซลเหมาะสม" แอตทริบิวต์ sizes ยอมรับค่า any สำหรับไอคอนที่ปรับขนาดได้ หรือรายการค่าสี่เหลี่ยมจัตุรัส widthXheight ที่คั่นด้วยช่องว่าง โดยค่าความกว้างและความสูงคือ 16, 32, 48 หรือมากกว่าในลำดับ เรขาคณิตนั้น ระบบจะละเว้นหน่วยพิกเซล และ X จะไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่

<link rel="apple-touch-icon" sizes="180x180" href="/https/web.developers.google.cn/images/mlwicon.png" />
<link rel="mask-icon" href="/https/web.developers.google.cn/images/mlwicon.svg" color="#226DAA" />

เบราว์เซอร์ Safari มีไอคอนพิเศษ 2 ประเภทที่ไม่เป็นไปตามมาตรฐาน ดังนี้ apple-touch-icon สำหรับอุปกรณ์ iOS และ mask-icon สำหรับแท็บที่ปักหมุดใน macOS apple-touch-icon จะใช้เฉพาะเมื่อผู้ใช้เพิ่มเว็บไซต์ลงในหน้าจอหลัก โดยคุณระบุไอคอนหลายรายการที่มี sizes ต่างกันสำหรับอุปกรณ์ต่างๆ ได้ mask-icon จะใช้เฉพาะในกรณีที่ผู้ใช้ปักหมุดแท็บใน Safari บนเดสก์ท็อป โดยไอคอนเองควรเป็น SVG ขาวดำ และแอตทริบิวต์ color จะเติมสีที่ต้องการลงในไอคอน

แม้ว่าคุณจะใช้ <link> เพื่อกำหนดรูปภาพที่แตกต่างกันโดยสิ้นเชิงในแต่ละหน้า หรือแม้แต่ในแต่ละการโหลดหน้าเว็บได้ แต่ก็ไม่ควรทำ เพื่อให้มีความสอดคล้องและมอบประสบการณ์ของผู้ใช้ที่ดี ให้ใช้รูปภาพเดียว 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 เพื่อตั้งชื่อสไตล์สำรองนั้น

ตามรูปแบบบัญญัติ

หากคุณสร้างการแปลหรือเวอร์ชันของเวิร์กช็อปแมชชีนเลิร์นนิงหลายรายการ เครื่องมือค้นหาอาจไม่สามารถระบุแหล่งข้อมูลที่เชื่อถือได้ ใช้ rel="canonical" เพื่อระบุ URL ที่ต้องการสำหรับเว็บไซต์หรือแอปพลิเคชัน

ใส่ Canonical URL ในหน้าเว็บที่แปลทั้งหมดและในหน้าแรก โดยระบุ URL ที่เราต้องการดังนี้

<link rel="canonical" href="https://www.machinelearning.com" />

rel="canonical"ลิงก์ Canonical มักใช้สำหรับการโพสต์ข้ามกับสิ่งพิมพ์และแพลตฟอร์มบล็อกเพื่อให้เครดิตแหล่งที่มาเดิม เมื่อเว็บไซต์เผยแพร่เนื้อหา เว็บไซต์ควรใส่ลิงก์ Canonical ไปยังแหล่งที่มาเดิม

สคริปต์

แท็ก <script> มีสคริปต์ ประเภทเริ่มต้นคือ JavaScript หากคุณใช้ภาษาสคริปต์อื่น ให้ใส่แอตทริบิวต์ type พร้อมกับ MIME type หรือ 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 คุณควรหลีกเลี่ยงการอ้างอิงองค์ประกอบก่อนที่จะมีอยู่ เนื่องจาก switch ยังไม่มีอยู่ เราจึงยังไม่รวมตัวแฮนเดิลเหตุการณ์

เมื่อเพิ่มองค์ประกอบสวิตช์ไฟ เราจะเพิ่ม <script> ที่ด้านล่างของ <body> แทนที่จะเพิ่มใน <head> ทำไมจึงเป็นเช่นนั้น 2 เหตุผล เราต้องการให้มั่นใจว่าองค์ประกอบมีอยู่ก่อนที่จะพบสคริปต์ที่อ้างอิงองค์ประกอบเหล่านั้น เนื่องจากเราไม่ได้ อิงสคริปต์นี้กับเหตุการณ์ DOMContentLoaded และที่สำคัญ JavaScript ไม่ได้บล็อกการแสดงผลเท่านั้น แต่เบราว์เซอร์จะหยุดดาวน์โหลดเนื้อหาทั้งหมดเมื่อดาวน์โหลดสคริปต์ และ จะไม่กลับมาดาวน์โหลดเนื้อหาอื่นๆ จนกว่า JavaScript จะดำเนินการเสร็จสิ้น ด้วยเหตุนี้ คุณจึงมักเห็นคำขอ JavaScript อยู่ที่ส่วนท้าย ของเอกสารแทนที่จะอยู่ในส่วนหัว

แอตทริบิวต์ 2 รายการที่ช่วยลดลักษณะการบล็อกของการดาวน์โหลดและการเรียกใช้ JavaScript ได้แก่ defer และ async เมื่อใช้ defer การแสดงผล HTML จะไม่ถูกบล็อกระหว่างการดาวน์โหลด และ JavaScript จะทำงานหลังจากที่เอกสารแสดงผลเสร็จแล้วเท่านั้น เมื่อใช้ async การแสดงผลจะไม่ถูกบล็อกในระหว่างการดาวน์โหลดเช่นกัน แต่เมื่อสคริปต์ดาวน์โหลดเสร็จแล้ว ระบบจะหยุดการแสดงผลชั่วคราวขณะที่ดำเนินการ JavaScript

การโหลดเมื่อใช้ async และ defer

หากต้องการรวม JavaScript ของ MLW ไว้ในไฟล์ภายนอก คุณสามารถเขียนได้ดังนี้

<script src="js/switch.js" defer></script>

การเพิ่มแอตทริบิวต์ defer จะเลื่อนการดำเนินการของสคริปต์จนกว่าจะแสดงผลทุกอย่างเสร็จ เพื่อป้องกันไม่ให้สคริปต์ส่งผลเสียต่อประสิทธิภาพ แอตทริบิวต์ async และ defer ใช้ได้กับสคริปต์ภายนอกเท่านั้น

ฐาน

นอกจากนี้ยังมีองค์ประกอบอีกอย่างหนึ่งที่พบได้ในองค์ประกอบ <head>. The infrequently used <base> เท่านั้น ซึ่งช่วยให้ตั้งค่า URL และเป้าหมายของลิงก์เริ่มต้นได้ ส่วนแอตทริบิวต์ href จะกำหนด URL ฐานสำหรับลิงก์ที่เกี่ยวข้องทั้งหมด

แอตทริบิวต์ target ซึ่งใช้ได้ใน <base> รวมถึงในลิงก์และแบบฟอร์ม จะกำหนด ตำแหน่งที่ลิงก์เหล่านั้นควรเปิด โดยค่าเริ่มต้น _self จะเปิดไฟล์ที่ลิงก์ใน บริบทเดียวกันกับเอกสารปัจจุบัน ตัวเลือกอื่นๆ ได้แก่ _blank ซึ่งจะ เปิดลิงก์ทุกลิงก์ในหน้าต่างใหม่ _parent ของเนื้อหาปัจจุบัน ซึ่ง อาจเหมือนกับ self หาก opener ไม่ใช่ iframe หรือ _top ซึ่งอยู่ใน แท็บเบราว์เซอร์เดียวกัน แต่จะป๊อปอัปออกจากบริบทใดๆ เพื่อใช้ทั้งแท็บ

นักพัฒนาแอปส่วนใหญ่จะเพิ่มแอตทริบิวต์ target ลงในลิงก์ไม่กี่รายการ (หากมี) ที่ต้องการ เปิดในหน้าต่างใหม่ในลิงก์หรือแบบฟอร์มเอง แทนที่จะใช้ <base>

<base target="_top" href="https://machinelearningworkshop.com" />

หากเว็บไซต์ของเราฝังอยู่ใน iframe บนเว็บไซต์อย่าง Yummly การรวมองค์ประกอบ <base> จะหมายความว่าเมื่อผู้ใช้คลิกลิงก์ใดก็ตามภายใน เอกสารของเรา ลิงก์จะโหลดโดยแสดงนอก iframe ซึ่งจะใช้ทั้งหน้าต่างเบราว์เซอร์

ข้อเสียอย่างหนึ่งขององค์ประกอบนี้คือลิงก์ Anchor จะได้รับการแก้ไขด้วย <base> ซึ่งจะแปลงลิงก์ <a href="#ref"> เป็น <a target="_top" href="https://machinelearningworkshop.com#ref"> ซึ่งจะทริกเกอร์คำขอ HTTP ไปยัง URL ฐานพร้อมกับแนบ Fragment<base>

สิ่งสำคัญเพิ่มเติมเกี่ยวกับ <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" href="css/styles.css" />
    <link rel="icon" type="image/png" href="/https/web.developers.google.cn/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 ลงในแท็ก HTML
โปรดลองอีกครั้ง
เพิ่มแอตทริบิวต์ lang ลงในแท็ก HTML
ถูกต้อง
Add the <lang> องค์ประกอบ ไปยัง <head>
โปรดลองอีกครั้ง

เลือกองค์ประกอบที่รวมไว้ใน <head> ได้

<p>
โปรดลองอีกครั้ง
<title>
ถูกต้อง
<meta>
ถูกต้อง
ก่อนหน้า
ภาพรวมของ HTML
ถัดไป
ข้อมูลเมตา