สวัสดีผู้อ่านที่รักของบล็อกไซต์ วันนี้เราจะมาเริ่มพูดถึง tag ในภาษา Html กัน ได้แก่ หัวข้อ H1, H2, H3, H4, H5, H6 เกี่ยวกับย่อหน้า P และตัวแบ่งบรรทัด Br รวมถึงเกี่ยวกับแท็กแนวนอน Hr ตามตัวอย่าง เราจะพิจารณาการใช้แอตทริบิวต์และมาดูกันว่าจะเป็นไปได้ที่จะค้นหาแอตทริบิวต์ทั้งหมดที่เป็นไปได้สำหรับแต่ละองค์ประกอบและมองดูไวยากรณ์ของค่าสำหรับพวกเขา

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

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

มาเริ่มการศึกษาแท็กที่เป็นไปได้ทั้งหมดใน Html อย่างเป็นระบบ และในขณะเดียวกัน เราจะให้ความสนใจเป็นพิเศษกับแท็กที่เป็นของประเภทใด เพื่อให้เข้าใจถึงความเป็นไปได้ในการใช้งานที่ถูกต้อง (ถูกต้อง) อย่างชัดเจน โครงสร้างแท็กแบบง่ายมีลักษณะดังนี้:

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

มาเริ่มกันที่หัวเรื่องซึ่งเกิดขึ้นโดยใช้แท็กคู่ H1, H2, H3, H4, H5, H6 (ชื่อมาจากอักษรตัวแรกของคำว่า "ส่วนหัว" เช่น "หัวเรื่อง") ออกแบบมาเพื่อแยกส่วนต่างๆ ของข้อความออกจากกัน และทำเครื่องหมายความสำคัญตามระดับ ในภาษา Html เวอร์ชันใหม่ แท็กทั้งหมดและแอตทริบิวต์ทั้งหมดที่อนุญาตสำหรับแท็กเหล่านี้ได้รับการกำหนดและอธิบายไว้ล่วงหน้า

เป็นผลให้หัวเรื่องสามารถมีได้เพียงหกระดับและนอกจากนี้องค์ประกอบ H1-H6 ถูกบล็อก, เช่น. มีแนวโน้มที่จะใช้พื้นที่ว่างทั้งหมดตามความกว้างของหน้า แต่มีลักษณะเฉพาะอย่างหนึ่ง - เฉพาะองค์ประกอบแบบอินไลน์เท่านั้นที่สามารถอยู่ภายในแท็กหัวเรื่องได้ แม้ว่า Div เดียวกันจะอนุญาตให้คุณรวมแท็กบล็อกอื่นๆ ไว้ภายในได้

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

ชื่อเรื่อง ระดับต่างๆ H1-H6 จะถูกวาดในเบราว์เซอร์ด้วยแบบอักษรขนาดต่างๆ (แม้ว่าจะใช้ CSS คุณสามารถตั้งค่าให้มีขนาด สี และประเภทแบบอักษรใดก็ได้สำหรับแสดงในเบราว์เซอร์ แต่ใน Html ล้วนๆ กฎเหล่านี้มีดังต่อไปนี้):

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

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

เครื่องมือค้นหาให้ความสำคัญกับคำที่อยู่ในแท็กเหล่านี้มากกว่าคำที่อยู่ในข้อความ สิ่งนี้นำไปสู่ข้อสรุปว่าเมื่อเขียนบทความ คุณควรเพิ่มหัวข้อที่คุณใช้อย่างแน่นอน

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

ย่อหน้า ตัวแบ่งบรรทัด และ HR เส้นแนวนอนในโค้ด Html

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

ประเด็นคือมันค่อนข้างยากสำหรับคนที่จะอ่านข้อความขนาดใหญ่หากไม่ถูกแบ่งออกเป็นส่วนเล็ก ๆ ที่แยกจากกัน ตัวอย่างเช่น ฉันไม่ได้เริ่มอ่านบทความที่ไม่ได้แบ่งเป็นย่อหน้าในโค้ด Html ด้วยซ้ำ เพราะมันน่ารำคาญมาก

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

เพื่อจุดประสงค์เดียวกัน (ดึงดูดความสนใจของผู้ใช้และลดความเหนื่อยล้าเมื่ออ่านบทความ) พวกเขาเพิ่มข้อความที่หลากหลายและบางครั้งอาจ

