Phần 1: HTML | Bài 3: Các ký tự đặc biệt trong HTML

Vậy là các bạn đã đi cùng Thiết kế số học qua 2 bài trong chuỗi bài dạy thiết kế website. Hôm nay chúng tôi sẽ cùng các bạn đến bài thứ 3, bài này tương đối dễ, các bạn chỉ cần lấy về sử dụng thôi

Một vài ký tự tương tự như dấu nhỏ hơn “<“, có một ý nghĩa đặc biệt trong HTML, và do đó không thể được sử dụng như là chữ được. Do vậy để hiển thị được dấu nhỏ hơn < trong HTML chúng ta phải sử dụng những ký tự đặc biệt. Bởi vì dấu < xác định điểm bắt đầu của một thẻ HTML. Nên nếu bạn muốn trình duyệt hiển thị ký tự đó bạn phải thêm và code của nó những ký tự đặc biệt.

Một ký tự đặc biệt có 3 phần: Ký hiệu (&), tên của ký tự hoặc một dấu # và một dãy số và cuối cùng là dấu chấm phẩy ;

Để hiển thị được dấu nhỏ hơn trong HTML bạn phải viết là &lt; hoặc &#60;

Cái hay của việc sử dụng tên thay vì sử dụng số là vì tên của nó thì dễ nhớ hơn nhiều. Nhưng cái dở lại là không phải trình duyệt nào cũng hỗ trợ những tên mới này, trong khi đó hầu hết các trình duyệt đều có thể nhận ra nó ở dạng số.

Bạn nên chú ý rằng ký tự đặc biệt phân biệt chữ hoa và chữ thường. Ví dụ sau đây sẽ giúp bạn thực nghiệm với những ký tự đặc biệt. Lưu ý bạn rằng những ký tự này chỉ có trong trình duyệt Internet Explorer.

Xem ví dụ

Non-breaking space
Ký tự được dùng nhiều nhất trong HTML có lẽ là nbsp (non-breaking space)

Thường thì HTML cắt bớt khoảng trống trong chữ của bạn. Ví dụ nếu bạn viết 10 chỗ trống trong text của bạn thì HTML sẽ loại bỏ 9 trong số đó. Để thêm khoảng trống vào chữ của bạn, bạn phải sử dụng ký tự đặc biệt là &nbsp;

Những ký tự được dùng thường xuyên nhất

Kết quả Loại Tên của ký tự Số
một khỏang trắng &nbsp; &#160;
< nhỏ hơn &lt; &#60;
> lớn hơn &gt; &#62;
& dấu và &amp; &#38;
ngoắc kép &quot; &#34;
ngoặc đơn &apos; (does not work in IE) &#39;

Một vài ký tự khác

Kết quả Loại Tên của ký tự Số
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
× nhân &times; &#215;
÷ chia &divide; &#247;
FOLLOW US

Leave a Reply

Your email address will not be published. Required fields are marked *