เนื้อหาฝังตัว HTML5

การฝังเนื้อหาในเอกสาร HTML สามารถทำให้หน้าเว็บของคุณสมบูรณ์ยิ่งขึ้น

การใช้องค์ประกอบ IMG สามารถฝังอยู่ในภาพในเอกสาร HTML

1) SRC: แสดง URL ของภาพ;

2) alt: ข้อความอุปกรณ์;

3) ความสูง: ความสูงของภาพ;

4) ความกว้าง: ความกว้างของภาพ;

5) USEMAP: กำหนดภาพเป็นการแมปภาพลูกค้า

6) ISMAP: ภาพถูกกำหนดเป็นการแมปรูปภาพเซิร์ฟเวอร์

ต่อไปนี้แนะนำการทำงานของภาพโดยเฉพาะ

ภาพสามารถฝังด้วยคุณสมบัติ SRC และ Alt

 <img src = triathlon.png <img src = triathlon.png </a>

ด้วยวิธีนี้หลังจากคลิกที่ภาพเบราว์เซอร์จะถูกสำรวจไปยัง URL ที่ระบุโดยคุณสมบัติ HREF ขององค์ประกอบหลัก A. แอตทริบิวต์ ISMAP ไปยังองค์ประกอบ IMG สร้างไดอะแกรมการตอบสนองพาร์ติชันของเซิร์ฟเวอร์: ไดอะแกรม:

 <a href = otterpage.html> <img src = triathlon.png </a>

ด้วยวิธีนี้ตำแหน่งของการคลิกของภาพจะถูกแนบกับ URL

http: //bjpowernode/listings/otherpage.html?

แผนภาพการตอบสนองของพาร์ติชันเซิร์ฟเวอร์มักจะหมายความว่าเซิร์ฟเวอร์ตอบสนองต่อการคลิกที่แตกต่างกันของผู้ใช้บนภาพบนภาพ

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

บทบาทขององค์ประกอบแผนที่คือการกำหนดภาพการแมปภาพลูกค้า องค์ประกอบแผนที่มักจะมีคุณสมบัติ:

1) ID: ต้องกำหนดโลโก้ที่ไม่ซ้ำกันสำหรับฉลากแผนที่

2) ชื่อ: ไม่บังคับชื่อ

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

1) HREF: URL ที่ควรโหลดเบราว์เซอร์หลังจากคลิกพื้นที่นี้

2) Alt: เนื้อหาการทดแทน, คุณลักษณะที่สอดคล้องกับองค์ประกอบ IMG;

3) เป้าหมาย: แสดงบริบทการท่องเว็บของ URL คุณลักษณะที่สอดคล้องกันขององค์ประกอบพื้นฐาน

4) Rel: อธิบายความสัมพันธ์ระหว่างเอกสารปัจจุบันและเอกสารเป้าหมายและแอตทริบิวต์ที่สอดคล้องกันขององค์ประกอบลิงก์;

5) สื่อ: ปานกลางคุณลักษณะที่สอดคล้องกันขององค์ประกอบสไตล์;

6) Hreflang: ภาษาของเอกสารเป้าหมาย;

7) ประเภท: เอกสารประเภท MIME ของเอกสารเป้าหมาย

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

1) Rect: มันหมายถึงพื้นที่สี่เหลี่ยม แอตทริบิวต์ Coords ที่สอดคล้องกันจะต้องประกอบด้วยการแยกจำนวนเต็มสี่ครั้ง (A, B, C, D) คั่นด้วยเครื่องหมายจุลภาค: A หมายถึงด้านซ้ายของขอบซ้ายและสี่เหลี่ยมผืนผ้าของภาพ; ของสี่เหลี่ยมผืนผ้า;

2) วงกลม: มันหมายถึงพื้นที่วงกลม แอตทริบิวต์ Coords จะต้องประกอบด้วยจำนวนเต็มสามตัวคั่นด้วยเครื่องหมายจุลภาค (A, B, C): A หมายถึงระยะห่างจากขอบซ้ายของภาพไปยังหัวใจกลม;

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

4) ค่าเริ่มต้น: พื้นที่เริ่มต้นซึ่งครอบคลุมภาพทั้งหมด ไม่จำเป็นต้องให้ค่า Coords

ต่อไปนี้เป็นตัวอย่าง:

 <p> <img src = triathlon.png usemap =#mymap <ชื่อแผนที่ = mymap> <rea href = swimpage.html รูปร่าง = rect coords = 3,5,68,62 ml รูปร่าง = rect coords = 70,5,130,62 <rea href = otherpage.html รูปร่าง = ค่าเริ่มต้น </pal>

สคริปต์ด้านบนกำหนดว่าหากผู้ใช้คลิกส่วนว่ายน้ำของรูปภาพเบราว์เซอร์จะถูกนำทางไปยัง Swimpage.html

องค์ประกอบ IFRAME สามารถฝังอยู่ในเอกสารอื่นในเอกสาร HTML ที่มีอยู่ แอตทริบิวต์ที่สนับสนุนโดยองค์ประกอบนี้มีดังนี้:

1) SRC: URL ของเอกสารที่แสดงใน iframe;

2) SRCDOC: ระบุเนื้อหา HTML ของหน้าเว็บที่แสดงในหน้าเว็บที่แสดงใน iframe;

3) ชื่อ: ชื่อของ iframe สามารถใช้ในเป้าหมายของบริบทและองค์ประกอบอื่น ๆ (เช่น A, รูปแบบ, ปุ่ม, อินพุตและฐาน)

