>웹 프론트엔드 >HTML 튜토리얼 >이메일 메시지용 HTML 페이지 작성 원칙 요약_HTML/Xhtml_웹 페이지 제작

이메일 메시지용 HTML 페이지 작성 원칙 요약_HTML/Xhtml_웹 페이지 제작

WBOY
WBOY원래의
2016-05-16 16:42:021512검색

HTML 이메일은 이 사이트의 독립적인 HOST 페이지가 아니기 때문에 다른 사이트에서 호스팅됩니다. 따라서 HTML 이메일을 작성하는 것은 HTML 페이지를 작성하는 것과 매우 다릅니다. 네티즌을 위한 모든 주류 사서함은 백그라운드에서 수신하는 HTML 이메일을 어느 정도 필터링하기 때문입니다. onclick 및 onmouseover와 같은 모든 이벤트 수신 속성을 포함하여 JS 코드가 엄격하게 필터링된다는 것은 의심의 여지가 없습니다. 이는 이메일 보안 고려 사항을 기반으로 합니다. 뿐만 아니라 CSS 코드도 부분적으로 필터링됩니다. 제가 이야기하고 싶은 것은 주요 주류 메일박스에 의해 필터링되지 않고 정상적으로 표시될 수 있는 HTML 이메일을 작성하는 방법입니다.

먼저 메일함에 HTML 이메일이 어떻게 표시되는지 살펴보겠습니다. 저는 이메일 시스템을 직접 작업해본 적이 없고, 주요 메일함의 배경에 있는 필터링 알고리즘은 외부인이 알기가 쉽지 않습니다. 따라서 프런트 엔드 디스플레이만 사용하여 사서함에서 허용되는 쓰기 방법과 필터링되는 쓰기 방법을 추론할 수 있습니다. gmail, hotmail, 163, sohu, sina 분석을 통해 메일함을 두 가지 카테고리로 나누었습니다.

첫 번째 카테고리에는 gmail, hotmail, sohu가 포함됩니다. 이 유형의 메일함에서는 이메일 내용이 전체 메일함 페이지의 특정 div에 배치됩니다. 그림과 같이:


두 번째 카테고리에는 163과 sina가 포함됩니다. 이 유형의 메일함에서는 이메일 콘텐츠가 별도의 iframe에 배치됩니다. 그림과 같이:

HTML에 익숙한 친구들은 iframe 콘텐츠가 독립된 문서이며 상위 페이지의 요소 및 CSS로부터 독립되어 거의 독립된 페이지로 취급될 수 있다는 것을 알고 있습니다. 이메일 콘텐츠가 div에 있는 경우 이메일 콘텐츠는 전체 편지함 페이지의 필수 부분입니다. iframe을 프레젠테이션 방법으로 사용하는 메일함은 표현을 위한 충분히 독립적인 공간을 제공하므로 이메일 콘텐츠에 훨씬 더 관대합니다. div는 그렇게 정중하지 않습니다. 이메일에 이 CSS 문장을 작성하면 전체 이메일 표시 페이지의 글꼴 크기가 20픽셀이 되어 엉망이 될 것입니다.

각 편지함과 호환되는 통합 이메일 템플릿을 작성해야 하므로 위의 외부 CSS 작성 방법 및 Styles와 유사한 것을 피해야 합니다. 비정상적인 콘텐츠 흐름이 되는 플로트 및 위치도 필터링됩니다. 이를 작성하면 외부 메일함의 성능에 영향을 미칠 수 있습니다.


아래에 몇 가지 작성 원칙을 나열하겠습니다. 1. 전역 규칙 중 하나는