By GokiSoft.com| 20:10 24/05/2020|
Tài Liệu HTML

HTML Iframes


Một HTML iframe được sử dụng để hiển thị một trang web bên trong một trang web.





Cú pháp iframe


Một HTML iframe được định nghĩa bằng thẻ <iframe> :

<iframe src="URL"></iframe>


Thuộc tính  src xác định URL (địa chỉ trang web) của khung trang nội tuyến.



Iframe -  Đặt chiều cao và chiều rộng


Sử dụng các thuộc tính height và width để xác định kích thước của iframe.

Chiều cao và chiều rộng được xác định dưới dang pixel theo mặc định:

ví dụ

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>
<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

</body>
</html>



Hoặc bạn có thể sử dụng CSS để đặt chiều cao vào chiều rộng của iframe:

ví dụ

<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" style="height:200px;width:300px"></iframe>

</body>
</html>





Iframe - Loại bỏ viền


Theo mặc định, một iframe có một đường viền xung quanh nó.

Để loại bỏ đường viền, thêm thuộc tính  style và sử dụng thuộc tính CSS  border :

ví dụ

<iframe src="demo_iframe.htm" style="border:none;"></iframe>
<!DOCTYPE html>
<html>
<body>

<h2>Remove the Iframe Border</h2>
<p>To remove the default border of the iframe, use CSS:</p>

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

</body>
</html>


Với CSS, bạn cũng có thể thay đổi kích cỡ, phong cách và màu của đường viền iframe:

ví dụ

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
<!DOCTYPE html>
<html>
<body>

<h2>Custom Iframe Border</h2>
<p>With CSS, you can also change the size, style and color of the iframe's border:</p>

<iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>

</body>
</html>







Iframe - Mục tiêu cho một liên kết


Một iframe có thể được sử dụng như khung mục tiêu cho một đường dẫn.

Thuộc tính target của đường dẫn phải tham chiếu đến thuộc tính  name của iframe:

ví dụ

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>

</body>
</html>





Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó