代码片段

黑色背景：---------------------------------------------------------------------

<!--This is a comment. Comments are not displayed in the browser-->

<div style="background-color: black; padding: 0 15px;">

</div>

版面尺寸：---------------------------------------------------------------------

<!--This is a comment. Comments are not displayed in the browser-->

For Mobile and Computer in one

Entire blog: 1090 (手机正好满屏宽)

Header image width: 1060

文内图片宽度：width="1010"

文内视频宽度：width="1018"

文中视频：---------------------------------------------------------------------

<!--This is a comment. Comments are not displayed in the browser-->
 <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="500" src="https://www.youtube.com/embed/47yI16A9UHk" width="1018"></iframe>
<br />
<br />

PlayList 视频：---------------------------------------------------------------------

Embed a playlist

1. Sign in to your YouTube account on a computer.
2. On the left side of the page, select the playlist you want to embed.
3. Copy the playlist ID from the URL.
4. Replace the yellow part with the playlist ID 

<!--This is a comment. Comments are not displayed in the browser-->

<iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="500" src="https://www.youtube.com/embed/videoseries?list=------------- playlistID------------" width="1018"></iframe>
<br />
<br />

文中图像：---------------------------------------------------------------------

20240111 更新：

怎样获得谷歌相册(hycloud.album.1@gmail.com)中图像的网址

1. Open your preferred photo in Google Photos and click on "Share," then "Create Link" to get a shareable link for that image.
2. Copy the link and open a new browser tab.
3. Paste the link address into the new browser window. This will bring you to a new shared album with just that photo in it.
4. Click the image to zoom in and right-click on the image.
5. Select "Copy image address" from the menu.

<!--This is a comment. Comments are not displayed in the browser-->
 <br />
<div style="background-color: #fffeee; border: 1px solid #ccc; box-shadow: 1px 1px 5px #ccc; float: left; margin-bottom: 10px; overflow: hidden; padding: 3px; text-align: right;">
<a href="https://---------- 图像链接--------" target="_blank" title="多想在平庸的生活拥抱你"><img src="https://---------- 图像链接--------" width="1010" /></a>
<span style="background-color: #fffeee; color: #333333; font-size: 85%;">Page 1 of 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</div>

Or (无页码) --------------------------------------------

<!--This is an image. ------------------------------------------------>
 <div class="separator" style="background-color: #fffeee; border: 1px solid #ccc; box-shadow: 1px 1px 5px #ccc; clear: both; float: left; margin-bottom: 10px; overflow: hidden; padding: 3px; text-align: right;">
<a href="https://---------- 图像链接--------" >     <img border="0" src="https://---------- 图像链接--------" width="1010" />   </a> </div>

Or (无页码无链接) ----------------------------------------------------------

<!--This is a comment. Comments are not displayed in the browser-->
 <div class="separator" style="background-color: #fffeee; border: 1px solid #ccc; box-shadow: 1px 1px 5px #ccc; clear: both; float: left; margin-bottom: 10px; overflow: hidden; padding: 3px; text-align: right;">
<img border="0" src="https://---------- 图像链接--------" width="1010" /> </div>

Slideshow size --------------------------------------------------------------------

<!--This is a comment. Comments are not displayed in the browser-->
rimages for slideshow 1040x585 (1920x1080 按比例缩小) --------------
为了给出 padding 10px; 的空间, container div is 1060x605px


Table --------- --------------------------------------------------------------------

<!--This is a comment. Comments are not displayed in the browser--> <style> table#t01 { width:100%; } table#t01, th, table#t01 td { border: 1px solid black; border-collapse: collapse; } table#t01 th, table#t01 td { padding: 8px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { background-color: white; color: black; } </style> <table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>

Table --------- --------------------------------------------------------------------

<!--This is a comment. Comments are not displayed in the browser-->

<style> table#t01 { width:100%; } table#t01, th, table#t01 td { border: 1px solid black; border-collapse: collapse; } table#t01 th, table#t01 td { padding: 8px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { background-color: white; color: black; } </style> <table id="t01"><tbody> <!-- 表头 ---------------------------------- --> <tr><th style="width:90px">日期</th> <th>歌曲</th> <th style="width:100px">原唱</th> <th style="width:100px">演唱</th> <th style="width:100px">伴奏</th></tr> <!-- 表 ----------------------------------------------------------- --> <tr><td>Jill</td> <td>Jill</td> <td>Smith</td> <td>50</td> <td>50</td></tr> <!-- 表 ----------------------------------------------------------- --> <tr><td>Jill</td> <td>Eve</td> <td>Jackson</td> <td>94</td> <td>50</td></tr> <!-- 表 ----------------------------------------------------------- --> <tr><td>Jill</td> <td>John</td> <td>Doe</td> <td>80</td> <td>50</td></tr> </tbody> </table>