Một số phần tử HTML thú vị chưa chắc bạn đã biết

Hiện nay có tới 142 thành phần HTML được W3C chuẩn hóa, không bao gồm các tiêu chuẩn đã lỗi thời. Điều đó có nghĩa rằng, bạn đã vô tình bỏ qua hoặc bạn đã biết sự tồn tại của thành phần HTML đó, nhưng do kiển thức thì vô hạn còn bộ não của chúng ta thì nó có hạn, bạn đã cho nó vào trạng thái quên tạm thời, nên sau đây mình xin nhắc lại 1 số phần tử HTML thú vị đó:

1. Input có tích hợp suggestions

Phần tử datalist để tạo danh sách các đề xuất khi người dùng nhập giá trị vào input, sẽ có 1 danh sách gợi ý sổ xuống. Bình thường nếu chúng ta muốn có được kết quả tương tự như vậy phải kết hợp với Ajax của thư viện jQuery mới cho ra được kết quả như vậy.

 2. Responsive Images

Với sự phát triển như vũ bão của thiết bị di động, bây giờ người lập trình phải tùy chỉnh làm sao cho website có thể chạy được trên nhiều môi trường nhất có thể, nhờ có công nghệ Responsive của CSS đã giúp phần nào giải quyết được vấn đề trên, nhưng với ảnh khi chúng ta size ảnh bằng css thì kích thước gốc ( tức dung lượng của ảnh ) vẫn giữu nguyên, cho nên không tối ưu được cho thiết bị di động vậy làm sao để giải quyết được vấn đề đó.

Phần tử picture trong HTML 5 cho phép bạn thêm các nguồn hình ảnh khác nhau cho các phương tiện khác nhau của hình ảnh bên trong nó.

 3. Gán một Base URL

Phần tử base HTML khá tiện dụng khi bạn có nhiều liên kết trong tài liệu của bạn với các URL của cùng một tên miền, nó cho phép bạn thêm một URL cơ bản vào tài liệu, từ đó cho phép bạn chỉ thêm các URL tương đối vào các liên kết khác trong trang khi cần thiết.

Lưu ý: Tất cả các URL tương đối trong trang sẽ được chuyển dựa trên URL cơ sở, nếu bạn có bất kỳ liên kết nào với một tên miền khác thì đừng quên gán URL đầy đủ cho nó.

 4. Hình ảnh bản đồ ( Map Images )

Phần tử HTML map có thể được sử dụng để tạo bản đồ hình ảnh, về cơ bản hình ảnh với các khu vực có thể click được vào chúng, có thể được liên kết tới một trang web khác hoặc các phần khác của cùng một tài liệu. Bạn có thể xác định các khu vực của một hình ảnh có thể click được bằng cách chỉ đơn giản đề cập đến tọa độ X Y tương ứng của những điểm trong các phần tử area được lồng bên trong phần tử map.

Lưu ý: Các khu vực có thể click được không thể định dạng CSS được, nếu bạn muốn những chỗ có thể click được làm nổi lên, hãy sử dụng một phần mềm chỉnh sửa hình ảnh đơn giản để vẽ các điểm được đánh dấu đó.

Mẹo: Nếu bạn không biết xác định tọa độ của một điểm trong một hình ảnh, bạn hãy mở hình ảnh trong một phần mềm chỉnh sửa hình ảnh (Photoshop) và di chuyển con trỏ tới điểm đó, bạn sẽ có thể thấy được tọa độ của nó trong phần mềm.

1. Bạn nhấn F8 trên bàn phím sẽ hiện một bảng Info như sau:

            2. Bạn chỉ cần quan tâm 2 thông số đó là X Y tương ứng với tọa độ X Y của phần tử area

 vậy là mình đã điểm qua 4 phần tử hay ho của HTML, hy vọng nó sẽ giúp ích cho các bạn.