อย่างไรก็ตาม แท็กย่อหน้า P อย่างที่คุณอาจสังเกตเห็นแล้วว่าเป็นแท็กคู่ แต่ตามข้อกำหนดของภาษามาร์กอัปไฮเปอร์เท็กซ์ 4.01 องค์ประกอบปิดของแท็กนั้นสมบูรณ์ ไม่จำเป็นต้องใช้. ในกรณีนี้ เบราว์เซอร์จะต้องค้นหาด้วยตัวเองว่าต้องวางไว้ที่ใด

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

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

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

ถ้าคุณต้องการเขียน quatrain ในรูปแบบที่ยอมรับโดยทั่วไป คุณสามารถใช้ Html เพิ่มเติมเพื่อจุดประสงค์นี้ได้

แท็กตัวแบ่งบรรทัดที่เรียกว่า BR

(จากคำว่า "แตก"):

BR เป็นองค์ประกอบแบบอินไลน์และ "ว่างเปล่า" เช่น เดี่ยว (ไม่มีองค์ประกอบปิด) ฟังก์ชันทั้งหมดของ BR คือทำให้เกิดการขึ้นบรรทัดใหม่เมื่อข้อความแสดงในเบราว์เซอร์ (คล้ายกับปุ่ม Enter ในโปรแกรมแก้ไขข้อความ)

การเขียนแท็ก BR (ตัวแบ่งบรรทัด) ในโค้ดไม่ได้ถูกควบคุมแต่อย่างใด คุณสามารถเขียนข้อความทั้งหมดเข้าด้วยกันแล้วใส่ BR แทนการเว้นวรรคในตำแหน่งที่ถูกต้อง หรือคุณสามารถแบ่งข้อความออกเป็นบรรทัดในโค้ดได้ทันที แล้วใส่ BR ที่ท้ายบรรทัดหรือตอนต้น มันไม่ได้เปลี่ยนสาระสำคัญ

HR(คำย่อของคำว่า "กฎแนวนอน" เช่น เส้นแนวนอน) - แท็ก Html ที่เรียบง่ายมากซึ่งวาดเส้นแนวนอน (แถบ) ตลอดความกว้างของหน้าจอและความหนาขึ้นอยู่กับเบราว์เซอร์ที่รับชม ( โดยพื้นฐานแล้วมันคือเครื่องหมายแสดงภาพ ซึ่งเมื่อเปรียบเทียบกับแท็กหัวเรื่องแล้ว จะทำให้คุณสามารถแบ่งข้อความเป็นส่วนๆ ที่มีเหตุผลเพื่อให้ดูดซึมได้ง่ายขึ้น)

คือ "ว่าง" (โสด) เช่น ไม่มีคู่ (แท็กปิดท้าย) นอกจากนี้, HR เป็นองค์ประกอบบล็อก, เช่น. โดยค่าเริ่มต้นจะใช้ความกว้างเต็มของหน้าที่มีให้

แนวคิดของแอตทริบิวต์และกฎสำหรับการเขียนในแท็ก Html

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

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

ดังนั้นกฎข้อแรกคือ แอตทริบิวต์จะถูกวางไว้เฉพาะในแท็กเปิด(อันที่ปิดไม่เคยมีอะไร) องค์ประกอบหนึ่งสามารถมีคุณลักษณะหลายอย่างที่แยกจากกันและระหว่างชื่อแท็กด้วยการเว้นวรรค (เงื่อนไขบังคับ) ให้ฉันยกตัวอย่างการใช้เส้น HR แนวนอนทันที:

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

ที่นั่นฉันได้ให้ลิงก์ไปยัง รายการแท็กทั้งหมดที่อนุญาตใน Html. หากคุณคลิกที่ชื่อขององค์ประกอบที่คุณสนใจในรายการนี้ (ในกรณีของเราคือ HR) คุณจะเข้าสู่หน้าที่มีข้อกำหนดโดยละเอียดสำหรับองค์ประกอบนั้น:

คุณลักษณะทั้งหมดของแท็กใด ๆ สามารถเป็น แบ่งเป็นสามกลุ่ม:

1. ทั่วไป - สามารถยืนอยู่ในองค์ประกอบส่วนใหญ่ในภาษา Html ในภาพด้านบน จะอยู่ด้านล่างและวงกลมสีแดง ที่จริงแล้ว มีคุณลักษณะทั่วไปอยู่ไม่กี่อย่าง (เพียงหกอย่าง) และถึงกระนั้น ก็ยังไม่น่าเป็นไปได้ที่คุณจะใช้คุณลักษณะเหล่านี้ทั้งหมดในการฝึกฝนของคุณ เป็นไปได้มากว่ามีเพียงสี่ - , ชื่อและรูปแบบ
2. แอตทริบิวต์เหตุการณ์ - จำเป็นต้องใช้เพื่อทริกเกอร์การดำเนินการบางอย่างเพื่อตอบสนองต่อการกระทำของผู้ใช้หรือเหตุการณ์ของระบบ พวกเขาเกี่ยวข้องกับ JavaScrit มากกว่าและอยู่ที่ด้านล่างสุดในรูปด้านบน (วงกลมในกล่องมืด)
3. ไม่ซ้ำกัน - แต่ละแท็กมักจะมีชุดแอตทริบิวต์ของตัวเอง ซึ่งบางแท็กอาจไม่พบในองค์ประกอบอื่นเลย หากเราพิจารณาเส้นแนวนอน HR ก็จะมีเพียงสี่แอตทริบิวต์ที่ไม่ซ้ำกัน (align, noshade, ขนาดและความกว้าง) เบราว์เซอร์อื่น ๆ ทั้งหมดที่ระบุในแท็ก HR (ยกเว้นสองกลุ่มที่อธิบายข้างต้น) จะถูกข้ามไป

ตัวอย่างแอตทริบิวต์ในแท็กเส้นแนวนอน HR

ค่าของแอตทริบิวต์ต่างๆ สามารถเป็นได้ทั้งตัวเลขที่กำหนดเอง (ฯลฯ ) หรือค่าจากชุดที่กำหนดไว้ล่วงหน้า เช่น ในกรณีการจัดตำแหน่ง HR - ซ้าย|ตรงกลาง|ขวา (คุณสามารถใช้หนึ่งในสามการจัดตำแหน่ง ตัวเลือก).

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

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

ตัวอย่างเช่น ในบรรทัดที่ขีดเส้นใต้ในรูปสำหรับแอตทริบิวต์ align สำหรับแท็ก HR อนุญาตให้ใช้ค่าคงที่สามค่าเท่านั้น ซึ่งแสดงไว้ที่นั่น (ซ้าย | กลาง | ขวา)

คอลัมน์ที่สำคัญอีกอย่างหนึ่งคือ "Depr" หากตัวอักษร D อยู่ตรงข้ามแอตทริบิวต์ที่คุณสนใจในคอลัมน์นี้ แสดงว่าเป็น ไม่แนะนำให้ใช้และคุณควรใช้สไตล์ CSS ที่เหมาะสมเพื่อแทนที่ เมื่อดูข้อกำหนดแท็ก เรายังเห็นว่าถัดจากชื่อของแอตทริบิวต์ทั้งสี่สำหรับ HR มีการเขียนคำว่า "เลิกใช้แล้ว" (ไม่แนะนำให้ใช้)

มาดูกันว่าแอตทริบิวต์ใดบ้างที่ใช้กับองค์ประกอบที่เราได้กล่าวถึงในบทความนี้ (P, หัวข้อ H1-H6 และ HR) สำหรับพวกเขาทั้งหมด คุณสามารถใช้ "จัดตำแหน่ง", เพราะ องค์ประกอบทั้งหมดเหล่านี้เป็นองค์ประกอบบล็อก สำหรับองค์ประกอบแบบอินไลน์ แอตทริบิวต์ align จะสูญเสียความหมายไป

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

ในทำนองเดียวกันจะเป็นจริงสำหรับแท็กย่อหน้า Html P และสำหรับคอนเทนเนอร์ Div หากคุณดูภาพหน้าจอด้านบนอย่างใกล้ชิด

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

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

---

แท็ก HR ในมาตรฐาน Html 4.01 มีอีกหนึ่งรายการ คุณลักษณะที่เรียกว่าโสด, เพราะ ไม่สามารถใช้ค่าใด ๆ ได้ (มันหมายถึงการกระทำบางอย่าง) - มันคือ "noshade" ซึ่งป้องกันเส้นแนวนอนจากการฉายเงา:

---

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