4) ความกว้าง: กำหนดความกว้างของ iframe;

5) ความสูง: มาตรฐานความสูงของ iframe;

6) Sandbox: ขีด จำกัด เพิ่มเติมของเนื้อหาใน iframe ค่าของการสนับสนุนรวมถึง:

----: ใช้ข้อ จำกัด ทั้งหมดด้านล่าง;

--- อนุญาตให้ Same-Orgin: อนุญาตให้เนื้อหา IFRAME ถือเป็นแหล่งข้อมูลเดียวกับส่วนที่เหลือของเอกสาร

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

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

 <iframe src = demo_iframe.htm seamless> </iframe>

ด้านล่างเป็นตัวอย่างที่สมบูรณ์ของ iframe:

 <header> <h1> สิ่งที่ฉันชอบ </h1> <av> <ul> <li> <a href = fruits.html target = myFrame> ผลไม้ ilike </a> </li> <li> <a href = Activities.html target = myFrame> กิจกรรม ilike </a> </li></ul> </av> </header> <iframe name = myFrame width = 300 height = 100/>

องค์ประกอบวัตถุและองค์ประกอบฝังใช้เพื่อขยายความจุของเบราว์เซอร์และเพิ่มการรองรับปลั๊ก

องค์ประกอบฝังตัวกำหนดเนื้อหาที่ฝังอยู่คุณลักษณะการสนับสนุนมีดังนี้:

1) ความสูง: ตั้งค่าความสูงของเนื้อหาที่ฝังอยู่

2) SRC: URL ของเนื้อหา;

3) ประเภท: กำหนดประเภท MIME ของเนื้อหาที่ฝังอยู่เพื่อให้เบราว์เซอร์รู้วิธีจัดการกับมัน;

4) ความกว้าง: ตั้งค่าความกว้างของเนื้อหาที่ฝังอยู่

คุณลักษณะอื่น ๆ ที่คุณใช้จะถือเป็นพารามิเตอร์ของปลั๊กหรือเนื้อหา ดูตัวอย่างด้านล่าง:

 <ฝัง src = http://www.youtube.com/v/qza60hca9s?

แอ็ตทริบิวต์ที่อนุญาตให้ใช้งานได้ใช้ด้านบนเพื่อตั้งค่าว่าจะเปิดใช้งานฟังก์ชั่นการดูแบบเต็มหน้าจอหรือไม่

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

 <ความกว้างของวัตถุ = 560 ความสูง = 349 data = http: // titan/myiimaginaryfile> <param name = ค่าที่อนุญาตให้ใช้งานได้ = true/> </b> เราไม่สามารถแสดงเนื้อหา </object>

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

องค์ประกอบความคืบหน้าหมายถึงแถบความคืบหน้า คุณลักษณะการสนับสนุน ได้แก่ :

1) สูงสุด: ระบุค่าสูงสุดของงาน

2) ค่า: กำหนดความคืบหน้าปัจจุบันระหว่างค่าของแอตทริบิวต์ 0 และสูงสุด;

3) แบบฟอร์ม: หนึ่งหรือมากกว่าหนึ่งรูปแบบที่เป็นของ

เมื่อแอตทริบิวต์สูงสุดถูกละเว้นช่วงคือ 0 ถึง 1 และแอตทริบิวต์ค่าจะใช้หมายเลขลอย -จุดเพื่อแสดงถึงความคืบหน้าเช่น 0.3 หมายถึง 30%

 <progress id = myProgress value = 10 max = 100> </progress> <p> <button type = button value = 30> 30%</pution> <button type = button = 60> 60%</butt on> < ประเภทปุ่ม = ค่าปุ่ม = 90> 90%</button> </p> <script> ปุ่ม var = document.getElementByTagname ('ปุ่ม'); .length;

ตัวอย่างข้างต้นแสดงให้เห็นถึงค่าที่แตกต่างกันเพื่อแสดงปุ่มที่แตกต่างกันเพื่อแสดงค่าที่แตกต่างกัน

องค์ประกอบมิเตอร์แสดงค่าที่แน่นอนภายในช่วงที่กำหนด คุณลักษณะการสนับสนุน ได้แก่ :

1) ขั้นต่ำและสูงสุด: ระบุช่วงของขอบเขตเท่านั้นคุณสามารถใช้จุดลอยตัว

2) ต่ำ: ระบุช่วงค่าใช้จ่ายต่ำความเป็นเจ้าของภายใต้นั้นถือว่าต่ำเกินไป

3) สูง: ระบุช่วงที่มีค่าสูงค่าทั้งหมดด้านบนจะถือว่าสูงเกินไป

4) Optimum: ระบุค่าที่ดีที่สุด;

5) ค่า: ต้องค่าปัจจุบันของการวัด;

6) แบบฟอร์ม: หนึ่งหรือมากกว่าหนึ่งรูปแบบที่เป็นของ

 <meter id = mymeter value = 90 min = 10 max = 100 low = 40 high = 80Optimum = 60> </meter> <p> <button type = 30> 30%</button> ค่า utton = 60> 60%< /ปุ่ม> <button type = ค่าปุ่ม = 90> 90%</button> </p> <script> var buttons = document.getElementByTagname); = 0;

เมื่อค่าขององค์ประกอบมิเตอร์ต่ำเกินไปและสูงเกินไปและค่าที่ดีที่สุดเบราว์เซอร์จะนำเสนอในรูปแบบที่แตกต่างกัน