Mẫu HTML

HTML basic tag examples

A simple HTML file
This example is a very simple HTML file that uses as few HTML tags as possible. It demonstrates how content in the body element is displayed by the browser.
Simple paragraph
This example demonstrates: how text in paragraph elements is displayed by the browser.
More paragraphs
This example demonstrates some default behaviors of paragraph elements.
Poetry issue
This example demonstrates some formatting issues in HTML.
Line break
This example demonstrates the use of line breaks in HTML documents.
Tiêu đề
Mẫu này minh họa cách hiển thị thẻ tiêu đề trong tài liệu HTML.
Tiêu đề sắp đặt ở giữa
Mẫu này minh họa tiêu đề được sắp đặt ở giữa.
Đường ngang
Mẫu này minh họa cách chèn đường ngang.
Chú thích ẩn
Mẫu này minh họa cách chèn chú thích ẩn trong mã nguồn HTML.
Màu nền
Mẫu này minh họa cách thêm màu nền cho trang HTML.

Giải thích ví dụ

Mẫu định dạng văn bản HTML

Định dạng văn bản
Mẫu này minh họa cách định dạng văn bản trong tệp HTML.
Văn bản tiền định dạng
Mẫu này minh họa cách kiểm soát dòng trống và khoảng trống bằng thẻ pre.
Thẻ "kết quả máy tính"
Mẫu này minh họa hiệu ứng hiển thị của các thẻ "kết quả máy tính" khác nhau.
Địa chỉ
Mẫu này minh họa cách viết địa chỉ trong tệp HTML.
Từ viết tắt và viết tắt đầu tiên
Mẫu này minh họa cách thực hiện từ viết tắt hoặc viết tắt đầu tiên.
Hướng văn bản
Mẫu này minh họa cách thay đổi hướng của văn bản.
Trích dẫn khối
Mẫu này minh họa cách thực hiện trích dẫn với độ dài khác nhau.
Hiệu ứng xóa và hiệu ứng chèn văn bản
Mẫu này minh họa cách đánh dấu văn bản xóa và văn bản chèn.

Giải thích ví dụ

Mẫu liên kết HTML

Tạo liên kết siêu
Bài này minh họa cách tạo liên kết trong tài liệu HTML.
Sử dụng hình ảnh như liên kết
Bài này minh họa cách sử dụng hình ảnh như liên kết.
Mở liên kết trong cửa sổ trình duyệt mới
Mở trang trong cửa sổ trình duyệt mới, như vậy người truy cập không cần rời khỏi trang web của bạn.
Liên kết đến vị trí khác của trang cùng một trang
Bài này minh họa cách sử dụng liên kết để chuyển đến phần khác của tài liệu.
Thoát khỏi khung
Bài này minh họa cách thoát khỏi khung, nếu trang của bạn được cố định trong khung.
Tạo liên kết email
Bài này minh họa cách liên kết đến một email. (Bài này chỉ hoạt động sau khi cài đặt ứng dụng khách email.)
Tạo liên kết email 2
Bài này minh họa các liên kết email phức tạp hơn.

Giải thích ví dụ

Mẫu khung HTML

Khung dọc
Bài này minh họa cách sử dụng ba tài liệu khác nhau để tạo khung dọc.
Khung ngang
Bài này minh họa cách sử dụng ba tài liệu khác nhau để tạo khung ngang.
Cách sử dụng thẻ <noframes>
Bài này minh họa cách sử dụng thẻ <noframes>.
Cấu trúc khung lai
Bài này minh họa cách tạo cấu trúc khung chứa ba tài liệu khác nhau, đồng thời kết hợp chúng giữa hàng và cột.
Cấu trúc khung có thuộc tính noresize="noresize"
Bài này minh họa thuộc tính noresize. Trong bài này, khung không thể điều chỉnh kích thước. Khi bạn kéo chuột trên đường viền giữa các khung, bạn sẽ thấy rằng đường viền không thể di chuyển.
Khung điều hướng
Bài này minh họa cách tạo khung điều hướng. Khung điều hướng chứa danh sách các liên kết dẫn đến khung mục tiêu thứ hai. Tệp có tên "contents.htm" chứa ba liên kết.
Khung-inline
Ví dụ này trình bày cách tạo khung-inline (khung trong trang HTML).
Nhảy đến phần được chỉ định trong khung
Ví dụ này trình bày hai khung. Một trong số đó thiết lập liên kết đến phần được chỉ định trong tệp khác. Phần được chỉ định trong tệp "link.htm" được标识 bằng <a name="C10">.
Sử dụng điều hướng khung để nhảy đến phần được chỉ định
Ví dụ này trình bày hai khung. Khung bên trái chứa danh sách liên kết làm mục tiêu cho khung thứ hai. Khung thứ hai hiển thị tài liệu được liên kết. Các liên kết trong khung điều hướng chỉ đến phần được chỉ định trong tệp mục tiêu.

