Iframes và javascript hmtl

27/09
Thạch
HTML
0
786

Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.

Khung nội tuyến HTML

Khung nội tuyến HTML được sử dụng để hiển thị một trang trong một trang web.

Cú pháp iframe HTML

<iframe>Thẻ HTML chỉ định một khung nội tuyến.
Khung nội tuyến được sử dụng để nhúng tài liệu khác vào tài liệu HTML hiện tại.

Cú pháp

<iframe src="url" title="description"></iframe>

Mẹo: Một phương pháp hay là luôn bao gồm một titlethuộc tính cho <iframe>. Điều này được sử dụng bởi trình đọc màn hình để đọc nội dung của iframe là gì.

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

Sử dụng các thuộc tính heightvà widthđể chỉ định kích thước của iframe.
Chiều cao và chiều rộng được chỉ định bằng pixel theo mặc định:

Thí dụ

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

Hoặc bạn có thể thêm stylethuộc tính và sử dụng CSS heightvà width các thuộc tính:

Thí dụ

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

Iframe - Xóa đường viền

Theo mặc định, iframe có đường viền xung quanh nó.
Để xóa đường viền, hãy thêm stylethuộc tính và sử dụng thuộc tính CSS border:

Thí dụ

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

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

Thí dụ

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

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

Một iframe có thể được sử dụng làm khung đích cho một liên kết.
Các targetthuộc tính của liên kết phải tham khảo các namethuộc tính của iframe:

Thí dụ

<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>

Tóm tắt chương

<iframe>Thẻ HTML chỉ định khung nội tuyến
Các src thuộc tính xác định URL của trang nhúng
Luôn bao gồm một titlethuộc tính (dành cho trình đọc màn hình)
Các heightvà widthcác thuộc tính quy định cụ thể kích thước của khung nội tuyến
Sử dụng border:none;để xóa đường viền xung quanh iframe

JavaScript HTML

JavaScript làm cho các trang HTML trở nên động và tương tác hơn.

Thẻ HTML <script>

<script>Thẻ HTML được sử dụng để xác định tập lệnh phía máy khách (JavaScript).
Phần <script>tử chứa các câu lệnh script hoặc nó trỏ đến một tệp script bên ngoài thông qua srcthuộc tính.
Các ứng dụng phổ biến cho JavaScript là thao tác hình ảnh, xác thực biểu mẫu và các thay đổi động của nội dung.
Để chọn một phần tử HTML, JavaScript thường sử dụng document.getElementById()phương pháp này nhất.
Ví dụ JavaScript này viết "Xin chào JavaScript!" vào một phần tử HTML với id = "demo":

Thí dụ

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

Thay đổi nội dung JavaScript

Dưới đây là một số ví dụ về những gì JavaScript có thể làm:

Thí dụ

JavaScript có thể thay đổi nội dung:

document.getElementById("demo").innerHTML = "Hello JavaScript!";

Thí dụ

JavaScript có thể thay đổi kiểu:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

Thí dụ

JavaScript có thể thay đổi các thuộc tính:

document.getElementById("image").src = "picture.gif";

Thẻ HTML <noscript>

<noscript>Thẻ HTML xác định nội dung thay thế sẽ được hiển thị cho người dùng đã tắt tập lệnh trong trình duyệt của họ hoặc có trình duyệt không hỗ trợ tập lệnh:

Thí dụ

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

Thẻ tập lệnh HTML

Tag	Description
<script>	Xác định một tập lệnh phía máy khách
<noscript>	Xác định nội dung thay thế cho người dùng không hỗ trợ tập lệnh phía máy khách