พื้นฐาน HTML ทำความเข้าใจกับแท็ก HTML วิธีการเรียนรู้แท็ก HTML ทั้งหมด

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

HTML เป็นไฟล์ข้อความปกติที่มีนามสกุล .htm (html) หากต้องการสร้างหน้าเพจแบบง่ายๆ ในตอนแรก เมื่อคุณเพิ่งฝึก คุณจำเป็นต้องมีกระดาษจดบันทึกเท่านั้น เปิดสมุดบันทึกแล้วเขียนข้อความ

แต่ละองค์ประกอบ HTML เป็นแท็กที่ล้อมรอบด้วยวงเล็บ ไฟล์ใดๆ หน้า html เริ่มต้นด้วยแท็กและลงท้ายด้วยแท็ก

แท็กนี้ระบุให้เบราว์เซอร์ทราบ (นี่คือโปรแกรมที่คุณใช้ดูหน้าอินเทอร์เน็ต) ว่าเอกสารนี้เป็นเอกสารมาร์กอัป HTML

แท็ก หมายถึงจุดเริ่มต้นของเอกสาร html และแท็กปิดหมายถึงจุดสิ้นสุดของเอกสาร html

ภายในแท็กเหล่านี้จะมีแท็กสำคัญอื่นๆ อีกหลายแท็ก ถัดจากแท็กคือแท็กที่ระบุชื่อหน้าและเนื้อหาของหน้า

HTML หน้าแรกของฉัน

แท็ก หมายถึงชื่อเรื่องของชื่อหน้าต่างเมื่อหน้านี้ปรากฏขึ้น
ตอนนี้คุณสามารถสร้างเอกสารข้อความใหม่ใน Notepad คัดลอกข้อความที่แสดงด้านบนและบันทึกเป็น Page1.html และเรียกใช้ในเบราว์เซอร์ คุณจะเห็นชื่อของหน้าจากแถบชื่อเรื่องของหน้าต่างเบราว์เซอร์ และ หน้าว่างเพราะว่า เราไม่แสดงสิ่งใดๆ ในเนื้อหาของหน้าด้วยแท็ก

ดังนั้นข้อความข้างต้นจะเป็นโครงร่างพื้นฐานของหน้าเว็บใดๆ สำหรับเรา

, , นี่เป็นเพียงแท็กที่จับคู่กัน - แท็กที่มาเป็นคู่: แท็กและแท็กปิด แท็กปิดที่มีสัญลักษณ์ / สำหรับแท็กที่จับคู่ ค่าที่อยู่ระหว่างจุดเริ่มต้นของแท็กและจุดสิ้นสุดคือการทำงานของแท็ก การดำเนินการจะดำเนินต่อไปจนกว่าจะพบแท็กที่มีสัญลักษณ์ /

แท็กที่ไม่ได้จับคู่ - ไม่มีแท็กปิด ด้านล่างนี้เราจะยกตัวอย่างแท็กดังกล่าว

— ชื่อของหน้า html ซึ่งมีคำสำคัญสำหรับเครื่องมือค้นหา สคริปต์ต่างๆ เป็นต้น

— เนื้อความของเอกสาร html นั้นเอง

แท็กที่ไม่ได้จับคู่

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

คุณได้อ่านแล้วว่าทุกภาษาประกอบด้วยแท็ก ในบทนี้เราจะมาดูรายละเอียดเกี่ยวกับแท็ก HTML กัน ในภาษา HTML แท็กจะแบ่งออกเป็นแท็กเดี่ยว (ไม่จับคู่) และแท็กคู่ ดังนั้นแท็ก HTML เดียวจึงประกอบด้วยแท็กเดียว กล่าวคือ ไม่มีแท็กปิด และคู่คำอธิบายจะมีแท็กเปิดและปิด

แท็กเดี่ยวไม่มีแท็กปิด ตัวอย่างเช่น:
, - ก่อนหน้านี้พวกเขาเขียนเช่นนี้:
, ตอนนี้การเขียนแท็กเดี่ยวรูปแบบนี้ไม่เกี่ยวข้อง ดังนั้นอย่าเขียนแบบนั้น แท็กเดี่ยวที่ใช้มากที่สุด:
- ย้ายไปบรรทัดใหม่ - เส้นแบ่ง - ใส่รูปภาพ

มีแท็กคู่อีกมากมาย descriptor ที่จับคู่กันจะมีแท็กเปิดและปิด แท็กที่จับคู่จะสร้างคอนเทนเนอร์ เนื้อหาของคอนเทนเนอร์คือสิ่งที่อยู่ระหว่างแท็กเปิดและแท็กปิด ในตัวอย่างจากบทความนี้ คุณเห็นแท็ก What is descriptors in HTML? นี่คือแท็กที่จับคู่กัน เนื้อหาของแท็กนี้คือข้อความ “แท็กใน HTML คืออะไร” จุดเริ่มต้นคือแท็กและจุดสิ้นสุดคือ

ข้อผิดพลาดหลักของผู้เริ่มต้นในการเขียนแท็กที่จับคู่คือความสับสนในการซ้อน ตัวอย่างเช่น นี่คือรายการที่ถูกต้อง:

ย่อหน้าตัวหนา

ย่อหน้าตัวหนา

วิธีเขียนแท็กที่จับคู่อย่างถูกต้อง

HTML5 เป็นส่วนขยายของ HTML4 ดังนั้นจึงยังคงรักษาคำอธิบายส่วนใหญ่หรือทั้งหมดจาก HTML4 และเพิ่มเข้าไปเอง HTML5 เปิดตัวแท็กพิเศษสำหรับการแบ่งไซต์ออกเป็นบล็อกหลัก: ส่วนหัว เมนู ส่วนท้าย แถบด้านข้าง และเนื้อหา

เครื่องมือค้นหา Yandex และ Google มีความอ่อนไหวต่อ เค้าโครง HTMLเอกสารตรวจสอบความถูกต้อง พวกเขามองหาคำหลักที่อยู่ในคำอธิบายพิเศษและอื่นๆ แต่ส่วนนี้ไม่เกี่ยวกับเรื่องนั้น สิ่งนี้ใช้กับการส่งเสริมการขาย (SEO)

ใช่ มีแท็กค่อนข้างน้อย แต่ไม่จำเป็นต้องสอนเป็นพิเศษ ตราบใดที่คุณฝึกเขียนอะไรบางอย่าง คำอธิบายทั้งหมด ทั้งแบบคู่และเดี่ยว จะถูกจดจำได้ง่าย เมื่อเวลาผ่านไปแน่นอน

แท็ก ( กรุณา แท็กบางครั้งก็แท็ก) เป็นองค์ประกอบของภาษา HTML ที่ใช้ในการมาร์กอัป ข้อความต้นฉบับหน้าเว็บ แท็ก คือ คำย่อหรือคำย่อของคำภาษาอังกฤษที่อยู่ในวงเล็บเหลี่ยม เช่น แท็ก

…

แต่ละแท็กใน HTML มีความหมายพิเศษและมีหน้าที่ในการแสดงข้อมูลบางอย่าง ตัวพิมพ์ของตัวอักษรในชื่อแท็กไม่สำคัญ เช่น แท็ก

…

…

มีแท็กมากกว่า 90 แท็กใน HTML โดยทั่วไปแล้วแท็กเดียวจะมีผลเพียงบางส่วนของเอกสาร เช่น แท็กส่วนหัวระดับแรก... ในกรณีเช่นนี้ จะใช้แท็กที่จับคู่กัน: เปิดและ ปิด- แท็กเปิด (เช่น ) จะสร้างเอฟเฟกต์ และแท็กปิด ( ) จะหยุดเอฟเฟกต์ ดังที่คุณเห็นจากตัวอย่าง แท็กปิดจะมีสัญลักษณ์นี้ (/) เสมอ - เครื่องหมายทับ แท็กเหล่านี้เรียกว่า คู่ผสม.

แท็กบางแท็กให้เอฟเฟกต์แบบครั้งเดียวที่แท็กเหล่านั้นปรากฏ ตัวอย่างเช่น แท็กแถบแนวนอนหรือแท็กแสดงรูปภาพ - แท็กดังกล่าวไม่มีแท็กปิด แท็กดังกล่าวเรียกว่าไม่จับคู่

นอกจากนี้ แท็กยังแบ่งออกเป็นหลายประเภท ซึ่งมีฟังก์ชันที่แตกต่างกัน:

• แท็กชื่อเอกสาร
• องค์ประกอบบล็อก
• องค์ประกอบแบบอินไลน์
• องค์ประกอบสากล
• รายการ;
• ตาราง;
• เฟรม

การแบ่งส่วนนี้ไม่เข้มงวด ดังนั้นบางแท็กจึงอยู่ในกลุ่มที่แตกต่างกัน เช่น แท็กสำหรับสร้างรายการและ

ใช้กับทั้งรายการและองค์ประกอบบล็อก
โครงสร้างแท็ก

เมื่อโหลดในเบราว์เซอร์ แท็กจะไม่แสดง แต่จะส่งผลต่อวิธีการแสดงเนื้อหา หากสะกดแท็กผิด แท็กนั้นจะถูกละเว้นโดยสิ้นเชิง