Giải thích ví dụ

Ví dụ bảng HTML

Bảng
Ví dụ này trình bày cách tạo bảng trong tài liệu HTML.
Viền bảng
Ví dụ trình bày các loại viền bảng khác nhau.
Bảng không có viền
Ví dụ này trình bày bảng không có viền.
Tiêu đề bảng (Heading)
Ví dụ này trình bày cách hiển thị tiêu đề bảng.
Ô trống
Ví dụ này trình bày cách xử lý ô không có nội dung bằng " ".
Bảng có tiêu đề
Ví dụ này trình bày bảng có tiêu đề (caption).
Ô bảng vượt qua hàng hoặc cột
Ví dụ này trình bày cách định nghĩa ô bảng vượt qua hàng hoặc cột.
Thẻ trong bảng
Ví dụ này trình bày cách hiển thị các yếu tố trong các yếu tố khác nhau.
Khoảng trống viền ô(Cell padding)
Ví dụ này trình bày cách sử dụng Cell padding để tạo ra khoảng trống giữa nội dung ô và viền.
Khoảng cách giữa các ô(Cell spacing)
Ví dụ này trình bày cách sử dụng Cell spacing để tăng khoảng cách giữa các ô.
Thêm nền màu hoặc hình ảnh nền cho bảng
Thêm nền cho bảng
Thêm nền màu hoặc hình ảnh nền cho ô
Ví dụ này trình bày cách thêm nền cho một hoặc nhiều ô.
Sắp xếp nội dung trong ô bảng
Ví dụ này trình bày cách sử dụng thuộc tính "align" để sắp xếp nội dung của ô, để tạo ra bảng đẹp.
Thuộc tính khung(frame)
Ví dụ này trình bày cách sử dụng thuộc tính "frame" để kiểm soát viền xung quanh bảng.

Giải thích ví dụ

Ví dụ danh sách HTML

Danh sách không có thứ tự
Ví dụ này trình bày danh sách không có thứ tự.
Danh sách có thứ tự
Ví dụ này trình bày danh sách có thứ tự.
Danh sách không có thứ tự khác nhau
Ví dụ này trình bày danh sách không có thứ tự.
Danh sách có thứ tự khác nhau
Ví dụ này trình bày danh sách có thứ tự khác nhau.
Danh sách嵌套
Ví dụ này trình bày cách嵌套 danh sách.
Danh sách嵌套 2
Ví dụ này trình bày danh sách嵌套 phức tạp hơn.
Danh sách định nghĩa
Ví dụ này trình bày một danh sách định nghĩa.

Giải thích ví dụ

HTML biểu mẫu và ví dụ đầu vào

Lĩnh vực văn bản (Text fields)
Lĩnh vực văn bản (Text fields)
Mẫu này minh họa cách tạo lĩnh vực văn bản trong trang HTML. Người dùng có thể viết văn bản trong lĩnh vực văn bản.
Lĩnh vực mật khẩu
Mẫu này minh họa cách tạo lĩnh vực mật khẩu của HTML.
Hộp kiểm
Mẫu này minh họa cách tạo hộp kiểm trong trang HTML. Người dùng có thể chọn hoặc bỏ chọn hộp kiểm.
Nút chọn đơn
Mẫu này minh họa cách tạo nút chọn đơn trong HTML.
Danh sách thả xuống đơn giản
Mẫu này minh họa cách tạo danh sách thả xuống đơn giản trong trang HTML. Danh sách thả xuống là một danh sách tùy chọn.
Một danh sách thả xuống khác
Khu vực văn bản (Textarea)
Mẫu này minh họa cách tạo một khu vực văn bản (thiết bị nhập văn bản nhiều dòng). Người dùng có thể viết văn bản trong khu vực văn bản. Trong khu vực văn bản, số lượng ký tự có thể viết không giới hạn.
Tạo nút
Mẫu này minh họa cách tạo nút. Bạn có thể tùy chỉnh văn bản trên nút.
Fieldset around data
Mẫu này minh họa cách vẽ một khung có tiêu đề xung quanh dữ liệu.

Mẫu biểu mẫu

