เนื่องจากอีเมล HTML ไม่ใช่โฮสต์อิสระในเว็บไซต์นี้จึงขึ้นอยู่กับผู้อื่น ดังนั้นการเขียนจดหมาย HTML จึงแตกต่างจากการเขียนหน้า HTML มาก เนื่องจากกล่องจดหมายหลักทั้งหมดสำหรับชาวเน็ตจะกรองจดหมาย HTML ที่ได้รับมากขึ้นหรือน้อยลง ไม่ต้องสงสัยเลยว่ารหัส JS จะถูกกรองอย่างเคร่งครัดรวมถึงแอตทริบิวต์การฟังเหตุการณ์ทั้งหมดเช่น OnClick และ OnMouseOver ซึ่งขึ้นอยู่กับข้อควรพิจารณาด้านความปลอดภัยทางอีเมล ไม่เพียงแค่นั้นรหัส CSS จะถูกกรองบางส่วน สิ่งที่ฉันต้องการพูดคุยคือวิธีการเขียนอีเมล HTML ที่ไม่ได้กรองโดยกล่องจดหมายหลักและสามารถแสดงได้ตามปกติ
ก่อนอื่นมาดูกันว่าอีเมลจะแสดงอีเมล HTML ได้อย่างไร ฉันไม่เคยสร้างระบบอีเมลและอัลกอริทึมการกรองในแบ็กเอนด์ของที่อยู่อีเมลที่สำคัญนั้นไม่ใช่เรื่องง่ายสำหรับคนนอกที่จะรู้ ดังนั้นเราสามารถคาดเดาได้ผ่านหน้าจอส่วนหน้าเพื่ออนุมานว่าวิธีการเขียนใดที่ได้รับการยอมรับจากอีเมลและจะถูกกรองออก ผ่านการวิเคราะห์ Gmail, Hotmail, 163, Sohu และ Sina ฉันแบ่งที่อยู่อีเมลออกเป็นสองประเภท:
หมวดหมู่แรกรวมถึง Gmail, Hotmail และ Sohu เนื้อหาอีเมลถูกจัดเรียงใน div ในหน้ากล่องจดหมายทั้งหมด ดังที่แสดงในภาพ: หมวดหมู่ที่สองรวมถึง 163 และ SINA ใช้เพื่อจัดเรียงเนื้อหาอีเมลใน IFRAME อิสระ ดังที่แสดงในภาพ:เพื่อนที่คุ้นเคยกับ HTML รู้ว่าเนื้อหา IFRAME เป็นเอกสารอิสระและไม่เกี่ยวข้องกับองค์ประกอบและ CSS ของหน้าหลักและสามารถถือได้ว่าเป็นหน้าอิสระ และหากเนื้อหาอีเมลอยู่ใน DIV เนื้อหาอีเมลเป็นส่วนหนึ่งของหน้าอีเมลทั้งหมด เห็นได้ชัดว่าการใช้ IFRAME เป็นวิธีการนำเสนอของอีเมลจะมีความอดทนต่อเนื้อหาอีเมลมากขึ้นเนื่องจากจะช่วยให้คุณมีพื้นที่อิสระเพียงพอสำหรับการนำเสนอ และ DIV นั้นไม่สุภาพ แค่คิดว่าถ้าคุณเขียน CSS นี้ในอีเมลของคุณตัวอักษรในกล่องจดหมายทั้งหมดจะเป็น 20px และมันจะยุ่ง:
<style type = text/css>
ร่างกาย {ตัวอักษรขนาด: 20px}
</style>
เราจำเป็นต้องเขียนเทมเพลตอีเมลแบบครบวงจรที่เข้ากันได้กับที่อยู่อีเมลแต่ละอันดังนั้นเราต้องหลีกเลี่ยงวิธีการเขียน CSS ภายนอกด้านบน นอกจากนี้สไตล์ที่คล้ายกับการลอยตำแหน่ง ฯลฯ ที่มีสตรีมเนื้อหาผิดปกติจะถูกกรองด้วย หากคุณเขียนอาจส่งผลกระทบต่อประสิทธิภาพของที่อยู่อีเมลภายนอก
ด้านล่างฉันแสดงรายการหลักการเขียนบางส่วน:1. หนึ่งในกฎระดับโลก: อย่าเขียนแท็กหรือคลาส> CSS ทั้งหมดใช้แอตทริบิวต์สไตล์ ใช้สไตล์การเขียน CSS แบบอินไลน์สำหรับองค์ประกอบใด ๆ ที่ต้องการสไตล์ใด ๆ
2. กฎระดับโลก 2: ใช้รูปภาพน้อยลง ที่อยู่อีเมลจะไม่กรองแท็ก IMG ของคุณ อย่างไรก็ตามระบบมักจะไม่โหลดรูปภาพจากคนแปลกหน้าโดยค่าเริ่มต้น หากคุณใช้ข้อความจดหมายจำนวนมากกับรูปภาพหากภาพยนตร์ไม่ได้โหลดมันจะน่าเกลียดมากและไม่สามารถมองเห็นเนื้อหาได้อย่างชัดเจน ผู้ใช้ที่ใจร้อนจะลบโดยตรง ต้องเพิ่ม Alt ในรูปภาพ
3. อย่าเขียนสไตล์ลอยและรูปแบบในสไตล์เพราะพวกเขาจะถูกกรอง ดังนั้นวิธีการบรรลุเลย์เอาต์ซ้ายและขวาหรือเค้าโครงที่ซับซ้อนมากขึ้น? ใช้ตาราง
4. พื้นหลังสามารถตั้งค่าในเนื้อหาสไตล์ได้ แต่ IMG จะถูกกรองซึ่งหมายความว่าภาพพื้นหลังไม่สามารถตั้งค่าผ่าน CSS ได้ แต่มีคุณลักษณะองค์ประกอบที่น่าสนใจมากเรียกว่าพื้นหลังที่คุณสามารถกำหนดเส้นทางภาพ นี่เป็นทางเลือกที่ดี แม้ว่าฟังก์ชั่นนี้มี จำกัด เช่นการไม่สามารถค้นหาภาพพื้นหลังได้ แต่ก็เป็นการดีกว่าที่จะไม่มี ตัวอย่างเช่นในการเพิ่มพื้นหลังในเซลล์คุณต้องเขียนแบบนี้:
<td background = http: //image1.koubei.com/images/common/logo_koubei.gif> </td>
5. ที่อยู่อีเมลในโหมด DIV ไม่รองรับแฟลชและโหมด IFRAME จะต้องได้รับการตรวจสอบ
ในที่สุดฉันอยากจะพูดถึงว่าที่อยู่อีเมลของ Sohu นั้นแปลกมาก มันจะเพิ่มพื้นที่หลังจากแต่ละเซ็กเมนต์ข้อความทำให้เลย์เอาต์ปกติดั้งเดิมถูกยกเลิกการสมัครและการแบ่งบรรทัดซึ่งจะทำให้เลย์เอาต์บางอย่างสับสน ดังนั้นหากคุณต้องการเข้ากันได้กับกล่องจดหมาย SOHU คุณควรระมัดระวังเป็นพิเศษเมื่อพบเค้าโครงขนาดกะทัดรัดให้ลดจำนวนส่วนข้อความและปล่อยความกว้างให้เพียงพอ