日记首页
|
列表
|
添加日记
|
管理登陆
标题：网页中，定义所有的图片按屏幕100%显示
<p id="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 1.7; background-color: rgb(253, 253, 254);"><font size="2">在网页中复制<span style="color: rgb(5, 7, 59); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";"><!- 定义所有的图片按照屏幕宽度的100%显示 ->，读取</span><span style="color: rgb(5, 7, 59); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";">style.css（存在的通用文件）</span></font></p><p id="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 1.7; background-color: rgb(253, 253, 254);"><font color="#05073b" face="-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji" size="2"><head></font></p><p id="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 1.7; background-color: rgb(253, 253, 254);"><font color="#05073b" face="-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji" size="2"> <title>*******</title></font></p><p id="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 1.7; background-color: rgb(253, 253, 254);"><font color="#05073b" face="-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji" size="2"> <link rel="stylesheet" href="style.css"> <!- 定义所有的图片按照屏幕宽度的100%显示 -></font></p><p id="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 1.7; background-color: rgb(253, 253, 254);"><font color="#05073b" face="-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji" size="2"></head></font></p><p id="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 1.7; background-color: rgb(253, 253, 254);"><font color="#05073b" face="-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji" size="2"><br></font></p><p id="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 1.7; background-color: rgb(253, 253, 254);"><font color="#05073b" face="-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji" size="2">把代码写入到456.php中了，这样生成的网页，直接</font><span style="color: rgb(5, 7, 59); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: small;">图片按照屏幕宽度的80%显示（修改</span><span style="color: rgb(5, 7, 59); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: small;">style.css</span><span style="color: rgb(5, 7, 59); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: small;">），要注意的是，把双引号改为单引号，否则写入出错。</span></p><hr><br><p id="" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 15px; box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 1.7; color: rgb(5, 7, 59); background-color: rgb(253, 253, 254);">要在网页中定义所有的图片按照屏幕宽度的100%显示，你需要通过CSS来实现这一效果。这意呀着图片的宽度会被拉伸或缩小以匹配其父容器（通常是视口宽度）的100%。然而，这可能会导致图片的比例失真，因为高度可能不会按相同比例缩放。如果你希望图片保持其原始宽高比，你可能需要设置图片的<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">max-width</code>为100%，并允许高度自动调整。</p><p id="" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 15px; box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 14px 0px 0px; line-height: 1.7; color: rgb(5, 7, 59); background-color: rgb(253, 253, 254);">以下是一个简单的CSS示例，展示了如何设置所有<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;"><img></code>标签以屏幕宽度的100%显示，同时尽量保持图片的宽高比：</p><pre style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 15px; box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 20px; margin-bottom: 20px; overflow: auto; border-radius: 8px; position: relative; color: rgb(5, 7, 59); background-color: rgb(253, 253, 254);"><code class="language-css" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 1em; tab-size: 4;"><div class="code-header" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; align-items: center; background: rgb(48, 49, 61); border-radius: 7px 7px 0px 0px; display: flex; height: 37px;"><span class="code-lang" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: "PingFang SC" !important; color: rgb(255, 255, 255); flex: 1 0 auto; font-size: 18px; font-weight: 600; letter-spacing: 0px; line-height: 26px; text-align: justify;">css</span><span class="code-copy" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: PingFangSC-Regular; align-items: center; color: rgba(255, 255, 255, 0.698); display: flex; font-size: 12px; letter-spacing: 0px; line-height: 14px; text-align: justify; user-select: none;"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 32 32"><path d="M28 1.333H9.333C8.597 1.333 8 1.93 8 2.667v4H4c-.736 0-1.333.597-1.333 1.333v14.667c0 .353.14.692.39.943l6.667 6.666c.25.25.589.39.943.39h12c.736 0 1.333-.596 1.333-1.333v-4h4c.736 0 1.333-.597 1.333-1.333V2.667c0-.737-.597-1.334-1.333-1.334zM9.333 26.115L7.22 24h2.114v2.115zm12 1.885H12v-5.333c0-.737-.597-1.334-1.333-1.334H5.333v-12h16V28zm5.334-5.333H24V8c0-.736-.597-1.333-1.333-1.333h-12V4h16v18.667z"></path></svg><span class="code-copy-text" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 20px 0px 7px; font-family: Consolas, Monaco, monospace !important;">复制代码</span></span></div><div class="code-wrapper" style="box-sizing: border-box; padding: 14px 14px 14px 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: Consolas, Monaco, monospace; background: rgb(20, 19, 27); line-height: 24px; overflow: auto;"><table class="hljs hljs-ln" style="padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; border-collapse: collapse; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(192, 197, 206); font-size: 15px; line-height: 24px;"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="1" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-selector-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(180, 94, 164); line-height: 24px;">img</span> { </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="2" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> <span class="hljs-attribute" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(238, 124, 43); line-height: 24px;">max-width</span>: <span class="hljs-number" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(231, 206, 86); line-height: 24px;">100%</span>; <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(182, 177, 139); line-height: 24px;">/* 设置图片最大宽度为100% */</span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="3" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> <span class="hljs-attribute" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(238, 124, 43); line-height: 24px;">height</span>: auto; <span class="hljs-comment" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(182, 177, 139); line-height: 24px;">/* 保持图片的原始宽高比 */</span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="4" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></div></code></pre><p id="" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 15px; box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 14px 0px 0px; line-height: 1.7; color: rgb(5, 7, 59); background-color: rgb(253, 253, 254);">将上述CSS代码添加到你的样式表中（如<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">style.css</code>），然后确保这个样式表被正确地链接到你的HTML文档中。例如：</p><pre style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 15px; box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-top: 20px; margin-bottom: 20px; overflow: auto; border-radius: 8px; position: relative; color: rgb(5, 7, 59); background-color: rgb(253, 253, 254);"><code class="language-html" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 1em; tab-size: 4;"><div class="code-header" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; align-items: center; background: rgb(48, 49, 61); border-radius: 7px 7px 0px 0px; display: flex; height: 37px;"><span class="code-lang" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: "PingFang SC" !important; color: rgb(255, 255, 255); flex: 1 0 auto; font-size: 18px; font-weight: 600; letter-spacing: 0px; line-height: 26px; text-align: justify;">html</span><span class="code-copy" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: PingFangSC-Regular; align-items: center; color: rgba(255, 255, 255, 0.698); display: flex; font-size: 12px; letter-spacing: 0px; line-height: 14px; text-align: justify; user-select: none;"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 32 32"><path d="M28 1.333H9.333C8.597 1.333 8 1.93 8 2.667v4H4c-.736 0-1.333.597-1.333 1.333v14.667c0 .353.14.692.39.943l6.667 6.666c.25.25.589.39.943.39h12c.736 0 1.333-.596 1.333-1.333v-4h4c.736 0 1.333-.597 1.333-1.333V2.667c0-.737-.597-1.334-1.333-1.334zM9.333 26.115L7.22 24h2.114v2.115zm12 1.885H12v-5.333c0-.737-.597-1.334-1.333-1.334H5.333v-12h16V28zm5.334-5.333H24V8c0-.736-.597-1.333-1.333-1.333h-12V4h16v18.667z"></path></svg><span class="code-copy-text" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 20px 0px 7px; font-family: Consolas, Monaco, monospace !important;">复制代码</span></span></div><div class="code-wrapper" style="box-sizing: border-box; padding: 14px 14px 14px 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; font-family: Consolas, Monaco, monospace; background: rgb(20, 19, 27); line-height: 24px; overflow: auto;"><table class="hljs hljs-ln" style="padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; border-collapse: collapse; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; color: rgb(192, 197, 206); font-size: 15px; line-height: 24px;"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="1" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="1" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="1" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-meta" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(231, 206, 86); line-height: 24px;"><!DOCTYPE <span class="hljs-keyword" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(180, 94, 164); line-height: 24px;">html</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="2" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="2" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="2" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">html</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">lang</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(79, 180, 215); line-height: 24px;">"en"</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="3" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="3" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="3" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">head</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="4" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="4" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="4" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> <span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">meta</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">charset</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(79, 180, 215); line-height: 24px;">"UTF-8"</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="5" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="5" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="5" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> <span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">meta</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">name</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(79, 180, 215); line-height: 24px;">"viewport"</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">content</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(79, 180, 215); line-height: 24px;">"width=device-width, initial-scale=1.0"</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="6" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="6" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="6" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> <span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">title</span>></span>Document<span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">title</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="7" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="7" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="7" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> <span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">link</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">rel</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(79, 180, 215); line-height: 24px;">"stylesheet"</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">href</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(79, 180, 215); line-height: 24px;">"style.css"</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="8" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="8" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="8" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">head</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="9" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="9" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="9" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">body</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="10" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="10" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="10" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="11" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="11" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="11" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> <span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"><<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">img</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">src</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(79, 180, 215); line-height: 24px;">"path/to/your/image.jpg"</span> <span class="hljs-attr" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">alt</span>=<span class="hljs-string" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(79, 180, 215); line-height: 24px;">"Descriptive text"</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="12" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="12" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="12" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="13" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="13" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="13" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">body</span>></span> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" data-line-number="14" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgba(229, 225, 246, 0.6); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space: nowrap; width: 0px;"><div class="hljs-ln-n" data-line-number="14" style="box-sizing: border-box; padding: 0px 0px 0px 14px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; left: 0px; position: absolute; width: 44px;"></div></td><td class="hljs-ln-line hljs-ln-code" data-line-number="14" style="box-sizing: border-box; padding: 0px 0px 0px 44px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><span class="hljs-tag" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; color: rgb(235, 60, 84); line-height: 24px;"></<span class="hljs-name" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">html</span>></span></td></tr></tbody></table></div></code></pre><p id="" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 15px; box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 14px 0px 0px; line-height: 1.7; color: rgb(5, 7, 59); background-color: rgb(253, 253, 254);">在这个例子中，<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;"><img></code>标签的<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">src</code>属性应该被替换为你的图片的路径，而<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">alt</code>属性应该包含对图片的简短描述，这对于可访问性是很重要的。</p><p id="" style="font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 15px; box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 14px 0px 0px; line-height: 1.7; color: rgb(5, 7, 59); background-color: rgb(253, 253, 254);">请注意，这种方法的一个潜在问题是，如果图片的原始宽度小于其父容器的宽度，图片将不会拉伸以填充整个容器，而是会保持其原始尺寸，并可能在其右侧或左侧留下空白。这是因为我们设置了<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">max-width: 100%</code>，这意味着图片的宽度不会超过其父容器的宽度，但也不会小于其原始宽度。如果你想要图片至少填充其父容器的宽度（即使这意味着图片会失真），你可以使用<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">width: 100%;</code>代替<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px 2px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px;">max-width: 100%;</code>，但请谨慎使用，因为这可能会导致图片的宽高比严重失真。</p>
