XHTML เป็นภาษามาร์กอัปเอกสารเว็บที่ขยายได้โดยใช้ XML มาตรฐาน XHTML คือรายการความแตกต่างระหว่าง HTML 4.01 และ XHTML

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

ข้อดีของภาษา XHTML ไม่ใช่ความเข้มงวดของไวยากรณ์ แต่เป็นความสามารถในการสร้างแท็กของคุณเอง

อย่างไรก็ตาม เมื่อวันที่ 2 กรกฎาคม พ.ศ. 2552 World Wide Web Consortium (W3C) ได้ประกาศยุติการทำงานบน XHTML 2.0 โดยพิจารณาว่าแนวคิดของ XHTML นั้นไม่ถูกต้อง โปรแกรมเมอร์กลุ่มหนึ่งเปลี่ยนไปใช้มาตรฐาน HTML5 และถึงแม้ว่ามาตรฐาน HTML5 จะยังไม่ได้รับการอนุมัติ แต่ก็มีเว็บไซต์หลายแห่งที่เขียนไว้แล้ว

ใครก็ตามที่สงสัยว่า HTML5 จะเสร็จสิ้นเมื่อใดสามารถตรวจสอบแหล่งที่มาดั้งเดิมได้:

เวอร์ชันอย่างเป็นทางการของมาตรฐาน HTML5 อยู่ที่: www.w3.org/TR/html5/

มาเลือกกันดีกว่า ทำได้ไม่ยาก: คุณไม่ควรใช้มาตรฐาน XHTML หากคุณไม่ต้องการขยายภาษา HTML

เราจะไม่อยู่อีกต่อไป!DOCTYPE มีไว้สำหรับเอกสารที่ใช้เฟรม: วันก่อนเมื่อวาน

คำถามต่อไปคือ: ไวยากรณ์ใดให้เลือก - เข้มงวดหรือสกรรมกริยา?

ไวยากรณ์ HTML 4.01 ที่เข้มงวดและเฉพาะกาล

มีไวยากรณ์การเปลี่ยนผ่านเพื่อทำให้การเปลี่ยนไปใช้ง่ายขึ้น มาตรฐานใหม่- พวกเขาจะข้ามไวยากรณ์ที่เข้มงวดไปมากซึ่งถือว่าเป็นข้อผิดพลาด

เข้าใจได้ง่ายขึ้นว่ามีอะไรอยู่ที่นี่พร้อมตัวอย่าง ขั้นแรก เรามาตั้งค่าไวยากรณ์ที่เข้มงวดกันก่อน

ไวยากรณ์ที่เข้มงวด

ตรวจสอบความถูกต้อง

สีแดงสี.

เรียกว่าการปฏิบัติตามโค้ด HTML กับมาตรฐานที่ประกาศไว้ ความถูกต้องและการตรวจสอบการติดต่อนี้ก็คือ การตรวจสอบ.

หากต้องการติดตามข้อผิดพลาดของเลย์เอาต์ ให้ติดตั้งโปรแกรมเสริม FireFox Html Validator

มาเปิดเพจของเราได้ที่ เบราว์เซอร์ FireFoxให้เลื่อนเมาส์ไปเหนือเครื่องหมายตรวจสอบความถูกต้อง:

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

มาเปลี่ยนกันเถอะ!DOCTYPE เป็นไวยากรณ์การเปลี่ยนแปลง:

ไวยากรณ์เฉพาะกาล

ตรวจสอบความถูกต้อง

จำเป็นต้องเน้นข้อความบางส่วน สีแดงสี.

เปิดตัว FireFox ไม่มีข้อผิดพลาด:

ทุกอย่างดูเหมือนจะดี บางทีเราควรหยุดอยู่แค่นั้น?

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

อย่าถูกล่อลวงด้วยความภักดีของไวยากรณ์การเปลี่ยนผ่าน เพียงปฏิบัติตามมาตรฐานอย่างเข้มงวดเท่านั้น!

เหตุใดจึงต้องมีเค้าโครงที่ถูกต้อง

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

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