Biểu mẫu với hộp nhập và nút xác nhận
Mẫu này minh họa cách thêm biểu mẫu vào trang. Biểu mẫu này chứa hai hộp nhập và một nút xác nhận.
Biểu mẫu với hộp kiểm
Biểu mẫu này chứa hai hộp kiểm và một nút xác nhận.
Biểu mẫu với hộp chọn
Biểu mẫu này chứa hai hộp chọn và một nút xác nhận.
Gửi email từ biểu mẫu
Mẫu này minh họa cách gửi email từ biểu mẫu.

Giải thích ví dụ

Mẫu HTML hình ảnh

Chèn hình ảnh
Mẫu này minh họa cách hiển thị hình ảnh trong trang web.
Chèn hình ảnh từ vị trí khác
Mẫu này minh họa cách hiển thị hình ảnh từ thư mục hoặc máy chủ khác trong trang web.
Hình ảnh bối cảnh
Mẫu này minh họa cách thêm hình ảnh làm bối cảnh cho trang HTML.
Sắp đặt hình ảnh
Mẫu này minh họa cách sắp đặt hình ảnh trong văn bản.
Hình ảnh trôi
Mẫu này minh họa cách làm cho hình ảnh trôi đến bên trái hoặc bên phải của đoạn văn.
Điều chỉnh kích thước hình ảnh
Mẫu này minh họa cách điều chỉnh kích thước hình ảnh khác nhau.
Hiển thị văn bản thay thế cho hình ảnh
Mẫu này minh họa cách hiển thị văn bản thay thế cho hình ảnh. Khi trình duyệt không thể tải hình ảnh, thuộc tính văn bản thay thế sẽ thông báo cho người đọc thông tin đã mất. Thói quen thêm thuộc tính văn bản thay thế cho tất cả các hình ảnh trên trang là một thói quen tốt.
Tạo liên kết hình ảnh
Mẫu này minh họa cách sử dụng hình ảnh như một liên kết.
Tạo bản đồ hình ảnh
Mẫu này hiển thị cách tạo bản đồ hình ảnh có các khu vực có thể nhấp. Mỗi khu vực là một liên kết siêu tekst.
Chuyển đổi hình ảnh thành bản đồ hình ảnh
Mẫu này hiển thị cách đặt một hình ảnh thông thường thành bản đồ hình ảnh.

Giải thích ví dụ

Mẫu HTML bối cảnh

Bối cảnh và màu sắc phối hợp tốt
Một ví dụ về sự phối hợp màu sắc và màu văn bản tốt, giúp văn bản trên trang dễ đọc.
Bối cảnh và màu sắc không được phối hợp tốt
Ví dụ về kết hợp màu nền và màu văn bản không tốt, làm cho văn bản trên trang khó đọc.
Hình nền khả thi
Ví dụ về hình nền và màu văn bản làm cho văn bản trên trang dễ đọc.
Hình nền khả thi 2
Ví dụ khác về hình nền và màu văn bản làm cho văn bản trên trang dễ đọc.
Hình nền không khả thi
Ví dụ về hình nền và màu văn bản làm cho văn bản trên trang khó đọc.

Giải thích ví dụ

Ví dụ về style HTML (style)

Kiểu dáng trong HTML
Ví dụ này minh họa cách sử dụng thông tin style được thêm vào phần head để định dạng HTML.
Liên kết không có underline
Ví dụ này minh họa cách sử dụng thuộc tính style để tạo liên kết không có underline.
Liên kết đến bảng style bên ngoài
Ví dụ này minh họa cách sử dụng thẻ <link> để liên kết đến một bảng style bên ngoài.

Giải thích ví dụ

Ví dụ về head HTML (head)

Tiêu đề tài liệu
Thông tin tiêu đề trong phần tử head sẽ không hiển thị trong cửa sổ trình duyệt.
Một target, tất cả các liên kết
Ví dụ này minh họa cách sử dụng thẻ base để mở tất cả các thẻ trong trang trong cửa sổ mới.

Giải thích ví dụ

Ví dụ về metadata HTML (meta)

Mô tả tài liệu
Thông tin trong phần tử Meta có thể mô tả tài liệu HTML.
Từ khóa tài liệu
Thông tin trong phần tử Meta có thể mô tả từ khóa quan trọng của tài liệu.
Chuyển hướng
Ví dụ này minh họa: khi địa chỉ URL đã thay đổi, chuyển hướng người dùng đến địa chỉ khác.

Giải thích ví dụ

Ví dụ về script HTML (Script)

Chèn đoạn script
Ví dụ này minh họa cách chèn script vào tài liệu HTML.
Chạy trên trình duyệt không hỗ trợ script
Ví dụ này minh họa cách đối phó với trình duyệt không hỗ trợ script.

Giải thích ví dụ