ขอให้โชคดีกับคุณ! แล้วพบกันใหม่หน้าบล็อก

คุณอาจสนใจ

ตารางใน Html - แท็ก Table, Tr และ Td รวมถึง Colspan, Cellpadding, Cellspacing และ Rowspan เพื่อสร้าง
Iframe และ Frame - คืออะไรและควรใช้เฟรมอย่างไรใน Html
คำสั่งแสดงความคิดเห็นและ Doctype ในโค้ด Html รวมถึงแนวคิดขององค์ประกอบบล็อกและอินไลน์ (แท็ก)
ฝังและวัตถุ - แท็ก Html สำหรับแสดงเนื้อหาสื่อ (วิดีโอ, แฟลช, เสียง) บนหน้าเว็บ
วิธีแทรกลิงก์และรูปภาพ (ภาพถ่าย) ลงใน HTML - แท็ก IMG และ A
แบบฟอร์ม Html สำหรับไซต์ - แท็ก Form, Input and Select, Option, Textarea, Label และอื่น ๆ สำหรับการสร้างองค์ประกอบของเว็บฟอร์ม
แบบอักษร (ใบหน้า ขนาดและสี) แท็ก Blockquote และ Pre - เลิกใช้การจัดรูปแบบข้อความใน HTML แท้ (โดยไม่ต้องใช้ CSS)
อักขระช่องว่างและการจัดรูปแบบของโค้ดใน Html ตลอดจนอักขระพิเศษช่องว่างที่ไม่แตกและตัวช่วยจำอื่นๆ
วิธีสร้างไฮเปอร์ลิงก์ (A, Href, Target blank) วิธีเปิดในหน้าต่างใหม่บนไซต์ และทำรูปภาพเป็นลิงก์ในโค้ด Html

และวันนี้เราจะมาดูกันดีกว่าว่าคืออะไร แท็ก htmlและพวกเขา คุณลักษณะตัวอย่างเช่น p, br, hr; และทำหน้าที่อะไร ค่าแอตทริบิวต์แท็กที่มีอยู่ในเอกสาร html

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

ตอนนี้ฉันกลับไปที่หัวข้อที่ตั้งใจไว้ ด้วยความคุ้นเคยกับพื้นฐานของ html นั้น ฉันได้เขียนเกี่ยวกับโครงสร้างของเอกสาร html แล้ว ซึ่งฉันได้ให้คำอธิบายเกี่ยวกับ html หลัก แท็ก head และ body ซึ่งต้องมีอยู่ในเอกสารทุกฉบับรวมถึง tag พิเศษด้วยเรียกว่าการประกาศ

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

ได้รับจากคุณผู้อ่านที่รักความปรารถนามากมายผ่านแบบฟอร์มข้อเสนอแนะและทางอีเมลฉันตัดสินใจกลับไปที่จุดเริ่มต้นและดูรายละเอียดเพิ่มเติมเกี่ยวกับแท็กที่มีอยู่โดยทั่วไปวิธีการจัดประเภทและแอตทริบิวต์แท็ก html คืออะไร . เริ่มกันเลย

แท็ก HTML คู่และเดี่ยวบล็อกและอินไลน์: p, br, hr

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

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

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

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

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

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

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

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

แท็ก HTML แท็ก p เป็นองค์ประกอบบล็อก เนื้อหาของ p tag

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

แท็ก HTML
p tag - องค์ประกอบบล็อก
เนื้อหาแท็ก p

การเขียนแท็ก br เกือบจะฟรี นั่นคือ คุณสามารถเลือกหลายบรรทัดในคราวเดียวและใส่แท็กนี้ที่ส่วนท้ายของแต่ละบรรทัด หรือคุณสามารถเขียนข้อความตามปกติแล้วแทรก br ลงในตำแหน่งที่มีเครื่องหมายยัติภังค์ จำนวนขององค์ประกอบ inline br ที่รวมอยู่ในเนื้อหาของแท็ก p block สามารถมากได้ตามต้องการ นั่นคือคุณสามารถเขียนข้อความได้มากเท่าที่คุณต้องการจากบรรทัดใหม่