วันนี้มาเริ่มต้นกัน การเรียนรู้ HTMLและ CSS ฉันจะพยายามอธิบายหัวข้อนี้ให้ชัดเจนที่สุดสำหรับผู้อ่านทุกคน และไม่สำคัญว่าคุณจะคุ้นเคยกับหัวข้อนี้หรือเพียงแค่ต้องการศึกษาโค้ดซึ่งค่อนข้างใช้กันอย่างแพร่หลายในการสร้างเว็บไซต์ และเพื่อที่จะได้สัมผัสตัวอย่างแอปพลิเคชันและการใช้โค้ดให้ได้มากที่สุดเท่าที่จะเป็นไปได้ ฉันวางแผนที่จะเขียนรายการบทความที่น่าประทับใจมากโดยเฉพาะโดยไม่ต้องใช้ cms ใด ๆ หรือรวมหน้า html เข้ากับเอ็นจิ้น dle และ wordpress เราจะวิเคราะห์คำถามที่เกิดขึ้น ไม่ใช่ในรูปแบบดั้งเดิม ทฤษฎีแรก แล้วจึงฝึกฝน ฉันจะแสดงทุกอย่างในทางปฏิบัติทันทีโดยสนับสนุนทุกอย่างด้วยทฤษฎี

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

เอชทีเอ็มแอลคืออะไร?

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

รหัสเว็บไซต์ใดๆ เริ่มต้นด้วยคำจำกัดความประเภทเอกสาร (DTD - คำจำกัดความประเภทเอกสาร (คำอธิบายประเภทเอกสาร)) โดยเบราว์เซอร์ เพื่อแสดงเว็บไซต์บนจอภาพของเราได้อย่างถูกต้อง และเพื่อช่วยเบราว์เซอร์ตัดสินใจ คุณต้องระบุประเภทของเอกสารที่ใช้บนไซต์ มีแท็กสำหรับสิ่งนี้ - ทำไมต้องระบุประเภทเอกสาร? นี่เป็นสิ่งจำเป็นเนื่องจาก html มีอยู่ในหลายเวอร์ชันของภาษา และนอกจากนี้ยังมีภาษามาร์กอัปแบบขยาย (XHTML - Extensible Hypertext Markup Language) ซึ่งแตกต่างจาก ไวยากรณ์ HTML- และถ้าคุณไม่ทำเช่นนี้ เว็บเบราว์เซอร์อาจสับสนและแสดงหน้าเว็บของเราไม่ถูกต้อง ดังนั้นเรามาดูกันว่ามีเอกสารประเภทใดบ้าง ด้านล่างนี้ฉันจะเสนอตารางพร้อมเอกสารประเภทหลักที่หลากหลาย - :

ทีนี้ เรามาลองค้นหาทีละชิ้นว่า DOCTYPE มีอะไรบ้าง
html - ระบุองค์ประกอบ ระดับบนสุดนั่นคือพื้นฐานของโค้ด สำหรับ HTML นี่คือแท็ก .

สาธารณะ - กำหนดลักษณะสาธารณะของเอกสาร ประเภทนี้เอกสารเป็นแบบสาธารณะ

“-” ระบุว่าผู้พัฒนาประเภทเอกสารได้ลงทะเบียนกับองค์การระหว่างประเทศเพื่อการมาตรฐาน (ISO) หรือไม่ มีสองความหมาย: ลบหรือบวก ข้อเสีย: ไม่ได้ลงทะเบียน บวก-ทะเบียนแล้ว. แต่สำหรับ W3C จะมีการระบุ “-”

W3C เป็นองค์กรที่พัฒนา DTD

DTD - ประเภทเอกสาร สำหรับ HTML และ XHTML จะมีการระบุ DTD

HTML 4.01 Transitional (เป็นตัวอย่าง) - ชื่อของเอกสาร เวอร์ชัน และไวยากรณ์ที่ใช้

EN คือภาษาที่ใช้เขียนเอกสาร และแน่นอนว่า HTML และ XHTML ใช้ภาษาอังกฤษ

http://www.w3.org/TR/html4/loose.dtd - ที่อยู่ของเอกสารคำอธิบายเอกสาร (DTD)

นั่นคือข้อมูลจำนวนเท่าใดที่ข้อมูลแรกมี สตริง HTMLหรือรหัส XHTML แต่ปัญหาอาจยังคงเกิดขึ้นในการพิจารณาว่าเอกสารของเราตรงกับไวยากรณ์ที่เลือกหรือไม่ ด้วยเหตุนี้จึงมีเครื่องมือตรวจสอบมาร์กอัปที่จะช่วยให้เราพิจารณาว่ารหัสของเราถูกต้อง (ถูกต้อง) เพียงใด เครื่องมือตรวจสอบความถูกต้องจัดทำโดยองค์กรเดียวกัน ซึ่งเป็นผู้พัฒนาอย่างเป็นทางการของ DTD ตั้งอยู่บนเว็บไซต์ http://validator.w3.org/

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

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

แท็ก มีวัตถุประสงค์เพื่อระบุประเภท เอกสารปัจจุบัน- DTD (คำจำกัดความของประเภทเอกสาร คำอธิบายประเภทเอกสาร) เบราว์เซอร์จำเป็นต้องเข้าใจวิธีตีความหน้าเว็บปัจจุบัน เนื่องจาก HTML มีหลายเวอร์ชัน และยังมี XHTML (EXtensible HyperText Markup Language) ซึ่งคล้ายกับ HTML แต่มีไวยากรณ์ต่างกัน

เพื่อให้เบราว์เซอร์ทราบว่าจะแสดงเอกสาร HTML ปัจจุบันตามมาตรฐานใด คุณต้องตั้งค่าในบรรทัดแรกของโค้ด .

ไวยากรณ์

ตัวอย่าง: ประกาศ

DOCTYPE มีหลายประเภท มีประเภทที่เข้มงวด ( เข้มงวด) ซึ่งทำงานเฉพาะกับแท็กบางแท็กเท่านั้น และยังมีแท็กเฉพาะกาล ( หัวต่อหัวเลี้ยว) ซึ่งอนุญาตให้รวมแท็กเพิ่มเติมได้ มีแท็กที่ใช้งานได้กับเฟรม ( เฟรมเซ็ต).

ใน HTML 4.01 ประเภทเอกสารอ้างอิงถึงเอกสาร คำจำกัดความประเภท(DTD อธิบายเค้าโครงเอกสารสำหรับภาษามาร์กอัปเฉพาะผ่านชุดการประกาศ) ซึ่งอิงจาก SGML มี 3 ประเภทต่างๆ ประเภทเอกสารใน HTML เวอร์ชัน 4.01

กฎ HTML5 DOCTYPE เป็นกฎสากลและมีกฎรวมอยู่ด้วย รุ่นก่อนหน้าเช่นเดียวกับความสามารถในการทำงานกับแท็ก HTML 4 และ XHTML ในระดับหนึ่งและรวมความสามารถของรุ่นก่อนทั้งหมดเพื่อปรับให้ทำงานในเบราว์เซอร์ใหม่

HTML 4.01 เข้มงวด (HTML 4.01 เข้มงวด)

นี้ ประเภทดีทีดีรวมองค์ประกอบทั้งหมดและ คุณลักษณะ HTMLยกเว้นองค์ประกอบภาพ (การออกแบบ) หรือองค์ประกอบที่ไม่แนะนำ (เช่น แบบอักษร) ห้ามใช้เฟรม

HTML 4.01 การเปลี่ยนผ่าน (HTML 4.01 การเปลี่ยนผ่าน)

DTD ประเภทนี้ประกอบด้วยองค์ประกอบและแอตทริบิวต์ html ทั้งหมด รวมถึงองค์ประกอบภาพ (การออกแบบ) และองค์ประกอบที่เลิกใช้แล้ว (เช่น แบบอักษร) ห้ามใช้เฟรม

HTML 4.01 เฟรมเซ็ต (HTML 4.01 เฟรม)

เหมือนกับ HTML 4.01 Transitional แต่อนุญาตให้ใช้เฟรมได้

XHTML 1.0 เข้มงวด (XHTML 1.0 เข้มงวด)

DTD ประเภทนี้รวมองค์ประกอบและแอตทริบิวต์ html ทั้งหมด ยกเว้นองค์ประกอบภาพ (การออกแบบ) หรือองค์ประกอบที่เลิกใช้แล้ว (เช่น แบบอักษร) ห้ามใช้เฟรม มาร์กอัปควรเขียนเป็น XML ที่มีรูปแบบเหมาะสม

XHTML 1.0 การเปลี่ยนผ่าน (XHTML 1.0 การเปลี่ยนผ่าน)

DTD ประเภทนี้ประกอบด้วยองค์ประกอบและแอตทริบิวต์ html ทั้งหมด รวมถึงองค์ประกอบภาพ (การออกแบบ) และองค์ประกอบที่เลิกใช้แล้ว (เช่น แบบอักษร) ห้ามใช้เฟรม มาร์กอัปควรเขียนเป็น XML ที่มีรูปแบบเหมาะสม

XHTML 1.0 เฟรมเซ็ต (XHTML 1.0 เฟรม)

คล้ายกับ XHTML 1.0 Transitional แต่อนุญาตให้ใช้เฟรมได้

ฉันตัดสินใจที่จะจัดให้มีการบรรยายปกติและ แบบฝึกหัดภาคปฏิบัติกับพนักงานของเขาในการเขียนโปรแกรมใน PHP, MySQL, Javascript รวมไปถึงเทคโนโลยีอื่นๆ ที่จำเป็นในการผลิตเว็บไซต์คุณภาพสูง ฉันตัดสินใจเริ่มต้นจากด้านบนสุดด้วยแท็ก HTML ฉันยินดีที่จะรับความคิดเห็นใด ๆ :)
ฉันจะจองทันทีว่าฉันพบข้อมูลส่วนใหญ่บนอินเทอร์เน็ต ที่ด้านล่างของบทความ จะมีลิงก์ไปยังแหล่งข้อมูล ข้อมูลบางส่วนได้รับการแปลร่วมกับ Google Translate
ดังนั้น:

เหตุใด DOCTYPE จึงมีความสำคัญมาก

ดูเหมือนว่าคุณทำทุกอย่างถูกต้องแล้ว แต่ด้วยเหตุผลบางประการ ไซต์ของคุณดูหรือทำงานไม่ได้ตามที่คาดไว้ด้วยเหตุผลบางประการ เวอร์ชันล่าสุดเบราว์เซอร์
คุณได้เขียนโค้ด XHTML มาตรฐานและ CSS มาตรฐานที่ถูกต้อง คุณใช้ข้อกำหนดมาตรฐานสำหรับการทำงานกับ DOM ( วัตถุเอกสาร Model) เพื่อควบคุมองค์ประกอบไดนามิกบนเพจ แต่ในเบราว์เซอร์ที่ดูเหมือนว่าจะทำตามมาตรฐานเหล่านี้ เว็บไซต์ของคุณไม่ทำงาน เป็นไปได้มากว่าข้อผิดพลาดอยู่ในส่วนหัว DOCTYPE ที่ไม่ถูกต้อง
บทความสั้น ๆ นี้จะบอกคุณเกี่ยวกับส่วนหัว DOCTYPE ที่ใช้งานได้ และยังอธิบายความหมายเชิงปฏิบัติและเชิงทฤษฎีของแท็กที่ดูเหมือนเป็นนามธรรมนี้

DOCTYPE คืออะไร?

ปัญหา

สารละลาย

• ให้นักพัฒนาเว็บที่ตระหนักถึงมาตรฐานสามารถเลือกโหมดที่จะใช้ได้
• แสดงหน้าเก่าต่อไปตามกฎเก่า (เข้ากันได้) (โหมดนิสัยแปลกๆ)

กล่าวอีกนัยหนึ่ง เบราว์เซอร์ทั้งหมดที่จำเป็นในการทำงาน สองโหมด: โหมดความเข้ากันได้สำหรับกฎเก่า และโหมดเข้มงวดสำหรับมาตรฐาน
IE Mac เป็นเบราว์เซอร์แรกที่ใช้ทั้งสองโหมด และ Windows IE 6, Mozilla, Safari, Opera ก็ตาม
IE 5 Windows รวมถึงเบราว์เซอร์รุ่นเก่าเช่น Netscape 4 จะถูกล็อคเข้าสู่โหมดความเข้ากันได้อย่างถาวร

วิธีแก้ไขในการเลือกโหมดการแสดงผลที่ต้องการเรียกใช้คือการใช้สวิตช์ "DOCTYPE" ตามมาตรฐาน เอกสาร HTML (X) ใดๆ จะต้องมี DOCTYPE ที่จะบอกให้โลกรู้ว่าเอกสารนั้นเป็นประเภท (X) อะไร เอกสาร HTMLเขาใช้

DTD ที่ถูกต้อง

HTML 4.01 DTD

• HTML 4.01 เข้มงวด - ไม่อนุญาตให้ใช้มาร์กอัปการนำเสนอ (การออกแบบ) โดยอ้างว่า CSS ควรทำสิ่งนี้
• Transitional DTD อนุญาตคุณลักษณะและองค์ประกอบแบบเดิมบางอย่าง
• หากใช้เฟรม ต้องใช้ประเภทเอกสารชุดเฟรม

XHTML 1.0 DTD

• XHTML เข้มงวด DTD เข้มงวดที่สุด DTD ที่มีอยู่: ไม่รองรับแท็กแบบเดิม (ดูด้านล่าง) และต้องเขียนโค้ดอย่างถูกต้อง
• XHTML Transitional DTD เหมือนกับ XHTML Strict DTD แต่อนุญาตให้ใช้แท็กเก่าได้ นี้ ยอดนิยมที่สุดวี ช่วงเวลาปัจจุบันดีทีดี.
• XHTML Frameset DTD เป็น XHTML DTD เพียงตัวเดียวที่รองรับเฟรม

XHTML 1.1 DTD

สถิติการใช้ DTD ต่างๆ

ปรากฎว่าไซต์มากกว่า 50% ทำงานในโหมดแปลก ๆ นั่นคือในโหมด IE4!

แท็กและแอตทริบิวต์ที่เลิกใช้แล้ว

แท็กเดิมตามลำดับตัวอักษร

• ใช้แท็ก