คอมพิวเตอร์ หน้าต่าง อินเทอร์เน็ต
ขยาย
บ้าน ›

ไวยากรณ์ html5 ภาษามาร์กอัป HTML ไวยากรณ์ การเขียนสไตล์ CSS

มาเริ่มเรียนภาษากันเถอะ ข้อความ HTML คือ "ข้อความธรรมดา" คุณสมบัติไฮเปอร์เท็กซ์ทั้งหมดของเอกสารระบุโดยใช้แท็ก - หมายเหตุพิเศษรวมอยู่ในข้อความนี้

ให้มีข้อความว่า

มาเขียนข้อความนี้ให้แตกต่างออกไป โดยใส่คำแนะนำเกี่ยวกับวิธีการแสดงข้อความ เราเน้นคำแนะนำด้วยวงเล็บมุม

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

“แม่กำลังล้างโครง ส่วนแมวกำลังเล่นกับลูกบอล เด็กชายหยิบลูกบอลจากแมว”

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

แท็กคอนเทนเนอร์ประกอบด้วยแท็กเปิดและแท็กปิด และการระบุหมายถึงข้อความทั้งหมดที่อยู่ระหว่างแท็กทั้งสอง โดยกล่าวว่า "ซ้อนอยู่ในคอนเทนเนอร์" แท็กปิดมีชื่อเดียวกับแท็กเปิด แต่ชื่อนำหน้าด้วยเครื่องหมายทับ: “/”:

แม่ล้างกรอบ

.

แท็กสามารถมีแอตทริบิวต์ได้ แอตทริบิวต์นี้จะช่วยเสริมและอธิบายแท็ก ลำดับของคุณสมบัติไม่สำคัญ ตัวอย่างเช่น แท็ก HR มีแอตทริบิวต์ WIDTH ซึ่งระบุความกว้างของเส้น SIZE ความหนาของเส้น ALIGN ตำแหน่ง (การจัดตำแหน่ง) และ COLOR หมายถึงสี ค่าแอตทริบิวต์ระบุคุณลักษณะที่กำหนด กฎไวยากรณ์มีดังนี้: สามารถตามหลังชื่อแท็กได้ อย่างน้อยหนึ่งช่องว่าง จากนั้นคั่นด้วยช่องว่าง สามรายการสามารถตามหลังได้: คุณลักษณะ สัญลักษณ์ “=” ค่า ขอแนะนำให้ใส่ค่าไว้ในเครื่องหมายคำพูด แม้ว่ามาตรฐาน HTML จะอนุญาตให้ค่าที่ประกอบด้วยเฉพาะตัวอักษรละตินและตัวเลขเท่านั้นที่ไม่ควรอยู่ในเครื่องหมายคำพูด

ภาพบนหน้าจอจะเป็นประมาณนี้

_____________________________________

มาตรฐานช่วยให้คุณสามารถละเว้นแท็กปิดได้หากเป็นการบอกเป็นนัย ตัวอย่างเช่น แท็ก

มีย่อหน้าปิด แต่สามารถละเว้นได้ก่อนที่จะเปิดย่อหน้าถัดไป แท็ก

ระบุย่อหน้า

แม่ล้างกรอบ

ลูกสาวกำลังเล่นลูกบอล

คุณลักษณะบางอย่างไม่มีค่า หรือมีความหมายเดียว ดังนั้นจึงเพียงพอแล้วที่จะระบุหรือไม่ระบุแอตทริบิวต์นี้ในแท็ก ตัวอย่างเช่น แท็ก FRAME มีแอตทริบิวต์ NORESIZE ซึ่งระบุว่าผู้ใช้ไม่ได้รับอนุญาตให้ปรับขนาดเฟรม

แท็ก (องค์ประกอบ) ใน HTML สามารถซ้อนกันได้ คล้ายกับลูปหรือ คำสั่งแบบมีเงื่อนไขในภาษาโปรแกรม ห้ามมิให้แท็กตัดกันโดยไม่มีการซ้อนกัน

ตัวอย่างรายการผิดพลาด:

