Hướng dẫn html codes to try - mã html để thử

---

Dễ học với html "hãy tự mình thử"

Với trình chỉnh sửa "Hãy thử chính mình" của chúng tôi, bạn có thể chỉnh sửa mã HTML và xem kết quả:

Thí dụ

Tiêu đề trang

Đây là một tiêu đề này là một đoạn văn.

This is a paragraph.

Hãy tự mình thử »

Nhấp vào nút "Hãy tự mình thử" để xem nó hoạt động như thế nào.

---

Ví dụ HTML

Trong hướng dẫn HTML này, bạn sẽ tìm thấy hơn 200 ví dụ. Với trình soạn thảo "Hãy thử trực tuyến của chúng tôi", bạn có thể tự chỉnh sửa và kiểm tra từng ví dụ!

Truy cập ví dụ HTML!

---

---

Bài tập HTML

Hướng dẫn HTML này cũng chứa gần 100 bài tập HTML.

Kiểm tra bản thân với các bài tập

Exercise:

Thêm "ToolTip" vào đoạn văn bên dưới với văn bản "Giới thiệu về W3Schools".

W3Schools là trang web của nhà phát triển web.

Bắt đầu bài tập

---

Bài kiểm tra bài kiểm tra HTML

Kiểm tra các kỹ năng HTML của bạn với bài kiểm tra HTML của chúng tôi!

Bắt đầu bài kiểm tra HTML!

---

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập" miễn phí tại đây tại W3Schools.

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm!

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng học tập của tôi.

---

Tài liệu tham khảo HTML

Tại W3Schools, bạn sẽ tìm thấy các tài liệu tham khảo đầy đủ về các phần tử, thuộc tính, sự kiện, tên màu, thực thể, bộ ký tự, mã hóa URL, mã ngôn ngữ, tin nhắn HTTP, hỗ trợ trình duyệt, v.v.

Khởi động sự nghiệp của bạn

Được chứng nhận bằng cách hoàn thành khóa họcthe course

Được chứng nhận

W3SchoolScertified.2022

---

Một code HTML nhất quán, rõ ràng, gọn gàng khiến cho người khác dễ dàng hiểu code của bạn.

---

Hãy khôn ngoan và thử thách tương lai

Đây là một vài hướng dẫn và mẹo cho việc tạo một HTML source code tốt.

---

Sử dụng đúng kiểu tài liệu

Luôn khai báo kiểu tài liệu ở dòng dầu tiên trong tài liệu của bạn.

Kiểu tài liệu chính xác cho HTML là:

---

Sử dụng các tên thành phần viết thường

HTML cho phép trộn lẫn các chữ cái viết hoa và viết thường trong tên thành phần.

Tuy nhiên, chung tôi khuyến nghị sử dụng tên thành phần viết thường, bởi vì:

• Trộn lẫn tên viết hoa và viết thường nhìn khá xấu
• Các nhà phát triển thường sử dụng các tên viết thường
• Viết thường nhìn rõ ràng hơn
• Viết thường dễ hơn

Tốt:

This is a paragraph

Tệ

This is a paragraph

---

Đóng toàn bộ thành phần HTML

Trong HTML, bạn không phải đóng toàn bộ các thành phần (ví dụ thành phần  

  
This is a paragraph.
  
This is a paragraph.

7). 

  
This is a paragraph.
  
This is a paragraph.

7).

Tuy nhiên, chúng tôi khuyến nghị nên đóng toàn bộ các thành phần HMTL, như thế này:

Tốt:

  
This is a paragraph.
  
This is a paragraph.

Tệ

  
This is a paragraph.
  
This is a paragraph.

---

Đóng toàn bộ thành phần HTML

Trong HTML, bạn không phải đóng toàn bộ các thành phần (ví dụ thành phần  

  
This is a paragraph.
  
This is a paragraph.

7).

Tuy nhiên, chúng tôi khuyến nghị nên đóng toàn bộ các thành phần HMTL, như thế này:

• Trộn lẫn tên viết hoa và viết thường nhìn khá xấu
• Các nhà phát triển thường sử dụng các tên viết thường
• Viết thường nhìn rõ ràng hơn
• Viết thường dễ hơn

Tốt:

Visit our HTML tutorial

Tệ

Visit our HTML tutorial

---

Đóng toàn bộ thành phần HTML

Trong HTML, bạn không phải đóng toàn bộ các thành phần (ví dụ thành phần  

  
This is a paragraph.
  
This is a paragraph.

7).

Tuy nhiên, chúng tôi khuyến nghị nên đóng toàn bộ các thành phần HMTL, như thế này:

• Tệ
• Sử dụng các tên thuộc tính viết thường
• HTML cho phép trộn các chữ cái viết hoa và viết thường trong tên thuộc tính:

Tốt:

Tệ
Đóng toàn bộ thành phần HTML
Trong HTML, bạn không phải đóng toàn bộ các thành phần (ví dụ thành phần  

  
This is a paragraph.
  
This is a paragraph.
7).
Luôn xác định alt, width, và height cho các hình ảnh
Luôn xác định thuộc tính  

  
This is a paragraph.
  
This is a paragraph.
8 cho các hình ảnh. Thuộc tính này quan trọng nếu hình ảnh trong một vài lý do không thể được hiển thị. 

  
This is a paragraph.
  
This is a paragraph.
8 cho các hình ảnh. Thuộc tính này quan trọng nếu hình ảnh trong một vài lý do không thể được hiển
thị.
Đồng thởi, luôn xác định với width và height của các hình ảnh. Điều này giảm thiểu sự nhấp nháy, bởi vì trình duyệt có thể giữ khoảng trống cho hình ảnh trước khi tải về.
Tốt:

This is a paragraph
0
Xấu:

This is a paragraph
1
Các khoảng trắng và dấu bằng
HTML cho phép các khoảng trắng xung quanh các dấu bằng. Nhưng ít khoảng trắng dễ đọc và nhóm các thực thể với nhau tốt hơn.
Tốt:

This is a paragraph
2
Xấu:

This is a paragraph
3
Các khoảng trắng và dấu bằng
HTML cho phép các khoảng trắng xung quanh các dấu bằng. Nhưng ít khoảng trắng dễ đọc và nhóm các thực thể với nhau tốt hơn.
Tệ:
Tránh sử dụng các dòng code dài
Khi sử dụng một trình soạn thảo HTML, nó KHÔNG thuận tiện cho việc kéo sang trái và phải để đọc code HTML.



Cố gắng tránh các dòng code quá dài.
Dòng bỏ trống và lùi đầu dòngspaces lùi đầu dòng. Đừng sử dụng nút tab.
Tốt:

This is a paragraph
4
Xấu:

This is a paragraph
5
Các khoảng trắng và dấu bằng

This is a paragraph
6
HTML cho phép các khoảng trắng xung quanh các dấu bằng. Nhưng ít khoảng trắng dễ đọc và nhóm các thực thể với nhau tốt hơn.

This is a paragraph
7
Tệ:
Tránh sử dụng các dòng code dài

  
This is a paragraph.
  
This is a paragraph.
9 là bắt buộc trong HTML.
Khi sử dụng một trình soạn thảo HTML, nó KHÔNG thuận tiện cho việc kéo sang trái và phải để đọc code HTML.công cụ tìm kiếm (SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi sắp xếp các trang trên các kết quả tìm kiếm.
Cố gắng tránh các dòng code quá dài.

  
This is a paragraph.
  
This is a paragraph.
9 :
Dòng bỏ trống và lùi đầu dòng
Không thêm các dòng bỏ trống, các khoảng trắng, hoặc lùi đầu dòng mà không có lý do.
Cho khả năng đọc tốt, thêm các dòng bỏ trống để ngăn cách các khối code lớn hoặc logic.
Cho khả năng đọc tốt, thêm hai khoảng spaces lùi đầu dòng. Đừng sử dụng nút tab.

This is a paragraph
8
Ví dụ một bảng chuẩn:
Ví dụ một danh sách chuẩn: 

  
This is a paragraph.
  
This is a paragraph.
1 và 

  
This is a paragraph.
  
This is a paragraph.
2 :
Không bao giờ bỏ qua thành phần 

This is a paragraph
9

This is a paragraph
0
Thành phần 

  
This is a paragraph.
  
This is a paragraph.
9 là bắt buộc trong HTML. 

  
This is a paragraph.
  
This is a paragraph.
1 và

  
This is a paragraph.
  
This is a paragraph.
2 !
Nội dung của một tiêu đề trang rất quan trọng cho việc tối ưu hóa các công cụ tìm kiếm (SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi sắp xếp các trang trên các kết quả tìm kiếm. 

  
This is a paragraph.
  
This is a paragraph.
1 là gốc của tài liệu, vàlà  nơi được đề xuất cho việc xác định ngôn ngữ trang. Xác định ngôn ngữ trang khá quan trọng cho khả ứng dụng trợ năng (đọc màn hình) và các công cụ tìm kiếm.
Thành phần 

  
This is a paragraph.
  
This is a paragraph.
9 : 

  
This is a paragraph.
  
This is a paragraph.
2 có thể tạo ra các lỗi trong các trình duyệt cũ hơn.
xác định một tiêu đề trong thanh công cụ trình duyệt 

  
This is a paragraph.
  
This is a paragraph.
1 và 

  
This is a paragraph.
  
This is a paragraph.
2 cũng có thể phá DOM và phần mềm XML.
Không bao giờ bỏ qua thành phần 

This is a paragraph
1

This is a paragraph
2
Thành phần 

This is a paragraph.
This is a paragraph.
9 là bắt buộc trong HTML.
Nội dung của một tiêu đề trang rất quan trọng cho việc tối ưu hóa các công cụ tìm kiếm (SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi sắp xếp các trang trên các kết quả tìm kiếm.
Thành phần 

  
This is a paragraph.
  
This is a paragraph.
9 :

  
This is a paragraph.
  
This is a paragraph.
2, vào thành phần 
Visit our HTML tutorial
0 mặc
định.
Không bao giờ bỏ qua thành phần 

This is a paragraph
3

This is a paragraph
4
Thành phần 

  
This is a paragraph.
  
This is a paragraph.
9 là bắt buộc trong HTML. 
Visit our HTML tutorial
0 .
Nội dung của một tiêu đề trang rất quan trọng cho việc tối ưu hóa các công cụ tìm kiếm (SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi sắp xếp các trang trên các kết quả tìm kiếm.
Thành phần 

  
This is a paragraph.
  
This is a paragraph.
9 :
xác định một tiêu đề trong thanh công cụ trình duyệt

This is a paragraph
5
cung cấp một tiêu đề cho trang khi nó được thêm vào mục yêu thích

This is a paragraph
6
hiển thị một tiêu đề cho trang trong các kết quả của công cụ tìm kiếmXML/XHTML truy cập trang của bạn, giữ xược đóng (/), bởi vì nó là
bắt buộc tronng XML và XHTML.
Vì thế, cố gắng làm tiêu đề chính xác và có ý nghĩa nhất có thể:
Bỏ quả và ?

This is a paragraph
7
Một trang HTML sẽ hợp lệ mà không có các thẻ  

This is a paragraph.
This is a paragraph.
1 và 

This is a paragraph.
This is a paragraph.
2 :
ví dụ
Tuy nhiên, chúng tôi khuyến nghị hãy luôn thêm các thẻ 

  
This is a paragraph.
  
This is a paragraph.
1 và

  
This is a paragraph.
  
This is a paragraph.
2 ! 
Visit our HTML tutorial
2 sau trong toàn bộ các trang web của bạn:

This is a paragraph
8

Thành phần  

  
This is a paragraph.
  
This is a paragraph.
1 là gốc của tài liệu, vàlà  nơi được đề xuất cho việc xác định ngôn ngữ trang. Xác định ngôn ngữ trang khá quan trọng cho khả ứng dụng trợ năng (đọc màn hình) và các công cụ tìm kiếm.
Bỏ qua  

  
This is a paragraph.
  
This is a paragraph.
2 có thể tạo ra các lỗi trong các trình duyệt cũ hơn.



Bỏ qua  

  
This is a paragraph.
  
This is a paragraph.
1 và 

  
This is a paragraph.
  
This is a paragraph.
2 cũng có thể phá DOM và phần mềm XML.
Bỏ quả ?

This is a paragraph
9

Thẻ cũng có thể bị bỏ qua.

  
This is a paragraph.
  
This is a paragraph.
0

Các trình duyệt sẽ thêm tất cả các thành phần trước 

  
This is a paragraph.
  
This is a paragraph.
2, vào thành phần 
Visit our HTML tutorial
0 mặc định.
Tuy nhiên chúng tôi khuyến nghị sử dụng thẻ  Visit our HTML tutorial0 .
Đóng thành phần HTML rỗng?

This is a paragraph
2

Trong HTML, việc đóng các thành phần rỗng là tùy chọn.

  
This is a paragraph.
  
This is a paragraph.
2

Cho phép:

  
This is a paragraph.
  
This is a paragraph.
3
Cũng được cho phép:
Nếu bạn mong muốn phần mềm XML/XHTML truy cập trang của bạn, giữ xược đóng (/), bởi vì nó là bắt buộc tronng XML và XHTML.
Siêu dữ liệu
Để đảm bảo giải thích đúng và cho vị trí trong công cụ tìm kiếm chính xác, cả hai ngôn ngữ và kí tự mã hóa nên được xác định càng sớm càng tốt trong một tài liệu HTML:
Cài đặt khung nhìn
Khung nhìn là khu vực hiển thị cho người dùng trên trang web. Nó khác trên từng thiết bị - nó có thể nhỏ hơn trên điện thoại so với màn hình máy tính.
Tải xuống JavaScript trong HTML
Sử dụng một cú pháp đơn giản cho việc tải xuống các script bên ngoài (các thuộc tính phong cách là không cần thiết):

  
This is a paragraph.
  
This is a paragraph.
4
Truy cập các thành phần HTML bằng JavaScript
Sử dụng code HTML "không gọn gàng" có thể dẫn tới một kết quả là các lỗi JavaScript.
Hai câu lệnh JavaScript sau sẽ dẫn đến các kết quả khác nhau:
ví dụ

  
This is a paragraph.
  
This is a paragraph.
5

  
This is a paragraph.
  
This is a paragraph.
6
Sử dụng các tên file viết thường
Một vài sever web (Apache, Unix) phân biệt hoa thường với các tên file: "london.jpg" không thể được truy cập bằng "London.jpg"."london.jpg" không thể được truy cập
bằng "London.jpg".
Một vài sever web khác (Microsoft IIS) không phân biệt hoa thường : "london.jpg" có thể được truy cập bằng "London.jpg"."london.jpg" có thể được truy cập bằng "London.jpg".
Nếu bạn sử dụng trộn lẫn giữa chữ hoa và chữ thường, bạn phải phòng bị điều này.
Nếu bạn di chuyển từ một sever không phân biệt hoa thường thành một phân biệt hoa thường, kể cả một lỗi nhỏ có thể làm hỏng web của bạn!
Để tránh các vấn đề này, luôn sử dụng các tên file viết thường!
Phần mở rộng của file
File HTML nên có một phần mở rộng là .html hoặc .htm. là .html hoặc .htm.
Các file CSS nên có một phần mở rộng là .css.là .css.
File JavaScript nên có một phần mở rộng là .js..js.
Sự biệt giữa .htm và .html?
Không có sự khác biệt gì giữa các phần mở rộng file .htm và .html!
Cả hai sẽ được xem như HTML bởi mọi trình duyệt web và sever web.
Các tên file mặc định
Khi một đường dẫn không xác định một tên file ở cuối, sever sẽ thêm một tên file mặc định, như là "index.html", "default.html", hoặc "default.htm".
Nếu sever được cấu hình chỉ với "index.html" là tên mặc định, tên file của bạn phải được đặt là "index.html", và không phải "default.html"."index.html" là tên mặc định, tên file của bạn phải được đặt là "index.html", và không phải "default.html".
Tuy nhiên, các sever có thể được cấu hình với nhiều hơn một tên file mặc định, và thông thường bạn có thể đặt nhiều tên mặc định nếu cần.
Đọc tiếp







programming
html
HTML cơ bản
HTML code
Glitch
CSS
HTML CSS



Reply
8
0
 Chia sẻ