Tìm hiểu HTML và XHTML
XHTML là HTML được viết bằng XML. XHTML là gì? XHTML là viết tắt của Extensive HyperText Markup Language XHTML gần giống với HTML XHTML có nhiều quy tắc hơn HTML XHTML là HTML được định nghĩa là một ứng dụng XML XHTML được hỗ trợ bởi tất cả các trình ...
XHTML là HTML được viết bằng XML.
XHTML là gì?
- XHTML là viết tắt của Extensive HyperText Markup Language
- XHTML gần giống với HTML
- XHTML có nhiều quy tắc hơn HTML
- XHTML là HTML được định nghĩa là một ứng dụng XML
- XHTML được hỗ trợ bởi tất cả các trình duyệt chính
Tại sao sử dụng XHTML?
Nhiều trang trên Internet chứa HTML “xấu”.
Mã HTML này hoạt động tốt trong hầu hết các trình duyệt (ngay cả khi nó không tuân theo các quy tắc HTML):
<html>
<head>
<title>This is bad HTML</title><body>
<h1>Bad HTML
<p>This is a paragraph
</body>
Thị trường ngày nay có nhiều công nghệ trình duyệt khác nhau. Một số trình duyệt chạy trên máy tính và một số trình duyệt chạy trên điện thoại di động hoặc các thiết bị khác. Các thiết bị nhỏ hơn thường thiếu các nguồn lực hoặc hiện đại để giải thích các dấu hiệu “xấu”.
XML là một ngôn ngữ đánh dấu nơi các tài liệu phải được đánh giá chính xác (được cho là “tốt”).
Bằng cách kết hợp sức mạnh của HTML và XML, XHTML đã được phát triển. XHTML được thiết kế lại dưới dạng XML.
Sự khác biệt quan trọng nhất từ HTML
Cấu trúc tài liệu
- XHTML DOCTYPE là bắt buộc
- Thuộc tính xmlns trong <html> là bắt buộc
- Thẻ <html>, <head>, <title>, và <body> là bắt buộc
Phần tử XHTML
- Các phần tử XHTML phải được lồng nhau hợp lý
- Các phần tử XHTML phải luôn luôn có thẻ đóng
- Các phần tử XHTML phải là chữ thường
- Tài liệu XHTML phải có một phần tử gốc
Thuộc tính XHTML
- Tên thuộc tính phải là chữ thường
- Giá trị thuộc tính phải được trích dẫn
- Không được giảm thiểu thuộc tính
Thẻ <!DOCTYPE ….>
Một tài liệu XHTML phải có một khai báo XHTML DOCTYPE.
Các phần tử <html>, <head>, <title>, và <body> cũng phải hiện diện, và thuộc tính xmlns trong <html> phải xác định xml namespace cho tài liệu.
Ví dụ này cho thấy một tài liệu XHTML với tối thiểu các thẻ được yêu cầu:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Title of document</title>
</head><body>
some content
</body></html>
Phần tử XHTML lồng nhau đúng cách
Trong HTML, một số phần tử có thể được lồng vào nhau không đúng, như sau:
<b><i>This text is bold and italic</b></i>
Trong XHTML, tất cả các phần tử phải được lồng vào nhau như nhau:
<b><i>This text is bold and italic</i></b>
Phần tử XHTML luôn có thẻ đóng
Ví dụ cách dùng sai:
<p>This is a paragraph
<p>This is another paragraph
Ví dụ cách dùng đúng:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Phần tử rỗng cũng phải dùng thẻ đóng
Ví dụ cách dùng sai:
A break: <br>
A horizontal rule: <hr>
An image: <img src=”happy.gif” alt=”Happy face”>
Ví dụ cách dùng đúng:
A break: <br />
A horizontal rule: <hr />
An image: <img src=”happy.gif” alt=”Happy face” />
Các phần tử XHTML là chữ thường
Ví dụ cách dùng sai:
<BODY>
<P>This is a paragraph</P>
</BODY>
Ví dụ cách dùng đúng:
<body>
<p>This is a paragraph</p>
</body>
Tên thuộc tính XHTML là chữ thường
Ví dụ cách dùng sai:
<table WIDTH=”100%”>
Ví dụ cách dùng đúng:
<table awidth=”100%”>
Giá trị thuộc tính phải được trích dẫn
Ví dụ cách dùng sai:
<table awidth=100%>
Ví dụ cách dùng đúng:
<table awidth=”100%”>
Không được giảm thiểu thuộc tính
Ví dụ cách dùng sai:
<input type=”checkbox” name=”vehicle” value=”car” checked />
Ví dụ cách dùng đúng:
<input type=”checkbox” name=”vehicle” value=”car” checked=”checked” />
Ví dụ cách dùng sai:
<input type=”text” name=”lastname” disabled />
Ví dụ cách dùng đúng:
<input type=”text” name=”lastname” disabled=”disabled” />
Cách chuyển đổi từ HTML sang XHTML
- Thêm XHTML <! DOCTYPE> vào dòng đầu tiên của mỗi trang
- Thêm thuộc tính xmlns vào phần tử html của mỗi trang
- Thay đổi tất cả các tên phần tử thành chữ thường
- Đóng tất cả các phần tử rỗng
- Thay đổi tất cả các tên thuộc tính thành chữ thường
- Trích dẫn tất cả các giá trị thuộc tính
- Khóa học lập trình frontend cơ bản : Bootstrap 4, Jquery, CSS3, HTML5
- Học lập trình Frontend nâng cao qua project thực tế