ตอนนี้เรามาดูแท็กง่ายๆ อีกแท็กหนึ่ง ซึ่งเราจะพูดถึงรายละเอียดเพิ่มเติมที่ส่วนท้ายของบทความ มันเกี่ยวกับแท็ก hr (จากภาษาอังกฤษ กฎแนวนอน- เส้นแนวนอน) ซึ่งเป็นเส้นเดียว แต่ในเวลาเดียวกันบล็อกเนื่องจากโดยค่าเริ่มต้นจะใช้ความกว้างทั้งหมดที่เป็นไปได้ มันอธิบายเส้นแนวนอนอย่างง่าย ซึ่งมีประโยชน์เมื่อแบ่งเนื้อหาของหน้าออกเป็นส่วนตรรกะ ซึ่งอาจเป็นการแบ่งข้อความ กลุ่มรูปภาพ หรือส่วนอื่นๆ ของการออกแบบ

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

แอตทริบิวต์แท็ก HTML และการจัดประเภท

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

เกือบทุกแอตทริบิวต์มีค่าของตัวเอง (พารามิเตอร์) โดยทั่วไป แท็กเดี่ยวหรือคู่ใดๆ สามารถแสดงเป็นแผนผังได้ดังนี้:

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

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

จริง มีข้อมูลที่สอดคล้องกับมาตรฐาน html 4.01 ที่ถูกต้องอย่างเป็นทางการ อย่างไรก็ตาม การใช้งานเวอร์ชัน html 5 กำลังดำเนินไปอย่างรวดเร็ว ตามกฎที่เบราว์เซอร์ยอดนิยมกำลังเล่นอยู่ และใน เวอร์ชั่นใหม่ภาษามาร์กอัปไฮเปอร์เท็กซ์ แท็กและแอตทริบิวต์บางรายการจะไม่ถูกต้อง กล่าวคือไม่สอดคล้องกับมาตรฐาน html ดังนั้น เราจะตามให้ทันเวลา และในอนาคตฉันจะเสนอแท็กและแอตทริบิวต์ที่ถูกต้องให้คุณเท่านั้น และในอนาคตเราจะเรียนรู้วิธีหลีกเลี่ยงการไม่ปฏิบัติตามมาตรฐานโค้ด html เนื้อหาในหัวข้อนี้จะปรากฏขึ้นในไม่ช้า

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

แอตทริบิวต์องค์ประกอบทั้งหมดสามารถแบ่งออกเป็นสามกลุ่ม:

1. กลุ่มคุณสมบัติทั่วไป- ใช้กับแท็ก html เกือบทั้งหมด ในภาพหน้าจอด้านบน พวกมันจะถูกเน้นในกรอบสีเขียว
2. คุณลักษณะเฉพาะ- ชุดของแอตทริบิวต์ที่มีอยู่ในองค์ประกอบนี้เท่านั้น (สำหรับแท็ก hr ในรูป จะถูกขีดเส้นใต้ด้วยสีม่วง: align, noshade, size, width) ข้อมูลจำเพาะ html 5 เพิ่มแอตทริบิวต์สีใหม่ที่กำหนดสีของเส้นแนวนอน
3. พัฒนาการ- แอตทริบิวต์เหล่านี้จำเป็นเมื่อต้องดำเนินการบางอย่างเพื่อตอบสนองต่อการกระทำของผู้ใช้ ในภาพหน้าจอ จะถูกเน้นด้วยกรอบสีน้ำเงิน

ข้อมูลเกี่ยวกับแอตทริบิวต์สามารถพบได้ในหน้า W3C อื่นซึ่งมีตารางที่มีรายการแอตทริบิวต์ html ทั้งหมด:

ตารางนี้แสดงรายการแอตทริบิวต์ทั้งหมดสำหรับแท็กทั้งหมดที่มีอยู่ในภาษามาร์กอัปไฮเปอร์เท็กซ์ ในคอลัมน์ "องค์ประกอบที่เกี่ยวข้อง" ถัดจากแอตทริบิวต์ที่จำเป็น แท็กจะถูกทำเครื่องหมายซึ่งแอตทริบิวต์นี้สามารถใช้ได้ คอลัมน์ "ประเภท" ระบุประเภทของข้อมูลที่สามารถใช้เป็นค่าของแอตทริบิวต์ได้ ตัวอย่างเช่น สำหรับแอตทริบิวต์ align (ซึ่งระบุการจัดตำแหน่งขององค์ประกอบ) มีสามค่าที่เป็นไปได้ (ซ้าย กลาง ขวา)