ตัวอย่างบล็อก

ด้วยย่อหน้าที่ซ้อนกัน

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

ตัวอย่างบล็อก

มีย่อหน้าที่ซ้อนกัน

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

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

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

ไวยากรณ์ HTML

ข้าว. 1.6. การแสดงหน้า HTML อย่างง่ายในเว็บเบราว์เซอร์

กฎพื้นฐานของภาษา HTML

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

องค์ประกอบสามารถรวมข้อความและองค์ประกอบย่อยได้ (เช่นองค์ประกอบ html ที่มีองค์ประกอบย่อย head และ body ในตัวอย่างด้านบน) องค์ประกอบต้องซ้อนกันอย่างถูกต้อง

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

ถูกต้องแล้ว ส่วนนี้ควรมีลักษณะดังนี้:

นี่เป็นข้อความตัวหนาและตัวเอียง

ใน XHTML หากองค์ประกอบไม่มีข้อความและองค์ประกอบย่อย (องค์ประกอบว่าง) องค์ประกอบนั้นจะต้องยังคงมีแท็กเปิดและปิด ตัวอย่างเช่น องค์ประกอบ br ไม่มีเนื้อหาและทำให้เกิดการขึ้นบรรทัดใหม่ (ข้อความต่อด้วย บรรทัดใหม่). อย่างไรก็ตามตามกฎแล้วควรเขียนดังนี้:

หรือเรียกสั้น ๆ
. องค์ประกอบ – ​​ผลลัพธ์ของเส้นแนวนอน – ควรเขียนในลักษณะเดียวกันทุกประการ

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

คุณลักษณะหลายอย่างใน HTML นั้นเหมือนกันกับทุกองค์ประกอบ แต่บางแอตทริบิวต์ก็มีความเฉพาะเจาะจง ขององค์ประกอบนี้หรือองค์ประกอบ ล้วนมีรูปแบบดังนี้

คุณลักษณะ_ชื่อ = "ค่า"

ตัวอย่างเช่น:

พื้นฐานของภาษามาร์กอัปไฮเปอร์เท็กซ์"

ใน ในตัวอย่างนี้องค์ประกอบ div (ส่วนหนึ่งของหน้า HTML ที่อนุญาตให้คุณแยกเอกสารออกเป็นบล็อกแบบลอจิคัล) มีแอตทริบิวต์ id ที่ตั้งค่าเป็น mySection องค์ประกอบ div มีองค์ประกอบ h1 (ส่วนหัวระดับแรกหรือสำคัญที่สุด) ซึ่งจะมีข้อความบางส่วนอยู่ด้วย ค่าแอตทริบิวต์จะต้องอยู่ในเครื่องหมายคำพูดเดี่ยวหรือคู่

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

องค์ประกอบทั้งหมดสามารถมีแอตทริบิวต์ id และคลาสได้ ซึ่งค่าที่ใช้ในการระบุองค์ประกอบเฉพาะ (id) หรือกลุ่มขององค์ประกอบ (คลาส) แอ็ตทริบิวต์เหล่านี้ถูกใช้ในสคริปต์เอกสารและคำอธิบายสไตล์เอกสาร CSS

องค์ประกอบใน HTML มีสองประเภทหลัก: ปิดกั้นและ เชือก

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

วันที่สร้าง: 2012-03-04 00:50:20
แก้ไขล่าสุด: 25-10-2555 07:15:35 น

ชีวิตสมัยใหม่แทบจะเป็นไปไม่ได้เลยที่จะจินตนาการได้หากไม่มีอินเทอร์เน็ต เราจะทำอย่างไรหากไม่มี Odnoklassniki, VKontakte และ Live Journals ทุกประเภท? มันน่ากลัวด้วยซ้ำถ้าจินตนาการว่าชีวิตของเราจะยากจนขนาดไหนถ้าจู่ๆ เขาหายตัวไป! เราจะอยู่อย่างไรถ้าไม่มี ภาพตลก, วิดีโอโง่ๆ, สแปมแอฟริกันเมกะไบต์เหรอ? ไม่ เพื่อน ฉันปฏิเสธที่จะอยู่ในโลกที่เลวร้ายเช่นนี้!

อินเทอร์เน็ตคืออะไร? (อินเทอร์เน็ต)

อินเทอร์เน็ตคือคอมพิวเตอร์ทุกเครื่อง (อุปกรณ์คอมพิวเตอร์) ในโลกที่เชื่อมต่อถึงกัน

คำพ้องสำหรับแนวคิดของอินเทอร์เน็ตคือเว็บ คำว่าเว็บเป็นกระดาษลอกลายจากเว็บภาษาอังกฤษ (web) และเว็บก็เป็นส่วนหนึ่งของแนวคิดของเวิลด์ไวด์เว็บ (global เว็บทั่วโลก). อินเทอร์เน็ตส่วนใหญ่ถูกครอบครองโดยไซต์ทุกประเภท

ไซต์คืออะไร (ไซต์)

ไซต์คือไฟล์ข้อความจำนวนหนึ่งในรูปแบบ html เหล่านั้น. ไฟล์เหล่านี้เป็นไฟล์ธรรมดาที่จัดเก็บไว้ในคอมพิวเตอร์บางเครื่อง

และตอนนี้เรามาถึงหัวข้อของเรา: นี่คือรูปแบบใด - HTML และเหตุใดจึงต้องมี?

HTML คืออะไร?

HTML (HyperText Markup Language) เป็นภาษาพิเศษ แต่เราต้องทราบทันทีว่านี่ไม่ใช่ภาษาการเขียนโปรแกรม นี่คือภาษามาร์กอัปข้อความ

HTML นำประวัติมาจาก โปรแกรมพิเศษสำหรับการทำเครื่องหมายบทความในหนังสือพิมพ์ โปรแกรมเหล่านี้ช่วยให้คุณสามารถระบุวิธีวางข้อความบนหน้าที่จะมีรูปภาพได้ HTML ช่วยให้คุณทำสิ่งเดียวกันได้เฉพาะบนหน้าจอของอุปกรณ์ดิจิทัลเท่านั้น (คอมพิวเตอร์ โทรศัพท์...)

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

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

การใช้ HTML - ไวยากรณ์ภาษามาร์กอัป

ข้อความ HTML ประกอบด้วยแท็กที่มีข้อมูล

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

แท็กเนื้อหา

แท็กเนื้อหาเนื้อหาแท็ก เนื้อหาแท็ก

แท็กคำแปลเป็น - ป้ายกำกับทางลัด เหล่านั้น. แท็กนั้นติดอยู่กับเนื้อหาเหมือนเดิม - มันทำเครื่องหมายไว้

แต่ละแท็กมีความหมายของตัวเอง แท็กที่เราเห็นด้านบนมีความหมายว่าอย่างไร พี - ย่อหน้า เอ - ลิงค์ div - บล็อก span - ข้อความชิ้นหนึ่ง เราจะดูความหมายของแท็กเหล่านี้เพิ่มเติมในบทเรียนต่อๆ ไป

แท็กเดี่ยว

แท็กบางแท็กไม่มีคู่ปิด ซึ่งหมายความว่าแท็กดังกล่าวไม่มีเนื้อหา ตัวอย่างเช่น แท็ก br แบ่งบรรทัด:

ข้อความธรรมดา
ตัวอย่างเช่น
ซึ่งแสดงให้เห็นช่องว่าง
เส้น

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

ข้อความธรรมดา
ตัวอย่างเช่น
ซึ่งแสดงให้เห็นช่องว่าง
เส้น

นอกจากนี้ยังมีแท็กที่ไม่มีคู่ปิด: hr (แถบแนวนอน) และ img (รูปภาพ)

ลำดับชั้นของแท็ก

แท็กสามารถฝังไว้ภายในกันและกันได้

อีกย่อหน้าหนึ่ง

ที่นี่ div มีสองย่อหน้า และย่อหน้าแรกจะมีลิงก์ตามลำดับ

