Các ví dụ cơ bản về HTML
Trong chương này, chúng tôi sẽ trình bày một số ví dụ HTML cơ bản.
Đừng lo lắng nếu chúng tôi sử dụng các thẻ mà bạn chưa tìm hiểu.
Tài liệu HTML
Tất cả các tài liệu HTML phải bắt đầu bằng khai báo loại tài liệu <!DOCTYPE html>:.
Bản thân tài liệu HTML bắt đầu bằng <html>và kết thúc bằng </html>.
Phần hiển thị của tài liệu HTML nằm giữa <body>và </body>.
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Khai báo <! DOCTYPE>
Khai báo <!DOCTYPE>đại diện cho loại tài liệu và giúp các trình duyệt hiển thị các trang web một cách chính xác.
Nó chỉ được xuất hiện một lần, ở đầu trang (trước bất kỳ thẻ HTML nào).
Khai báo <!DOCTYPE>không phân biệt chữ hoa và chữ thường.
Khai báo <!DOCTYPE>cho HTML5 là:
<!DOCTYPE html>
Tiêu đề HTML
Các tiêu đề HTML được xác định bằng các thẻ <h1>to <h6>.
<h1>xác định tiêu đề quan trọng nhất. <h6>xác định tiêu đề ít quan trọng nhất:
Thí dụ
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Đoạn văn HTML
Các đoạn HTML được xác định bằng <p>thẻ:
Thí dụ
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Liên kết HTML
Các liên kết HTML được xác định bằng <a>thẻ:
Thí dụ
<a href="https://www.w3schools.com">This is a link</a>
Đích của liên kết được chỉ định trong hrefthuộc tính.
Các thuộc tính được sử dụng để cung cấp thông tin bổ sung về các phần tử HTML.
Bạn sẽ tìm hiểu thêm về các thuộc tính trong chương sau.
Hình ảnh HTML
Hình ảnh HTML được xác định bằng <img>thẻ.
Tệp nguồn ( src), văn bản thay thế ( alt)
widthvà heightđược cung cấp dưới dạng các thuộc tính:
Thí dụ
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Làm thế nào để xem nguồn HTML?
Bạn đã bao giờ xem một trang Web và tự hỏi "Này! Làm thế nào họ làm được điều đó?"
Xem mã nguồn HTML:
Nhấp chuột phải vào trang HTML và chọn "Xem nguồn trang" (trong Chrome) hoặc "Xem nguồn" (trong Edge) hoặc tương tự trong các trình duyệt khác. Thao tác này sẽ mở ra một cửa sổ chứa mã nguồn HTML của trang.
Kiểm tra một phần tử HTML:
Nhấp chuột phải vào một phần tử (hoặc một vùng trống) và chọn "Kiểm tra" hoặc "Kiểm tra phần tử" để xem những phần tử nào được tạo thành (bạn sẽ thấy cả HTML và CSS). Bạn cũng có thể chỉnh sửa HTML hoặc CSS một cách nhanh chóng trong bảng Phần tử hoặc Kiểu mở ra.