แท็กทั้งหมดมีโครงสร้างบางอย่างที่ต้องปฏิบัติตามเมื่อเขียน นอกจากนี้ แท็กเกือบทั้งหมดยังมีคุณลักษณะต่างๆ ที่สามารถเปลี่ยนวิธีการแสดงเนื้อหาได้

เรามาดูกันดีกว่า โครงสร้างที่ถูกต้องแท็กที่มีคุณลักษณะ:

• 
• เว็บมาสเตอร์ของคุณเอง

ตัวอย่างเช่น ฉันให้แท็กสองแท็กที่แตกต่างกันโดยสิ้นเชิง อันดับแรก single - รับผิดชอบในการแสดงรูปภาพ, แอตทริบิวต์ - src="logo.jpg" ที่สอง …คู่ที่มีหน้าที่สร้างลิงก์แอตทริบิวต์คือ href = "site"

ข้อสรุปที่ 1: คุณลักษณะสามารถมีแท็กที่จับคู่และไม่ได้จับคู่ได้

สรุป 2: เฉพาะแท็กเปิดเท่านั้นที่สามารถมีแอตทริบิวต์ แท็กปิดไม่มีแอตทริบิวต์

รูปภาพเพื่อการชี้แจง:



รูปที่ 1 โครงสร้างแท็ก HTML

ทดสอบความเอาใจใส่และความรู้เกี่ยวกับไวยากรณ์ HTML

มาดูตัวอย่างหน้าเว็บง่ายๆ ที่เราดูในบทเรียนกัน

องค์ประกอบ HTML เป็นหน่วยโครงสร้างพื้นฐานของหน้าเว็บที่เขียนด้วย HTML

แท็ก HTML ที่จับคู่และเดี่ยว

ไวยากรณ์ HTMLองค์ประกอบที่ประกอบด้วยแท็กคู่:

• องค์ประกอบเริ่มต้นด้วยแท็กเปิด
• องค์ประกอบลงท้ายด้วยแท็กปิด
• เนื้อหาขององค์ประกอบคือทุกอย่างระหว่างแท็กเปิดและแท็กปิด เนื้อหาอาจเป็นข้อความและ/หรือองค์ประกอบ HTML อื่นๆ

หมายเหตุ: อย่าลืมใส่ "/" ในแท็กปิด เพราะจะบอกเบราว์เซอร์ว่าองค์ประกอบของคุณสิ้นสุดลงแล้ว และสิ่งที่ตามมาหลังจากนั้นคือองค์ประกอบอื่น หากคุณไม่ใส่อักขระ "/" ในแท็กปิด เบราว์เซอร์จะเข้าใจผิดว่าเป็นองค์ประกอบใหม่ที่ซ้อนอยู่ภายในองค์ประกอบก่อนหน้า ซึ่งเบราว์เซอร์คิดว่ายังไม่ได้ปิด

ไวยากรณ์สำหรับองค์ประกอบ HTML ที่ประกอบด้วยแท็กเดียวคือ:



• องค์ประกอบประกอบด้วยแท็กเปิดเท่านั้น

องค์ประกอบที่ประกอบด้วยแท็กเดียวเรียกว่าว่างเปล่า มีแท็กเดี่ยวทั้งหมด 16 แท็กใน HTML:

องค์ประกอบที่ซ้อนกัน

องค์ประกอบ HTML ที่ประกอบด้วยแท็กที่จับคู่สามารถมีองค์ประกอบอื่น ๆ หรือสามารถซ้อนกันภายในองค์ประกอบอื่น ๆ ได้ และไม่จำกัดความลึกของการซ้อนองค์ประกอบ

ตัวอย่างต่อไปนี้ประกอบด้วยสามองค์ประกอบ โดยสององค์ประกอบซ้อนกัน:

ย่อหน้าแรกของฉัน

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

นี้เป็นอย่างมาก

น่าสนใจ

ที่นี่องค์ประกอบไปเกินขอบเขตขององค์ประกอบ



ตัวอย่างการซ้อนที่ถูกต้อง:

สิ่งนี้น่าสนใจมาก

ที่นี่องค์ประกอบมีการซ้อนกันอย่างถูกต้อง - องค์ประกอบอยู่ภายในองค์ประกอบโดยสมบูรณ์



อักขระช่องว่าง

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

ชื่อเรื่อง ชื่อแรกของฉัน

ย่อหน้าแรกของฉัน

โค้ดตัวอย่างสามารถเขียนได้โดยไม่ต้องใช้ช่องว่างเลย แต่โค้ดดังกล่าวจะอ่านได้น้อยกว่า:

ชื่อเรื่อง ชื่อแรกของฉัน

ย่อหน้าแรกของฉัน

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