เมื่อสร้างลำดับชั้นของแท็ก สิ่งสำคัญคือแท็กจะไม่ทับซ้อนกัน:

ทำแบบนี้ไม่ได้นะ!!!

ที่นี่แท็ก p จะต้องปิดก่อน จากนั้นจึงปิด div

คุณสมบัติของแท็ก

คุณสมบัติช่วยให้คุณสามารถระบุข้อมูลเพิ่มเติมได้ คุณลักษณะจะถูกเขียนโดยคั่นด้วยช่องว่างหลังชื่อของข้อความที่ฉีกขาด:

แท็กเนื้อหา

นี่คือลักษณะที่จะปรากฏในหน้าที่เสร็จแล้ว:

อีกตัวอย่างหนึ่งของแอตทริบิวต์คือ src ใน img คุณลักษณะนี้ช่วยให้คุณระบุเส้นทางไปยังรูปภาพที่ควรโหลด:

ค่าแอตทริบิวต์สามารถเขียนด้วยเครื่องหมายคำพูดคู่หรือเดี่ยว:

ตัวเลือกทั้งสองถูกต้อง

นั่นคือทั้งหมด ตอนนี้เราพร้อมที่จะเริ่มสร้างเอกสาร HTML แล้ว

แท็ก HTML เป็นพื้นฐานของภาษา HTML แท็กใช้เพื่อกำหนดจุดเริ่มต้นและจุดสิ้นสุดขององค์ประกอบในมาร์กอัป

เอกสาร HTML แต่ละฉบับประกอบด้วยโครงสร้างองค์ประกอบ HTML และข้อความ แต่ละองค์ประกอบ HTML จะถูกระบุด้วยแท็กเริ่มต้น (เปิด) และสิ้นสุด (ปิด) แท็กเปิดและปิดประกอบด้วยชื่อของแท็ก

องค์ประกอบ HTML ทั้งหมดแบ่งออกเป็นห้าประเภท:

  • องค์ประกอบว่าง - , ,
    , , , , , , , , , , , , ;
  • องค์ประกอบที่มีข้อความที่ไม่ได้จัดรูปแบบ - , ;
  • องค์ประกอบที่แสดงข้อความที่ไม่ได้จัดรูปแบบ - , ;
  • องค์ประกอบจากเนมสเปซอื่น - MathML และ SVG;
  • องค์ประกอบสามัญ - องค์ประกอบอื่น ๆ ทั้งหมด

ตารางแสดง รายการทั้งหมดองค์ประกอบที่รองรับโดย HTML4 และ HTML5 ไม่รวมแท็กทดลองและแท็กเดิม องค์ประกอบที่เพิ่มในข้อกำหนด HTML5 จะถูกเน้นด้วยสีน้ำเงินอมเขียว

