Tôi có nên sử dụng các thực thể HTML không?

Không gian dường như là điều rõ ràng nhất từng có đối với một người quan sát bên ngoài. Bạn nhấn nút 'dấu cách' khổng lồ, khoảng trắng xuất hiện như mong đợi và bạn tiếp tục. Tuy nhiên, trên thực tế, việc gõ dấu cách khá phức tạp và có rất nhiều cách để thực hiện việc này trong HTML. Chọn sai và những gì trình duyệt hiển thị ở cuối người nhận có thể làm hỏng những gì bạn đã nghĩ

Một trong những thực thể tiêu chuẩn được sử dụng trong HTML là

Beer in this store
costs $ 5

7. Hôm nay, chúng ta sẽ khám phá nó là gì, khi nào nên sử dụng và khi nào nên tránh nó. Chúng tôi cũng sẽ chia sẻ một số thủ thuật hay để sử dụng khoảng cách trong các dạng viết khác nhau

Các thực thể HTML chính

HTML entities are strings used to represent many reserved and invisible characters in HTML. These could be ‘’ symbols, currencies [e.g. ‘€’ or ‘£’], and common signs such as quotation marks or, you guessed it, spaces.

If you were to use either of the entities directly in the code, the browser would interpret them as HTML and render them accordingly. For example, ‘’ would likely be treated as the beginning or end of an HTML tag.

Để làm rõ cho từng trình duyệt những gì trình duyệt sẽ hiển thị, chúng tôi sử dụng các thực thể HTML và chúng tôi gói chúng trong dấu và [&] ở đầu và dấu chấm phẩy [;] ở cuối.   

Dưới đây là một số thực thể phổ biến nhất, cùng với các mã tương ứng

NameHTML EntityEntity NumberNon-breaking space  Less than [Ampersand [&]&&Euro [€]€€Pound [£]££double quotation mark [“]"“single quotation mark [apostrophe] [‘]'‘

Có nhiều thực thể HTML hơn mặc dù. Danh sách này sẽ là một tài liệu tham khảo tuyệt vời để giữ trong dấu trang của bạn

  có nghĩa là gì?

Beer in this store
costs $ 5

7 thực sự là một trong những thực thể HTML được sử dụng thường xuyên nhất. Nbsp là viết tắt của non-break space, nghĩa là các chuỗi được phân tách bằng thực thể này sẽ không bị tách ra và đưa vào các dòng riêng biệt

Để cung cấp cho bạn một ví dụ, hãy nhìn vào câu sau đây

Beer in this store costs $ 5

Trên màn hình nhỏ hơn, nó có thể được cắt thành hai phần, chẳng hạn như thế này

Beer in this store
costs $ 5

Nhưng đôi khi nó có thể bị cắt như thế này, điều đó khá đáng tiếc

Beer in this store costs $
5 

Để tránh sự sụp đổ khó xử như vậy, chúng tôi sử dụng thực thể

Beer in this store
costs $ 5

7 để dán '$' và '5' với nhau. Khi được chèn vào giữa các ký tự đó, tệ nhất là câu có thể bị sụp đổ như sau

Beer in this store costs
$ 5

Nhưng không bao giờ theo cách được mô tả ở trên

Một cách sử dụng khác, ít phổ biến hơn for

Beer in this store
costs $ 5

7 là để tạo nhiều khoảng trắng. Nếu bạn sử dụng ký tự dấu cách ‘ ‘ thông thường nhiều lần, trình duyệt sẽ luôn phân tích ký tự đó thành một dấu cách. Vì vậy, đoạn mã sau

________số 8

vẫn sẽ được kết xuất như

Price of this beer: wait for it.. 5 $

phá hủy khoảnh khắc Barney Stinson của bạn. Mã hóa nó như thế này, mặc dù

Beer in this store
costs $ 5

0

sẽ cung cấp cho bạn hiệu quả mong muốn

Khi nào không nên sử dụng  

Bạn phải thừa nhận, đoạn mã trên không dễ đọc lắm. Đồng thời, tạo nhiều không gian bằng cách sử dụng

Beer in this store
costs $ 5

7 là một cách thiết kế kém. Những gì có thể trông ổn trên màn hình của bạn gần như chắc chắn sẽ sụp đổ theo cách không thể kiểm soát ở phía người dùng do sự đa dạng lớn về kích thước và độ phân giải màn hình.  

Do đó, phần đệm, lề hoặc chiều rộng gần như luôn là cách tiếp cận tốt hơn khi thiết kế các trang phản hồi. Chúng ta sẽ thảo luận về tất cả chúng trong chương sau.

Beer in this store
costs $ 5

7 là một cách hữu ích để giữ các ký tự lại với nhau, nhưng có lẽ chỉ nên được sử dụng cho mục đích đó

Các không gian khác có sẵn trong HTML

Khi tách các từ hoặc các thành phần khác, bạn không bị giới hạn chỉ trong một khoảng trắng thông thường và không ngắt. rất dài. Dưới đây là một số trong những cái được sử dụng phổ biến nhất

TênThực thểHTMLSố thực thểEn space  Em space Thu hẹp khoảng cách không ngắt–3-per-em space 

  trong WordPress

Trình chỉnh sửa WordPress Gutenberg cung cấp một cách dễ dàng để chèn khoảng trắng không ngắt vào bài viết. Thay vì khoảng trắng, hãy nhấn Option+Space trên Mac hoặc Ctrl+Shift+Space trên Windows

Trong trình chỉnh sửa HTML cũ, điều này có thể phức tạp hơn. Bạn có thể thử chèn ngay

Beer in this store
costs $ 5

7 vào trình soạn thảo. Tuy nhiên, nếu chủ đề của bạn không có các quy tắc CSS chỉ định cách hiển thị chủ đề đó [và nhiều chủ đề không có], thì có thể bạn sẽ thấy mã thô hiển thị trên trang

Một giải pháp đáng tin cậy hơn có thể là một mã ngắn đơn giản được xác định trong hàm. tập tin php của chủ đề của bạn

Beer in this store
costs $ 5

4

mà sau đó bạn có thể gọi bất cứ khi nào bạn cần một không gian không bị phá vỡ với '[nbsp]'

[danh tiếng gửi tới @bncpeter về mã]

Ngoài ra, bạn có thể sử dụng một trong những trình soạn thảo văn bản phổ biến cho WP hỗ trợ

Beer in this store
costs $ 5

7 – ví dụ: EditorsKit, wp-Typography hoặc Advanced Editor Tools

Khoảng trắng trong email HTML

Tạo khoảng trống trong email HTML cũng không đơn giản. Điều này là do thiếu các tiêu chuẩn sẽ được công nhận bởi tất cả các ứng dụng email lớn. Những gì hoạt động cho Gmail hoặc Outlook có thể gây ra một số sự cố trên Yahoo. Thư, ví dụ. Và ngược lại

Nói chung, phát triển email khá khác với phát triển web. Tất cả CSS đi nội tuyến. Các nút hoạt động khác nhau. Và tệ nhất là mọi thứ đều được xây dựng trên bàn. Đặc biệt, khía cạnh thứ hai khiến việc sử dụng

Beer in this store
costs $ 5

7 trở nên không thực tế.  

Vẫn ổn khi giữ một số nhân vật nhất định cùng nhau. Bạn có thể chạy một bản hack email tiện lợi nào đó mà không cần nó [chúng ta sẽ nói về điều đó ở cuối bài viết]. Tuy nhiên, khi định dạng email, bạn nên sử dụng các phương pháp khác nhau

đệm di động

Cellpadding là một thuộc tính HTML được sử dụng để chỉ định khoảng cách [tính bằng pixel] giữa nội dung ô và tường. Đó là một giải pháp phổ biến để tạo không gian vì gần như tất cả các ứng dụng email đều hỗ trợ bảng. Và nếu có, họ cũng nhận ra thuộc tính cellpadding và định vị nội dung theo giá trị của nó. Ví dụ

Beer in this store
costs $ 5

7

có nghĩa là sẽ có khoảng cách 12px giữa nội dung và cả hai bức tường ở hai bên của nó

Hạn chế của phương pháp này là nó không thể được ghi đè. Cellpadding là một thuộc tính HTML. Như vậy, CSS không thể ghi đè lên nó, đặc biệt là với các truy vấn phương tiện của nó

đệm

Mặt khác, phần đệm là một thuộc tính CSS có thể được ghi đè tự do. Phần đệm cực kỳ hữu ích khi thiết kế email HTML cho cả web và thiết bị di động. Trong trường hợp như vậy, bạn nên sử dụng truy vấn phương tiện để chỉ định các phần đệm riêng lẻ cho một trong hai phiên bản của thư thay vì dựa vào cách tiếp cận một kích cỡ phù hợp với tất cả

Cú pháp của phần đệm CSS rất đơn giản – ví dụ

Beer in this store
costs $ 5

8

Vì phương pháp này không có bất kỳ nhược điểm đáng kể nào, nên đây được cho là cách tốt nhất để thêm khoảng cách, đặc biệt là trong các ô của bảng

ô trống

Một phương pháp khác là với các thẻ HTML

Beer in this store costs $
5 

6. Thông thường, các thẻ

Beer in this store costs $
5 

6 xác định các ô dữ liệu điển hình. Khi để trống, chúng tạo ra các ô vô hình có thể được sử dụng để tạo khoảng cách. Có một số lý do tại sao đây là một cách tiếp cận hiếm khi được sử dụng

First, and maybe most importantly, cells defined this way don’t always retain their height. Some clients will respect them; others will omit the spacing created this way. There’s a high probability that carefully typed in ’s will result in no spacing at all, making your copy potentially unreadable.

Hơn nữa, việc sử dụng chúng yêu cầu xây dựng toàn bộ bảng mà bạn có thể sẽ không sử dụng theo cách khác. Và, nếu bạn đang viết mã cho thiết bị di động [và ai thì không?], bạn sẽ cần viết các lớp mới để kiểm soát chiều cao và chiều rộng của các ô vô hình – tất cả những điều này, không có gì đảm bảo rằng khoảng cách sẽ hiển thị trong

Lề

Margin là một phần tử CSS có cách tương tự như padding. Sự khác biệt giữa hai loại này là trong khi phần đệm thêm khoảng cách bên trong một ô, thì lề sẽ làm như vậy bên ngoài nó. Cú pháp ví dụ của ký quỹ trông như sau

Beer in this store
costs $ 5

0

Lề thường được sử dụng trong phát triển web để tạo khoảng cách giữa các phần tử. Tuy nhiên, trong quá trình phát triển email, họ không thành công vì thiếu tiêu chuẩn và sự không nhất quán giữa các ứng dụng email

Nghỉ

Thẻ

Beer in this store costs $
5 

8 là một cách phổ biến để tạo khoảng trắng trong HTML. Mặc dù nó tiện dụng trong các bài đăng trên blog như bài đăng này, nhưng có một vấn đề quen thuộc xuất hiện khi cố gắng sử dụng nó trong email. Một lần nữa, các ứng dụng email đối xử với nó rất khác. Một số làm cho khoảng cách rộng hơn; . Do đó, hầu như không thể dự đoán được email sẽ trông như thế nào ở phía người nhận

Do đó, thẻ

Beer in this store costs $
5 

8 chỉ được khuyên dùng khi tạo ngắt giữa văn bản

Kiểm tra email HTML của bạn

Cho dù bạn chọn cách tiếp cận nào để triển khai khoảng trắng trong email HTML của mình, điều quan trọng là bạn phải kiểm tra email bằng các công cụ như Hộp cát email Mailtrap.  

Mailtrap Email Sandbox là một giải pháp kiểm tra email được sử dụng bởi các nhà phát triển muốn kiểm tra và gỡ lỗi email của họ trong một môi trường an toàn trước khi gửi chúng cho người nhận. Giải pháp tự động kiểm tra email và loại bỏ nguy cơ gửi thư rác cho người nhận trong quá trình này. Nó cũng đi kèm với nhiều tính năng, bao gồm nhiều hộp thư đến cho các dự án và giai đoạn dự án khác nhau, kiểm tra và xem trước điểm spam nội dung email, báo cáo danh sách đen, thông tin chuyên sâu về thông tin công nghệ, chuyển tiếp email tự động hoặc thủ công, v.v.

Một tính năng giúp Email Sandbox đặc biệt tiện dụng về email HTML là Kiểm tra HTML/CSS của nó. Với tính năng này, bạn có thể ước tính mức độ hỗ trợ cho mã email của mình trên các ứng dụng email phổ biến và cũng có thể tìm thấy bất kỳ yếu tố có vấn đề nào trong email của bạn

Sau khi bạn gửi email kiểm tra đến hộp thư ảo Email Sandbox của mình, ở đầu tab Kiểm tra HTML/CSS sẽ là tỷ lệ phần trăm thể hiện sự hỗ trợ của thị trường đối với các thành phần HTML/quy tắc CSS được sử dụng trong email. Tỷ lệ phần trăm này được tính bằng cách sử dụng dữ liệu hỗ trợ từ các ứng dụng email khác nhau trong khi xem xét thị phần của họ

Bạn cũng có thể lọc qua các kết quả hỗ trợ thị trường dựa trên thiết bị và/hoặc ứng dụng email

Bên dưới phần phần trăm hỗ trợ thị trường sẽ là danh sách các thành phần HTML/quy tắc CSS chỉ được hỗ trợ một phần hoặc hoàn toàn không được hỗ trợ. Đối với mỗi thành phần/quy tắc, bạn sẽ có thể thấy tên của nó, các ứng dụng khách không/hỗ trợ một phần nó, liên kết đến các dòng mã chứa nó và hiển thị thêm liên kết hiển thị một phần có nhiều thông tin hơn sau khi nhấp vào

Nếu bạn nhấp vào một liên kết dẫn đến một dòng mã chứa một thành phần/quy tắc cụ thể, bạn sẽ được chuyển hướng đến tab Nguồn HTML hiển thị toàn bộ mã HTML của email của bạn. Ở đó, mỗi thành phần/quy tắc có vấn đề sẽ được đánh dấu bằng một vòng tròn màu cam hoặc đỏ có dấu chấm than bên trong.

Các tab khác sẽ giúp bạn kiểm tra email HTML của mình là tab HTML hiển thị cho bạn cách trình duyệt web hiển thị email của bạn;

Để bắt đầu với Mailtrap Email Sandbox, trước tiên hãy tạo một tài khoản Mailtrap. Sau đó, đăng nhập và truy cập Hộp cát – > Hộp thư đến – > Cài đặt SMTP và chọn xem bạn có muốn gửi email kiểm tra đầu tiên của mình bằng cách dán một vài dòng mã vào tập lệnh ứng dụng hay bằng cách dán thông tin đăng nhập SMTP vào tập lệnh gửi email, cài đặt MTA

Nếu bạn đã hoàn thành tất cả các bước thiết lập một cách chính xác và gửi đi email kiểm tra của mình, thì email này sẽ ngay lập tức được đưa vào hộp thư đến ảo của bạn, nơi bạn có thể tiến hành kiểm tra và gỡ lỗi

Kiểm tra email của bạn

Khoảng cách giữa các hình ảnh trong HTML

Beer in this store
costs $ 5

7 cũng không phải là giải pháp phù hợp khi cố tách ảnh. Nó chỉ hoạt động với các từ và sẽ không có bất kỳ hiệu ứng rõ ràng nào khi được đặt giữa bất kỳ loại phương tiện nào. Nếu bạn đang xây dựng một trang HTML, hai cách tiếp cận được đề cập trước đây sẽ thực hiện công việc tốt hơn

• Beer in this store costs $
  5 

  8 vẫn là một tùy chọn nếu bạn muốn tách hai hoặc nhiều hình ảnh được căn chỉnh theo chiều dọc. Như trường hợp trên, khoảng cách giữa các phần tử được phân tách bằng

  Beer in this store costs $
  5 

  8 có thể thay đổi
• Phần đệm và/hoặc lề gần như luôn là cách tiếp cận đáng tin cậy hơn. Dưới đây là ví dụ về cách sử dụng lề và tạo khoảng cách bên trên, bên dưới, bên trái và bên phải của hình ảnh được đề cập

Beer in this store
costs $ 5

1

Làm cách nào để xóa khoảng cách giữa các hình ảnh trong email HTML?

Mặt khác, bạn có thể muốn loại bỏ không gian mà một số ứng dụng email đã thêm theo mặc định. Đây là sự cố thường xuyên xảy ra với một số phiên bản Outlook, nhưng cũng xảy ra với Gmail rất phổ biến. Có một số phương pháp để giải quyết vấn đề này trong HTML

Thông thường, khoảng trống xuất hiện do hình ảnh không có thẻ tạo kiểu phù hợp. Vì các ứng dụng email không được hướng dẫn về cách hiển thị những hình ảnh đó nên họ chỉ định một thẻ '

Beer in this store costs
$ 5

3' cho mỗi người trong số họ. Do đó, một khoảng trống nhỏ sẽ xuất hiện xung quanh mỗi hình ảnh hoặc các thành phần khác của email. Bạn có thể ghi đè điều này bằng cách chèn thẻ '

Beer in this store costs
$ 5

4' cho mỗi hình ảnh

Beer in this store
costs $ 5

2

Khi bạn chỉ có hai hình ảnh, một phương pháp khác là đặt chúng nổi tương ứng. Ví dụ

Beer in this store
costs $ 5

3

Hãy chắc chắn rằng bạn thêm những nội tuyến đó cho mỗi hình ảnh vì Gmail không cung cấp hỗ trợ cho biểu định kiểu và nhúng

Ngoài ra, hãy cân nhắc xóa phần đệm và đặt chiều cao dòng thấp [