-
第一部分：HTML5
目录
10.2：不间断空格(Non-breaking Space)
一：网页
1.1：什么是网页？
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合
网页是网站中的一"页"，通常是HTML格式的文件，它要通过浏览器来阅读
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件
1.2：什么是HTML？
HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标记标签(markup tag)
超文本的两层含义：
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）1.3：网页的形成
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的
二：常用浏览器
浏览器是网页显示、运行的平台
浏览器内核（渲染引擎）：负责读取网页内容、整理讯息、计算网页的显示方式并显示页面
目前国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等
三：Web标准
Web标准是由W3C（万维网联盟）组织和其他标准化组织指定的一系列标准的集合
3.1：为什么需要Web标准？
①可以让不同的开发人员写出的页面更标准、更统一
②让Web的发展前景更广阔
③内容能被更广泛的设备访问
④更容易被搜索引擎搜索
⑤降低网站流量费用
⑥使网站更容易维护
⑦提高页面的浏览速度
3.2：Web标准的构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面
标准 说明 结构 结构用于对网页元素进行整理和分类，主修HTML 表现 表现用于设置网页元素的板式、颜色、大小等外观样式，主修CSS 行为 行为是指网页模式的定义及交互的编写，主修Javascript Web标准提出的最佳体验方案：结构、样式、行为相分离
理解：结构写在HTML文件中，表现写在CSS文件中，行为写在JavaScript文件中
四：HTML语法规范
4.1：基本语法概述
1.HTML标签是由尖括号包围的关键词，例如
2.HTML标签通常是成对出现的，例如和，我们称之为双标签。标签对中的第一个标签是开始标签，第二个是结束标签
3.有些特殊的标签必须是单个标签，例如
，我们称之为单标签4.2：标签关系
分类：包含关系和并列关系
- 1.包含关系
- <head>
- <title>title>
- head>
- 2.并列关系
- <head>head>
- <body>body>
4.3：HTML基本结构标签
4.3.1：第一个HTML网页
每一个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些标签上书写
HTML页面也称为HTML文档
- 声明为 HTML5 文档，告诉浏览器使用哪种HTML版本来显示网页
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
</strong> 元素描述了文档的标题 <ul><li>定义了浏览器工具栏的标题</li><li>当网页添加到收藏夹时，显示在收藏夹中的标题</li><li>显示子搜索引擎结果页面的标题</li></ul></li><li><strong><body></strong> 元素包含了可见的页面内容</li><li><strong><h1></strong> 元素定义一个大标题</li><li><strong><p></strong> 元素定义一个段落</li></ul> <h5 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A04.4%EF%BC%9A%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7%EF%BC%9AVscode"><span style="color:#fe2c24;"> 4.4：网页开发工具：Vscode && idea</span></h5> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.4.1%EF%BC%9A%E5%BF%AB%E6%8D%B7%E9%94%AE"><span style="color:#fe2c24;"> 4.4.1：快捷键</span></h6> <p> ①快速复制一行：<span style="color:#38d8f0;">shift + alt + 下箭头（上箭头）</span></p> <p> ②选定多个相同的单词：<span style="color:#38d8f0;">Ctrl + d</span></p> <p> 先双击选定一个单词，然后按下Ctrl + d可以往下依次选择相同的单词</p> <p> ③添加多个光标：<span style="color:#38d8f0;">Ctrl + alt + 上箭头（下箭头）</span></p> <p> ④全局替换某些单词：<span style="color:#38d8f0;">Ctrl + h</span></p> <p> 当我们的一个页面需要修改大量相同文字的时候，我们一个个的修改有点麻烦，此时便可以使用全局替换</p> <p> ⑤快速定位到某一行：<span style="color:#38d8f0;">Ctrl + g</span></p> <p> ⑥选择某个区块：按住<span style="color:#38d8f0;">shift + alt</span>，然后<span style="color:#38d8f0;">拖动鼠标</span></p> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.5%EF%BC%9AHTML%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE"><span style="color:#fe2c24;"> 4.5：HTML常用标签</span></h5> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.5.1%EF%BC%9A%E6%A0%87%E7%AD%BE%E8%AF%AD%E4%B9%89"><span style="color:#fe2c24;"> 4.5.1：标签语义</span></h6> <p><span style="color:#fe2c24;"> </span><span style="color:#0d0016;">理解：标签的含义，即这个标签是干嘛的</span></p> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.5.2%EF%BC%9A%E6%A0%87%E9%A2%98%E6%A0%87%E7%AD%BE%3Ch1%3E-%3Ch6%3E"><span style="color:#fe2c24;"> 4.5.2：标题标签</span></h6> <p><span style="color:#fe2c24;"> </span><span style="color:#0d0016;"> 为了使网页更具有语义化，我们经常会在页面中用到标题标签</span></p> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.5.3%EF%BC%9A%E6%AE%B5%E8%90%BD%E6%A0%87%E7%AD%BE%E5%92%8C%E6%8D%A2%E8%A1%8C%E6%A0%87%E7%AD%BE"><span style="color:#0d0016;"> </span><span style="color:#fe2c24;"> 4.5.3：段落标签和换行标签</span></h6> <p><span style="color:#0d0016;"> ①在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落</span></p> <p><span style="color:#0d0016;"> ②如果希望某段文本强制换行显式，需要使用</span><span style="color:#956fe7;">换行标签<br /></span></p> <p><span style="color:#956fe7;"> </span><span style="color:#0d0016;">单词break的缩写，意为打断，换行</span></p> <p><span style="color:#0d0016;"> 特点：</span></p> <p><span style="color:#0d0016;"> 1.<br />是一个单标签</span></p> <p><span style="color:#0d0016;"> 2.<br />标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距 </span></p> <pre data-index="1" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:873px"><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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>Document<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>标题标签<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="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>标题一共六级选<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="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>文字加粗一行显<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="14"></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="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>从重到轻随之变<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="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>语法规范书写后<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="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>具体效果刷新见<span class="hljs-tag"></<span class="hljs-name">h6</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"> </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-comment"><span class="hljs-comment"><!-- 段落标签</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment"> 特点：</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment"> 1.文本在一个段落中会根据浏览器窗口的大小自动换行</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment"> 2.段落和段落之间保有空隙</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment"> --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></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="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>超文本标记语言（英语：HyperText Markup Language，简称：HTML）<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="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。<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="27"></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="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">p</span>></span>HELLOWORLD<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="29"></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="30"></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="31"></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> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.5.4%EF%BC%9A%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A0%87%E7%AD%BE"> <span style="color:#fe2c24;"> 4.5.4：文本格式化标签</span></h6> <p><span style="color:#fe2c24;"> </span><span style="color:#0d0016;"> 在网页中，有时需要为文字设置</span><span style="color:#956fe7;">粗体</span><span style="color:#0d0016;">、</span><span style="color:#956fe7;">斜体</span><span style="color:#0d0016;">或</span><span style="color:#956fe7;">下划线</span><span style="color:#0d0016;">等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示</span></p> <p><span style="color:#0d0016;"> 标签语义：突出重要性，比普通文字更重要</span></p> <p><span style="color:#0d0016;"> 文本格式化标签：</span></p> <div class="table-box"><table><tbody><tr><th>标签</th><th>描述</th></tr><tr><td><a href="https://www.runoob.com/tags/tag-b.html" rel="nofollow" title="<b><strong>"><b><strong></a></td><td>定义粗体文本<span style="color:#38d8f0;">（通常使用<strong>替换<b>来使用）</span></td></tr><tr><td><a href="https://www.runoob.com/tags/tag-em.html" rel="nofollow" title="<em>"><em></a></td><td>定义着重文字，斜体字<span style="color:#38d8f0;">（使用<em>替换<i>来使用）</span></td></tr><tr><td><a href="https://www.runoob.com/tags/tag-i.html" rel="nofollow" title="<i>"><i></a></td><td>定义斜体字（italic：斜体）</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-small.html" rel="nofollow" title="<small>"><small></a></td><td>定义小号字</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-strong.html" rel="nofollow" title="<strong>"><strong></a></td><td>定义加重语气</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-sub.html" rel="nofollow" title="<sub>"><sub></a></td><td>定义下标字</td></tr><tr><td><a href="https://www.runoob.com/html/m/tags/tag-sup.html" rel="nofollow" title="<sup>"><sup></a></td><td>定义上标字</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-ins.html" rel="nofollow" title="<ins>"><ins></a></td><td>定义插入字，下划线</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-del.html" rel="nofollow" title="<del>"><del></a></td><td>定义删除字</td></tr></tbody></table></div> <p> HTML "计算机输出" 标签</p> <div class="table-box"><table><tbody><tr><th>标签</th><th>描述</th></tr><tr><td><a href="https://www.runoob.com/tags/tag-code.html" rel="nofollow" title="<code>"><code></a></td><td>定义计算机代码</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-kbd.html" rel="nofollow" title="<kbd>"><kbd></a></td><td>定义键盘码</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-samp.html" rel="nofollow" title="<samp>"><samp></a></td><td>定义计算机代码样本</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-var.html" rel="nofollow" title="<var>"><var></a></td><td>定义变量</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-pre.html" rel="nofollow" title="<pre>"><pre></a></td><td>定义预格式文本</td></tr></tbody></table></div> <p> HTML 引文, 引用, 及标签定义</p> <div class="table-box"><table><tbody><tr><th>标签</th><th>描述</th></tr><tr><td><a href="https://www.runoob.com/tags/tag-abbr.html" rel="nofollow" title="<abbr>"><abbr></a></td><td>定义缩写</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-address.html" rel="nofollow" title="<address>"><address></a></td><td>定义地址</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-bdo.html" rel="nofollow" title="<bdo>"><bdo></a></td><td>定义文字方向</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-blockquote.html" rel="nofollow" title="<blockquote>"><blockquote></a></td><td>定义长的引用</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-q.html" rel="nofollow" title="<q>"><q></a></td><td>定义短的引用语</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-cite.html" rel="nofollow" title="<cite>"><cite></a></td><td>定义引用、引证</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-dfn.html" rel="nofollow" title="<dfn>"><dfn></a></td><td>定义一个定义项目。</td></tr></tbody></table></div> <pre data-index="2" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>Document<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 加粗 --></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">b</span>></span>加粗<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="13"></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>加粗<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="14"></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="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 倾斜 --></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">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="17"></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="18"></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="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 删除 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 我是<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="21"></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">s</span>></span>删除<span class="hljs-tag"></<span class="hljs-name">s</span>></span>的文字</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></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="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 下划线 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 我是<span class="hljs-tag"><<span class="hljs-name">ins</span>></span>下划线<span class="hljs-tag"></<span class="hljs-name">ins</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></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><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></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="27"></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="28"></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> <h6 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A04.5.5%EF%BC%9A%3Cdiv%3E%E5%92%8C%3Cspan%3E%E6%A0%87%E7%AD%BE"><span style="color:#fe2c24;"> 4.5.5：div和span标签以及网站布局</span></h6> <p><span style="color:#0d0016;"> 这两个是没有语义的，它们就是一个盒子，用来装内容的</span></p> <p> 大多数HTML元素被定义为块级元素或内联元素，块级元素在浏览器中显示时，通常会以新行来开始（和结束）</p> <p> <span style="color:#956fe7;"> HTML <div> 元素</span></p> <p> HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。</p> <p> <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。</p> <p> 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。</p> <p> <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。</p> <hr> <p> <span style="color:#956fe7;"> HTML <span> 元素</span></p> <p> HTML <span> 元素是内联元素，可用作文本的容器</p> <p> <span> 元素也没有特定的含义。</p> <p> 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。</p> <hr> <p> <span style="color:#956fe7;"> HTML 分组标签</span></p> <div class="table-box"><table><tbody><tr><th>标签</th><th>描述</th></tr><tr><td><a href="https://www.runoob.com/tags/tag-div.html" rel="nofollow" title="<div>"><div></a></td><td>定义了文档的区域，块级 (block-level)</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-span.html" rel="nofollow" title="<span>"><span></a></td><td>用来组合文档中的行内元素， 内联元素(inline)</td></tr></tbody></table></div> <p></p> <pre data-index="3" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>Document<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><span class="hljs-comment"><!-- <div>标签用来布局，但是现在一行只能放一个<div>，是一个大盒子</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-comment"> 默认独占一行</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-comment"> <span>标签用来布局，一行上可以放多个<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-comment"> 它的长度是封装数据的长度</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-comment"> --></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">div</span>></span>我是一个div标签我一个人单独占一行<span class="hljs-tag"></<span class="hljs-name">div</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">div</span>></span>我是一个div标签我一个人单独占一行<span class="hljs-tag"></<span class="hljs-name">div</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">span</span>></span>新浪<span class="hljs-tag"></<span class="hljs-name">span</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">span</span>></span>百度<span class="hljs-tag"></<span class="hljs-name">span</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>搜狐<span class="hljs-tag"></<span class="hljs-name">span</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></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="22"></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="23"></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="24"></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> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.5.6%EF%BC%9A%E5%9B%BE%E5%83%8F%E6%A0%87%E7%AD%BE%E5%92%8C%E8%B7%AF%E5%BE%84"><span style="color:#fe2c24;"> 4.5.6：图像标签和路径</span></h6> <p><span style="color:#fe2c24;"> </span><span style="color:#0d0016;"> ①图像标签</span></p> <pre data-index="4" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:784px"><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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><span class="hljs-comment"><!-- 在HTML标签中，<img>标签用于定义HTML页面中的图像</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-comment"> src是<img>标签的必须属性，它用于指定图像文件的路径和文件名</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-comment"> 所谓属性：简单理解是属于这个图像标签的特性</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-comment"></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-comment"> 注意点：</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-comment"> ①图像标签可以拥有多个属性，必须写在标签名的后面</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-comment"> ②属性之间不区分先后顺序，标签名与属性、属性与属性之间均以空格分开</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-comment"> ③属性采取键值对的格式，即key="value"的格式，属性="属性值"</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-comment"> --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>图像标签的使用：<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="21"></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">"img.png"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></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="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>alt 替换文本 图像显示不出来的时候用文字代替：<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="24"></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">"img1.png"</span> <span class="hljs-attr">alt</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="25"></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="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>title 提示文本 鼠标放到图像上提示的文字：<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="27"></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">"img.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"我是alt"</span> <span class="hljs-attr">title</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="28"></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="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 设置图像大小 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>图像标签的使用：<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="31"></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">"img.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"我是alt"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"我是小贾"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">border</span>=<span class="hljs-string">"15"</span> /></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></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="33"></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="34"></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><span style="color:#0d0016;"> ②路径</span></p> <p><span style="color:#0d0016;"> （1）目录文件夹和根目录</span></p> <p><span style="color:#0d0016;"> 实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理它们。</span></p> <p><span style="color:#0d0016;"> </span><span style="color:#956fe7;"> 目录文件夹</span><span style="color:#0d0016;">：就是普通文件夹，里面只不过存放了我们做页面所需的相关素材，比如html文件、图片等</span></p> <p><span style="color:#0d0016;"> </span><span style="color:#956fe7;">根目录</span><span style="color:#0d0016;">：打开目录文件夹的第一层就是根目录</span></p> <p><span style="color:#0d0016;"> （2）VScode打开目录文件夹</span></p> <p><span style="color:#0d0016;"> 文件---打开文件夹，选择目录文件夹。后期方便管理</span></p> <p><span style="color:#0d0016;"> （3）页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置</span></p> <p><span style="color:#0d0016;"> 路径可以分为：</span></p> <p><span style="color:#0d0016;"> 1.</span><span style="color:#38d8f0;">相对路径：</span><span style="color:#0d0016;">以</span><span style="color:#38d8f0;">引用文件所在位置为</span><span style="color:#0d0016;">参考基础而建立出的目录路径</span></p> <p><span style="color:#0d0016;"> 例如：图片相对于HTML页面的位置</span></p> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td>相对路径分类</td><td>符号</td><td>说明</td></tr><tr><td>同一级路径</td><td></td><td>图片位于HTML文件同一级</td></tr><tr><td>下一级路径</td><td>/</td><td>图片位于HTML文件下一级</td></tr><tr><td>上一级路径</td><td>../</td><td>图片位于HTML文件上一级</td></tr></tbody></table></div> <p><span style="color:#0d0016;"> 2.</span><span style="color:#38d8f0;">绝对路径</span><span style="color:#0d0016;">：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径（符号："\"）</span></p> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.5.7%EF%BC%9A%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE"> <span style="color:#fe2c24;"> 4.5.7：超链接标签</span></h6> <p><span style="color:#fe2c24;"> </span><span style="color:#0d0016;"> 在HTML标签中，</span><span style="color:#956fe7;"><a>标签用于定义超链接，作用是从一个页面链接到另一个页面</span></p> <p><span style="color:#0d0016;"> </span><span style="color:#38d8f0;"> 1.链接定义：</span></p> <p> HTML使用标签 <a> 来设置超文本链接。</p> <p> 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。</p> <p> 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。</p> <p> 在标签 <a> 中使用了 href 属性来描述链接的地址。</p> <p> 默认情况下，链接将以以下形式出现在浏览器中：</p> <ul><li><span style="color:#fe2c24;"> 一个未访问过的链接显示为蓝色字体并带有下划线。</span></li><li><span style="color:#fe2c24;">访问过的链接显示为紫色并带有下划线。</span></li><li><span style="color:#fe2c24;">点击链接时，链接显示为红色并带有下划线。</span></li></ul> <blockquote> <p>注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。</p> </blockquote> <p> <span style="color:#38d8f0;"> 2.链接的语法格式： </span> </p> <p> <span style="color:#956fe7;"> <a herf="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a></span></p> <p> <a> 元素：创建链接的主要HTML元素是<code><a></code>（锚）元素</p> <p><code> <a></code>元素具有以下属性：</p> <ul><li><code>href</code>：指定链接目标的URL地址，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。</li><li><code>target</code>（可选）：指定链接如何在浏览器中打开。常见的值包括<span style="color:#38d8f0;"> <code>_blank</code>（在新标签或窗口中打开链接）</span>和 <span style="color:#38d8f0;"><code>_self</code>（在当前标签或窗口中打开链接）</span></li><li><code>title</code>（可选）：提供链接的额外信息，通常当鼠标悬停在链接上时显示为工具提示。</li><li><code>rel</code>（可选）：指定与链接目标的关系，如 nofollow、noopener 等。<span style="color:#0d0016;"> </span></li><li><span style="color:#0d0016;">...... </span><span style="color:#0d0016;"> </span></li></ul> <p><span style="color:#38d8f0;"> 3.链接分类：六种链接</span></p> <pre data-index="5" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:745px"><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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>Document<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>1.外部链接<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="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://www.qq.com"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>></span>腾讯<span class="hljs-tag"></<span class="hljs-name">a</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-comment"><span class="hljs-comment"><!-- </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-comment"> target打开窗口的方式：</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-comment"> 默认的值是_self 当前窗口打开页面</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-comment"> _blank 新窗口打开页面</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-comment"> --></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"> </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">h4</span>></span>2.内部链接:网站内部页面之间的相互链接<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="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"07-上一级标签.html"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>></span>VScode<span class="hljs-tag"></<span class="hljs-name">a</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></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="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>3.空链接：#<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="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>></span>公司地址<span class="hljs-tag"></<span class="hljs-name">a</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></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="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>4.下载链接：地址链接的是 文件.exe 或者是.zip 等压缩包形式<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="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"img.zip"</span>></span>下载文件<span class="hljs-tag"></<span class="hljs-name">a</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></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="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>5.网页元素的链接<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="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://www.baidu.com"</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img.png"</span> /></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></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="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>6.锚点链接：当我们点击链接，可以快速定位到页面中的某个位置<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="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><span class="hljs-comment"><!-- </span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment"> 1.在链接文本的href属性中，设置属性值为 #名字 的形式，如：<a href="#two">第二集</a></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment"> 2.找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id="two">第二集介绍</h3></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment"> --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></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="37"></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="38"></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="39"></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> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.5.8%EF%BC%9A%E5%AD%97%E4%BD%93%E6%A0%87%E7%AD%BE"><span style="color:#fe2c24;"> 4.5.8：字体标签</span></h6> <pre data-index="6" 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">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="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>1.font标签<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="6"></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="7"></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="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment"><span class="hljs-comment"><!-- 1.字体标签</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-comment"> 需求一：在网页上显示 我是字体标签，并修改字体为 宋体，颜色为红色</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-comment"> </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-comment"> font标签是字体标签，它可以用来修改文本的字体，颜色，大小（尺寸）</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-comment"> color属性修改颜色</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-comment"> face属性修改字体</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-comment"> size属性修改文本大小</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-comment">--></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">font</span> <span class="hljs-attr">color</span>=<span class="hljs-string">"red"</span> <span class="hljs-attr">face</span>=<span class="hljs-string">"宋体"</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"7"</span>></span>我是字体标签<span class="hljs-tag"></<span class="hljs-name">font</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> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%204.5.9%EF%BC%9A%EF%BC%9Aiframe%E6%A0%87%E7%AD%BE" style="background-color:transparent;"><span style="color:#fe2c24;"> 4.5.9：iframe标签</span></h6> <pre data-index="7" 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">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="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>2.iframe标签<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="6"></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="7"></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="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">br</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-comment"><span class="hljs-comment"><!--</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-comment"> iframe标签可以在页面上开辟一个小区域显示一个单独的页面</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-comment"> iframe和a标签组合使用的步骤：</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-comment"> 1.在iframe标签中使用name属性定义一个名称</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-comment"> 2.在a标签的target属性上设置iframe的name的属性值</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-comment">--></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">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"1.font标签.html"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"400"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"abc"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</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">br</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">br</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"> </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">ul</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></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">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"1.font标签.html"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"abc"</span>></span>1.font标签.html<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></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="22"></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="23"></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="24"></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="25"></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="26"></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> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%204.5.10%EF%BC%9AHTML%E6%A0%87%E7%AD%BE%E7%AE%80%E5%86%99%E5%8F%8A%E5%85%A8%E7%A7%B0%C2%A0%20%C2%A0"> <span style="color:#fe2c24;">4.5.10：HTML标签简写及全称 </span></h6> <div class="table-box"><table><tbody><tr><th>标签</th><th>英文全称</th><th>中文说明</th></tr><tr><td>a</td><td>Anchor</td><td>锚</td></tr><tr><td>abbr</td><td>Abbreviation</td><td>缩写词</td></tr><tr><td>acronym</td><td>Acronym</td><td>取首字母的缩写词</td></tr><tr><td>address</td><td>Address</td><td>地址</td></tr><tr><td>alt</td><td>alter</td><td>替用(一般是图片显示不出的提示)</td></tr><tr><td>b</td><td>Bold</td><td>粗体（文本）</td></tr><tr><td>bdo</td><td>Bi-Directional Override</td><td>文本显示方向</td></tr><tr><td>big</td><td>Big</td><td>变大（文本）</td></tr><tr><td>blockquote</td><td>Block Quotation</td><td>区块引用语</td></tr><tr><td>br</td><td>Break</td><td>换行</td></tr><tr><td>cell</td><td>cell</td><td>巢</td></tr><tr><td>cellpadding</td><td>cellpadding</td><td>巢补白</td></tr><tr><td>cellspacing</td><td>cellspacing</td><td>巢空间</td></tr><tr><td>center</td><td>Centered</td><td>居中（文本）</td></tr><tr><td>cite</td><td>Citation</td><td>引用</td></tr><tr><td>code</td><td>Code</td><td>源代码（文本）</td></tr><tr><td>dd</td><td>Definition Description</td><td>定义描述</td></tr><tr><td>del</td><td>Deleted</td><td>删除（的文本）</td></tr><tr><td>dfn</td><td>Defines a Definition Term</td><td>定义定义条目</td></tr><tr><td>div</td><td>Division</td><td>分隔</td></tr><tr><td>dl</td><td>Definition List</td><td>定义列表</td></tr><tr><td>dt</td><td>Definition Term</td><td>定义术语</td></tr><tr><td>em</td><td>Emphasized</td><td>加重（文本）</td></tr><tr><td>font</td><td>Font</td><td>字体</td></tr><tr><td>h1~h6</td><td>Header 1 to Header 6</td><td>标题1到标题6</td></tr><tr><td>hr</td><td>Horizontal Rule</td><td>水平尺</td></tr><tr><td>href</td><td>hypertext reference</td><td>超文本引用</td></tr><tr><td>i</td><td>Italic</td><td>斜体（文本）</td></tr><tr><td>iframe</td><td>Inline frame</td><td>定义内联框架</td></tr><tr><td>ins</td><td>Inserted</td><td>插入（的文本）</td></tr><tr><td>kbd</td><td>Keyboard</td><td>键盘（文本）</td></tr><tr><td>li</td><td>List Item</td><td>列表项目</td></tr><tr><td>nl</td><td>navigation lists</td><td>导航列表</td></tr><tr><td>ol</td><td>Ordered List</td><td>排序列表</td></tr><tr><td>optgroup</td><td>Option group</td><td>定义选项组</td></tr><tr><td>p</td><td>Paragraph</td><td>段落</td></tr><tr><td>pre</td><td>Preformatted</td><td>预定义格式（文本 ）</td></tr><tr><td>q</td><td>Quotation</td><td>引用语</td></tr><tr><td>rel</td><td>Reload</td><td>加载</td></tr><tr><td>s/ strike</td><td>Strikethrough</td><td>删除线</td></tr><tr><td>samp</td><td>Sample</td><td>示例（文本</td></tr><tr><td>small</td><td>Small</td><td>变小（文本）</td></tr><tr><td>span</td><td>Span</td><td>范围</td></tr><tr><td>src</td><td>Source</td><td>源文件链接</td></tr><tr><td>strong</td><td>Strong</td><td>加重（文本）</td></tr><tr><td>sub</td><td>Subscripted</td><td>下标（文本）</td></tr><tr><td>sup</td><td>Superscripted</td><td>上标（文本）</td></tr><tr><td>td</td><td>table data cell</td><td>表格中的一个单元格</td></tr><tr><td>th</td><td>table header cell</td><td>表格中的表头</td></tr><tr><td>tr</td><td>table row</td><td>表格中的一行</td></tr><tr><td>tt</td><td>Teletype</td><td>打印机（文本）</td></tr><tr><td>u</td><td>Underlined</td><td>下划线（文本）</td></tr><tr><td>ul</td><td>Unordered List</td><td>不排序列表</td></tr><tr><td>var</td><td>Variable</td><td>变量（文本）</td></tr></tbody></table></div> <h5 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A04.6%EF%BC%9A%E5%85%83%E7%B4%A0" style="background-color:transparent;"><span style="color:#fe2c24;"> 4.6：元素</span></h5> <p>①HTML <base> 元素</p> <p> <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接</p> <hr> <p>②HTML <link> 元素</p> <p> <link> 标签定义了文档与外部资源之间的关系。</p> <p> <link> 标签通常用于链接到样式表</p> <p> 实例：</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">head</span>></span> <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">"mystyle.css"</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</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> <hr> <p>③HTML <style> 元素</p> <p> <style> 标签定义了HTML文档的样式文件引用地址.</p> <p> 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:</p> <p> 实例：</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">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>></span><span class="language-css"> <span class="hljs-selector-tag">body</span> { <span class="hljs-attribute">background-color</span>:yellow; } <span class="hljs-selector-tag">p</span> { <span class="hljs-attribute">color</span>:blue } </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</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> <hr> <p>④HTML <meta> 元素</p> <p> meta标签描述了一些基本的元数据。</p> <p> <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。</p> <p> META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</p> <p> 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。</p> <p> <meta> 一般放置于 <head> 区域</p> <p> 实例：</p> <pre data-index="10" 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"> </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, XML, XHTML, 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">为网页定义描述内容:</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"> </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">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"免费 Web & 编程 教程"</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"> </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">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Runoob"</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">每30秒钟刷新当前页面:</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">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"refresh"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"30"</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> <hr> <p>HTML <script> 元素</p> <p> <script>标签用于加载脚本文件，如： JavaScript。</p> <hr> <p>HTML head 元素</p> <div class="table-box"><table><tbody><tr><th>标签</th><th>描述</th></tr><tr><td><a href="https://www.runoob.com/tags/tag-head.html" rel="nofollow" title="<head>"><head></a></td><td>定义了文档的信息</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-title.html" rel="nofollow" title="<title>"><title></a></td><td>定义了文档的标题</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-base.html" rel="nofollow" title="<base>"><base></a></td><td>定义了页面链接标签的默认链接地址</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-link.html" rel="nofollow" title="<link>"><link></a></td><td>定义了一个文档和外部资源之间的关系</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-meta.html" rel="nofollow" title="<meta>"><meta></a></td><td>定义了HTML文档中的元数据</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-script.html" rel="nofollow" title="<script>"><script></a></td><td>定义了客户端的脚本文件</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-style.html" rel="nofollow" title="<style>"><style></a></td><td>定义了HTML文档的样式文件</td></tr></tbody></table></div> <h4 id="%C2%A0%E4%BA%94%EF%BC%9AHTML%E4%B8%AD%E7%9A%84%E6%B3%A8%E9%87%8A%E5%92%8C%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%C2%A0"><a name="t5"></a><span style="color:#fe2c24;"> 五：HTML中的注释和特殊字符 </span></h4> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%205.1%EF%BC%9A%E6%B3%A8%E9%87%8A"><span style="color:#fe2c24;"> 5.1：注释</span></h5> <p><span style="color:#fe2c24;"> </span><span style="color:#0d0016;">如果需要再HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签</span></p> <p><span style="color:#0d0016;"> HTML中的注释以</span><span style="color:#956fe7;">"<!--"开头，以"-->"</span><span style="color:#0d0016;">结束</span></p> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%205.2%EF%BC%9A%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6"><span style="color:#0d0016;"> </span><span style="color:#fe2c24;">5.2：特殊字符</span></h5> <p><span style="color:#0d0016;"> 在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代</span></p> <p><img alt="" height="435" src="https://1000bd.com/contentImg/2024/03/17/035214279.png" ></p> <pre data-index="11" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>Document<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 空格 --></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-symbol"> </span><span class="hljs-symbol"> </span><span class="hljs-symbol"> </span><span class="hljs-symbol"> </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-comment"><!-- 大于小于 --></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-symbol"><</span> p <span class="hljs-symbol">></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">body</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"> </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> <h4 id="%E5%85%AD%EF%BC%9A%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE"><a name="t6"></a><span style="color:#fe2c24;">六：表格标签</span></h4> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%206.1%EF%BC%9A%E8%A1%A8%E6%A0%BC%E7%9A%84%E4%B8%BB%E8%A6%81%E4%BD%9C%E7%94%A8"><span style="color:#fe2c24;"> 6.1：表格的主要作用</span></h5> <p>表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好</p> <p>表格不是用来布局的，而是用来<span style="color:#38d8f0;">展示数据</span>的</p> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%206.2%EF%BC%9A%E8%A1%A8%E6%A0%BC%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95"><span style="color:#fe2c24;"> 6.2：表格的基本语法</span></h5> <p>HTML 表格由 <span style="color:#38d8f0;"><table> 标签</span>来定义。</p> <p>HTML 表格是一种用于展示结构化数据的标记语言元素</p> <p>每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题</p> <ul><li><strong>tr</strong>：tr 是 table row 的缩写，表示表格的一行</li><li><strong>td</strong>：td 是 table data 的缩写，表示表格的数据单元格</li><li><strong>th</strong>：th 是 table header的缩写，表示表格的表头单元格</li></ul> <p>数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等</p> <h5 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A06.3%EF%BC%9A%E8%A1%A8%E5%A4%B4%E5%8D%95%E5%85%83%E6%A0%BC%E6%A0%87%E7%AD%BE"><span style="color:#fe2c24;"> 6.3：表头单元格标签</span></h5> <p>一般表头单元格位于表格的第一行或第一列，<span style="color:#38d8f0;">表头单元格里面的文本内容加粗居中显示</span></p> <p><span style="color:#38d8f0;"><th></span>标签表示HTML表格的表头部分</p> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%206.4%EF%BC%9A%E8%A1%A8%E6%A0%BC%E5%B1%9E%E6%80%A7"> <span style="color:#fe2c24;"> 6.4：表格属性</span></h5> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td>属性名</td><td>属性值</td><td>描述</td></tr><tr><td>align</td><td>left、center、right</td><td>规定表格相对于周围元素的对齐方式</td></tr><tr><td>border</td><td>1或""</td><td>规定表格单元是否拥有边框，默认为""，表示没有边框</td></tr><tr><td>cellpadding</td><td>像素值</td><td>规定单元边沿与其内容之间的空白，默认2像素</td></tr><tr><td>cellspacing</td><td>像素值</td><td>规定单元格之间的空白，默认2像素</td></tr><tr><td>width</td><td>像素值或百分比</td><td>规定表格的宽度</td></tr></tbody></table></div> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%206.5%EF%BC%9A%E8%A1%A8%E6%A0%BC%E7%BB%93%E6%9E%84%E6%A0%87%E7%AD%BE"><span style="color:#fe2c24;"> 6.5：表格结构标签</span></h5> <div class="table-box"><table><tbody><tr><th>标签</th><th>描述</th></tr><tr><td><a href="https://www.runoob.com/tags/tag-table.html" rel="nofollow" title="<table>"><table></a></td><td>定义表格</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-th.html" rel="nofollow" title="<th>"><th></a></td><td>定义表格的表头</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-tr.html" rel="nofollow" title="<tr>"><tr></a></td><td>定义表格的行</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-td.html" rel="nofollow" title="<td>"><td></a></td><td>定义表格单元</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-caption.html" rel="nofollow" title="<caption>"><caption></a></td><td>定义表格标题</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-colgroup.html" rel="nofollow" title="<colgroup>"><colgroup></a></td><td>定义表格列的组</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-col.html" rel="nofollow" title="<col>"><col></a></td><td>定义用于表格列的属性</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-thead.html" rel="nofollow" title="<thead>"><thead></a></td><td>定义表格的页眉</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-tbody.html" rel="nofollow" title="<tbody>"><tbody></a></td><td>定义表格的主体</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-tfoot.html" rel="nofollow" title="<tfoot>"><tfoot></a></td><td>定义表格的页脚</td></tr></tbody></table></div> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%206.6%EF%BC%9A%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC"><span style="color:#fe2c24;"> 6.6：合并单元格</span></h5> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%206.6.1%EF%BC%9A%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC%E6%96%B9%E5%BC%8F"> <span style="color:#fe2c24;"> 6.6.1：合并单元格方式</span></h6> <p> <span style="color:#38d8f0;"> 跨行合并：rowspan="合并单元格的个数"</span></p> <p><span style="color:#38d8f0;"> 跨列合并：colspan="合并单元格的个数"</span></p> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%206.6.2%EF%BC%9A%E7%9B%AE%E6%A0%87%E5%8D%95%E5%85%83%E6%A0%BC%EF%BC%88%E5%86%99%E5%90%88%E5%B9%B6%E4%BB%A3%E7%A0%81%EF%BC%89"> <span style="color:#fe2c24;"> 6.6.2：目标单元格（写合并代码）</span></h6> <p> 跨行：最上侧单元格为目标单元格，写合并代码</p> <p> 跨列：最左侧单元格为目标单元格，写合并代码</p> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%206.6.3%EF%BC%9A%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC%E4%B8%89%E9%83%A8%E6%9B%B2%EF%BC%9A"> <span style="color:#fe2c24;"> 6.6.3：合并单元格三部曲：</span></h6> <p> 1.先确定是跨行还是跨列合并</p> <p> 2.找到目标单元格。写上合并方式=合并的单元格数量</p> <p> 3.删除多余的单元格</p> <pre data-index="12" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:790px"><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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 这些属性要写到表格标签table里面去 --></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">table</span> <span class="hljs-attr">align</span>=<span class="hljs-string">"center"</span> <span class="hljs-attr">border</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">cellpadding</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">cellspacing</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"900"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"50"</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">thead</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">tr</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-comment"><!-- 表头单元格 --></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">th</span>></span>排名<span class="hljs-tag"></<span class="hljs-name">th</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">th</span>></span>关键词<span class="hljs-tag"></<span class="hljs-name">th</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">th</span>></span>趋势<span class="hljs-tag"></<span class="hljs-name">th</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">th</span>></span>进入搜索<span class="hljs-tag"></<span class="hljs-name">th</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>最近七日<span class="hljs-tag"></<span class="hljs-name">th</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">th</span>></span>相关链接<span class="hljs-tag"></<span class="hljs-name">th</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">thead</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></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="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">tbody</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>1<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>鬼吹灯<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"下.jpg"</span> </<span class="hljs-attr">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>456<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>123<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>贴吧<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>图片<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>百科<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></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="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>2<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>盗墓笔记<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"下.jpg"</span> </<span class="hljs-attr">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>124<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>675432<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>贴吧<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>图片<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>百科<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="43"></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="44"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="45"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>3<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="46"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>西游记<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="47"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"上.jpg"</span> </<span class="hljs-attr">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="48"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>213<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="49"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>7654<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="50"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>贴吧<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>图片<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>百科<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="51"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="52"></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="53"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="54"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>4<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="55"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>东游记<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="56"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"上.jpg"</span> </<span class="hljs-attr">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="57"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>23<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="58"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>75643<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="59"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>贴吧<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>图片<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>百科<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="60"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="61"></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="62"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="63"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>5<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="64"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>甄嬛传<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="65"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"下.jpg"</span> </<span class="hljs-attr">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="66"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>121<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="67"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>7676<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="68"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>贴吧<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>图片<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>百科<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="69"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="70"></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="71"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="72"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>6<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="73"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>水浒传<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="74"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"上.jpg"</span> </<span class="hljs-attr">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="75"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>576576<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="76"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span>123456<span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="77"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>贴吧<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>图片<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>百科<span class="hljs-tag"></<span class="hljs-name">a</span>></span> <span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="78"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="79"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tbody</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="80"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">table</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="81"></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="82"></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="83"></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> <pre data-index="13" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>Document<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">table</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"500"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"249"</span> <span class="hljs-attr">border</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">cellspacing</span>=<span class="hljs-string">"0"</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">tr</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-comment"><!-- 将第一行的第二个单元格和第三个单元格合并 --></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">td</span>></span><span class="hljs-tag"></<span class="hljs-name">td</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">td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">"2"</span>></span><span class="hljs-tag"></<span class="hljs-name">td</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">tr</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"> </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">tr</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-comment"><!-- 将第二行的第一个单元格和第三行的第一个单元格合并 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">rowspan</span>=<span class="hljs-string">"2"</span>></span><span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></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="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">td</span>></span><span class="hljs-tag"></<span class="hljs-name">td</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">tr</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">table</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></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="31"></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="32"></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> <h4 id="%E4%B8%83%EF%BC%9A%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE"><a name="t7"></a><span style="color:#fe2c24;">七：列表标签</span></h4> <p><span style="color:#fe2c24;"> 表格是用来显示数据的，那么列表就是用来布局的</span></p> <p><span style="color:#fe2c24;"> 列表</span><span style="color:#0d0016;">最大的特点：整齐、整洁、有序，它作为布局会更加自由和方便</span></p> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%207.1%EF%BC%9A%E5%88%86%E7%B1%BB"><span style="color:#fe2c24;"> 7.1：分类</span></h5> <h6 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A01%EF%BC%9A%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8"><span style="color:#956fe7;"> 1：无序列表</span></h6> <p> 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，列表项使用<span style="color:#38d8f0;"><li></span>标签定义</p> <p> 无序列表使用 <span style="color:#38d8f0;"><ul></span> 标签</p> <p> 注意： </p> <p> ①无序列表的各个列表项之间没有顺序级别之分，是并列的</p> <p> ②<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的</p> <p> ③<li></li>之间相当于一个容器，可以容纳所有元素</p> <p> ④无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置</p> <pre data-index="14" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>您喜欢的食物？<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="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">u1</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">li</span>></span>榴莲<span class="hljs-tag"></<span class="hljs-name">li</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">li</span>></span>臭豆腐<span class="hljs-tag"></<span class="hljs-name">li</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">li</span>></span>鲱鱼罐头<span class="hljs-tag"></<span class="hljs-name">li</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">u1</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"> </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> <h6 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A02%EF%BC%9A%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8"><span style="color:#956fe7;"> 2：有序列表</span></h6> <p><span style="color:#0d0016;"> </span>有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于 <span style="color:#38d8f0;"><ol></span> 标签。每个列表项始于 <span style="color:#38d8f0;"><li> </span>标签</p> <p> 列表项使用数字来标记</p> <pre data-index="15" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>粉丝排行榜<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="12"></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="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>刘德华 10000<span class="hljs-tag"></<span class="hljs-name">li</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">li</span>></span>张学友 88888<span class="hljs-tag"></<span class="hljs-name">li</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">li</span>></span>小贾 1<span class="hljs-tag"></<span class="hljs-name">li</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">ol</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"> </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> <h6 id="%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A03%EF%BC%9A%E8%87%AA%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8"><span style="color:#956fe7;"> 3：自定义列表</span></h6> <p><span style="color:#0d0016;"> </span>自定义列表不仅仅是一列项目，而是项目及其注释的组合</p> <p> 自定义列表以<span style="color:#38d8f0;"> <dl> </span>标签开始，每个自定义列表项以 <span style="color:#38d8f0;"><dt> </span>开始，每个自定义列表项的定义以 <span style="color:#38d8f0;"><dd></span> 开始</p> <pre data-index="16" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">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="8"></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="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"><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="11"></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="12"></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="13"></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="14"></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="15"></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="16"></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="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"> </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><span style="color:#4da8ee;">ul是unordered lists的缩写 (无序列表)</span></p> <p><span style="color:#4da8ee;">li是list item的缩写 （列表项目）</span></p> <p><span style="color:#4da8ee;">ol是ordered lists的缩写（有序列表）</span></p> <p><span style="color:#4da8ee;">dl是definition lists的英文缩写 (自定义列表)</span></p> <p><span style="color:#4da8ee;">dt是definition term的缩写 (自定义列表组)</span></p> <p><span style="color:#4da8ee;">dd是definition description的缩写（自定义列表描述）</span></p> <p><span style="color:#4da8ee;">tr是table row的缩写 （表格中的一行）</span></p> <p><span style="color:#4da8ee;">th是table header cell的缩写 （表格中的表头）</span></p> <p><span style="color:#4da8ee;">td是table data cell的缩写 （表格中的一个单元格）</span></p> <h4 id="%E5%85%AB%EF%BC%9A%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE"><a name="t8"></a><span style="color:#fe2c24;">八：表单标签</span></h4> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%208.1%EF%BC%9A%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%E8%A1%A8%E5%8D%95%EF%BC%9F"><span style="color:#fe2c24;"> 8.1：为什么需要表单？</span></h5> <p><span style="color:#0d0016;">使用表单目的是为了收集用户信息的所有元素的集合，然后把这些信息发送给服务器</span></p> <p><span style="color:#0d0016;">在我们的网页中，我们也需要跟用户进行交互，收集用户信息，此时就需要表单</span></p> <h5 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%208.2%EF%BC%9A%E8%A1%A8%E5%8D%95%E7%9A%84%E7%BB%84%E6%88%90"><span style="color:#0d0016;"> </span><span style="color:#fe2c24;"> 8.2：表单的组成</span></h5> <p><span style="color:#0d0016;">在HTML中，一个完整的表单通常由</span><span style="color:#956fe7;">表单域</span><span style="color:#0d0016;">、</span><span style="color:#956fe7;">表单控件</span><span style="color:#0d0016;">（也称为表单元素）和</span><span style="color:#956fe7;">提示信息</span><span style="color:#0d0016;">3个部分组成</span></p> <p><span style="color:#0d0016;"> </span><span style="color:#956fe7;">①表单域</span></p> <p> 表单域是一个包含表单元素的区域</p> <p> 在HTML标签中，<span style="color:#38d8f0;"><form></span>标签用于定义表单域，以实现用户信息的收集和传递</p> <p> <span style="color:#38d8f0;"> <form>会把它范围内的表单元素信息提交给服务器</span></p> <pre data-index="17" 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-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">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="5"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">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="7"></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="8"></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="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"demo.php"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"name1"</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"> </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">form</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">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><span style="color:#38d8f0;"> 常用属性：</span></p> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td>属性</td><td>属性值</td><td>作用</td></tr><tr><td>action</td><td>url地址</td><td>用于指定接收并处理表单数据的服务器的url地址</td></tr><tr><td>method</td><td>get/post</td><td>用于设置表单数据的提交方式，其取值为get或post</td></tr><tr><td>name</td><td>名称</td><td>用于指定表单的名称，以区分同一个页面中的多个表单域</td></tr></tbody></table></div> <p> 表单提交的时候，数据没有发送给服务器的三种情况：</p> <p> 1.表单项没有name属性值</p> <p> 2.单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器</p> <p> 3.表单项不在提交的form标签中</p> <p> get请求的特点：</p> <p> 1.浏览器地址栏中的地址是：action属性[+?+请求参数]</p> <p> 请求参数的格式：name=value&&name=value</p> <p> 2.不安全</p> <p> 3.它有数据长度的限制</p> <p> post请求的特点：</p> <p> 1.浏览器地址栏中只有action属性值</p> <p> 2.相对于get请求要安全</p> <p> 3.理论上没有数据长度的限制</p> <p> <span style="color:#956fe7;"> ②表单控件（表单元素）</span></p> <p> 表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox） 等等</p> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%208.2.1%EF%BC%9Ainput%E8%BE%93%E5%85%A5%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0"><span style="color:#fe2c24;"> 8.2.1：input输入表单元素</span></h6> <p> 多数情况下被用到的表单标签是<span style="color:#38d8f0;">输入标签 <input></span><span style="color:#0d0016;">用于收集用户信息</span></p> <p> <span style="color:#956fe7;"> 输入类型是由 type 属性定义</span></p> <p> <span style="color:#38d8f0;"> 文本域</span>通过<span style="color:#38d8f0;"><input type="text"></span><span style="color:#956fe7;"> </span>标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域</p> <p> <span style="color:#38d8f0;">密码字段</span>通过标签 <input type="password"> 来定义</p> <p> <input type="radio"> 标签定义了表单的<span style="color:#38d8f0;">单选框选项</span></p> <p> <input type="checkbox"> 定义了<span style="color:#38d8f0;">复选框</span></p> <p> 复选框可以选取一个或多个选项</p> <p> <input type="submit"> 定义了<span style="color:#38d8f0;">提交按钮</span></p> <p> 当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名</p> <p> action 属性会对接收到的用户输入数据进行相关的处理</p> <p> 注意：</p> <p> ①name和value是每个表单元素都有的属性值，主要给后台人员使用</p> <p> ②name表单元素的名字，要求单选按钮和复选框要有相同的name值</p> <p> ③<span style="color:#956fe7;">checked属性</span>主要针对于单选按钮和复选框，主要作用：一打开页面，就可以默认选中某个表单元素</p> <p> ④<span style="color:#956fe7;">maxlength</span>是用户可以在表单输入的最大字符数，一般较少使用</p> <pre data-index="18" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:1026px"><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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>input 表单元素<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"xxx.php"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"get"</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-comment"><!-- text 文本框 用户可以在里面输入任何文字 --></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">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"username"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"请输入用户名"</span> <span class="hljs-attr">maxlength</span>=<span class="hljs-string">"6"</span>></span> <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="14"></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="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- password 密码框 用户看不见输入的密码 --></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">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"pwd"</span>></span> <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="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-comment"><!-- radio 单选框 可以实现多选一 --></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-comment"><!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name才可以实现多选一 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 单选按钮和复选框可以设置checked属性，当页面打开的时候可以默认选中这个按钮 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 性别：男 <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span> <span class="hljs-attr">value</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="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 女 <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"女"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">"checked"</span>></span> <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="23"></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="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- checkbox 多选框 可以实现多选 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 爱好：吃饭<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"hobby"</span>></span> 睡觉<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"hobby"</span>></span> 打游戏 <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">name</span>=<span class="hljs-string">"hobby"</span>> <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="27"></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="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 点击了提交按钮，就可以把表单域form里面的表单元素里面的值提交给后台服务器 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</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="30"></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="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 重置按钮可以还原表单元素初始的默认状态 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"reset"</span> <span class="hljs-attr">value</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="33"></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="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 普通按钮button 后期结合js搭配使用 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</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="36"></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="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-comment"><!-- 文件域 使用场景 上传文件时使用 --></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> 上传头像：<span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"file"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">form</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></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="41"></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="42"></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> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A08.2.2%EF%BC%9Aselect%E4%B8%8B%E6%8B%89%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0"><span style="color:#fe2c24;"> 8.2.2：select下拉表单元素</span></h6> <p>在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表</p> <pre data-index="19" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>select 下拉表单<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">form</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"> 籍贯：</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">select</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">option</span>></span>山东<span class="hljs-tag"></<span class="hljs-name">option</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">option</span>></span>北京<span class="hljs-tag"></<span class="hljs-name">option</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">option</span>></span>陕西<span class="hljs-tag"></<span class="hljs-name">option</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">option</span> <span class="hljs-attr">selected</span>=<span class="hljs-string">"selected"</span>></span>上海<span class="hljs-tag"></<span class="hljs-name">option</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">select</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">form</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></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="21"></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="22"></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="23"></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> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A08.2.3%EF%BC%9Atextarea%E6%96%87%E6%9C%AC%E5%9F%9F%E5%85%83%E7%B4%A0%C2%A0%20%C2%A0%C2%A0"><span style="color:#fe2c24;"> 8.2.3：textarea文本域元素 </span></h6> <p>使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签</p> <pre data-index="20" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>testarea 文本域<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">form</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"> 今日反馈：</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">textarea</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"50"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"5"</span>></span>helloworld!</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">textarea</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">form</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">body</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"> </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> <h6 id="%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%208.2.4%EF%BC%9A%E9%87%8D%E7%BD%AE%E3%80%81%E6%96%87%E4%BB%B6"> <span style="color:#fe2c24;"> 8.2.4：重置、文件</span></h6> <p><span style="color:#fe2c24;"> </span> <span style="color:#0d0016;"> input type=reset 重置按钮</span></p> <p><span style="color:#0d0016;"> input type=file 文件上传域</span></p> <h5 id="8.3%EF%BC%9A%3Clabel%3E%E6%A0%87%E7%AD%BE"><span style="color:#fe2c24;">8.3：<label>标签</span></h5> <p><label>标签为input元素定义标注(标签)</p> <p><label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验</p> <p>核心：<label>标签的<span style="color:#956fe7;">for属性</span>应当与相关元素的<span style="color:#956fe7;">id属性相同</span></p> <pre data-index="21" 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"> </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">head</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">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="6"></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">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</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">title</span>></span>label 标签<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="8"></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="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"><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="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"text"</span>></span> 用户名：<span class="hljs-tag"></<span class="hljs-name">label</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"text"</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"> </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">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nan"</span>></span> <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"nan"</span>></span>男<span class="hljs-tag"></<span class="hljs-name">label</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">body</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"> </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">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>New : HTML5新标签</p> <div class="table-box"><table><tbody><tr><th>标签</th><th>描述</th></tr><tr><td><a href="https://www.runoob.com/tags/tag-form.html" rel="nofollow" title="<form>"><form></a></td><td>定义供用户输入的表单</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-input.html" rel="nofollow" title="<input>"><input></a></td><td>定义输入域</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-textarea.html" rel="nofollow" title="<textarea>"><textarea></a></td><td>定义文本域 (一个多行的输入控件)</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-label.html" rel="nofollow" title="<label>"><label></a></td><td>定义了 <input> 元素的标签，一般为输入标题</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-fieldset.html" rel="nofollow" title="<fieldset>"><fieldset></a></td><td>定义了一组相关的表单元素，并使用外框包含起来</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-legend.html" rel="nofollow" title="<legend>"><legend></a></td><td>定义了 <fieldset> 元素的标题</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-select.html" rel="nofollow" title="<select>"><select></a></td><td>定义了下拉选项列表</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-optgroup.html" rel="nofollow" title="<optgroup>"><optgroup></a></td><td>定义选项组</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-option.html" rel="nofollow" title="<option>"><option></a></td><td>定义下拉列表中的选项</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-button.html" rel="nofollow" title="<button>"><button></a></td><td>定义一个点击按钮</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-datalist.html" rel="nofollow" title="<datalist>"><datalist></a>New</td><td>指定一个预先定义的输入控件选项列表</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-keygen.html" rel="nofollow" title="<keygen>"><keygen></a>New</td><td>定义了表单的密钥对生成器字段</td></tr><tr><td><a href="https://www.runoob.com/tags/tag-output.html" rel="nofollow" title="<output>"><output></a>New</td><td>定义一个计算结果</td></tr></tbody></table></div> <h4 id="%E4%B9%9D%EF%BC%9AHTML%E6%A1%86%E6%9E%B6%C2%A0"><a name="t9"></a><span style="color:#fe2c24;">九：HTML框架 </span></h4> <h5 id="9.1%EF%BC%9Aiframe%E8%AF%AD%E6%B3%95"><span style="color:#fe2c24;"><strong>9.1：iframe语法</strong></span></h5> <pre data-index="22" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"URL"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</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>该URL指向不同的网页。</p> <hr> <h5 id="9.2%EF%BC%9Aiframe%20-%20%E8%AE%BE%E7%BD%AE%E9%AB%98%E5%BA%A6%E4%B8%8E%E5%AE%BD%E5%BA%A6"><span style="color:#fe2c24;">9.2：iframe - 设置高度与宽度</span></h5> <p> height 和 width 属性用来定义iframe标签的高度与宽度。</p> <p> 属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。</p> <p> 实例：</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">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"demo_iframe.htm"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"200"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"200"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</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> <hr> <h5 id="9.3%EF%BC%9Aiframe%20-%20%E7%A7%BB%E9%99%A4%E8%BE%B9%E6%A1%86"><span style="color:#fe2c24;">9.3：iframe - 移除边框</span></h5> <p> frameborder 属性用于定义iframe表示是否显示边框。</p> <p> 设置属性值为 "0" 移除iframe的边框:</p> <p> 实例：</p> <pre data-index="24" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"demo_iframe.htm"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</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> <hr> <h5 id="9.4%EF%BC%9A%E4%BD%BF%E7%94%A8%20iframe%20%E6%9D%A5%E6%98%BE%E7%A4%BA%E7%9B%AE%E6%A0%87%E9%93%BE%E6%8E%A5%E9%A1%B5%E9%9D%A2"><span style="color:#fe2c24;">9.4：使用 iframe 来显示目标链接页面</span></h5> <p> iframe 可以显示一个目标链接的页面</p> <p> 目标链接的属性必须使用 iframe 的属性</p> <p> 实例：</p> <pre data-index="25" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:744px"><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">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"demo_iframe.htm"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"iframe_a"</span>></span><span class="hljs-tag"></<span class="hljs-name">iframe</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">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.runoob.com"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"iframe_a"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"noopener"</span>></span>RUNOOB.COM<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</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> <hr> <h5 id="9.5%EF%BC%9AHTML%20iframe%20%E6%A0%87%E7%AD%BE"><span style="color:#fe2c24;">9.5：HTML iframe 标签</span></h5> <div class="table-box"><table><tbody><tr><th>标签</th><th>说明</th></tr><tr><td><a href="https://www.runoob.com/tags/tag-iframe.html" rel="nofollow" title="<iframe>"><iframe></a></td><td>定义一个内联的iframe</td></tr></tbody></table></div> <h4 id="%C2%A0%E5%8D%81%EF%BC%9A%E5%AD%97%E7%AC%A6%E5%AE%9E%E4%BD%93" style="background-color:transparent;"><a name="t10"></a> <span style="color:#fe2c24;">十：字符实体</span></h4> <p>HTML 中的预留字符必须被替换为字符实体。</p> <p>一些在键盘上找不到的字符也可以使用字符实体来替换。</p> <hr> <h5 id="10.1%EF%BC%9AHTML%20%E5%AE%9E%E4%BD%93"><span style="color:#fe2c24;">10.1：HTML 实体</span></h5> <p> 在 HTML 中，某些字符是预留的。</p> <p> 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。</p> <p> 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：</p> <pre data-index="26" 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">&entity_name;</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">或</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">&#entity_number;</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"> </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-symbol"><</span> 或 <span class="hljs-symbol"><</span> 或 <span class="hljs-symbol"><</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><strong>提示：</strong> 使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。</p> <hr> <h5 id="10.2%EF%BC%9A%E4%B8%8D%E9%97%B4%E6%96%AD%E7%A9%BA%E6%A0%BC(Non-breaking%20Space)"><span style="color:#fe2c24;">10.2：不间断空格(Non-breaking Space)</span></h5> <p> HTML 中的常用字符实体是不间断空格( )。</p> <p> 浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。</p> <hr> <h5 id="10.3%EF%BC%9A%E7%BB%93%E5%90%88%E9%9F%B3%E6%A0%87%E7%AC%A6"><span style="color:#fe2c24;">10.3：结合音标符</span></h5> <p> 发音符号是加到字母上的一个"glyph(字形)"。</p> <p> 一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。</p> <p> 变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。</p> <p> 变音符号可以与字母、数字字符的组合来使用。</p> <p> 以下是一些实例:</p> <div class="table-box"><table><tbody><tr><th>音标符</th><th>字符</th><th>Construct</th><th>输出结果</th></tr><tr><td> ̀</td><td>a</td><td>à</td><td>à</td></tr><tr><td> ́</td><td>a</td><td>á</td><td>á</td></tr><tr><td>̂</td><td>a</td><td>â</td><td>â</td></tr><tr><td> ̃</td><td>a</td><td>ã</td><td>ã</td></tr><tr><td> ̀</td><td>O</td><td>Ò</td><td>Ò</td></tr><tr><td> ́</td><td>O</td><td>Ó</td><td>Ó</td></tr><tr><td>̂</td><td>O</td><td>Ô</td><td>Ô</td></tr><tr><td> ̃</td><td>O</td><td>Õ</td><td>Õ</td></tr></tbody></table></div> <hr> <h5 id="10.4%EF%BC%9AHTML%E5%AD%97%E7%AC%A6%E5%AE%9E%E4%BD%93"><span style="color:#fe2c24;">10.4：HTML字符实体</span></h5> <div class="table-box"><table><tbody><tr><th> <p class="img-center"><img alt="Note" height="32" src="https://1000bd.com/contentImg/2022/06/17/214054658.jpeg" ></p> </th><td> <p> 实体名称对大小写敏感！</p> </td></tr></tbody></table></div> <div class="table-box"><table><tbody><tr><th>显示结果</th><th>描述</th><th>实体名称</th><th>实体编号</th></tr><tr><td></td><td>空格</td><td> </td><td> </td></tr><tr><td><</td><td>小于号</td><td><</td><td><</td></tr><tr><td>></td><td>大于号</td><td>></td><td>></td></tr><tr><td>&</td><td>和号</td><td>&</td><td>&</td></tr><tr><td>"</td><td>引号</td><td>"</td><td>"</td></tr><tr><td>'</td><td>撇号 </td><td>' (IE不支持)</td><td>'</td></tr><tr><td>￠</td><td>分</td><td>¢</td><td>¢</td></tr><tr><td>£</td><td>镑</td><td>£</td><td>£</td></tr><tr><td>¥</td><td>人民币/日元</td><td>¥</td><td>¥</td></tr><tr><td>€</td><td>欧元</td><td>€</td><td>€</td></tr><tr><td>§</td><td>小节</td><td>§</td><td>§</td></tr><tr><td>©</td><td>版权</td><td>©</td><td>©</td></tr><tr><td>®</td><td>注册商标</td><td>®</td><td>®</td></tr><tr><td>™</td><td>商标</td><td>™</td><td>™</td></tr><tr><td>×</td><td>乘号</td><td>×</td><td>×</td></tr><tr><td>÷</td><td>除号</td><td>÷</td><td>÷</td></tr></tbody></table></div> <p> </p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1160095">【mysql 高级】索引介绍，索引结构 ，哪些情况下需要创建索引 ，哪些情况下不需要创建索引</a> <br /> <a href="/Article/Index/1073060">【mcuclub】四相五线步进电机</a> <br /> <a href="/Article/Index/1046183">家用摄像头怎么选：实用性，功能性以及性价比是关键</a> <br /> <a href="/Article/Index/1187541">Python（2）：字符串</a> <br /> <a href="/Article/Index/1413632">【问题】在安装torchvision的时候，会自动安装torch？</a> <br /> <a href="/Article/Index/946502">vue3中使用ref调用子组件属性与方法</a> <br /> <a href="/Article/Index/815314">my2sql工具之快速入门</a> <br /> <a href="/Article/Index/1566338">vue2实现字节流byte[]数组的图片预览</a> <br /> <a href="/Article/Index/1393708">OLED显示图片</a> <br /> <a href="/Article/Index/1475401">linux 开发板以太网通过Ubuntu上外网方法</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/weixin_63925896/article/details/133209763 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br /> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br /> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>