รายการองค์ประกอบ HTML ทั้งหมด ตารางที่ 1. องค์ประกอบ HTML คำอธิบายแท็ก
ใช้เพื่อเพิ่มความคิดเห็น
ประกาศประเภทเอกสารและให้ข้อมูลพื้นฐานแก่เบราว์เซอร์ - ภาษาและเวอร์ชัน
สร้างลิงค์ไฮเปอร์เท็กซ์
ระบุข้อความเป็นตัวย่อหรือตัวย่อ ข้อความอธิบายถูกระบุโดยใช้แอตทริบิวต์ชื่อ
ระบุข้อมูลติดต่อของผู้เขียน/เจ้าของเอกสารหรือบทความ แสดงเป็นตัวเอียงในเบราว์เซอร์
เป็นไฮเปอร์ลิงก์ที่มีข้อความที่สอดคล้องกับพื้นที่เฉพาะบนแผนที่รูปภาพหรือพื้นที่ที่ใช้งานอยู่ภายในแผนที่รูปภาพ ซ้อนอยู่ในแท็กเสมอ
ส่วนของเนื้อหาที่สร้างส่วนที่เป็นอิสระของเอกสารหรือเว็บไซต์ เช่น บทความในนิตยสาร โพสต์ในบล็อก ความคิดเห็น
หมายถึงเนื้อหาของหน้าที่เกี่ยวข้องทางอ้อมกับเนื้อหาหลักของหน้า/ไซต์
โหลดเนื้อหาเสียงลงในหน้าเว็บ
ตั้งค่าข้อความให้เป็นตัวหนาโดยไม่เพิ่มการเน้นหรือความสำคัญให้กับข้อความที่ไฮไลต์
ระบุที่อยู่ฐาน (URL) ที่ใช้คำนวณที่อยู่ที่เกี่ยวข้องทั้งหมด ซึ่งจะช่วยหลีกเลี่ยงปัญหาเมื่อย้ายเพจไปยังตำแหน่งอื่น เนื่องจากลิงก์ทั้งหมดจะทำงานได้เหมือนเดิม
แยกข้อความที่เขียนในภาษาซึ่งมีการอ่านข้อความจากขวาไปซ้ายจากส่วนที่เหลือของข้อความ
แสดงข้อความในทิศทางที่ระบุโดยแอตทริบิวต์ dir โดยแทนที่ทิศทางของข้อความปัจจุบัน
ไฮไลต์ข้อความเป็นเครื่องหมายคำพูด ใช้เพื่ออธิบายเครื่องหมายคำพูดขนาดใหญ่
แสดงถึงเนื้อความของเอกสาร (เนื้อหาที่ไม่ได้เป็นส่วนหนึ่งของข้อมูลเมตาของเอกสาร)