หากคอลัมน์ "Dept" มีตัวอักษร D แสดงว่าไม่แนะนำให้ใช้แอตทริบิวต์นี้ มิฉะนั้น เอกสาร html จะไม่ผ่านการตรวจสอบ ในกรณีนี้จำเป็นต้องใช้สไตล์ css ซึ่งอย่างที่ฉันได้กล่าวไปแล้วเราจะศึกษาในอนาคตอันใกล้นี้ นี่เป็นสิ่งจำเป็นเนื่องจากแนวโน้มคือแอตทริบิวต์ส่วนใหญ่ใน html 5 เลิกใช้แล้วและควรกำหนดลักษณะที่ปรากฏขององค์ประกอบโดยใช้ css

อย่างไรก็ตาม ข้อมูลที่ครบถ้วนสมบูรณ์พร้อมแท็กที่เพิ่มเข้ามาและคุณลักษณะตาม html 5 นั้นถูกนำเสนอในแหล่งข้อมูลที่ดีที่สุดแห่งหนึ่งในความคิดของฉัน แหล่งข้อมูลที่อุทิศให้กับการเรียนรู้พื้นฐานของ html คือใน htmlbook และในภาษารัสเซีย

วิธีแสดงเส้นแนวนอนโดยใช้แท็ก hr

เราจะดำเนินการอย่างค่อยเป็นค่อยไป องค์ประกอบชั่วโมงไม่มีแอตทริบิวต์กำหนดเส้นแนวนอนอย่างง่ายที่ใช้ความกว้างเต็มของพื้นที่ (ดูตัวอย่างด้านบน) โดยการใช้แอตทริบิวต์ต่างๆ กับแท็ก hr อย่างต่อเนื่อง เราจะเปลี่ยนลักษณะที่ปรากฏของเส้นแนวนอน

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

ค่าของแอตทริบิวต์ width สามารถเป็นได้ทั้งตัวเลข (ในกรณีนี้ความกว้างจะถูกกำหนดเป็นพิกเซล) หรือเปอร์เซ็นต์ที่กำหนดความกว้างขององค์ประกอบเป็นเศษส่วนของพื้นที่ว่าง ค่าของแอตทริบิวต์ size กำหนดเป็นตัวเลขและกำหนดความสูงขององค์ประกอบ (ในกรณีนี้คือความหนาของเส้นแนวนอน) ลองดูตัวอย่าง:

---

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

---

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

---

เร็วๆ นี้ ตัวอย่างเฉพาะ p, br, hr เราดูว่าแท็ก html รวมถึงคุณลักษณะต่างๆ ที่ใช้ ส่งผลต่อการก่อตัวขององค์ประกอบต่างๆ บนหน้าเว็บอย่างไร ในไม่ช้าฉันจะเผยแพร่ความต่อเนื่องของหัวข้อนี้ เพื่อที่จะได้รับสื่อใหม่ ๆ อย่าลืมสมัครรับข้อมูลอัปเดตบล็อกผ่านฟีด RSS หรือทางอีเมล ขออนุญาติจากไปด้วยความปราถนาดี

แท็ก

แท็ก

ใช้ในการแบ่งหน้าออกเป็นย่อหน้า มีได้เฉพาะข้อความและแท็กในบรรทัด (แท็กระดับบรรทัด) ในขณะเดียวกันแท็ก

เป็นการบล็อก กล่าวคือ สร้างตัวแบ่งบรรทัดก่อนและหลังตัวเอง นอกจากนี้ยังกำหนดระยะขอบ (ระยะขอบ) ของพื้นที่ว่างด้านบนและด้านล่างจากด้านข้างไปยังบริบทโดยรอบ เนื่องจากหน้าถูกแบ่งออกเป็นย่อหน้าด้วยสายตา ขนาดช่องแท็ก

ขึ้นอยู่กับประเภทของเบราว์เซอร์ แต่จะเท่ากับความสูงของข้อความหนึ่งบรรทัดในหน้าปัจจุบันโดยประมาณ

แท็กปิด

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

คุณลักษณะ

คุณลักษณะส่วนบุคคล:

• align - ตั้งค่าการจัดตำแหน่งแนวนอนของเนื้อหาย่อหน้า

