-
HTML 笔记：初识 HTML（HTML文本标签、文本列表、嵌入图片、背景色、网页链接）
1 何为HTML
- 用来描述网页的一种语言
- 超文本标记语言(Hyper Text Markup Language)
- 不是一种编程语言，而是一种标记语言 (markup language)
2 HTML标签
- HTML 标签是由尖括号包围的关键词，比如
- 作用是为了“标记”页面中的内容，使浏览器能够识别设计者的要求，正确的在网页中显示出来
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
3 HTML文档结构
3.1 文档类型
- 在HTML中，文档类型（DOCTYPE）是一种指令，它告诉浏览器文档的类型和版本，从而使浏览器能够正确地渲染文档。
- DOCTYPE处于HTML文档的首行，位于
标签之前。
html>当前最常用的文档类型声明，用于HTML5文档
3.2 开始标签
- 在HTML文档中，
标签是一个根元素，包围着整个文档的其它所有HTML元素。所有的HTML元素必须被这个标签包裹起来，这也意味着标签是HTML文档的最外层元素
- html>
- <html>
- <head>
- head>
- <body>
- body>
- html>
3.2.1 lang属性
标签也可以包含lang属性，来定义文档的语言。- <html lang="en">
- html>
- 在这个例子中，
lang="en"属性告诉浏览器这个文档是用英语编写的。 - 不同的语言代码会表示不同的语言（例如，“es”为西班牙语，“zh”为中文等）。
3.3 头标签 & 头标签对象
- 在HTML文档中，
标签用于包含文档的元数据（metadata）以及链接到脚本和样式表的引用。 标签通常包括如下一些子元素：
3.3.1
</code></h4> <p><code><title></code>标签定义了文档的标题，这个标题会显示在浏览器的标题栏或标签上</p> <pre data-index="3" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">title</span>></span>这是页面标题<span class="hljs-tag"></<span class="hljs-name">title</span>></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4><a name="t8"></a>3.3.2 <meta></h4> <p><code><meta></code>标签用于提供关于文档的元数据，如<a href="https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E9%9B%86&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E9%9B%86&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"字符集\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E9%9B%86&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"字符集\"}"}" data-tit="字符集" data-pretit="字符集">字符集</a>、页面描述、关键词和作者信息等。</p> <pre data-index="4" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"这是一个示例网页"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"keywords"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"HTML, CSS, JavaScript"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Author Name"</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4><a name="t9"></a>3.3.3 <code><link></code></h4> <p><code><link></code>标签用于链接外部资源，通常是链接<a href="https://so.csdn.net/so/search?q=%E6%A0%B7%E5%BC%8F%E8%A1%A8&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A0%B7%E5%BC%8F%E8%A1%A8&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"样式表\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A0%B7%E5%BC%8F%E8%A1%A8&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"样式表\"}"}" data-tit="样式表" data-pretit="样式表">样式表</a>（CSS文件）</p> <pre data-index="5" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"styles.css"</span>></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4><a name="t10"></a>3.3.4 <code><script></code></h4> <p><code><script></code>标签用于嵌入或引用<a href="https://so.csdn.net/so/search?q=%E6%89%A7%E8%A1%8C%E8%84%9A%E6%9C%AC&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%89%A7%E8%A1%8C%E8%84%9A%E6%9C%AC&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"执行脚本\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%89%A7%E8%A1%8C%E8%84%9A%E6%9C%AC&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"执行脚本\"}"}" data-tit="执行脚本" data-pretit="执行脚本">执行脚本</a>代码，通常是JavaScript。</p> <pre data-index="6" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"script.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4><a name="t11"></a>3.3.5 <code><style></code></h4> <p><code><style></code>标签用于包含文档的内部样式信息（CSS）。</p> <pre data-index="7" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-tag">body</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">background-color</span>: lightblue;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">style</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4><a name="t12"></a>3.3.6 <code><base></code></h4> <p><code><base></code>标签用于为页面上所有的相对URL设置一个基础URL。这个标签必须有<code>href</code>或<code>target</code>属性。</p> <pre data-index="8" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">base</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.example.com/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h4><a name="t13"></a>3.3.7 <code><noscript></code></h4> <p><code><noscript></code>标签用于定义在浏览器不支持脚本时显示的替代内容。</p> <pre data-index="9" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">noscript</span>></span>您的浏览器不支持JavaScript！<span class="hljs-tag"></<span class="hljs-name">noscript</span>></span> </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <h2><a name="t14"></a>4 正文中的HTML标签</h2> <h3><a name="t15"></a>4.1 段落 <P>…</P></h3> <p>左对齐： left；右对齐：right； 中间对齐：center</p> <pre data-index="10" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>这是页面标题<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-tag">body</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">background-color</span>: lightblue;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">style</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">noscript</span>></span>您的浏览器不支持JavaScript！<span class="hljs-tag"></<span class="hljs-name">noscript</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>这是一个段落<span class="hljs-tag"></<span class="hljs-name">p</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">right</span>></span>右对齐的段落<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">left</span>></span>右对齐的段落<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">center</span>></span>右对齐的段落<span class="hljs-tag"></<span class="hljs-name">p</span>></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="280" src="https://1000bd.com/contentImg/2024/03/15/103035099.png" ></p> <p>（本节下面的内容将隐去head部分的内容） </p> <h3><a name="t16"></a>4.2 折行 <br/></h3> <pre data-index="11" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span> This is<span class="hljs-tag"><<span class="hljs-name">br</span> /></span> a para<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>graph with line breaks <span class="hljs-tag"></<span class="hljs-name">p</span>></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="161" src="https://1000bd.com/contentImg/2024/03/15/103035056.png" ></p> <h3><a name="t17"></a>4.3 HTML标题</h3> <pre data-index="12" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>This is heading 1<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">h2</span>></span>This is heading 2<span class="hljs-tag"></<span class="hljs-name">h2</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">h3</span>></span>This is heading 3<span class="hljs-tag"></<span class="hljs-name">h3</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">h4</span>></span>This is heading 4<span class="hljs-tag"></<span class="hljs-name">h4</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">h5</span>></span>This is heading 5<span class="hljs-tag"></<span class="hljs-name">h5</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">h6</span>></span>This is heading 6<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="410" src="https://1000bd.com/contentImg/2024/03/15/103035107.png" ></p> <h3><a name="t18"></a>4.4 文字风格</h3> <pre data-index="13" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">font</span> <span class="hljs-attr">size</span>=<span class="hljs-string">“2”</span> <span class="hljs-attr">color</span>=<span class="hljs-string">“purple”</span>></span> 这是一个段落。<span class="hljs-tag"></<span class="hljs-name">font</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="86" src="https://1000bd.com/contentImg/2024/03/15/103035133.png" ></p> <p><img alt="" height="303" src="https://1000bd.com/contentImg/2024/03/15/103035167.png" ></p> <h4><a name="t19"></a>4.4.1 HTML中的颜色</h4> <p><img alt="" height="360" src="https://1000bd.com/contentImg/2024/03/15/103035287.png" ></p> <h4><a name="t20"></a>4.4.2 其他文字标签</h4> <pre data-index="14" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">b</span>></span>粗体字</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">i</span>></span>斜体字<span class="hljs-tag"></<span class="hljs-name">i</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span> 粗体字，同b<span class="hljs-tag"><<span class="hljs-name">strong</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">em</span>></span>斜体，表强调<span class="hljs-tag"></<span class="hljs-name">em</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">del</span>></span>文字加横线<span class="hljs-tag"></<span class="hljs-name">del</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">sub</span>></span>下标字(subscript)<span class="hljs-tag"></<span class="hljs-name">sub</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">sup</span>></span>上标字(superscript)<span class="hljs-tag"></<span class="hljs-name">sup</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">big</span>></span> 大字<span class="hljs-tag"></<span class="hljs-name">big</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">small</span>></span> 小字<span class="hljs-tag"></<span class="hljs-name">small</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span><span class="hljs-tag"><<span class="hljs-name">u</span>></span>下划线 <span class="hljs-tag"></<span class="hljs-name">u</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="314" src="https://1000bd.com/contentImg/2024/03/15/103035234.png" ></p> <h4><a name="t21"></a>4.4.5 特殊字符</h4> <pre data-index="15" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">< <</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span> > ></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">br</span>></span> ©</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="106" src="https://1000bd.com/contentImg/2024/03/15/103035239.png" ></p> <h2><a name="t22"></a>5 文本列表</h2> <h3><a name="t23"></a>5.1 无序列表</h3> <p>无序列表以<ul>标签开始，至</ul>标签结束。</p> <p>在<ul>标签中，还需要使用<li>标签来定义列表的每一行</p> <pre data-index="16" class="set-code-show" name="code"><code class="language-python hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><ul></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <li>……</li></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <li>……</li></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <li>……</li></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></ul></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="130" src="https://1000bd.com/contentImg/2024/03/15/103035174.png" ></p> <h3><a name="t24"></a>5.2 有序列表</h3> <p>有序列表中的条目按照顺序依次排列。</p> <p>它和无序列表的唯一的区别体现代码上，即有序列表使用<ol>标签，以<ol>开始，到</ol>结束。</p> <p>有序列表中同样使用<li>标签来定义列表的每一行</p> <pre data-index="17" class="set-code-show" name="code"><code class="language-python hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><ol></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <li>……</li></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <li>……</li></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <li>……</li></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"></ol></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="136" src="https://1000bd.com/contentImg/2024/03/15/103035071.png" ></p> <h3><a name="t25"></a>5.3 自定义列表</h3> <p>使用<dl>来创建自定义列表。在列表中使用<dt>来定义页面中的每一行。</p> <p>与有序列表和无序列表不同的是，在定义列表中，列表中会添加缩进行来展示这个列表的条目，使用<dd>标签来定义缩进行。<br> </p> <pre data-index="18" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:774px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">h3</span>></span>镜头画面的剪辑<span class="hljs-tag"></<span class="hljs-name">h3</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">dl</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>分剪<span class="hljs-tag"></<span class="hljs-name">dt</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>一个镜头分成两个镜头或者两个以上的镜头使用。<span class="hljs-tag"></<span class="hljs-name">dd</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>挖剪<span class="hljs-tag"></<span class="hljs-name">dt</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>将一个完整镜头中的动作、人和物运动镜头在运动中的某一部位上的多余的部分挖剪去。<span class="hljs-tag"></<span class="hljs-name">dd</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">dl</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="236" src="https://1000bd.com/contentImg/2024/03/15/103035170.png" ></p> <h3><a name="t26"></a>5.4 列表嵌套</h3> <p>无论是无序列表嵌套，还是有序列表嵌套，或者是无序列表和有序列表的混合嵌套列表，它们的代码写法都是一个原则，就是遵从HTML代码的使用规则，<strong>将一个列表的标签完全放入在另一个标签内</strong>。这是一种父子级的关系。这种方法常用来表示复杂的导航，应用广泛。</p> <pre data-index="19" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">ol</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>1.1</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>1.2</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">ol</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>2</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">ul</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="130" src="https://1000bd.com/contentImg/2024/03/15/103035744.png" ></p> <h2><a name="t27"></a>6 嵌入图片</h2> <pre data-index="20" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jiuzhai.jpg"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">200</span> <span class="hljs-attr">width</span>=<span class="hljs-string">300/</span>></span></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="369" src="https://1000bd.com/contentImg/2024/03/15/103036330.png" ></p> <h3><a name="t28"></a>6.1 图像文本对齐</h3> <ul><li>在编辑图像的时候，图像不同于文本的意义在于，图像都是一个个分开的整体。而编辑图像时，如果设计者想在图片的旁边放入文本内容，就需要考虑如何处理文本和图像对齐方式</li></ul> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:650px;"><tbody><tr><td>style="vertical-align:text-top"</td><td>使图像的顶部和同一行的文本对齐</td></tr><tr><td>style="vertical-align:middle"</td><td>使图像的中部和同一行的文本对齐</td></tr><tr><td>style="vertical-align:text-bottom"</td><td>使图像的底部和同一行文本对齐</td></tr></tbody></table></div> <pre data-index="21" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:1075px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jiuzhai.jpg"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">200</span> <span class="hljs-attr">width</span>=<span class="hljs-string">300/</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"vertical-align:text-top"</span>></span>这是一张拍摄于2020年的九寨沟照片。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jiuzhai.jpg"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">200</span> <span class="hljs-attr">width</span>=<span class="hljs-string">300/</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"vertical-align:middle"</span>></span>这是一张拍摄于2020年的九寨沟照片。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jiuzhai.jpg"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">200</span> <span class="hljs-attr">width</span>=<span class="hljs-string">300/</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"vertical-align:text-bottom"</span>></span>这是一张拍摄于2020年的九寨沟照片。</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="821" src="https://1000bd.com/contentImg/2024/03/15/103037941.png" ></p> <h3><a name="t29"></a> 6.2 图像和文本的距离</h3> <ul><li>hspace——和左边的距离</li><li>vspace——和上面的距离</li></ul> <pre data-index="22" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:883px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jiuzhai.jpg"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">200</span> <span class="hljs-attr">width</span>=<span class="hljs-string">300/</span> <span class="hljs-attr">hspace</span>=<span class="hljs-string">30</span>></span>这是一张拍摄于2020年的九寨沟照片。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jiuzhai.jpg"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">200</span> <span class="hljs-attr">width</span>=<span class="hljs-string">300/</span> <span class="hljs-attr">vspace</span>=<span class="hljs-string">30</span>></span>这是一张拍摄于2020年的九寨沟照片。</div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="664" src="https://1000bd.com/contentImg/2024/03/15/103037492.png" ></p> <h3><a name="t30"></a>6.3 添加边框 </h3> <p>border表示边框宽度</p> <pre data-index="23" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jiuzhai.jpg"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">200</span> <span class="hljs-attr">width</span>=<span class="hljs-string">300/</span> <span class="hljs-attr">border</span>=<span class="hljs-string">5</span>></span>这是一张拍摄于2020年的九寨沟照片。 </code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="344" src="https://1000bd.com/contentImg/2024/03/15/103035517.png" ></p> <h3><a name="t31"></a>6.4 嵌入网图</h3> <pre data-index="24" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:875px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>这是页面标题<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'https://www.sanguosha.cn/storage/uploads/images/8jzgfkyzAOH7lY7QHHtfH3vIkzQ6cVmNuVCmNeEd.jpeg'</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-attr">width</span>=<span class="hljs-string">1000</span>></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="691" src="https://1000bd.com/contentImg/2024/03/15/103038915.png" ></p> <h2><a name="t32"></a>7 body 改变背景色</h2> <h3><a name="t33"></a>7.0 优先级</h3> <pre data-index="25" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:875px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>这是页面标题<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-selector-tag">body</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attribute">background-color</span>: lightblue;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">style</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">noscript</span>></span>您的浏览器不支持JavaScript！<span class="hljs-tag"></<span class="hljs-name">noscript</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span> <span class="hljs-attr">bgcolor</span>=<span class="hljs-string">"red"</span>></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jiuzhai.jpg"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">200</span> <span class="hljs-attr">width</span>=<span class="hljs-string">300/</span> <span class="hljs-attr">border</span>=<span class="hljs-string">5</span>></span>这是一张拍摄于2020年的九寨沟照片。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><code><body></code>标签的背景色(<code>bgcolor</code>)被设置为红色（<code>red</code>），而在<code><style></code>标签中，<code>body</code>的背景色被设置为浅蓝色（<code>lightblue</code>）。通常来说，CSS样式（无论是内联样式、内部样式还是外部样式）会覆盖HTML标签的属性。</p> <p>所以，如果浏览器按照现代标准解析这段HTML代码，背景色应该是浅蓝色，即<code>lightblue</code>。这是因为CSS样式通常比HTML属性有更高的优先级。</p> <p><img alt="" height="325" src="https://1000bd.com/contentImg/2024/03/15/103035629.png" ></p> <p>这一小节后续部分中，我们会去掉head中style的部分</p> <h3><a name="t34"></a>7.1 纯色 </h3> <p>背景颜色属性将背景设置为某种颜色。</p> <p>属性值可以是十六进制数、RGB 值或颜色名。</p> <ul><li> <body bgcolor="#000000"> </li><li><body bgcolor="rgb(0,0,0)"> </li><li><body bgcolor="black"></li></ul> <pre data-index="26" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:875px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>这是页面标题<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span> <span class="hljs-attr">bgcolor</span>=<span class="hljs-string">"lightgreen"</span>></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jiuzhai.jpg"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">200</span> <span class="hljs-attr">width</span>=<span class="hljs-string">300/</span> <span class="hljs-attr">border</span>=<span class="hljs-string">5</span>></span>这是一张拍摄于2020年的九寨沟照片。</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p><img alt="" height="345" src="https://1000bd.com/contentImg/2024/03/15/103036211.png" ></p> <h3><a name="t35"></a>7.2 图像</h3> <p>背景属性将背景设置为图像。属性值为图像的URL。</p> <p>如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。</p> <h4><a name="t36"></a>7.2.1 本地图像</h4> <pre data-index="27" class="set-code-show" name="code"><code class="language-python hljs"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><!DOCTYPE html></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><html lang=<span class="hljs-string">"en"</span>></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><head></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <title>这是页面标题 - "jiuzhai.jpg">
- 这是一张拍摄于2020年的九寨沟照片。
7.2.2 网络图像
- html>
- <html lang="en">
- <head>
- <title>这是页面标题title>
- head>
- <body background="https://www.sanguosha.cn/storage/uploads/images/jFRfaD6OGALMzUHw4bxO0kN4HN3vNpeaFU2YaTTy.jpeg">
-
- <font color='white'>三国杀 貂蝉-舞惑群心
-
-
-
- body>
- html>
7.2.3 调整图像大小
背景图太大了，我们进行调整，此时需要在head中进行调整
- html>
- <html lang="en">
- <head>
- <title>这是页面标题title>
- <style>
- body {
- background-image: url('https://www.sanguosha.cn/storage/uploads/images/jFRfaD6OGALMzUHw4bxO0kN4HN3vNpeaFU2YaTTy.jpeg');
- background-size: cover; /*控制背景图像的尺寸,cover 保证背景图像覆盖整个元素*/
- background-position: center;/*center 使背景图像在元素中居中*/
- background-repeat: no-repeat;/*no-repeat 指定背景图像不要平铺重复*/
- height: 100vh; /* 设置body高度为视口的100% */
- margin: 0; /* 移除边距 */
- }
- style>
- head>
- <body>
-
- <font size=30 color='white'>三国杀 貂蝉-舞惑群心
-
-
-
- body>
- html>
8 网页链接
8.1 链接到外网
HTML中的链接语法： 链接锚点对象
这个路径所指的不仅仅只是一个页面地址，也可能是一个文件地址、一个邮箱地址
- html>
- <html lang="en">
- <head>
- <title>这是页面标题title>
- head>
- <body>
-
- <a href='https://www.sanguosha.cn/storage/uploads/images/GX9UMBsFtZChnFngjPNNsVQuJuA3TRjxfzR3k8VE.jpeg'>
- 三国杀-关银屏-步步生花
- a>
-
- body>
- html>
点进去后：
8.2 链接到本网页的其他位置
- 页面除了和页面之外的文件或者程序链接外，而且也可以和同一页面中的内容进行链接
- 点击href处的内容，跳转到id处的内容
- html>
- <html lang="en">
- <head>
- <title>这是页面标题title>
- head>
- <body>
-
- <html>
- ……
- <a href=#link>链接到网页的其他位置a>
-
- <img src='https://www.sanguosha.cn/storage/uploads/images/4Ku8dzet4pub91dMLvuRbfc50TI1qdmlnjAPgMtg.jpeg' width=1400>
- <a id=link>a>从上面链接过来
- …
-
- html>
-
-
- body>
- html>
点击红色区域，就会跳转到绿色区域
’
8.3 跳转到新网页
在先前的所有链接中，页面都是在同一页面中跳转，有时候设计者希望链接的页面在新的窗口中打开，这时只要在标签中添加“target=_blank”就行了。
- html>
- <html lang="en">
- <head>
- <title>这是页面标题title>
- head>
- <body>
-
- <html>
-
- <a href='https://www.sanguosha.cn/storage/uploads/images/3SPA2wJ5R3IL8nbaZncvtdzFL52XNRndGSIG8YP7.jpeg' target=_blank>诸葛瞻-绵竹之殇a>
-
- html>
-
-
- body>
- html>
‘
复习mysql中的事务
MacOs 删除第三方软件
大模型微调技术LoRA与QLoRA
Linux 查看进程启动时间、运行时间
为什么学了模数电还是看不懂较复杂的电路图？
Java基础篇(简单语法的一些细节介绍）
[项目管理-23]：中西方沟通方式的差别：含蓄VS直接
异地多活架构新突破：库存单元化部署技术思路揭秘
随想录一刷Day18——二叉树