ตัดข้อความขึ้นบรรทัดใหม่
สร้างปุ่มโต้ตอบ คุณสามารถวางเนื้อหาภายในแท็ก - ข้อความหรือรูปภาพ
คอนเทนเนอร์ Canvas สำหรับการแสดงรูปภาพแบบไดนามิก เช่น รูปภาพธรรมดา แผนภูมิ กราฟ ฯลฯ ภาษาสคริปต์ JavaScript ใช้สำหรับการวาดภาพ
เพิ่มคำอธิบายให้กับตาราง แทรกทันทีหลังแท็ก .
ใช้เพื่อระบุแหล่งที่มาของการอ้างอิง แสดงเป็นตัวเอียง
แสดงถึงชิ้นส่วน รหัสโปรแกรมแสดงในตระกูลฟอนต์ monospace
เลือกคอลัมน์ตารางตั้งแต่หนึ่งคอลัมน์ขึ้นไปสำหรับการจัดรูปแบบที่ไม่มีข้อมูลประเภทเดียวกัน
สร้างกลุ่มโครงสร้างของคอลัมน์ที่ระบุเซลล์ที่เป็นเนื้อเดียวกันในเชิงตรรกะจำนวนมาก
องค์ประกอบนี้ใช้เพื่อเชื่อมโยงค่าของแอตทริบิวต์ value ซึ่งอยู่ในรูปแบบที่เครื่องอ่านได้และสามารถประมวลผลโดยคอมพิวเตอร์กับเนื้อหาของแท็ก
องค์ประกอบคอนเทนเนอร์สำหรับองค์ประกอบรายการแบบหล่นลง ค่าตัวแปรจะถูกวางไว้ในองค์ประกอบ
ใช้เพื่ออธิบายคำศัพท์จากแท็ก
ทำเครื่องหมายข้อความว่าลบแล้วโดยขีดฆ่าออก
สร้างวิดเจ็ตแบบโต้ตอบที่ผู้ใช้สามารถเปิดหรือปิดได้ แสดงถึงคอนเทนเนอร์สำหรับเนื้อหา ชื่อวิดเจ็ตที่มองเห็นได้จะถูกวางไว้ในแท็ก
ระบุคำที่เป็นคำศัพท์โดยการใส่ไว้ในตัวเอียง ข้อความต่อไปนี้ควรมีคำจำกัดความของคำนี้
องค์ประกอบแบบโต้ตอบที่ผู้ใช้โต้ตอบเพื่อทำงานให้เสร็จสิ้น เช่น กล่องโต้ตอบ ตัวตรวจสอบ หรือหน้าต่าง หากไม่มีแอตทริบิวต์ open ผู้ใช้จะไม่สามารถมองเห็นได้
แท็กคอนเทนเนอร์สำหรับส่วนของเอกสาร HTML ใช้เพื่อจัดกลุ่มองค์ประกอบบล็อกสำหรับการจัดรูปแบบตามสไตล์
คอนเทนเนอร์แท็กที่มีคำศัพท์และคำอธิบาย
ใช้เพื่อระบุคำศัพท์
เน้นข้อความที่สำคัญโดยแสดงเป็นตัวเอียง
คอนเทนเนอร์แท็กสำหรับฝังเนื้อหาเชิงโต้ตอบภายนอกหรือปลั๊กอิน
จัดกลุ่มองค์ประกอบที่เกี่ยวข้องในแบบฟอร์มโดยการวาดกล่องล้อมรอบองค์ประกอบเหล่านั้น
ชื่อเรื่อง/คำบรรยายสำหรับองค์ประกอบ
คอนเทนเนอร์แท็กในตัวเองสำหรับเนื้อหา เช่น ภาพประกอบ ไดอะแกรม ภาพถ่าย ตัวอย่างโค้ด โดยปกติจะมีคำบรรยาย
กำหนดพื้นที่สิ้นสุด (ส่วนท้าย) ของเอกสารหรือส่วน
แบบฟอร์มรวบรวมและส่งข้อมูลจากผู้ใช้ไปยังเซิร์ฟเวอร์ ใช้งานไม่ได้หากไม่มีแอตทริบิวต์ action
สร้างส่วนหัวหกระดับสำหรับส่วนที่เกี่ยวข้อง
องค์ประกอบคอนเทนเนอร์สำหรับข้อมูลเมตาของเอกสาร HTML เช่น , , , ,
ส่วนสำหรับข้อมูลเบื้องต้นของไซต์หรือกลุ่มลิงก์การนำทาง อาจมีหัวเรื่อง โลโก้ ข้อมูลเกี่ยวกับผู้เขียนอย่างน้อยหนึ่งรายการ
เส้นแนวนอนสำหรับการแบ่งหัวข้อของย่อหน้า
องค์ประกอบรากของเอกสาร HTML บอกเบราว์เซอร์ว่านี่คือเอกสาร HTML เป็นคอนเทนเนอร์สำหรับองค์ประกอบ html อื่นๆ ทั้งหมด
ทำให้ข้อความเป็นตัวเอียงโดยไม่เน้นข้อความเพิ่มเติม
สร้างเฟรมแบบอินไลน์โดยการโหลดเอกสารอื่นลงในเอกสาร HTML ปัจจุบัน
ฝังรูปภาพในเอกสาร HTML โดยใช้แอตทริบิวต์ src ซึ่งมีค่าเป็น URL ของรูปภาพที่ฝัง
สร้างฟิลด์แบบฟอร์มที่หลากหลายซึ่งผู้ใช้สามารถป้อนข้อมูลได้
เน้นข้อความด้วยการขีดเส้นใต้ ใช้เพื่อเน้นการเปลี่ยนแปลงที่ทำกับเอกสาร
เลือกข้อความที่ผู้ใช้จะป้อนโดยใช้แป้นพิมพ์ในแบบอักษรโมโนสเปซ
ใช้สำหรับจัดเก็บ ข้อมูลเพิ่มเติมเกี่ยวกับหน้า เบราว์เซอร์ใช้ข้อมูลนี้เพื่อประมวลผลเพจและ เครื่องมือค้นหา- สำหรับการจัดทำดัชนี สามารถมีได้หลายแท็กในบล็อก เนื่องจากขึ้นอยู่กับคุณลักษณะที่ใช้ แท็กเหล่านั้นจึงมีข้อมูลที่แตกต่างกัน
ตัวบ่งชี้การวัดในช่วงที่กำหนด
ส่วนของเอกสารที่มีลิงก์การนำทางสำหรับไซต์
กำหนดส่วนที่ไม่สนับสนุนการเขียนสคริปต์
คอนเทนเนอร์สำหรับการฝังมัลติมีเดีย (เช่น เสียง, วิดีโอ, แอปเพล็ต Java, ActiveX, PDF และ Flash) คุณยังสามารถแทรกหน้าเว็บอื่นลงในเอกสาร HTML ปัจจุบันได้ แท็กนี้ใช้เพื่อส่งผ่านพารามิเตอร์ของปลั๊กอิน
รายการลำดับเลขที่สั่งครับ. การกำหนดหมายเลขอาจเป็นตัวเลขหรือตัวอักษรก็ได้
คอนเทนเนอร์ที่มีชื่อสำหรับกลุ่มขององค์ประกอบ
ระบุตัวเลือก/ตัวเลือกเพื่อเลือกจากรายการดรอปดาวน์ หรือ
ฟิลด์สำหรับแสดงผลการคำนวณที่คำนวณโดยใช้สคริปต์