• accesskey - ตั้งค่าปุ่มลัดเพื่อเน้นที่องค์ประกอบ HTML
• class - ระบุชื่อของคลาสหรือคลาสของแท็กที่ใช้ใน CSS (Cascading Style Sheets)
• dir - ระบุทิศทางของข้อความภายในองค์ประกอบ
• - ระบุชื่อ ID ของแท็ก HTML ที่สามารถใช้เป็น "anchor" หรือในสไตล์ชีตได้
• lang - ระบุภาษาที่ใช้เขียนข้อความภายในองค์ประกอบ HTML
• style - จำเป็นต้องใช้สไตล์ CSS แบบอินไลน์กับแท็ก
• tabindex - ตั้งค่าลำดับแท็บระหว่างองค์ประกอบ (ปุ่ม Tab)
• ชื่อเรื่อง - แสดงคำแนะนำเครื่องมือเมื่อเคอร์เซอร์เมาส์อยู่เหนือองค์ประกอบ HTML

ประเภทแท็ก

วัตถุประสงค์: ข้อความ (บล็อก)

รูปแบบแท็ก: บล็อก (บล็อก ระดับบล็อก)

อาจมี:แท็กอินไลน์ ข้อความธรรมดา และ อักขระพิเศษ HTML(ช่วยในการจำ).

แท็กเปิด:จำเป็น. แท็กปิด:ไม่จำเป็นต้องใช้.

ไวยากรณ์

เนื้อหา

ตัวอย่าง HTML: การใช้ P Tag

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

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

รองรับเวอร์ชัน HTML

รุ่น:	HTML 4.01	HTML 5	XHTML 1.0	XHTML 1.1
สนับสนุน:	ใช่	ใช่	ใช่	ใช่

รองรับเบราว์เซอร์

เบราว์เซอร์:	Internet Explorer	Google Chrome	Mozilla Firefox	โอเปร่า
รุ่น:	6.0 ขึ้นไป	2.0 และสูงกว่า	2.0 และสูงกว่า	9.2 ขึ้นไป	3.1 ขึ้นไป
สนับสนุน:	ใช่	ใช่	ใช่	ใช่	ใช่

เบราว์เซอร์					Netscape		โอเปร่า							Mozilla Firefox
เวอร์ชั่น	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
ได้รับการสนับสนุน	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่

เอสทีเอ็มแอล:

3.2

4

XHTML:

1.0

1.1

คำอธิบาย

กำหนดย่อหน้าเนื้อหา แท็ก

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

ไวยากรณ์

เนื้อหา

เนื้อหา

ตัวเลือก

align ระบุการจัดตำแหน่งของเนื้อหา

แท็กปิด

ไม่จำเป็นต้องใช้.

ตัวอย่างที่ 1: การใช้แท็ก

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. อัลบั้ม

Ut wisis enim และ minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

คำอธิบายของพารามิเตอร์แท็ก

พารามิเตอร์ALIGN

คำอธิบาย

การจัดแนวขอบของบล็อกเนื้อหา

ไวยากรณ์

ข้อโต้แย้ง

