Trong bài này chúng ta sẽ thảo luận qua một chút về ký tự khoảng trắng(space), và khoảng cách(tab) trong HTML. Thật ra vấn đề này đã được thảo luận rất lâu kể từ khi HTML ra đời, tuy nhiên ở đây tôi muốn viết lại một chút theo kinh nghiệm của bản thân mình rút gọn ra được sau khi tham khảo nhiều bài viêt khác.
Đối với ký tự space thì trong HTML có được định nghĩa nhưng nó chỉ cho phép một khoảng trắng được hiển thị, ví như khi ta gõ nhiều khoảng trắng trong mã HTML nhưng khi chạy trang web thì ta chỉ thấy có 1.
Còn đối với ký tự tab thì trong HTML hoàn toàn không có định nghĩa về ký tự này, ví dụ như trong mã code ta gõ thật nhiều ký tự tab nhưng khi hiển thị ra ta chỉ thấy duy nhất một ký tự là khoảng trắng.
Vây trường hợp ta muốn thêm nhiều khoảng trắng(multiple spaces) hoặc tab để thể hiện ý tưởng của mình thì phải làm sao? Tất nhiên có nhiều cách khác nhau để thực hiện điều này như dùng CSS Padding, Margin, Div, P,... nhưng giải pháp tôi đưa ra ở bài này là chèn trực tiếp ký tự khoảng trắng vào trang web, đối với tab thì không thể nhưng nếu phối hợp tốt thì chúng ta cũng có thể tạo được hiệu quả tương ứng. Các ký tự khoảng trăng trong HTML bao gồm các ký sau:
Bạn hãy xem ví dụ demo bên dưới để có thể thấy trực quan các vấn đề mà chúng ta đã thảo luận nãy giờ:
Mã Nguồn - Source Code:
Đối với ký tự space thì trong HTML có được định nghĩa nhưng nó chỉ cho phép một khoảng trắng được hiển thị, ví như khi ta gõ nhiều khoảng trắng trong mã HTML nhưng khi chạy trang web thì ta chỉ thấy có 1.
Còn đối với ký tự tab thì trong HTML hoàn toàn không có định nghĩa về ký tự này, ví dụ như trong mã code ta gõ thật nhiều ký tự tab nhưng khi hiển thị ra ta chỉ thấy duy nhất một ký tự là khoảng trắng.
Vây trường hợp ta muốn thêm nhiều khoảng trắng(multiple spaces) hoặc tab để thể hiện ý tưởng của mình thì phải làm sao? Tất nhiên có nhiều cách khác nhau để thực hiện điều này như dùng CSS Padding, Margin, Div, P,... nhưng giải pháp tôi đưa ra ở bài này là chèn trực tiếp ký tự khoảng trắng vào trang web, đối với tab thì không thể nhưng nếu phối hợp tốt thì chúng ta cũng có thể tạo được hiệu quả tương ứng. Các ký tự khoảng trăng trong HTML bao gồm các ký sau:
 
 
 
	 (trong ANSCII được xem là tab)
 
 
 
	 (trong ANSCII được xem là tab)
Bạn hãy xem ví dụ demo bên dưới để có thể thấy trực quan các vấn đề mà chúng ta đã thảo luận nãy giờ:
Mã Nguồn - Source Code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Space or multiple spaces and Tab characters in HTML?</title>
</head>
<body>
<div style="border: 1px solid #ccc;padding:0px;font-size:25px">
*Nhiều khoảng trắng nhưng chỉ hiển thị một.<br />
A ------------- 1 Space<br />
A ------------- 2 Space<br />
A ------------- 3 Space<br />
A ------------- 4 Space<br />
A ------------- 5 Space<br />
A ------------- 6 Space<br />
</div>
<br />
<div style="border: 1px solid #ccc;padding:0px;font-size:25px">
*Nhiều tab nhưng chỉ hiển thị một khoảng trắng.<br />
A ------------- 1 tab<br />
A ------------- 2 tab<br />
A ------------- 3 tab<br />
A ------------- 4 tab<br />
A ------------- 5 tab<br />
A ------------- 6 tab<br />
</div>
<br />
<div style="border: 1px solid #ccc;padding:0px;font-size:25px">
*Sự giống và khác biệt giữa các mã ký tự khoảng trắng trong HTML khi hiển thị trên trình duyệt.<br />
A -------------<br />
A -------------<br />
A -------------<br />
A -------------<br />
A	-------------<br />
A	-------------<br />
</div>
</body>
</html>
<html>
<head>
<meta charset='UTF-8'>
<title>Space or multiple spaces and Tab characters in HTML?</title>
</head>
<body>
<div style="border: 1px solid #ccc;padding:0px;font-size:25px">
*Nhiều khoảng trắng nhưng chỉ hiển thị một.<br />
A ------------- 1 Space<br />
A ------------- 2 Space<br />
A ------------- 3 Space<br />
A ------------- 4 Space<br />
A ------------- 5 Space<br />
A ------------- 6 Space<br />
</div>
<br />
<div style="border: 1px solid #ccc;padding:0px;font-size:25px">
*Nhiều tab nhưng chỉ hiển thị một khoảng trắng.<br />
A ------------- 1 tab<br />
A ------------- 2 tab<br />
A ------------- 3 tab<br />
A ------------- 4 tab<br />
A ------------- 5 tab<br />
A ------------- 6 tab<br />
</div>
<br />
<div style="border: 1px solid #ccc;padding:0px;font-size:25px">
*Sự giống và khác biệt giữa các mã ký tự khoảng trắng trong HTML khi hiển thị trên trình duyệt.<br />
A -------------<br />
A -------------<br />
A -------------<br />
A -------------<br />
A	-------------<br />
A	-------------<br />
</div>
</body>
</html>
No comments:
Post a Comment