ย่อหน้าในข้อความ
กำหนดพารามิเตอร์สำหรับปลั๊กอินที่ฝังโดยใช้องค์ประกอบ
องค์ประกอบคอนเทนเนอร์ที่มีองค์ประกอบเดียว และองค์ประกอบเป็นศูนย์หรือมากกว่านั้น โดยตัวมันเองมันไม่แสดงอะไรเลย อนุญาตให้เบราว์เซอร์เลือกภาพที่เหมาะสมที่สุด
แสดงข้อความโดยไม่มีการจัดรูปแบบ โดยคงช่องว่างและตัวแบ่งข้อความ สามารถใช้แสดงรหัสคอมพิวเตอร์ ข้อความ อีเมลฯลฯ
ตัวบ่งชี้ความสำเร็จของงานใดๆ
กำหนดใบเสนอราคาแบบสั้น
คอนเทนเนอร์สำหรับสัญลักษณ์เอเชียตะวันออกและการถอดรหัส
กำหนดข้อความที่ซ้อนกันเป็นองค์ประกอบฐานของคำอธิบายประกอบ
เพิ่มคำอธิบายสั้นๆ ที่ด้านบนหรือด้านล่างของอักขระที่มีอยู่ในองค์ประกอบ โดยแสดงเป็นแบบอักษรที่เล็กกว่า
ทำเครื่องหมายข้อความที่ฝังไว้เป็นคำอธิบายประกอบเพิ่มเติม
แสดงข้อความแสดงแทนหากเบราว์เซอร์ไม่รองรับองค์ประกอบ
แสดงข้อความที่ไม่เป็นปัจจุบันโดยมีขีดทับ
ใช้เพื่อแสดงข้อความที่แสดงถึงผลลัพธ์ของโค้ดโปรแกรมหรือการทำงานของสคริปต์ รวมถึงข้อความของระบบ แสดงเป็นแบบอักษร monospace
ใช้เพื่อกำหนดสคริปต์ฝั่งไคลเอ็นต์ (โดยปกติคือ JavaScript) ประกอบด้วยข้อความสคริปต์หรือชี้ไปที่ ไฟล์ภายนอกสคริปต์โดยใช้แอตทริบิวต์ src
กำหนดพื้นที่โลจิคัล (ส่วน) ของเพจ โดยปกติจะมีส่วนหัว
องค์ประกอบควบคุมที่ช่วยให้คุณสามารถเลือกค่าจากชุดที่เสนอ ค่าตัวแปรจะถูกวางไว้ใน
แสดงข้อความด้วยขนาดตัวอักษรที่เล็กลง
ระบุตำแหน่งและประเภทของรีซอร์สสื่อทางเลือกสำหรับ , ,
คอนเทนเนอร์สำหรับองค์ประกอบแบบอินไลน์ สามารถใช้จัดรูปแบบข้อความได้ เช่น การเน้นคำแต่ละคำ
เน้นข้อความโดยเน้นเป็นตัวหนา
รวมสไตล์ชีตแบบฝังได้
ระบุการเขียนตัวห้อยของสัญลักษณ์ เช่น ดัชนีองค์ประกอบในสูตรทางเคมี
สร้างชื่อที่มองเห็นได้สำหรับแท็ก เมื่อแสดงเป็นรูปสามเหลี่ยมเต็มแล้ว การคลิกจะทำให้คุณสามารถดูรายละเอียดชื่อเรื่องได้
ระบุการสะกดตัวยกของอักขระ
แท็กสำหรับสร้างตาราง
กำหนดเนื้อหาของตาราง
สร้างเซลล์ตาราง
ใช้เพื่อประกาศส่วนของโค้ด HTML ที่สามารถโคลนและแทรกลงในเอกสารโดยใช้สคริปต์ เนื้อหาของแท็กไม่ใช่ลูกของมัน
สร้างช่องป้อนข้อความขนาดใหญ่
กำหนดส่วนท้ายของตาราง
สร้างชื่อเซลล์ตาราง
กำหนดชื่อตาราง
กำหนดวันที่/เวลา
ชื่อของเอกสาร HTML ที่ปรากฏที่ด้านบนของแถบชื่อเรื่องของเบราว์เซอร์ อาจปรากฏในผลการค้นหาด้วย ดังนั้นควรคำนึงถึงเรื่องนี้เมื่อระบุชื่อ
สร้างแถวของตาราง
เพิ่มคำบรรยายสำหรับองค์ประกอบและ .
เน้นข้อความด้วยการขีดเส้นใต้ โดยไม่ต้องเน้นเพิ่มเติม
สร้างรายการสัญลักษณ์แสดงหัวข้อย่อย
เน้นตัวแปรจากโปรแกรมโดยแสดงเป็นตัวเอียง
เพิ่มไฟล์วิดีโอลงในเพจ รองรับ 3 รูปแบบวิดีโอ: MP4, WebM, Ogg
บ่งชี้ถึงเบราว์เซอร์ที่บรรทัดยาวอาจขาด
แผ่นโกงพร้อมแท็ก

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