ซ้าย จัดเนื้อหาไปทางซ้าย ในกรณีนี้ บรรทัดเนื้อหาจะจัดชิดด้านซ้าย และขอบด้านขวาจะอยู่ในตำแหน่ง "บันได" วิธีการจัดตำแหน่งนี้เป็นที่นิยมมากที่สุดในเว็บไซต์ของเรา เนื่องจากทำให้ผู้ใช้สามารถค้นหาบรรทัดใหม่ได้อย่างง่ายดายและอ่านเนื้อหาขนาดใหญ่ได้อย่างสะดวกสบาย center จัดเนื้อหาให้อยู่ตรงกลาง เนื้อหาถูกวางในแนวนอนในหน้าต่างเบราว์เซอร์หรือคอนเทนเนอร์ที่บล็อกเนื้อหาตั้งอยู่ ดูเหมือนว่าเส้นของเนื้อหาจะพันอยู่บนแกนที่มองไม่เห็นซึ่งไหลลงมาตรงกลางของหน้าเว็บ วิธีการจัดตำแหน่งนี้ใช้กันอย่างแพร่หลายในหัวเรื่องและคำอธิบายภาพต่างๆ เช่น คำอธิบายภาพ ทำให้การออกแบบเนื้อหาดูเป็นทางการและชัดเจน ในกรณีอื่นๆ ทั้งหมด การจัดตำแหน่งกึ่งกลางมักไม่ค่อยใช้เนื่องจากไม่สะดวกที่จะอ่านเนื้อหาดังกล่าวจำนวนมาก ขวา จัดเนื้อหาให้ชิดขวา วิธีการจัดตำแหน่งนี้ทำหน้าที่เป็นศัตรูกับประเภทก่อนหน้า กล่าวคือ เส้นของเนื้อหาถูกจัดชิดทางด้านขวา ในขณะที่ด้านซ้ายยังคง "ขาด" เนื่องจากขอบด้านซ้ายไม่อยู่ในแนวเดียวกัน กล่าวคือ เมื่ออ่านบรรทัดใหม่ เนื้อหาดังกล่าวจึงอ่านยากกว่าการจัดชิดซ้าย ดังนั้น การจัดชิดขวาจึงมักใช้สำหรับหัวข้อสั้นๆ ไม่เกินสามบรรทัด เราไม่พิจารณาบางไซต์ที่ต้องอ่านเนื้อหาจากขวาไปซ้าย ซึ่งวิธีการจัดตำแหน่งที่คล้ายกันอาจมีประโยชน์ แต่คุณเคยเห็นไซต์ดังกล่าวที่ไหนในประเทศของเรา justify Justify ซึ่งหมายถึงชิดซ้ายและขวาพร้อมกัน ในการดำเนินการนี้ เบราว์เซอร์ในกรณีนี้จะเพิ่มช่องว่างระหว่างคำ

ค่าเริ่มต้น

CSS แบบอะนาล็อก (CSS)

ตัวอย่างที่ 2: การจัดแนวเนื้อหา

STML 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Duis te feugifacilisi. Duis autem dolor ใน hendrerit ใน vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzguel facilis delenit dolenit Ut wisi enim และ minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex commodo consequat. Duis te feugifacilisi ต่อ suscipit lobortis nisl ut aliquip ex en commodo consequat

46.4K

บ่อยครั้ง เว็บมาสเตอร์มือใหม่มักถูกทรมานด้วยคำถามว่าเหตุใดบางไซต์จึงมีอันดับสูงกว่าและเหนือกว่าคู่แข่งในผลการค้นหา เหตุผลนี้อาจวางแท็ก h1 , h2 ... h6 ไม่ถูกต้อง หากแท็กเหล่านี้วางไม่ถูกต้อง โดยไม่คำนึงถึงข้อมูลเฉพาะของทรัพยากร เครื่องมือค้นหาจะได้รับข้อมูลที่ถูกต้องเกี่ยวกับบทความและคำหลักที่อยู่ในนั้นได้ยากขึ้น

แท็ก H1 -h6 ช่วยให้คุณสามารถเน้นส่วนหัว ระดับต่างๆ. พวกเขาทำให้ชัดเจนว่าส่วนใดของข้อความที่สะท้อนถึงหัวข้อของบทความได้แม่นยำกว่าและให้ความได้เปรียบในการจัดอันดับ

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

เหตุใดเราจึงต้องใช้แท็ก h1-h6

แท็กประกอบด้วยชื่อไซต์ หัวเรื่อง และหัวเรื่องย่อยของข้อความ:

ใน HTML แท็กส่วนหัวจะแสดงด้วย h จาก "ส่วนหัว" ภาษาอังกฤษซึ่งหมายถึง " ชื่อเรื่อง, ส่วนหัว". นี่คือตัวอย่างของสิ่งที่ดูเหมือน:

หัวข้อ

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

- แท็กที่สำคัญที่สุด

- แท็กที่ไม่สำคัญ...

- แท็กที่สำคัญที่สุดล่าสุด

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

ไวยากรณ์ของแท็ก h1-h6

ชื่อของข้อความ

คำบรรยาย 1

...

คำบรรยาย 2

คำบรรยาย 3.1

...

คำบรรยาย 3_2

คำบรรยาย 3

แท็กยอดนิยมคือ h1 h2 h3

วิธีการใช้แท็ก h1 อย่างถูกต้อง?

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

แท็ก HTML h1 เป็นแท็กที่สำคัญที่สุดในประเภทเดียวกัน ประกอบด้วยชื่อเว็บไซต์และชื่อบทความ อย่างไรก็ตาม ไม่ควรสับสนกับแท็ก