HTML Iframes
HTML iframe ใช้เพื่อแสดงหน้าเว็บภายในหน้าเว็บ
ไวยากรณ์ HTML Iframe
แท็ก HTML <iframe>ระบุเฟรมอินไลน์
กรอบอินไลน์ใช้เพื่อฝังเอกสารอื่นภายในเอกสาร HTML ปัจจุบัน
ไวยากรณ์
<iframe src="url" title="description"></iframe>
เคล็ดลับ:แนวทางปฏิบัติที่ดีที่จะรวม
titleแอตทริบิวต์สำหรับไฟล์<iframe>. ใช้โดยโปรแกรมอ่านหน้าจอเพื่ออ่านว่าเนื้อหาของ iframe คืออะไร
Iframe - ตั้งค่าความสูงและความกว้าง
ใช้ แอตทริบิวต์ heightและwidthเพื่อระบุขนาดของ iframe
ความสูงและความกว้างถูกระบุเป็นพิกเซลโดยค่าเริ่มต้น:
ตัวอย่าง
<iframe src="demo_iframe.htm" height="200" width="300"
title="Iframe Example"></iframe>
หรือคุณสามารถเพิ่มstyleแอตทริบิวต์และใช้ CSS heightและwidth
คุณสมบัติ:
ตัวอย่าง
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"
title="Iframe Example"></iframe>
Iframe - ลบขอบ
ตามค่าเริ่มต้น iframe จะมีเส้นขอบล้อมรอบ
หากต้องการลบเส้นขอบ ให้เพิ่มstyleแอตทริบิวต์และใช้คุณสมบัติ CSS
border:
ตัวอย่าง
<iframe src="demo_iframe.htm" style="border:none;"
title="Iframe Example"></iframe>
ด้วย CSS คุณยังสามารถเปลี่ยนขนาด สไตล์ และสีของเส้นขอบของ iframe ได้:
ตัวอย่าง
<iframe src="demo_iframe.htm" style="border:2px solid red;"
title="Iframe Example"></iframe>
Iframe - กำหนดเป้าหมายสำหรับลิงก์
iframe สามารถใช้เป็นเฟรมเป้าหมายสำหรับลิงก์ได้
แอตทริบิวต์targetของลิงก์ต้องอ้างอิงถึงnameแอตทริบิวต์ของ iframe:
ตัวอย่าง
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
สรุปบท
- แท็ก HTML
<iframe>ระบุเฟรมอินไลน์ - แอตทริบิวต์
srcกำหนด URL ของหน้าที่จะฝัง - รวม
titleแอตทริบิวต์เสมอ (สำหรับโปรแกรมอ่านหน้าจอ) heightและแอตทริบิวต์widthระบุขนาดของ iframe- ใช้
border:none;เพื่อลบเส้นขอบรอบ ๆ iframe
แบบฝึกหัด HTML
แท็ก iframe HTML
| Tag | Description |
|---|---|
| <iframe> | Defines an inline frame |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา