ขอขอบคุณที่ติดตาม Google I/O ดูเนื้อหาตามคำขอ

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

เอกสาร 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)

`<head>`

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

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

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

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

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

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

องค์ประกอบแรกสุดใน <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>

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

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

<meta name="viewport" content="width=device-width" />

โค้ดก่อนหน้าหมายความว่า "ทําให้เว็บไซต์ตอบสนอง โดยเริ่มจากการทําให้ความกว้าง ของเนื้อหาเป็นความกว้างของหน้าจอ" นอกจาก width แล้ว คุณยังตั้งค่า การซูมและความสามารถในการปรับขนาดได้ แต่ทั้ง 2 ค่านี้จะตั้งค่าเริ่มต้นเป็นค่าที่เข้าถึงได้ หากต้องการระบุอย่างชัดเจน ให้ระบุข้อมูลต่อไปนี้

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

ViewPort เป็นส่วนหนึ่งของการตรวจสอบการช่วยเหลือพิเศษของ 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>`

องค์ประกอบ 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="/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" />

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

แม้ว่าคุณจะใช้ <link> เพื่อกำหนดรูปภาพที่แตกต่างกันโดยสิ้นเชิงในแต่ละหน้า หรือแม้แต่การโหลดหน้าเว็บแต่ละครั้งได้ แต่ก็ไม่ควรทำ ใช้รูปภาพเดียวเพื่อให้สอดคล้องกันและมอบประสบการณ์ที่ดีแก่ผู้ใช้ Google ใช้ Favicon ที่แตกต่างกันสำหรับแอปพลิเคชันต่างๆ ของตน เช่น ไอคอนอีเมล ไอคอนปฏิทิน เป็นต้น แต่ไอคอนทั้งหมดของ 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 — ภาพประกอบกลยุทธ์การโหลดสคริปต์ต่างๆ สคริปต์บางรายการจะได้รับประโยชน์จากการเลื่อนการดำเนินการ และบางรายการจะดำเนินการได้ทันทีเมื่อโหลดด้วยแอตทริบิวต์ `async` **หมายเหตุ:** สคริปต์โมดูลที่โหลดด้วย `<script type="module">` จะเปิดใช้ `defer` โดยค่าเริ่มต้น

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

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

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

ฐาน

นอกจากนี้ยังมีองค์ประกอบอีกอย่างที่พบได้เฉพาะใน <head>. องค์ประกอบ <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> <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" href="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 ลงในแท็ก HTML

โปรดลองอีกครั้ง

เพิ่มแอตทริบิวต์ lang ลงในแท็ก HTML

ถูกต้อง

Add the <lang> องค์ประกอบ ไปยัง <head>

โปรดลองอีกครั้ง

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

<p>

โปรดลองอีกครั้ง

<title>

ถูกต้อง

<meta>

ถูกต้อง

ภาพรวมของ HTML

ข้อมูลเมตา

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

<!DOCTYPE html>

<html>

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

<head>

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

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

ชื่อเอกสาร

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

เนื้อหา <head> อื่นๆ

CSS

การใช้งานอื่นๆ ขององค์ประกอบ <link>

ไอคอน Fav

เว็บไซต์เวอร์ชันอื่น

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

สคริปต์

ฐาน

ความคิดเห็นใน HTML

ทดสอบความเข้าใจ

`<!DOCTYPE html>`

`<html>`

`<head>`

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

เนื้อหา `<head>` อื่นๆ

การใช้งานอื่นๆ ขององค์ประกอบ `<link>`