1. แท็กประกาศประเภทเอกสาร 2. ประเภทภาษา Lang 3. ชุดอักขระ 4. แท็กทั่วไป HTML ประกาศเอกสาร HTML5 HTML5HTML 4.01XHTML 1.0
</DOCTYPE> ฟังก์ชันคือการบอกเบราว์เซอร์ว่าจะใช้เวอร์ชัน HTML ใดในการแสดงหน้าเว็บ
รหัส: </DOCTYPE html> หมายถึงการใช้เวอร์ชัน HTML5 เพื่อแสดงหน้าเว็บ
สิ่งที่ควรทราบคือ:
1. การประกาศ <!DOCTYPE> อยู่ที่ส่วนหน้าของเอกสาร ก่อนแท็ก <html>
2. <!DOCTYPE> ไม่ใช่แท็ก HTML
โดยทั่วไปจะใช้นี้
<!DOCTYPE html> <html lang="zh-CN">
ใช้เพื่อกำหนดพลังของการแสดงเอกสาร
th ---ภาษาอังกฤษ
zh-CN --- จีน
ชุดอักขระคือชุดของอักขระเพื่อให้คอมพิวเตอร์สามารถจดจำและจัดเก็บข้อความได้
ภายในแท็ก <head> คุณสามารถระบุการเข้ารหัสอักขระที่เอกสาร HTML ควรใช้ผ่านแอตทริบิวต์ชุดอักขระของแท็ก <meta>
<meta charset="UTF-8"/>
"UTF-8" เรียกอีกอย่างว่า Unicode
4.1 แท็กชื่อ
<h1>ฉันเป็นตำแหน่งระดับหนึ่ง</h1>
คุณสมบัติ:
ข้อความที่มีชื่อเรื่องจะหนาขึ้นและขนาดตัวอักษรก็จะใหญ่ขึ้นด้วย
หนึ่งชื่อในบรรทัดของตัวเอง
ตัวอย่างมีดังนี้:
การเพิ่มแท็กชื่อต้องอยู่ใน <body></body>
แบบอักษร "แท็กชื่อ" จะหนาขึ้นและใหญ่ขึ้น
ป้อนแท็กชื่อทั้งหกระดับ
แต่ละชื่อจะใช้หนึ่งบรรทัด และขนาดตัวอักษรจะลดลงตามลำดับ ตราบใดที่เพิ่มชื่อ ขนาดตัวอักษรก็จะหนาขึ้น
4.2 แท็กย่อหน้าและแท็กตัวแบ่งบรรทัด
<p>ฉันเป็นแท็กย่อหน้า</p>
เอฟเฟกต์การแสดงผล (มีช่องว่างขนาดใหญ่ระหว่างย่อหน้าต่างๆ)
หากคุณต้องการพันบรรทัด คุณต้องใช้แท็กตัวแบ่งบรรทัด</br> (เอฟเฟกต์จะไม่แสดง)
นี่คือหน้าเว็บที่ปฏิบัติตามกระบวนการ:
เอกสาร
รับ!
4.3 แท็กรูปแบบข้อความ
ในหน้าเว็บ บางครั้งคุณจำเป็นต้องตั้งค่าเอฟเฟกต์ตัวหนา ตัวเอียง หรือขีดเส้นใต้ให้กับข้อความ ในกรณีนี้ คุณต้องใช้แท็กรูปแบบข้อความในรูปแบบ HTML (เพื่อเน้นความสำคัญ ซึ่งสำคัญกว่าข้อความธรรมดา)
ความหมาย | ฉลาก | แสดงให้เห็น |
ตัวหนา | <strong></strong> หรือ <b></b> | แนะนำอันแรกเพิ่มเติมครับ |
เฉือน | <em></em> หรือ <i></i> | แนะนำอันแรกเพิ่มเติมครับ |
ขีดทับ | <del></del> หรือ <s></s> | แนะนำอันแรกเพิ่มเติมครับ |
ขีดเส้นใต้ | <ins></ins> หรือ <u></u> | แนะนำอันแรกเพิ่มเติมครับ |
4.4 แท็ก <div> และ <span>
แท็กทั้งสองนี้ไม่มีความหมายใด ๆ เป็นเพียงกล่องที่ใช้เก็บเนื้อหา
<div>นี่คือส่วนหัว</div> (สามารถวาง div เพียงอันเดียวเท่านั้นในแถว)
ตัวอย่างเช่น: <div>หนังสือเทพนิยาย</div>1997
ผลลัพธ์ควรจะเป็น
<span>ราคาวันนี้</span> (เนื้อหาสามารถแสดงเป็นบรรทัดเดียวได้)
ตัวอย่างเช่น: <span>เทพนิยายของกริมม์</span>
<span>เทพนิยายของแอนเดอร์สัน</span>
<span>นิทานอีสป</span>
ผลลัพธ์ควรเป็น:
4.5 แท็กรูปภาพและเส้นทาง
จะแทรกรูปภาพลงในหน้าเว็บได้อย่างไร?
ใน HTML แท็ก <img> ใช้เพื่อกำหนดรูปภาพในหน้า HTML
<img src="URL รูปภาพ"/>
src เป็นแอตทริบิวต์ที่จำเป็นของแท็ก <img> ซึ่งใช้ในการระบุเส้นทางและชื่อไฟล์ของไฟล์รูปภาพ
ทางที่ดีควรวางรูปภาพไว้ในโฟลเดอร์เดียวกับหน้าเว็บ
สามารถดูได้โดยตรงบนหน้าเว็บ รูปภาพ เป็นแบบย่อ ,
ต่อไปนี้เป็นคุณสมบัติพื้นฐานของแท็กรูปภาพ
คุณสมบัติ | ค่าแอตทริบิวต์ | แสดงให้เห็น |
| src | เส้นทางภาพ | คุณสมบัติที่จำเป็น |
ทางเลือกอื่น | ข้อความ | แทนที่ข้อความและรูปภาพที่ไม่สามารถแสดงได้ |
ชื่อ | ข้อความ | ข้อความพร้อมท์ ข้อความจะปรากฏขึ้นเมื่อวางเมาส์บนภาพ |
ความกว้าง | พิกเซล | กำหนดความกว้างของภาพ |
ความสูง | พิกเซล | กำหนดความสูงของภาพ |
ชายแดน | พิกเซล | กำหนดความหนาของเส้นขอบของรูปภาพ |
ขั้นแรกให้ลองใช้แอตทริบิวต์ alt เมื่อไม่สามารถแสดงรูปภาพได้ ให้ป้อน <img src="image1.jpg" alt="Fairy Tale"/> (รูปภาพ 1 ที่นี่ไม่มีอยู่ จึงไม่สามารถแสดงได้)
จากนั้นลองใช้แอตทริบิวต์ title อีกครั้ง ป้อน <img src="image.jpg" title="Fairy Tale"/> และลองใช้เอฟเฟกต์นี้ด้วยตัวเอง
หากต้องการทดสอบแอตทริบิวต์ความกว้าง ความสูง และเส้นขอบ ให้ป้อน <img src="image.jpg" title="Fairy Tale" width="300" height="100" border="15"/>
สิ่งที่ควรทราบเกี่ยวกับแท็กรูปภาพ:
(1) แท็กรูปภาพจะต้องเขียนหลังชื่อแท็ก
(2) คุณลักษณะไม่อยู่ในลำดับใดโดยเฉพาะ ชื่อแท็ก และคุณลักษณะ คุณลักษณะและคุณลักษณะต้องคั่นด้วยช่องว่าง
(3) รูปแบบคีย์ = "ค่า"
4.6 แท็กรูปภาพและเส้นทาง
เส้นทางสามารถแบ่งออกเป็น: เส้นทางสัมบูรณ์และเส้นทางสัมพัทธ์
1. เส้นทางสัมพัทธ์
เป็นตำแหน่งของรูปภาพที่สัมพันธ์กับหน้า HTML
การจำแนกเส้นทางสัมพัทธ์ | เครื่องหมาย | แสดงให้เห็น |
เส้นทางระดับเดียวกัน | <img src="image.jpg"/> | |
เส้นทางระดับต่อไป | - | <img src="images/baidu.gif"/> |
เส้นทางระดับก่อนหน้า | - | <img src="../baidu.gif"/> |
2. เส้นทางที่แน่นอน
เป็นเส้นทางในความหมายที่นิยม: "D:webimglogo.gif"
(ฉันจะอัปเดตในภายหลังเมื่อฉันมีเวลา)
คำชี้แจงเอกสาร HTML5
<!DOCTYPE html>
บล็อกโค้ดข้างต้นเป็นการประกาศเอกสาร HTML5 โดยระบุว่าหน้าเว็บปัจจุบันเขียนตามมาตรฐาน HTML5
เมื่อเขียนเว็บเพจ อย่าลืมเขียนประกาศเอกสาร HTML5 ที่ด้านบนของเว็บเพจ หากคุณไม่ได้เขียนประกาศเอกสาร เบราว์เซอร์บางตัวจะเข้าสู่โหมดแปลก ๆ หลังจากเข้าสู่โหมดแปลก ๆ เบราว์เซอร์จะแยกวิเคราะห์เพจและเพจจะไม่แสดงตามปกติ ดังนั้นเพื่อหลีกเลี่ยงการเข้าสู่โหมดนี้คุณต้องเขียนคำสั่งเอกสาร
คำชี้แจงเอกสารที่ใช้กันทั่วไป
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
หมายเหตุ: <!DOCTYPE> ไม่ใช่แท็ก HTML ให้ข้อมูล (คำสั่ง) แก่เบราว์เซอร์เกี่ยวกับเวอร์ชันของ HTML ที่เขียน
เพื่อให้เข้ากันได้กับหน้าเก่าบางหน้า เบราว์เซอร์ได้ตั้งค่าโหมดการแยกวิเคราะห์ไว้สองโหมด:
โหมดมาตรฐาน โหมดมาตรฐาน
Quirks Mode โหมดแปลกๆ
โหมดแปลก ๆ จะทำให้เกิดพฤติกรรมที่คาดเดาไม่ได้เมื่อแยกวิเคราะห์หน้าเว็บ และเราควรหลีกเลี่ยงไม่ให้โหมดแปลก ๆ เกิดขึ้น
ประเภทไฟล์ <HTML></HTML> (วางไว้ที่จุดเริ่มต้นและจุดสิ้นสุดของไฟล์)
นี่เป็นการสรุปบทความนี้เกี่ยวกับแท็กการประกาศประเภทเอกสาร HTML (บทช่วยสอนระดับเริ่มต้น) สำหรับเนื้อหาการประกาศเอกสาร HTML ที่เกี่ยวข้องเพิ่มเติม โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องต่อไปนี้ต่อไป อนาคต สนับสนุน downcodes.com!