Nhóm thẻ hiển thị danh sách
Thẻ <ul> <li>
Trong HTML, chúng ta sử dụng cặp thẻ <ul> <li> để hiển thị đoạn văn bản dưới dạng danh sách. Và danh sách được tạo ra bởi cặp <ul> <li> sẽ không có “thứ tự”
Như các bạn thấy. mặc định hiển thị của nó sẽ là dấu chấm tròn màu đen.
Để thay đổi dấu chấm tròn này chúng ta có thể kết hợp với thuộc tính style của CSS như sau
Với thuộc tính này sẽ nhận vào 3 giá trị:
- circle: hình tròn màu trắng viền đen
- square: hình vuông màu đen
- none: không hiển thị ký hiệu
Thẻ <ol> <li>
Tương tự với <ul><li>, chúng có cặp thẻ <ol> <li> cũng được sử dụng để tạo danh sách/ Tuy nhiên, sự khác biệt ở đây là về “thứ tự”. Như phần trên các bạn đã thấy, <ul> <li> sẽ không có “thứ tự”. Còn đối với <ol> <li> sẽ tạo ra danh sách có thứ tự.
Mặc định của nó sẽ bắt đầu từ 1
Để thay đổi mặc định này, các bạn sẽ sử dụng thuộc tính type trong thẻ <ol>
Các giá trị nhận vào của type bao gồm:
- A
- a
- I
- i
- 1 (đây là mặc định)
Thẻ <dl> <dt> <dd>
Trong HTML, <dl> <dt> <dd> được sử dụng để tạo danh sách định nghĩa, và mỗi thẻ sẽ có 1 ý nghĩa sử dụng riêng của nó.
- <dl>: đại diện cho danh sách định nghĩa, được sử dụng để bao bọc <dt> <dd>
- <dt>: định nghĩa tiêu đề đặt trước <dd>
- <dd>: mô tả chi tiết về tiêu đề đã được định nghĩa ở <dt>
Nhóm thẻ hiển thị hình ảnh
Thẻ <picture>
Thẻ <picture> được sử dụng cung cấp nhiều hình ảnh khác nhau để trình duyệt có thể lựa chọn và hiển thị hình ảnh phù hợp nhất dựa trên các điều kiện như kích thước màn hình. độ phân giải v.v..
Trong thẻ <picture>, HTML cung cấp cho chúng ta thêm 2 thẻ cơ bản với các ý nghĩa sử dụng khác nhau
- <source>: được sử dụng để chỉ định các nguồn ảnh khác nhau dựa trên điều kiện nhất định nào đó. Có thể kết hợp thêm với thuộc tính srcset để chỉ định các hình ảnh với độ phân giải, kích thước khác nhau.
- <img>: có thể xem như là hình ảnh dự phòng dùng để hiển thị nếu như trình duyệt không hỗ trợ các điều kiện ở <source>
Ở ví dụ trên các bạn có thể hiểu như sau:
- Hình large-image.jpg sẽ được hiển thị nếu như kích thước màn hình lớn hơn hoặc bằng 768px
- Hình medium-image.jpg sẽ được hiển thị nếu như kích thước màn hình lớn hơn hoặc bằng 480px
- Hình small-image.jpg sẽ được hiển thị nếu như trình duyệt không phù hợp điều kiện ở trên.
Thẻ <img>
Trong HTML, <img> được sử dụng để nhúng hình ảnh vào trang web của chúng ta.
Mỗi thẻ <img> tương đương với 1 tấm hình.
Ví dụ
Qua ví dụ trên, chúng ta có thể thấy có 2 thuộc tính cần lưu ý khi sử dụng với thẻ <img>
- src: đây là nơi chứa đường dẫn đến hình ảnh mong muốn hiển thị. Với đường dẫn này có thể là đường dẫn online các bạn lấy trực tiếp trên mạng, hoặc có thể đường dẫn offline tại chính máy tính của các bạn.
- alt: thuộc tính này chứa nội dung mô tả về hình ảnh, và nội dung này sẽ được hiển thị khi đường dẫn ảnh bị sự cố.
Ví dụ:
Ngoài 2 thuộc tính trên, chúng ta có thể kết hợp thêm 2 thuộc tính width và height để canh chỉnh chiều rộng và chiều cao cho hình ảnh.
Ví dụ
Thẻ tạo liên kết
Thẻ <a>
Trong HTM, thẻ <a> là 1 trong những thẻ cơ bản nhất nhưng cũng là 1 trong những thẻ quan trọng bậc nhất.
Với thẻ <a>, chúng ta có thể tạo ra những liên kết từ trang này đến trang khác, liên kết đến các thành phần trong trang, có thể được sử dụng để gửi email hay gọi điện thoại v.v..
Cú pháp sử dụng thẻ <a>
<a href=”” target=””>Nội dung hiển thị</a>
Trong đó:
- Thuộc tính href: đây sẽ là nơi chứa đường dẫn liên kết đến trang cần hiển thị. Ngoài ra, có thể chứa địa chỉ email cần nhận thư, số điện thoại cần gọi v.v… Thuộc tính này là thuộc tính quan trọng bậc nhất của thẻ <a>
- Thuộc tính target: quyết định vị trí, cách thức hiển thị sau khi click vào thẻ <a>. Thuộc tính này có thể nhận vào 1 trong 4 giá trị sau.
- _self: đây là giá trị mặc định của target. Giá trị này sẽ mở liên kết tại chính cửa sổ hiện tại.
- _blank: mở liên kết trên 1 tab mới của trình duyệt.
- _parent: mở liên kết trong parent frame
- _top: mở liên kết trong cửa sổ chính.
Ví dụ
Ngoài ra, chúng ta có thể kết hợp giữa thẻ <a> và <img> để tạo nên hiệu ứng khi click lên 1 ảnh sẽ chuyển đến trang mong muốn.
Ví dụ
Khi click vào hình ảnh ở ví dụ trên sẽ đưa chúng ta đến trang chủ của google.
Đôi với thẻ <a> sẽ có các hiệu ứng, sự kiện đi cùng khi các bạn tác động đến thẻ, các trạng thái này bao gồm
- a:link: chưa được click vào lần nào
- a: visited: đã được click vào
- a:hover: sẽ kích hoạt hiệu ứng của thẻ <a> khi con trỏ chuột ở trên nó
- a:active: sẽ kích hoạt hiệu ứng khi click vào thẻ <a>
Các bạn có thể thử với ví dụ dưới đây để xem kết quả
Kết luận
Qua bài viết này, hi vọng các bạn có thể nằm được về.
- Nhóm thẻ tạo danh sách
- Nhóm thẻ hiển thị hình ảnh
- Thẻ tạo liên kết
Để có thể sử dụng các thẻ này 1 cách thuần thục và hiệu quả, các bạn nên thực hành thật nhiều về nó.
