ส่วนหัวของเอกสาร HTML มักจะมีชื่อหน้ากำหนดซึ่งให้ข้อมูลเกี่ยวกับหน้าเว็บโหลดตารางสไตล์และโหลดไฟล์ JavaScript (สำหรับการพิจารณาประสิทธิภาพส่วนใหญ่จะอยู่ที่ด้านล่างของหน้า < /body> โหลดก่อนสิ้นสุดของฉลากสิ้นสุด JavaScript) ยกเว้นชื่อเรื่องเนื้อหาในหัวจะไม่ปรากฏสำหรับผู้เข้าชมหน้า
ต่อไปนี้เป็นตัวอย่างของส่วนหัวของเอกสาร HTML:
<head> <meta charset = utf-8/> <meta name = เนื้อหาผู้เขียน = Adam Freeman/> <title> ชื่อหน้าของคุณ </title> <base href = http: // titings/target = _ blank/> < สไตล์ = ข้อความ/css> a {พื้นหลังสี: สีเทา; องค์ประกอบชื่อเรื่ององค์ประกอบหัวจะต้องมีองค์ประกอบชื่อซึ่งจะปรากฏในแท็บของเบราว์เซอร์หรือด้านบนของหน้าต่างเบราว์เซอร์เป็นชื่อของหน้าเว็บและเกี่ยวข้องกับเบราว์เซอร์
องค์ประกอบพื้นฐานองค์ประกอบพื้นฐานใช้เพื่อตั้งค่า URL มาตรฐานเพื่อวิเคราะห์ลิงก์สัมพัทธ์ในเอกสาร HTML บนพื้นฐานนี้ หากไม่ได้ระบุไว้ให้ใช้ URL ของเอกสารการโหลดปัจจุบัน องค์ประกอบพื้นฐานยังสามารถตั้งค่าวิธีการเปิดลิงค์เมื่อผู้ใช้คลิกและวิธีที่เบราว์เซอร์ทำปฏิกิริยาเมื่อส่งแบบฟอร์ม
<base href = http: // bjpowerNode/listings/target = _blank/>
1) HREF เป็น URL มาตรฐานที่ระบุ
2) สถานที่ที่จะเปิดลิงก์ทั้งหมดบนหน้ารวมถึงตำแหน่งที่เปิดแอตทริบิวต์เป้าหมายรวมถึงค่า:
1) _blank: เปิดเอกสารที่เชื่อมต่อในหน้าต่างใหม่
2) _self: โดยค่าเริ่มต้นให้เปิดเอกสารลิงก์ในกรอบเดียวกัน
3) _parent: เปิดเอกสารที่เชื่อมโยงในเฟรมหลัก;
4) _top: เปิดเอกสารลิงก์ในหน้าต่างทั้งหมด;
5) Framename: เปิดเอกสารลิงก์ในกรอบที่ระบุ
เมตาองค์ประกอบองค์ประกอบเมตาใช้เพื่อกำหนดเมตาดาต้าต่าง ๆ ของสารคดี องค์ประกอบหัว
ระบุคู่ข้อมูลเมตาชื่อ/ค่า<meta name = เนื้อหาผู้เขียน = Adam Freeman/>
แอตทริบิวต์ชื่อใช้เพื่อแสดงประเภทของข้อมูลเมตาซึ่งให้ค่าของแอตทริบิวต์เนื้อหา แอตทริบิวต์ชื่อมีค่าต่อไปนี้:
1) ชื่อแอปพลิเคชัน: ชื่อของระบบเว็บแอปพลิเคชันที่เป็นของหน้าปัจจุบัน
2) ผู้แต่ง: ชื่อผู้แต่งของหน้าปัจจุบัน;
3) คำอธิบาย: คำแนะนำของหน้าปัจจุบัน;
4) เครื่องกำเนิด: ชื่อซอฟต์แวร์ที่ใช้ในการสร้าง HTML;
5) คำหลัก: อธิบายเนื้อหาของหน้า
นอกเหนือจากชื่อข้อมูลเมตาที่กำหนดไว้ล่วงหน้าห้ารายการแล้วคุณยังสามารถใช้การขยายตัวของข้อมูลเมตา ส่วนขยายบางอย่างถูกใช้มากขึ้นเช่น Metadata หุ่นยนต์
<meta name = robots content = noindex/>
แอตทริบิวต์นี้มีค่าที่เครื่องมือค้นหาส่วนใหญ่ได้รับการยอมรับ:
1) Nondex: อย่าทำดัชนีหน้านี้
2) Noarchive: อย่าเก็บถาวรหรือแคชหน้านี้
3) Nofollow: อย่าค้นหาไปตามลิงก์ในหน้านี้ต่อไป
เครื่องมือค้นหาส่วนใหญ่มีแนวทางในการเพิ่มประสิทธิภาพเว็บเพจหรือเว็บไซต์ทั้งหมดและคุณสามารถดูเว็บเพจหรือแนวทางการเพิ่มประสิทธิภาพเว็บไซต์ที่จัดทำโดยเครื่องมือค้นหาที่เกี่ยวข้อง
รหัสอักขระประกาศ<meta charset = utf-8 />
การเข้ารหัสอักขระของเอกสารการประกาศองค์ประกอบเมตาในองค์ประกอบหัวคือ UTF-8 (ค่าเริ่มต้น)
ฟิลด์การจำลอง HTTP ส่วนหัวองค์ประกอบเมตาสามารถใช้ในการจำลองหรือแทนที่ค่าของฟิลด์ส่วนหัว HTTP สามฟิลด์
<meta http-equiv = refresh content = 5/>
การใช้แอตทริบิวต์ HTTP-Equiv เป็นชื่อของชื่อฟิลด์ส่วนหัวที่ระบุส่วนหัวจำลองและค่าฟิลด์จะถูกระบุในคุณสมบัติเนื้อหา ค่าเสริมของคุณสมบัติ HTTP-Equiv มีดังนี้:
1) รีเฟรช: ระบุช่วงเวลาในวินาทีในไม่กี่วินาที นอกจากนี้คุณยังสามารถระบุ URL แยกกันเพื่อให้เบราว์เซอร์โหลดเช่น:
<meta http-equiv = เนื้อหา refressh = 5; http://www.apress.com/>
2) สไตล์เริ่มต้น: ระบุตารางสไตล์ที่เป็นที่ต้องการโดยหน้า
3) ประเภทเนื้อหา: วิธีอื่นในการประกาศการเข้ารหัสอักขระที่ใช้ในหน้า HTML เช่น ::
<meta http-equiv = เนื้อหาประเภทเนื้อหา = text/html charset = utf-8/>องค์ประกอบสไตล์
กำหนดสไตล์ CSS ที่ฝังอยู่ในเอกสาร HTML
<style type = text/css> a {พื้นหลังสี: สีเทา;สไตล์ใหม่ได้รับการออกแบบมาสำหรับองค์ประกอบ A องค์ประกอบสไตล์สามารถปรากฏขึ้นในส่วนต่าง ๆ ของเอกสาร HTML
สื่อที่สามารถระบุสไตล์สำหรับองค์ประกอบสไตล์:
<style media = หน้าจอและ (min-width: 500px) type = text/css> ...... </style>
หน้าจอในแอตทริบิวต์สื่อเป็นประเภทอุปกรณ์และช่วงของค่าเสริมรวมถึง:
1) ทั้งหมด: ใช้สไตล์สำหรับอุปกรณ์ทั้งหมด (ค่าเริ่มต้น);
2) Aural: ใช้สไตล์สำหรับการสังเคราะห์เสียง
3) อักษรเบรลล์: ใช้สไตล์เพื่อถามอุปกรณ์;
4) มือถือ: ใช้สไตล์สำหรับอุปกรณ์พกพา
5) โครงการ: ใช้สไตล์สำหรับโปรเจ็คเตอร์;
6) พิมพ์: เมื่อใช้สไตล์การพิมพ์ตัวอย่างและหน้าพิมพ์
7) หน้าจอ: ใช้สไตล์สำหรับหน้าจอแสดงผลคอมพิวเตอร์
8) TTY: ใช้สไตล์สำหรับอุปกรณ์ที่มีความกว้างเท่ากันเช่นเครื่องผ่านไฟฟ้า
9) ทีวี: ใช้สไตล์สำหรับทีวี
(Min-Width: 500px) คุณสมบัติที่ระบุในการระบุแหล่งที่มาของสื่อรวมถึง:
1) ความสูงความสูง: ระบุความกว้างและความสูงของหน้าต่างเบราว์เซอร์, หน่วย PX, ตัวอย่างเช่น: ความกว้าง: 200px
2) อุปกรณ์ความกว้างของอุปกรณ์ความสูง: ระบุความกว้างและความสูงของอุปกรณ์ทั้งหมด (ไม่ใช่แค่หน้าต่างเบราว์เซอร์) หน่วย PX ตัวอย่างเช่น: มิน-อุปกรณ์ความสูง: 200px
3) ความละเอียด: ความหนาแน่นของพิกเซลของอุปกรณ์หน่วย DPI (จุด/นิ้ว) หรือ DPCM (จุด/ซม.) ตัวอย่างเช่น: ความละเอียดสูงสุด: 600DPI
4) การปฐมนิเทศ: ทิศทางความยาวตามลำดับของอุปกรณ์ที่ระบุค่าเสริมคือภาพบุคคลและภูมิทัศน์
5) ASPICE-RATIO อุปกรณ์-ค่าอัตราส่วน: ระบุอัตราส่วนความกว้างของพิกเซลของหน้าต่างเบราว์เซอร์หรืออุปกรณ์ทั้งหมดตัวอย่างเช่น MIN-ASPECPET-RATIO: 16/9
6) สีขาวดำ: ระบุตัวเลขไบนารีที่ครอบครองโดยแต่ละพิกเซลในแต่ละพิกเซลบนอุปกรณ์สีหรือขาวดำตัวอย่างเช่น: min-monochrome: 2
7) ดัชนีสี: จำนวนสีที่สามารถแสดงได้โดยอุปกรณ์ที่กำหนดเช่น: Max-Color-Idex: 256
8) การสแกน: ระบุโหมดการสแกนของทีวีรวมถึงค่าความก้าวหน้าและการทำงานระหว่างกัน
9) GRID: ประเภทของอุปกรณ์ที่ระบุค่าสนับสนุนคือ 0 และ 1 (1 หมายถึงอุปกรณ์ประเภท GRID -TYPE โดยใช้เนื้อหาการแสดงผลกริดคงที่)
องค์ประกอบเชื่อมโยงมันถูกใช้เพื่อสร้างการเชื่อมต่อระหว่างเอกสาร HTML และทรัพยากรภายนอก (เช่นตารางสไตล์ CSS) องค์ประกอบลิงก์มี 6 แอตทริบิวต์ท้องถิ่นดังนี้:
1) HREF: ระบุ URL ของทรัพยากรที่ชี้ไปที่องค์ประกอบลิงก์;
2) Hreflang: อธิบายภาษาที่ใช้ในทรัพยากรที่เกี่ยวข้อง
3) สื่อ: อธิบายว่าอุปกรณ์ใดที่ใช้ในเนื้อหาที่เกี่ยวข้องและคุณลักษณะของสื่อในสไตล์;
4) Rel: ช่วงของความสัมพันธ์ระหว่างเอกสารและทรัพยากรที่เกี่ยวข้องมีดังนี้:
--- สำรอง: เวอร์ชันทางเลือกของลิงก์ไปยังเอกสารเช่นการแปลภาษาอื่น
--- ผู้แต่ง: ผู้แต่งลิงก์ไปยังเอกสาร;
--- ความช่วยเหลือ: เอกสารคำอธิบายที่เชื่อมต่อกับเอกสารปัจจุบัน;
--- ไอคอน: ระบุแหล่งข้อมูลไอคอน;
--- ใบอนุญาต: ลิงก์ไปยังใบอนุญาตที่เกี่ยวข้องไปยังเอกสารปัจจุบัน;
--- Pingback: ระบุเซิร์ฟเวอร์ Pingback ซึ่งสามารถแจ้งเตือนโดยอัตโนมัติเมื่อเชื่อมโยงจากเว็บไซต์อื่น ๆ ไปยังบล็อก
--- prefetch: รับทรัพยากรล่วงหน้า;
--- สไตล์ชีท: โหลดตารางสไตล์ภายนอก
5) ขนาด: ระบุขนาดของไอคอน
6) ประเภท: ระบุประเภท MIME ของทรัพยากรที่เกี่ยวข้องเช่นข้อความ/CSS, Image/X-ICON
โหลดตารางสไตล์ภายนอก<link rel = stylesheet type = text/css href = styles.css/>
คุณสามารถใช้องค์ประกอบลิงค์หลายรายการเพื่อโหลดทรัพยากรภายนอกหลายตัว
กำหนดโลโก้เว็บไซต์สำหรับหน้า<link rel = ไอคอนทางลัด href = favicon.ico type = image /x-icon />
เมื่อเบราว์เซอร์โหลดด้วยหน้า HTML จะโหลดและแสดงโลโก้เว็บไซต์
หมายเหตุ: หากไฟล์โลโก้เว็บไซต์อยู่ใน /favicon.ico (ไดเรกทอรีรูทของเว็บเซิร์ฟเวอร์) ไม่จำเป็นต้องใช้องค์ประกอบลิงค์ ไม่มีองค์ประกอบลิงค์
ทรัพยากรล่วงหน้า
เบราว์เซอร์สามารถต้องได้รับทรัพยากรที่คาดว่าจะใช้ในไม่ช้า
<link rel = prefetch href =/page2.html/>
หมายเหตุ: เบราว์เซอร์ทั้งหมดไม่สนับสนุนฟังก์ชั่นนี้ในปัจจุบัน
องค์ประกอบสคริปต์ใช้เพื่อเพิ่มสคริปต์ในหน้าคุณสามารถกำหนดสคริปต์และอ้างอิงสคริปต์ในเอกสารโดยตรง แอตทริบิวต์ท้องถิ่นที่ได้รับการสนับสนุนโดยองค์ประกอบนี้มีดังนี้:
1) ประเภท: ประเภทของสคริปต์ที่อ้างอิงหรือกำหนดสำหรับแอตทริบิวต์ของสคริปต์ JavaScript สามารถละเว้นได้
2) SRC: ระบุ URL ของไฟล์สคริปต์ภายนอก
3) เลื่อนเวลา Async (HTML5 การเพิ่มใหม่): ตั้งค่าวิธีการดำเนินการของสคริปต์คุณลักษณะทั้งสองนี้สามารถใช้กับแอตทริบิวต์ SRC ได้เท่านั้น
4) Charset: อธิบายการเข้ารหัสอักขระที่ใช้ในไฟล์สคริปต์ภายนอกซึ่งสามารถใช้กับแอตทริบิวต์ SRC เท่านั้น
กำหนดเอกสารในสคริปต์ที่ฝังอยู่<script> document.write (นี่คือสคริปต์);
โดยค่าเริ่มต้นเบราว์เซอร์จะถูกดำเนินการทันทีที่สคริปต์พบหน้า
โหลดไลบรารีสคริปต์ภายนอกคุณสามารถใส่สคริปต์ลงในไฟล์แยกต่างหากจากนั้นโหลดเอกสาร HTML ด้วยองค์ประกอบสคริปต์
<script src = simple.js> </script>หมดการดำเนินการของสคริปต์
ใช้แอตทริบิวต์ Async และเลื่อนเวลาเพื่อควบคุมวิธีการดำเนินการของสคริปต์
<สคริปต์เลื่อน src = simple2.js> </script>
เนื่องจาก HTML จะถูกดำเนินการเมื่อพบสคริปต์หากสคริปต์ของคุณจำเป็นต้องใช้เนื้อหาในสคริปต์ HTML คุณมักจะต้องใส่สคริปต์ลงในสคริปต์ HTML ที่เกี่ยวข้อง แต่ใน HTML5 จุดประสงค์เดียวกัน คุณสมบัติ.
เมื่อเบราว์เซอร์พบองค์ประกอบสคริปต์พฤติกรรมเริ่มต้นคือการระงับหน้าการประมวลผลในขณะที่โหลดและเรียกใช้สคริปต์และองค์ประกอบสคริปต์แต่ละรายการจะถูกดำเนินการในทางกลับกัน แอตทริบิวต์ Async สามารถโหลดและดำเนินการสคริปต์แบบอะซิงโครนัสในระหว่างการแยกวิเคราะห์เอกสาร HTML ของเบราว์เซอร์
<script async src = simple2.js> </script>องค์ประกอบ noscript
องค์ประกอบ noscript ใช้เพื่อแสดงเนื้อหาบางอย่างให้กับผู้ใช้ที่ปิดการใช้งาน JavaScript หรือเบราว์เซอร์ไม่รองรับ JavaScript
<noscript> <h1> JavaScript เป็นสิ่งจำเป็น!
อีกทางเลือกหนึ่งคือนำไปสู่ URL อื่นเมื่อเบราว์เซอร์ไม่รองรับ JavaScript
<noscript> <meta http-equiv = refresh content = 0;