HTML là gì?
- HTML là viết tắt của Hyper Text Markup Language
- HTML là ngôn ngữ đánh dấu tiêu chuẩn để tạo các trang Web
- HTML mô tả cấu trúc của một trang Web
- HTML bao gồm một loạt các phần tử
- Các phần tử HTML cho trình duyệt biết cách hiển thị nội dung
- Các phần tử HTML gắn nhãn các phần nội dung như "đây là một tiêu đề", "đây là một đoạn văn", "đây là một liên kết", v.v.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Giải thích ví dụ
- Các
<!DOCTYPE html>tuyên bố xác định rằng tài liệu này là một tài liệu HTML5 - Phần
<html>tử là phần tử gốc của một trang HTML - Phần
<head>tử chứa thông tin meta về trang HTML - Phần
<title>tử chỉ định tiêu đề cho trang HTML (được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang) - Phần
<body>tử xác định nội dung của tài liệu và là vùng chứa tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách, v.v. - Phần
<h1>tử xác định một tiêu đề lớn - Phần
<p>tử xác định một đoạn văn
Phần tử HTML là gì?
Phần tử HTML được xác định bởi thẻ bắt đầu, một số nội dung và thẻ kết thúc:
Phần tử HTML là tất cả mọi thứ từ thẻ bắt đầu đến thẻ kết thúc:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
Lưu ý: Một số phần tử HTML không có nội dung (như phần tử <br>). Các phần tử này được gọi là phần tử rỗng. Các phần tử trống không có thẻ kết thúc!
Trình duyệt web
Mục đích của trình duyệt web (Chrome, Edge, Firefox, Safari) là đọc các tài liệu HTML và hiển thị chúng một cách chính xác.
Trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để xác định cách hiển thị tài liệu:
Cấu trúc trang HTML
Dưới đây là hình ảnh trực quan về cấu trúc trang HTML:
Lưu ý: Chỉ nội dung bên trong phần <body> (vùng trắng ở trên) mới được hiển thị trong trình duyệt.
Khai báo <! DOCTYPE>
Các <!DOCTYPE>tuyên bố đại diện cho các loại tài liệu, và giúp các trình duyệt để trang web hiển thị 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).
Các <!DOCTYPE>tuyên bố không phải là trường hợp nhạy cảm.
Các <!DOCTYPE>tuyên bố 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>Các đoạ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">Phần tử HTML
Phần tử HTML được xác định bởi thẻ bắt đầu, một số nội dung và thẻ kết thúc:
Phần tử HTML là tất cả mọi thứ từ thẻ bắt đầu đến thẻ kết thúc:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
Lưu ý: Một số phần tử HTML không có nội dung (như phần tử <br>). Các phần tử này được gọi là phần tử rỗng. Các phần tử trống không có thẻ kết thúc!
Các phần tử HTML lồng nhau
Các phần tử HTML có thể được lồng vào nhau (điều này có nghĩa là các phần tử có thể chứa các phần tử khác).
Tất cả các tài liệu HTML đều bao gồm các phần tử HTML lồng nhau.
Ví dụ sau đây chứa bốn phần tử HTML ( <html>, <body>, <h1> và <p>):
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Giải thích ví dụ
Phần <html>tử là phần tử gốc và nó định nghĩa toàn bộ tài liệu HTML.
Nó có một thẻ bắt đầu <html>và một thẻ kết thúc </html>.
Sau đó, bên trong <html>phần tử có một <body> phần tử:
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>Phần <body>tử xác định nội dung của tài liệu.
Nó có một thẻ bắt đầu <body>và một thẻ kết thúc </body>.
Sau đó, bên trong <body>phần tử có hai phần tử khác: <h1>và <p>:
<h1>My First Heading</h1>
<p>My first paragraph.</p>Phần <h1>tử xác định một tiêu đề.
Nó có thẻ bắt đầu <h1>và thẻ kết thúc </h1>:
<h1>My First Heading</h1>Phần <p>tử xác định một đoạn văn.
Nó có thẻ bắt đầu <p>và thẻ kết thúc </p>:
<p>My first paragraph.</p>Không bao giờ bỏ qua thẻ kết thúc
Một số phần tử HTML sẽ hiển thị chính xác, ngay cả khi bạn quên thẻ kết thúc:
Thí dụ
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>Tuy nhiên, đừng bao giờ dựa vào điều này! Kết quả không mong muốn và có thể xảy ra lỗi nếu bạn quên thẻ kết thúc!
Phần tử HTML trống
Phần tử HTML không có nội dung được gọi là phần tử trống.
Các <br>thẻ định nghĩa một ngắt dòng, và là một yếu tố có sản phẩm nào mà không có một thẻ đóng:
Thí dụ
<p>This is a <br> paragraph with a line break.</p>HTML không phân biệt chữ hoa chữ thường
Các thẻ HTML không phân biệt chữ hoa chữ thường: <P>có nghĩa là giống như <p>.
Tiêu chuẩn HTML không yêu cầu thẻ chữ thường, nhưng W3C đề xuất chữ thường trong HTML và yêu cầu chữ thường cho các loại tài liệu nghiêm ngặt hơn như XHTML.
Tại W3Schools, chúng tôi luôn sử dụng các tên thẻ viết thường.
Tham chiếu thẻ HTML
Tham chiếu thẻ của W3Schools chứa thông tin bổ sung về các thẻ này và thuộc tính của chúng.
| Tag | Description |
|---|---|
| <html> | Defines the root of an HTML document |
| <body> | Defines the document's body |
| <h1> to <h6> | Defines HTML headings |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham chiếu thẻ HTML của chúng tôi .
Thuộc tính HTML
- Tất cả các phần tử HTML có thể có các thuộc tính
- Các thuộc tính cung cấp thông tin bổ sung về các phần tử
- Các thuộc tính luôn được chỉ định trong thẻ bắt đầu
- Các thuộc tính thường có trong các cặp tên / giá trị như: name = "value"
Thuộc tính href
Các <a>thẻ định nghĩa một siêu liên kết. Các hrefthuộc tính xác định URL của trang liên kết đi vào:
Thí dụ
<a href="https://www.w3schools.com">Visit W3Schools</a>Bạn sẽ tìm hiểu thêm về các liên kết trong chương Liên kết HTML của chúng tôi .
Thuộc tính src
Các <img>thẻ được sử dụng để nhúng một hình ảnh trong một trang HTML. Các srcquy định cụ thể thuộc tính đường dẫn đến hình ảnh sẽ được hiển thị:
Thí dụ
<img src="img_girl.jpg">Có hai cách để chỉ định URL trong src thuộc tính:
1. URL tuyệt đối - Liên kết đến một hình ảnh bên ngoài được lưu trữ trên một trang web khác. Ví dụ: src = "https://www.w3schools.com/images/img_girl.jpg".
Ghi chú: Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể đột ngột bị xóa hoặc thay đổi.
2. URL tương đối - Liên kết đến một hình ảnh được lưu trữ trong trang web. Ở đây, URL không bao gồm tên miền. Nếu URL bắt đầu mà không có dấu gạch chéo, nó sẽ liên quan đến trang hiện tại. Ví dụ: src = "img_girl.jpg". Nếu URL bắt đầu bằng dấu gạch chéo, nó sẽ liên quan đến miền. Ví dụ: src = "/ images / img_girl.jpg".
Mẹo: Tốt nhất là sử dụng các URL tương đối. Chúng sẽ không bị hỏng nếu bạn thay đổi tên miền.
Thuộc tính chiều rộng và chiều cao
Các <img>thẻ cũng nên chứa widthvà heightcác thuộc tính, xác định chiều rộng và chiều cao của hình ảnh (tính bằng pixel):
Thí dụ
<img src="img_girl.jpg" width="500" height="600">Thuộc tính alt
altThuộc tính bắt buộc cho <img> thẻ chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh vì lý do nào đó không thể hiển thị. Điều này có thể do kết nối chậm hoặc lỗi trong srcthuộc tính hoặc nếu người dùng sử dụng trình đọc màn hình.
Thí dụ
<img src="img_girl.jpg" alt="Girl with a jacket">Thí dụ
Xem điều gì sẽ xảy ra nếu chúng tôi cố gắng hiển thị một hình ảnh không tồn tại:
<img src="img_typo.jpg" alt="Girl with a jacket">Bạn sẽ tìm hiểu thêm về hình ảnh trong chương Hình ảnh HTML của chúng tôi .
Thuộc tính kiểu
Các stylethuộc tính được sử dụng để thêm phong cách cho một yếu tố, chẳng hạn như màu sắc, font chữ, kích thước, và nhiều hơn nữa.
Thí dụ
<p style="color:red;">This is a red paragraph.</p>Bạn sẽ tìm hiểu thêm về các kiểu trong chương Kiểu HTML của chúng tôi .
Thuộc tính lang
Bạn phải luôn bao gồm langthuộc tính bên trong <html>thẻ, để khai báo ngôn ngữ của trang Web. Điều này có nghĩa là để hỗ trợ các công cụ tìm kiếm và trình duyệt.
Ví dụ sau chỉ định tiếng Anh là ngôn ngữ:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>Mã quốc gia cũng có thể được thêm vào mã ngôn ngữ trong lang thuộc tính. Vì vậy, hai ký tự đầu tiên xác định ngôn ngữ của trang HTML và hai ký tự cuối cùng xác định quốc gia.
Ví dụ sau chỉ định tiếng Anh là ngôn ngữ và Hoa Kỳ là quốc gia:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>Bạn có thể xem tất cả các mã ngôn ngữ trong Tham chiếu mã ngôn ngữ HTML của chúng tôi .
Thuộc tính tiêu đề
Các titlethuộc tính định nghĩa một số thông tin thêm về một phần tử.
Giá trị của thuộc tính title sẽ được hiển thị dưới dạng chú giải công cụ khi bạn di chuột qua phần tử:
Thí dụ
<p title="I'm a tooltip">This is a paragraph.</p>Chúng tôi đề xuất: Luôn sử dụng thuộc tính chữ thường
Chuẩn HTML không yêu cầu tên thuộc tính chữ thường.
Thuộc tính title (và tất cả các thuộc tính khác) có thể được viết bằng chữ hoa hoặc chữ thường như title hoặc TITLE .
Chúng tôi đề xuất: Luôn trích dẫn các giá trị thuộc tính
Tiêu chuẩn HTML không yêu cầu dấu ngoặc kép xung quanh các giá trị thuộc tính.
Tuy nhiên, W3C khuyến nghị trích dẫn trong HTML và yêu cầu trích dẫn cho các loại tài liệu nghiêm ngặt hơn như XHTML.
Tốt:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Xấu:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>Đôi khi bạn phải sử dụng dấu ngoặc kép. Ví dụ này sẽ không hiển thị chính xác thuộc tính title, vì nó chứa khoảng trắng:
Thí dụ
<p title=About W3Schools>Tại W3Schools, chúng tôi luôn sử dụng dấu ngoặc kép xung quanh các giá trị thuộc tính.
Báo giá đơn hay kép?
Dấu ngoặc kép xung quanh các giá trị thuộc tính là cách phổ biến nhất trong HTML, nhưng cũng có thể sử dụng dấu ngoặc kép.
Trong một số trường hợp, khi bản thân giá trị thuộc tính chứa dấu ngoặc kép, cần sử dụng dấu ngoặc kép:
<p title='John "ShotGun" Nelson'>Hoặc ngược lại:
<p title="John 'ShotGun' Nelson">Tóm tắt chương
- Tất cả các phần tử HTML có thể có các thuộc tính
- Các
hrefthuộc tính của<a>quy định cụ thể các URL của trang liên kết đi vào - Các
srcthuộc tính của<img>quy định cụ thể đường dẫn đến hình ảnh sẽ được hiển thị - Các thuộc tính
widthvà cung cấp thông tin kích thước cho hình ảnhheight<img> - Các
altthuộc tính của<img>cung cấp một văn bản thay thế cho hình ảnh - Các
stylethuộc tính được sử dụng để thêm phong cách cho một yếu tố, chẳng hạn như màu sắc, font chữ, kích thước, và nhiều hơn nữa - Các
langthuộc tính của<html>thẻ tuyên bố ngôn ngữ của trang web - Các
titlethuộc tính định nghĩa một số thông tin thêm về một yếu tố
by Jillur Rahman
Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
Follow him @ Twitter | Facebook | Google Plus
No Comment