HTML入门——互动式推送初尝试
注意，一个标签（例如a标签）的开始与结尾分别用<a></a>表示，也可以表示为<a />，部分不规范的HTML文档会省略后面的</a>。
标签的内容放在两个尖括号之间，标签的属性放在尖括号”里”，像这样：
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <style type="text/css"> body {background-color:white} p {color:purple} </style> </head>
绝对色感の挑战：不 瞎 算 你 赢》 ，示例的大部分代码来自于该文章，仅做学习用途。
另外，我们注意到下面代码第8行的span标签多了一个color: rgb(204, 0, 0);的color属性，说明
<body> <p style="max-width: 100%;min-height: 1em;white-space: normal;margin-left: 16px;margin-right: 16px;line-height: 1.75em;letter-spacing: 0.5px;font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box !important;overflow-wrap: break-word !important;"> <span style="font-size: 15px;"> <span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"> 请看题：以下哪个是 </span> <span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box;color: rgb(204, 0, 0);">中国乒乓球队队服的主流颜色 </span> <span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;">？ </span> </span> <br /> </p>
url("//baike.so.com/gallery/listghid=first&pic_idx=1&eid=1395020&sid=1474879")
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s" </animate>
<section style="box-sizing: border-box;font-size: 16px;"> …… <section style="background-image: url("//baike.so.com/gallery/list?ghid=first&pic_idx=1&eid=1395020&sid=1474879");background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;background-attachment: scroll;width: 95%;margin-left: auto;margin-right: auto;box-sizing: border-box;"><section class="group-empty" style="display: inline-block;width: 100%;height: 105px;vertical-align: top;overflow-y: auto;border-style: none;border-width: 0px;border-radius: 10px;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;"></section></section><section style="box-sizing: border-box;margin-top: -105px;height: 105px;"> <section class="top-div" style="height: 100%;box-sizing: border-box;"> <svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="//www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1"> <animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01"> </animate> <animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s"> </animate> ……
</section>
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <style type="text/css"> body {background-color:white} p {color:purple} </style> </head>
<body> <p style="max-width: 100%;min-height: 1em;white-space: normal;margin-left: 16px;margin-right: 16px;line-height: 1.75em;letter-spacing: 0.5px;font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box !important;overflow-wrap: break-word !important;"> <span style="font-size: 15px;"> <span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"> 请看题：以下哪个是 </span> <span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box;color: rgb(204, 0, 0);">中国乒乓球队队服的主流颜色 </span> <span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;">？ </span> </span> <br /> </p> <section style="box-sizing: border-box;font-size: 16px;"> <section style="text-align: center;margin-top: 10px;margin-right: 0%;margin-left: 0%;box-sizing: border-box;" powered-by="xiumi.us"> <section style="display: inline-block;vertical-align: top;width: 33.33%;padding: 3px;box-sizing: border-box;"> <section style="box-sizing: border-box;" powered-by="xiumi.us"> <section style="background-image: url("//baike.so.com/gallery/list?ghid=first&pic_idx=1&eid=1395020&sid=1474879");background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;background-attachment: scroll;width: 95%;margin-left: auto;margin-right: auto;box-sizing: border-box;"><section class="group-empty" style="display: inline-block;width: 100%;height: 105px;vertical-align: top;overflow-y: auto;border-style: none;border-width: 0px;border-radius: 10px;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;"></section></section><section style="box-sizing: border-box;margin-top: -105px;height: 105px;"> <section class="top-div" style="height: 100%;box-sizing: border-box;"> <svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="//www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1"> <animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01"> </animate> <animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s"> </animate> <svg xmlns="//www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;"> <svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;"> <rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: rgb(255, 0, 0);" x="0%"> </rect> </svg> <svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="//www.w3.org/2000/svg"> </svg> </svg> <animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0"> </animate> </svg> </section> </section> </section> </section> <section style="display: inline-block;vertical-align: top;width: 33.33%;padding: 3px;box-sizing: border-box;"> <section style="box-sizing: border-box;" powered-by="xiumi.us"> <section class="group-empty" style="display: inline-block;width: 95%;height: 105px;vertical-align: top;overflow-y: auto;border-width: 0px;border-radius: 10px;border-style: none;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;"> </section> <section style="box-sizing: border-box;margin-top: -105px;height: 105px;"> <section class="top-div" style="height: 100%;box-sizing: border-box;"> <svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="//www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1"> <animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01"> </animate> <animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s"> </animate> <svg xmlns="//www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;"> <svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;"> <rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: rgb(0, 0, 255);" x="0%"> </rect> </svg> <svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="//www.w3.org/2000/svg"> </svg> </svg> <animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0"> </animate> </svg> </section> </section> </section> </section> <section style="display: inline-block;vertical-align: top;width: 33.33%;padding: 3px;box-sizing: border-box;"> <section style="box-sizing: border-box;" powered-by="xiumi.us"> <section class="group-empty" style="display: inline-block;width: 95%;height: 105px;vertical-align: top;overflow-y: auto;border-width: 0px;border-radius: 10px;border-style: none;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;"> </section> <section style="box-sizing: border-box;margin-top: -105px;height: 105px;"> <section class="top-div" style="height: 100%;box-sizing: border-box;"> <svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="//www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1"> <animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01"> </animate> <animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s"> </animate> <svg xmlns="//www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;"> <svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;"> <rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: rgb(255, 0, 255);" x="0%"> </rect> </svg> <svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="//www.w3.org/2000/svg"> </svg> </svg> <animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0"> </animate> </svg> </section> </section> </section> </section> </section> <section style="margin-top: 10px;box-sizing: border-box;" powered-by="xiumi.us"> <section style="color: rgb(165, 165, 165);box-sizing: border-box;"> <p style="text-align: center;white-space: normal;box-sizing: border-box;">欢迎关注xx乒协！ <br style="box-sizing: border-box;" />▼ </p> </section> </section> </body
后记——
写这篇博客前，博主曾纠结于这份本应贡献给社团宣传部的内部资料是否应该公之于众，但最终认为开源有助于成长，况且源代码+技术资料本是公开的，应多多分享交流。博主作为前端小白（甚至可以说是外行人都不为过）前后利用约5-6个小时搜集整理了相关资料，希望努力没有白费，也但愿逐梦之路能够坚持，立此为证。
五一劳动节，要更加努力啊！