HTML ย่อมาจาก HyperText Markup Language:

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

เช่นเดียวกับภาษาอื่นๆ HTML มาพร้อมกับชุดกฎเกณฑ์ กฎเหล่านี้ค่อนข้างง่ายและครอบคลุมถึงการกำหนดขอบเขตเพื่อให้รู้ว่าบางสิ่งเริ่มต้นและสิ้นสุดที่ใด

ด้านล่างนี้เป็นตัวอย่างของย่อหน้าใน HTML:

วันนี้ฉันกำลังเรียนรู้ไวยากรณ์ HTML บนเว็บไซต์

สิ่งที่คุณเห็นในวงเล็บเหลี่ยม< и >เรียกว่าแท็ก HTML พวกเขากำหนดว่าบางสิ่งเริ่มต้นที่ไหนและสิ้นสุดที่ใด

ฉันได้สร้างโพสต์อ้างอิง HTML พร้อมรายการแท็กทั้งหมดและความหมายแล้ว เชื่อมโยงไปยัง รายการนี้ –

แต่ละแท็กมีความหมายเฉพาะ ในกรณีของเรา หมายถึงย่อหน้าของข้อความ

ตามกฎแล้วจะมาเป็นคู่:

  • แท็กเปิดกำหนดจุดเริ่มต้นของย่อหน้า
  • แท็กปิด

    กำหนดจุดสิ้นสุดของมัน

ข้อแตกต่างระหว่างแท็กเปิดและแท็กปิดคือเครื่องหมายทับ / ที่นำหน้าชื่อแท็ก

เมื่อคุณรวมแท็กเปิด แท็กปิด และทุกอย่างที่อยู่ระหว่างนั้น คุณจะได้รับองค์ประกอบ HTML

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

กลุ่มแท็ก

แท็กทั้งหมดแบ่งออกเป็น 2 ประเภท ได้แก่ แบบอินไลน์และบล็อก

องค์ประกอบบล็อกเช่น: