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個小時搜集整理了相關資料，希望努力沒有白費，也但願逐夢之路能夠堅持，立此為證。
五一勞動節，要更加努力啊！
