Thoát dấu nháy đơn HTML

---

Các ký tự dành riêng trong HTML phải được thay thế bằng các thực thể ký tự

---

Một số ký tự được dành riêng trong HTML

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Các thực thể ký tự được sử dụng để hiển thị các ký tự dành riêng trong HTML

Một thực thể nhân vật trông như thế này

&entity_name;

HOẶC

&#entity_number;

Để hiển thị dấu nhỏ hơn (<), chúng ta phải viết. < hoặc <

Lợi ích của việc sử dụng tên thực thể. Tên thực thể dễ nhớ.
Bất lợi khi sử dụng tên thực thể. Các trình duyệt có thể không hỗ trợ tất cả các tên thực thể, nhưng hỗ trợ tốt cho các số thực thể.

---

Không gian không phá vỡ

Một thực thể thường được sử dụng trong HTML là không gian không phá vỡ.  

Khoảng trắng không ngắt là khoảng trắng sẽ không ngắt thành một dòng mới

Hai từ cách nhau bởi dấu cách không ngắt sẽ dính vào nhau (không ngắt thành dòng mới). Điều này rất hữu ích khi ngắt các từ có thể gây rối

ví dụ

Một cách sử dụng phổ biến khác của khoảng trống không phá vỡ là để ngăn trình duyệt cắt bớt khoảng trắng trong các trang HTML

Nếu bạn viết 10 khoảng trắng trong văn bản của mình, trình duyệt sẽ xóa 9 khoảng trắng trong số đó. Để thêm khoảng trắng thực vào văn bản của mình, bạn có thể sử dụng thực thể ký tự

Mẹo. Dấu gạch ngang không ngắt (‑) được sử dụng để xác định ký tự gạch nối (‑) không ngắt thành một dòng mới

---

---

Một số thực thể ký tự HTML hữu ích

Ghi chú. Tên thực thể phân biệt chữ hoa chữ thường

---

Kết hợp dấu phụ

Dấu phụ là một "glyph" được thêm vào một chữ cái

Một số dấu phụ, như dấu huyền ( ̀) và dấu sắc ( ́) được gọi là trọng âm

Dấu phụ có thể xuất hiện cả bên trên và bên dưới một chữ cái, bên trong một chữ cái và giữa hai chữ cái

Dấu phụ có thể được sử dụng kết hợp với các ký tự chữ và số để tạo ra một ký tự không có trong bộ ký tự (mã hóa) được sử dụng trong trang

Xin chào. Tôi đã tìm cách thoát khỏi dấu ngoặc kép và dấu nháy đơn trong văn bản thay thế cho một hình ảnh và có vẻ như bạn chỉ cần thêm một cụm từ bổ sung " để thoát dấu ngoặc kép và ' để thoát dấu nháy đơn, tuy nhiên, các công cụ dành cho nhà phát triển dường như chỉ ra sự cố. Đây là thẻ hình ảnh của tôi và văn bản thay thế nơi xảy ra sự cố

<input value='hello'/>

6

Kiểm tra điều này trong các công cụ dành cho nhà phát triển sẽ hiển thị tất cả văn bản còn lại và dấu ngoặc html đóng cho

<input value='hello'/>

7 được đánh dấu màu đỏ sau văn bản “Khai báo,”. Tôi đã đi đi lại lại tìm kiếm lý do tại sao điều này lại xảy ra. Tôi cũng đã chạy cái này thông qua trình xác thực HTML và nó cho biết trình duyệt đang tìm kiếm một thuộc tính bị thiếu và dấu bằng. Trình chỉnh sửa mã dường như không có vấn đề gì với văn bản thay thế sau khi thêm các dấu ngoặc kép và dấu nháy đơn bổ sung, nhưng các công cụ dành cho nhà phát triển và trình xác thực dường như không đồng ý. Mắt tôi bắt đầu mờ đi trong cuộc tìm kiếm câu trả lời này và tôi có thể sử dụng một con trỏ. Có điều gì khác mà tôi nên xem xét để sửa lỗi này không?

Bởi vì có một trích dẫn bên trong giá trị nên nó kết thúc gói giá trị. HTML này sau đó sẽ hiển thị dưới dạng

<input value='hello'/>

3 chứ không phải

<input value='hello'/>

4

Điều này cũng đúng nếu bạn sử dụng dấu ngoặc kép để bọc giá trị và sau đó sử dụng dấu ngoặc kép bên trong giá trị, như thế này

<input value="This will "break" the HTML"/>

HTML được hiển thị sẽ là

<input value='hello'/>

5 chứ không phải

<input value='hello'/>

6

Có hai cách chúng ta có thể giải quyết vấn đề này

1. Chúng tôi có thể sử dụng dấu ngoặc kép để bao bọc và sau đó chúng tôi có thể tự do sử dụng dấu ngoặc đơn bên trong giá trị
2. Chúng ta có thể sử dụng các ký tự thoát đặc biệt

Chúng ta hãy xem tùy chọn 1 tiếp theo

Cách sử dụng Trích dẫn đơn trong HTML

Giải pháp đơn giản nhất để hiển thị một trích dẫn trong một giá trị là sử dụng các trích dẫn kép trong HTML của bạn

Điều này sẽ trông như thế này

<input value="it's"/>

Trong ví dụ trên, trích dẫn đơn nằm trong dấu ngoặc kép và là HTML hợp lệ. Kết quả sẽ là một giá trị của

<input value='hello'/>

4

Nếu chúng tôi muốn hiển thị một trích dẫn kép trong giá trị, chúng tôi có thể hoán đổi mọi thứ xung quanh. Lần này chúng ta sẽ sử dụng dấu ngoặc đơn để bao bọc giá trị của thuộc tính và sau đó chúng ta có thể tùy ý sử dụng dấu ngoặc kép bên trong

Đây là giao diện của HTML

<input value='This will not "break" the HTML'/>

Kết quả sẽ là một giá trị của

<input value='hello'/>

8 được hiển thị trên trang

Có hai điều mà chúng ta cần lưu ý khi sử dụng bản sửa lỗi này

1. Điều gì xảy ra nếu chúng ta cần sử dụng cả trích dẫn đơn và kép trong giá trị
2. Điều gì sẽ xảy ra nếu chúng ta không kiểm soát ký tự được sử dụng để bọc giá trị

Trong trường hợp này, chúng ta cần xem xét cách khắc phục thứ hai sử dụng chuỗi thoát

Sử dụng chuỗi thoát HTML

Đôi khi bạn không kiểm soát được ký tự được sử dụng để bọc các giá trị HTML

Thông thường trong các CMS, dấu ngoặc đơn hoặc dấu ngoặc kép được đặt theo mặc định và bạn không thể thay đổi chúng

Một tình huống khác là bạn cần hiển thị cả dấu ngoặc đơn và dấu ngoặc kép trong giá trị như thế này

<input value='You're going to "break" the HTML'/>

Sẽ hiển thị dưới dạng

<input value='hello'/>

9 chứ không phải

<input value='hello'/>

10

Điều này cũng đúng nếu chúng ta sử dụng dấu ngoặc kép

<input value='hello'/>

2

Sẽ hiển thị dưới dạng

<input value='hello'/>

11 chứ không phải

<input value='hello'/>

10

Vì vậy, làm thế nào để chúng tôi sửa lỗi này?

Chúng ta cần sử dụng một bộ ký tự đặc biệt được gọi là chuỗi “thoát”

Thay vì sử dụng một trích dẫn, bạn thay thế trích dẫn này bằng một bộ ký tự đặc biệt. Trình duyệt sẽ hiển thị bộ ký tự đặc biệt dưới dạng một trích dẫn

Ví dụ: bộ ký tự lạ này

<input value='hello'/>

13 giống như sử dụng một dấu nháy đơn

Thật lạ khi bạn đặt nó lần đầu tiên nhưng trình duyệt sẽ đọc chuỗi này

<input value='hello'/>

13 và biến nó thành một trích dẫn duy nhất

Có rất nhiều chuỗi thoát ký tự lạ này

Có mười cái khác nhau để đại diện cho một trích dẫn. Mười

Tất cả đều ở đây

• <input value='hello'/>

  15

• <input value='hello'/>

  16

• <input value='hello'/>

  17

• <input value='hello'/>

  18

• <input value='hello'/>

  19

• <input value="This will "break" the HTML"/>

  20

• <input value="This will "break" the HTML"/>

  21

• <input value="This will "break" the HTML"/>

  22

• <input value="This will "break" the HTML"/>

  23

• <input value='hello'/>

  13

Vậy bạn nên sử dụng cái nào khi cần thoát hiểm

Câu trả lời ngắn gọn là bạn nên sử dụng

<input value='hello'/>

13. Đây là chuỗi thoát chính thức để sử dụng cho HTML 5. Vì vậy, sử dụng ví dụ của chúng tôi từ trước đó, chúng tôi có thể viết

<input value="This will "break" the HTML"/>

8

Mặc dù điều này có vẻ lạ trong HTML. Khi trình duyệt hiển thị giá trị, nó sẽ hiển thị là “nó” cho người dùng

Vì vậy, làm thế nào để chúng ta làm tương tự cho một trích dẫn kép?

Có nhiều cách bạn có thể viết một trích dẫn kép

• <input value="This will "break" the HTML"/>

  26

• <input value="This will "break" the HTML"/>

  27

• <input value="This will "break" the HTML"/>

  28

• <input value="This will "break" the HTML"/>

  29

• <input value="This will "break" the HTML"/>

  0

• <input value="This will "break" the HTML"/>

  1

• <input value="This will "break" the HTML"/>

  2

• <input value="This will "break" the HTML"/>

  3

• <input value="This will "break" the HTML"/>

  4

Người duy nhất bạn nên sử dụng là

<input value="This will "break" the HTML"/>

4. Vì vậy, lấy ví dụ của chúng tôi, nơi bạn có cả dấu ngoặc đơn và dấu ngoặc kép, HTML của bạn sẽ trông như thế này

<input value='hello'/>

0

Điều này sau đó sẽ hiển thị giá trị của “Bạn sẽ "phá vỡ" HTML”

Vì vậy, bây giờ chúng tôi có một giải pháp cho vấn đề này, Yay

Dấu ngoặc kép không phải là ký tự duy nhất mà bạn có thể thoát

Hãy nhìn vào những điều tiếp theo

Thoát khỏi ký tự đặc biệt

Có một danh sách khổng lồ các ký tự đặc biệt mà bạn có thể thoát theo cách tương tự. Bao gồm mọi thứ từ dấu hai chấm đến dấu và

Vậy mà tôi mới chỉ thoát có 5

Nếu bạn tò mò về danh sách đầy đủ thì w3 đã tạo danh sách tất cả các ký tự đặc biệt HTML

Đây là danh sách của tôi về 5 người duy nhất bạn cần nghĩ về việc trốn thoát

• & trở thành

  <input value="This will "break" the HTML"/>

  6
• < trở thành

  <input value="This will "break" the HTML"/>

  7

• trở thành

  <input value="This will "break" the HTML"/>

  8

• " trở thành

  <input value="This will "break" the HTML"/>

  4
• ' trở thành

  <input value='hello'/>

  13

Với những lần thoát này, bạn sẽ không bao giờ bị hỏng HTML nữa

Các câu hỏi thường gặp

Tôi có thể sử dụng dấu ngoặc đơn trong HTML không?

Vâng, bạn có thể. đảm bảo sử dụng dấu ngoặc kép để bọc các giá trị của bạn hoặc thoát khỏi dấu ngoặc đơn bằng cách sử dụng

<input value='hello'/>

13