共计 17492 个字符，预计需要花费 44 分钟才能阅读完成。
一.HTML 简介与注意事项
HTML（超文本标记语言），是一种用于创建网页的标准标记语言。
- 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。HTML 文档也叫做 web 页面
- HTML 标签是由 尖括号 包围的关键词，比如
- HTML 标签通常是 成对出现 的，比如 和
- 标签对中的第一个标签是 开始标签 ，第二个标签是 结束标签
- 开始和结束标签也被称为 开放标签 和闭合标签
对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器 (如 360 浏览器) 会设置 GBK 为默认编码，则你需要设置为 。
- 声明为 HTML5 文档
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
</strong> 元素描述了文档的标题</li> <li><strong><body></strong> 元素包含了可见的页面内容</li> <li><strong><br /> <h1></strong> 元素定义一个大标题</li> <li><strong> <p></strong> 元素定义一个段落</li> </ul> <p>在浏览器的页面上使用键盘上的 <strong>F12</strong> 按键开启调试模式，就可以看到组成标签。</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" fetchpriority="high" decoding="async" alt=""height="240"data-src="https://yojack.cn/wp-content/uploads/replace/ec8b1021f6373cf849ad368d95defbbb.jpeg"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p>doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD（文档类型声明），因为 HTML 4.01 是基于 SGML(准通用标记语言）。HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。</p> <p>HTML5 不是基于 SGML，因此不要求引用 DTD。</p> <p>对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器 (如 360 浏览器) 会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。</p> <p><strong>保存 html 文件时，文档编码和 meta 设置的编码，一定要相同，只要不相同，就一定会出现乱码！</strong></p> <p><strong>二.HTML 下载与使用</strong></p> <p>Visual Studio Code – Code Editing. Redefined</p> <p>使用网站下载 VS code，</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" decoding="async" alt=""height="469"src="https://yojack.cn/wp-content/uploads/replace/a004b6eb1752f8743bc6088e0047c72e.jpeg"width="374">，首先点击小方块按钮，搜索“Chinese”使用汉化插件，<img title=" 菜鸟教程 -HTML 总结 "alt=" 菜鸟教程 -HTML 总结 "decoding="async"alt="" height="666" data-src="https://yojack.cn/wp-content/uploads/replace/f1c825d4b14b522f93ec6e68773b5be7.jpeg" data-lazy="true" src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg" width="622">，下载“live preview”可以在编译过程中，右键空白地方，选择“show preview”，显示运行结果。</p/> <p>AI 的使用</p> <p><strong>1.</strong><strong>安装与智能补全</strong></p> <p>搜索“Fitten Code”进行下载安装，登录后输入一段代码，Fitten Code 就会为您自动补全代码，按下 Tab 键接受所有补全建议，按下 Ctrl+→ 键 (mac 系统为 Command+→) 接收单个词补全建议。</p> <p><strong>2.AI</strong><strong>问答</strong></p> <p>用户可通过点击左上角工具栏中的 Fitten Code – 开始对话或者使用快捷键 Ctrl+Alt+C(mac 系统为 Control+Option+C)打开对话窗口进行对话，当用户选中代码段再进行对话时，Fitten Code 会自动引用用户所选中的代码段，此时可直接针对该代码段进行问询等操作：<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="367"data-src="https://yojack.cn/wp-content/uploads/replace/29ba52a997576d5dc3b84876645e01b4.jpeg"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="651"></p/> <p><strong>3.</strong><strong>生成代码</strong></p> <p>可在左侧 Fitten Code 工具栏中选择 “Fitten Code – 生成代码 ” 或者使用快捷键 Ctrl+Alt+G (mac 系统为 Control+Option+G)<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="428"data-src="https://yojack.cn/wp-content/uploads/replace/d505431b5249fafde9b10fbc485ce8df.jpeg"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="653"></p/> <p>，点击这个按钮，在输入框内输入指令，便可以生成代码<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="783"data-src="https://yojack.cn/wp-content/uploads/replace/8c01a9bcf80d206c78800c341c1b0286.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="811">，也可以使用对话生成代码。</p/> <p><strong>4</strong><strong>、代码翻译</strong></p> <p>编辑代码功能可以实现不同语言之间的转换，如 Python 语法转换成 C ++ 语法等。选中需要进行编辑的代码段，右键选择 “Fitten Code – 编辑代码 ” 或点击左侧工具栏中的 “Fitten Code – 编辑代码 ” 或者使用快捷键 Ctrl+Alt+E (mac 系统为 Control+Option+E)<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="544"data-src="https://yojack.cn/wp-content/uploads/replace/42731bb6275d58904e0473e0b886e595.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="844"></p/> <p>也可以在 Chat 界面实现：选中需要进行编辑的代码段，右键选择 “Fitten Code – 开始聊天 ” 或点击左侧工具栏中的 “Fitten Code – 开始聊天 ” 或者使用快捷键 Ctrl+Alt+C,<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="523"data-src="https://yojack.cn/wp-content/uploads/replace/8b545ea6f2bc75910077663e7eb0fa86.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="704"></p/> <p><strong>5</strong><strong>、生成注释</strong></p> <p>先选中需要生成注释的代码段，然后右键选择 “Fitten Code – 生成注释 ”</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="1109"data-src="https://yojack.cn/wp-content/uploads/replace/decd6b44183ab9ab003e4c2026fffff3.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="1130"></p/> <p><strong>6</strong><strong>、解释代码</strong></p> <p>选中代码段然后右键选择 “Fitten Code – 解释代码 ” 进行解释</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="581"data-src="https://yojack.cn/wp-content/uploads/replace/9c161c972e94e73969dd5753ffe14884.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><strong>7</strong><strong>、生成测试</strong></p> <p>通过选中代码段后右键选择 “Fitten Code – 生成单元测试 ” 来实现</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="590"data-src="https://yojack.cn/wp-content/uploads/replace/0c324ee76af74a7232fb42dfdd0e041a.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="810"></p/> <p><strong>8</strong><strong>、检查 bug</strong></p> <p>选中对应代码段，然后右键选择 “Fitten Code 查找 Bug”</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="529"data-src="https://yojack.cn/wp-content/uploads/replace/c93fe39abc40f6681819106c7b0fad96.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="872"></p/> <p><strong>9</strong><strong>、编辑代码</strong></p> <p>用户点击 “Apply” 后即可应用变更。通过选中代码段右键选择 “Fitten Code – 编辑代码 ” 或在左上角工具栏点击 “Fitten Code – 编辑代码 ”，如下图所示：</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="628"data-src="https://yojack.cn/wp-content/uploads/replace/e27851ad0d6cb4ec0586ecb2b284c433.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="953"></p/> <p>随后，用户可在输入框中输入指示，Fitten Code 会新建一个窗口对比显示更改前和更改后的内容，用户可通过点击 “Apply” 应用更改</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="436"data-src="https://yojack.cn/wp-content/uploads/replace/3ad6bd17fb1f13f7e987436d5ece2cbc.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><strong>10</strong><strong>、无法连接外网</strong></p> <p>点击左下角⚙按钮，再点击设置：然后在设置页面点击右上角 “ 打开设置(JSON)”:</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="530"data-src="https://yojack.cn/wp-content/uploads/replace/5545ac3774a2c36acbaf4e7ecb186c75.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="472"data-src="https://yojack.cn/wp-content/uploads/replace/6c18ff3d23d81aa232053c2938611849.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p>最后只需在在弹出的 settings.json 文件中添加 ”remote.extensionKind”: {“FittenTech.Fitten-Code”: [“ui”] }</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="335"data-src="https://yojack.cn/wp-content/uploads/replace/fa702856a332c8bc690cb12adea6a2f7.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><strong>三.HTML 基础</strong></p> <p><strong>1.HTML </strong><strong>标题</strong></p> <p>通过</p> <h1> – </p> <h6> 标签来定义的</p> <p>例如<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="136"data-src="https://yojack.cn/wp-content/uploads/replace/2783fb3eeded4611ed14a9fa323169f6.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="409"></p/> <p><strong>2.HTML </strong><strong>段落</strong></p> <p>段落是通过标签 </p> <p> 来定义的<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="86"data-src="https://yojack.cn/wp-content/uploads/replace/c3eb0ad0aa0284ded15739776ea53bf6.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="436"></p/> <p><strong>3.HTML </strong><strong>链接</strong></p> <p> 链接是通过标签 <a> 来定义的<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="78"data-src="https://yojack.cn/wp-content/uploads/replace/e7b902c5169c451618b851df43154de5.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="827"></p/> <p>在 href 属性中指定链接的地址。</p> <p><strong>4.HTML </strong><strong>图像</strong></p> <p> 图像是通过标签 <img> 来定义的.<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="162"data-src="https://yojack.cn/wp-content/uploads/replace/51702067c453a67c967761d3d26af7aa.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="446"data-src="https://yojack.cn/wp-content/uploads/replace/4fe827b90f18e6820a4ff76427c2c18e.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="283"data-src="https://yojack.cn/wp-content/uploads/replace/2d887f07fa70aeaa99e12709fc471c87.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="140"data-src="https://yojack.cn/wp-content/uploads/replace/f125eed8dcef1fe52828f54e91680b82.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="969"></p/> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="253"src="https://yojack.cn/wp-content/uploads/replace/7be51962f8545453389e2d27a334a2c6.png"width="965"><img title=" 菜鸟教程 -HTML 总结 "alt=" 菜鸟教程 -HTML 总结 "loading="lazy"decoding="async"alt="" height="265" data-src="https://yojack.cn/wp-content/uploads/replace/79fd70528f73a0ff50a0fd224c68ae7a.png" data-lazy="true" src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg" width="986"></p/> <p><strong>四.HTML 元素</strong></p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="292"data-src="https://yojack.cn/wp-content/uploads/replace/dfdb6b6452670c4ad035fe8ac9a7cd56.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="1060"></p/> <p>HTML 语法</p> <ul> <li>HTML 元素以 <strong> 开始标签 </strong> 起始</li> <li>HTML 元素以 <strong> 结束标签 </strong> 终止</li> <li><strong>元素的内容 </strong> 是开始标签与结束标签之间的内容</li> <li>某些 HTML 元素具有 <strong> 空内容（empty content）</strong></li> <li>空元素 <strong> 在开始标签中进行关闭</strong>（以开始标签的结束而结束）</li> <li>大多数 HTML 元素可拥有 <strong> 属性</strong></li> <li>大多数 HTML 元素可以嵌套</li> </ul> <p>HTML 空元素</p> <p>没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。</p> <p> 就是没有关闭标签的空元素（<br /> 标签定义换行）。</p> <p>在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。</p> <p>在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。</p> <p>即使 <br /> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。</p> <p>Ps: 标签写法要用小写</p> <p><strong>四.HTML 属性</strong></p> <p>属性是 HTML 元素提供的附加信息。</p> <p>属性总是以 <strong>name=”value”</strong> 的形式写在标签内，<strong>name</strong> 是属性的名称，<strong>value</strong> 是属性的值。</p> <p>属性是 HTML 元素提供的附加信息。</p> <p>属性总是以 <strong>name=”value”</strong> 的形式写在标签内，<strong>name</strong> 是属性的名称，<strong>value</strong> 是属性的值。</p> <p>属性值应该始终被包括在引号内。</p> <p>双引号是最常用的，不过使用单引号也没有问题。</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="1160"data-src="https://yojack.cn/wp-content/uploads/replace/12990d60ae8b88c92bd54e9521a51d27.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="613"data-src="https://yojack.cn/wp-content/uploads/replace/0ba13ff498a135d223f60e89149d2571.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><span><strong><span>HTML </span></strong><strong><span>标题</span></strong></span></p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="299"src="https://yojack.cn/wp-content/uploads/replace/713e376f9a81e1084803dcb4e09953b8.png"width="413"><img title=" 菜鸟教程 -HTML 总结 "alt=" 菜鸟教程 -HTML 总结 "loading="lazy"decoding="async"alt="" height="228" data-src="https://yojack.cn/wp-content/uploads/replace/42d055817933a64a17ae76b883cf6a85.png" data-lazy="true" src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg" width="1016"></p/> <table class="table table-bordered puock-text" cellspacing="0"> <tbody> <tr> <td> <p><strong><span>标签</span></strong></p> </td> <td> <p><strong><span>描述</span></strong></p> </td> </tr> <tr> <td> <p><span><html></span></p> </td> <td> <p><span>定义 HTML 文档</span></p> </td> </tr> <tr> <td> <p><span><body></span></p> </td> <td> <p><span>定义文档的主体</span></p> </td> </tr> <tr> <td> <p><span></p> <h1> – </p> <h6></span></p> </td> <td> <p><span>定义 HTML 标题</span></p> </td> </tr> <tr> <td> <p><span></p> <hr> <p></span></p> </td> <td> <p><span>定义水平</span></p> </td> </tr> <tr> <td> <p><span><!--...--></span></p> </td> <td> <p><span>定义注释</span></p> </td> </tr> </tbody> </table> <p><strong>HTML </strong><strong>段落</strong></p> <p>段落是通过 </p> <p> 标签定义的。</p> <p>如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：</p> <p>HTML 文本格式化</p> <table class="table table-bordered puock-text" cellspacing="0"> <tbody> <tr> <td> <p><strong><span>标签</span></strong></p> </td> <td> <p><strong><span>描述</span></strong></p> </td> </tr> <tr> <td> <p><span><b></span></p> </td> <td> <p><span>定义粗体文本</span></p> </td> </tr> <tr> <td> <p><span><em></span></p> </td> <td> <p><span>定义着重文字</span></p> </td> </tr> <tr> <td> <p><span><i></span></p> </td> <td> <p><span>定义斜体字</span></p> </td> </tr> <tr> <td> <p><span><small></span></p> </td> <td> <p><span>定义小号字</span></p> </td> </tr> <tr> <td> <p><span><strong></span></p> </td> <td> <p><span>定义加重语气</span></p> </td> </tr> <tr> <td> <p><span><sub></span></p> </td> <td> <p><span>定义下标字</span></p> </td> </tr> <tr> <td> <p><span><sup></span></p> </td> <td> <p><span>定义上标字</span></p> </td> </tr> <tr> <td> <p><span><ins></span></p> </td> <td> <p><span>定义插入字</span></p> </td> </tr> <tr> <td> <p><span><del></span></p> </td> <td> <p><span>定义删除字</span></p> </td> </tr> </tbody> </table> <p><strong>HTML “</strong><strong>计算机输出 ” 标签</strong></p> <table class="table table-bordered puock-text" cellspacing="0"> <tbody readability="1"> <tr> <td> <p><strong><span>标签</span></strong></p> </td> <td> <p><strong><span>描述</span></strong></p> </td> </tr> <tr> <td> <p><span><code></span></p> </td> <td> <p><span>定义计算机代码</span></p> </td> </tr> <tr> <td> <p><span><kbd></span></p> </td> <td> <p><span>定义键盘码</span></p> </td> </tr> <tr readability="3"> <td> <p><span><samp></span></p> </td> <td readability="5"> <p><span>定义计算机代码样本</span></p> </td> </tr> <tr> <td> <p><span><var></span></p> </td> <td> <p><span>定义变量</span></p> </td> </tr> <tr> <td> <p><span></p> <pre><code class='language-default'></span></p> </td><td> <p><span>定义预格式文本</span></p> </td></tr></tbody></table> <p><strong>HTML </strong><strong>引文, 引用, 及标签定义</strong></p> <table class="table table-bordered puock-text" cellspacing="0"><tbody readability="1"><tr><td> <p><strong><span>标签 </span></strong></p> </td><td> <p><strong><span> 描述 </span></strong></p> </td></tr><tr><td> <p><span><abbr></span></p> </td><td> <p><span> 定义缩写 </span></p> </td></tr><tr><td> <p><span><address></span></p> </td><td> <p><span> 定义地址 </span></p> </td></tr><tr><td> <p><span><bdo></span></p> </td><td> <p><span> 定义文字方向 </span></p> </td></tr><tr><td> <p><span><blockquote></span></p> </td><td> <p><span> 定义长的引用 </span></p> </td></tr><tr><td> <p><span><q></span></p> </td><td> <p><span> 定义短的引用语 </span></p> </td></tr><tr><td> <p><span><cite></span></p> </td><td> <p><span> 定义引用、引证 </span></p> </td></tr><tr readability="3"><td> <p><span><dfn></span></p> </td><td readability="5"> <p><span> 定义一个定义项目。</span></p> </td></tr></tbody></table> <p><strong>HTML </strong><strong>链接</strong></p> <p>HTML 使用超级链接与网络上的另一个文档相连。</p> <p>HTML 中的链接是一种用于在不同网页之间导航的元素。</p> <p>链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。</p> <p>链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。</p> <p><strong>HTML </strong><strong>链接语法</strong></p> <p>以下是 HTML 中创建链接的基本语法和属性：<a> 元素：创建链接的主要 HTML 元素是 <a>（锚）元素。<a> 元素具有以下属性：</p> <p>href：指定链接目标的 URL，这是链接的最重要属性。可以是另一个网页的 URL、文件的 URL 或其他资源的 URL。</p> <p>target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。</p> <p>title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。</p> <p>rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。</p> <p> "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="620"data-src="https://yojack.cn/wp-content/uploads/replace/a9038987451846a6537888181f60761c.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="1069"></p/> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="621"data-src="https://yojack.cn/wp-content/uploads/replace/1f4157613bbfb42bb89d06b1f9d3ea16.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="1200"></p/> <p>Border 用来设置边框</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="403"data-src="https://yojack.cn/wp-content/uploads/replace/144e201b7fdb5858c763881a8963be78.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p>设置在当前页面，跳转到指定位置</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="437"data-src="https://yojack.cn/wp-content/uploads/replace/0df8d75237904c989fc395ccf5434d83.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="1053"></p/> <p>设置跳出框架</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="490"data-src="https://yojack.cn/wp-content/uploads/replace/0bb0ac65570ca2589c477d2001b76b67.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="1200"></p/> <p>创建电子邮件链接</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="660"data-src="https://yojack.cn/wp-content/uploads/replace/444e1b75be9e3b13103545a181c25a4a.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="1200"></p/> <p>发送电子邮件 2 </p> <p>Target 属性：</p> <p>使用 target 属性，你可以定义被链接的文档在何处显示</p> <p>例如：<a href="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/inc/go.php?to=aHR0cHM6Ly93d3cucnVub29iLmNvbS8=" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a></p> <p>这行会在新窗口打开文档</p> <p>target 属性问题</p> <p>target="_blank": 在新窗口中浏览新的页面。</p> <p>target="_self": 在同一个窗口打开新的页面。</p> <p>target="_parent": 在父窗口中打开新的页面。（页面中使用框架才有用）</p> <p>target="_top" : 以整个浏览器作为窗口显示新页面。（突破了页面框架的限制）</p> <p>Id 属性：</p> <p>id 属性可用于创建一个 HTML 文档书签</p> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="531"data-src="https://yojack.cn/wp-content/uploads/replace/28e2d1c796c5fa85f3c50b75a5402c01.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p>创建电子邮件参数：</p> <table class="table table-bordered puock-text" cellspacing="0"><tbody><tr><td> <p><strong><span>参数 </span></strong></p> </td><td> <p><strong><span> 描述 </span></strong></p> </td></tr><tr><td> <p><span>mailto:<em>name@email.com</em></span></p> </td><td> <p><span> 邮件接收地址 </span></p> </td></tr><tr><td> <p><span>cc=<em>name@email.com</em></span></p> </td><td> <p><span> 抄送地址 </span></p> </td></tr><tr><td> <p><span>bcc=<em>name@email.com</em></span></p> </td><td> <p><span> 密件抄送地址 </span></p> </td></tr><tr><td> <p><span>subject=<em>subject text</em></span></p> </td><td> <p><span> 邮件主题 </span></p> </td></tr><tr><td> <p><span>body=<em>body text</em></span></p> </td><td> <p><span> 邮件内容 </span></p> </td></tr><tr><td> <p><span>?</span></p> </td><td> <p><span> 第一个参数分隔符 </span></p> </td></tr><tr><td> <p><span>&</span></p> </td><td> <p><span> 其他参数分隔符</span></p> </td></tr></tbody></table> <p>注：多个邮件地址用 <strong>;</strong> 隔开，空格用 <strong> </strong> 代替。</p> <p><strong>HTML <head></strong></p> <p><strong>HTML <head> </strong><strong>元素</strong></p> <p><head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。</p> <p>可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</p> <p><strong>HTML <title> </strong><strong>元素</strong></p> <p><title> 标签定义了不同文档的标题。</p> <p><title> 在 HTML/XHTML 文档中是必需的。</p> <p><title> 元素:</p> <ul><li>定义了浏览器工具栏的标题 </li><li> 当网页添加到收藏夹时，显示在收藏夹中的标题 </li><li> 显示在搜索引擎结果页面的标题</li></ul> <p><strong>HTML <base> </strong><strong>元素</strong></p> <p><base> 标签描述了基本的链接地址 / 链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接:</p> <p><strong>HTML <link> </strong><strong>元素</strong></p> <p><link> 标签定义了文档与外部资源之间的关系。</p> <p><link> 标签通常用于链接到样式表:</p> <p><strong>HTML <style> </strong><strong>元素</strong></p> <p><style> 标签定义了 HTML 文档的样式文件引用地址.</p> <p>在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:</p> <p><strong>HTML <meta> </strong><strong>元素</strong></p> <p>meta 标签描述了一些基本的元数据。</p> <p><meta> 标签提供了元数据. 元数据也不显示在页面上，但会被浏览器解析。</p> <p>META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</p> <p>元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。</p> <p><meta> 一般放置于 <head> 区域</p> <p><strong><meta> </strong><strong>标签 - 使用实例</strong></p> <p>为搜索引擎定义关键词: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"></p> <p>为网页定义描述内容<meta name="description" content="免费 Web & 编程 教程"></p> <p>定义网页作者:<meta name="author" content="Runoob"></p> <p>每 30 秒钟刷新当前页面: <meta http-equiv="refresh" content="30"></p> <p><strong>HTML <script> </strong><strong>元素</strong></p> <p><script>标签用于加载脚本文件，如：JavaScript。</p> <p><script> 元素在以后的章节中会详细描述。</p> <p><strong>HTML head </strong><strong>元素</strong></p> <table class="table table-bordered puock-text" cellspacing="0"><tbody readability="5"><tr><td> <p><strong><span>标签 </span></strong></p> </td><td> <p><strong><span> 描述 </span></strong></p> </td></tr><tr><td> <p><span><head></span></p> </td><td> <p><strong><span> 定义了文档的信息 </span></strong></p> </td></tr><tr><td> <p><span><title></span></p> </td><td> <p><strong><span> 定义了文档的标题 </span></strong></p> </td></tr><tr readability="3"><td> <p><span><base></span></p> </td><td readability="5"> <p><strong><span> 定义了页面链接标签的默认链接地址 </span></strong></p> </td></tr><tr readability="3"><td> <p><span><link></span></p> </td><td readability="5"> <p><strong><span> 定义了一个文档和外部资源之间的关系 </span></strong></p> </td></tr><tr readability="3"><td> <p><span><meta></span></p> </td><td readability="5"> <p><strong><span> 定义了 HTML 文档中的元数据 </span></strong></p> </td></tr><tr readability="3"><td> <p><span><script></span></p> </td><td readability="5"> <p><strong><span> 定义了客户端的脚本文件 </span></strong></p> </td></tr><tr readability="3"><td> <p><span><style></span></p> </td><td readability="5"> <p><strong><span> 定义了 HTML 文档的样式文件</span></strong></p> </td></tr></tbody></table> <p><strong>HTML </strong><strong>样式 - CSS</strong></p> <p>CSS 是在 HTML 4 开始使用的, 是为了更好的渲染 HTML 元素而引入的.</p> <p>CSS 可以通过以下方式添加到 HTML 中:</p> <p>内联样式 - 在 HTML 元素中使用 "style" 属性</p> <p>内部样式表 - 在 HTML 文档头部 <head> 区域使用<style> 元素 来包含 CSS</p> <p>外部引用 - 使用外部 CSS 文件</p> <h2 id='pk-menu-0'><span><strong><span>内联样式</span></strong></span></h2> <p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。</p> <p><p style="color:blue;margin-left:20px;">这是一个段落。</p></p> <p>显示出如何改变段落的颜色和左外边距</p> <p><strong>HTML</strong><strong>样式实例 - 背景颜色</strong></p> <p>背景色属性（background-color）定义一个元素的背景颜色：</p> <p><body style="background-color:yellow;"></p> <p><h2 style="background-color:red;">这是一个标题</h2></p> <p><p style="background-color:green;">这是一个段落。</p></p> <p></body></p> <p><strong>HTML </strong><strong>样式实例 - 字体, 字体颜色，字体大小</strong></p> <p>使用 font-family（字体），color（颜色），和 font-size（字体大小）属性来定义字体的样式:</p> <p><h1 style="font-family:verdana;">一个标题</h1></p> <p><p style="font-family:arial;color:red;font-size:20px;">一个段落。</p></p> <p><strong>HTML </strong><strong>样式实例 - 文本对齐方式</strong></p> <p>使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式</p> <p><h1 style="text-align:center;">居中对齐的标题</h1></p> <p><p>这是一个段落。</p></p> <p><strong>内部样式表</strong></p> <p>当单个文件需要特别样式时，就可以使用内部样式表。可以在 <head> 部分通过 <style> 标签定义内部样式表:</p> <p><head></p> <p><style type="text/css"></p> <p>body {background-color:yellow;}</p> <p>p {color:blue;}</p> <p></style></p> <p></head></p> <p><strong>外部样式表</strong></p> <p>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。</p> <p><head></p> <p><link rel="stylesheet" type="text/css" href="mystyle.css"></p> <p></head></p> <p><strong>HTML </strong><strong>样式标签</strong></p> <table class="table table-bordered puock-text" cellspacing="0"><tbody><tr><td> <p><strong><span>标签 </span></strong></p> </td><td> <p><strong><span> 描述 </span></strong></p> </td></tr><tr><td> <p><span><style></span></p> </td><td> <p><span> 定义文本样式 </span></p> </td></tr><tr><td> <p><span><link></span></p> </td><td> <p><span> 定义资源引用地址</span></p> </td></tr></tbody></table> <p><strong>HTML </strong><strong>图像</strong></p> <p>在 HTML 中，图像由<img> 标签定义。</p> <p><img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。</p> <p>要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。</p> <p><strong>定义图像的语法是：<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" data-src="<em>url</em>" data-lazy="true" src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg" alt="<em>some_text</em>"></strong></p/> <p>URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。</p> <p>浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。</p> <p><strong>HTML </strong><strong>图像 - Alt 属性</strong></p> <p>alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。</p> <p>例如：<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" decoding="async" data-src="boat.gif" data-lazy="true" src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg" alt="Big Boat"></p/> <p><strong>HTML </strong><strong>图像 - 设置图像的高度与宽度</strong></p> <p>height（高度）与 width（宽度）属性用于设置图像的高度与宽度。</p> <p>属性值默认单位为像素:</p> <p>例如：<img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" data-src="pulpit.jpg" data-lazy="true" src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg" alt="Pulpit rock" width="304" height="228"></p/> <p><strong>HTML </strong><strong>图像标签</strong></p> <table class="table table-bordered puock-text" cellspacing="0"><tbody readability="1"><tr><td> <p><strong><span>标签 </span></strong></p> </td><td> <p><strong><span> 描述 </span></strong></p> </td></tr><tr><td> <p><span><img></span></p> </td><td> <p><span> 定义图像 </span></p> </td></tr><tr><td> <p><span><map></span></p> </td><td> <p><span> 定义图像地图 </span></p> </td></tr><tr readability="3"><td> <p><span><area></span></p> </td><td readability="5"> <p><span> 定义图像地图中的可点击区域</span></p> </td></tr></tbody></table> <p><img title="菜鸟教程 -HTML 总结" alt="菜鸟教程 -HTML 总结" loading="lazy" decoding="async" alt=""height="518"data-src="https://yojack.cn/wp-content/uploads/replace/f94f33b35bc64641b1dd2378bc72bccb.png"data-lazy="true"src="https://yojack.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg"width="865"></p/> <p><strong>HTML </strong><strong>表格</strong></p> <p>HTML 表格由 <strong><table class="table table-bordered puock-text"></strong> 标签来定义。</p> <p>HTML 表格是一种用于展示结构化数据的标记语言元素。</p> <p>每个表格均有若干行（由 <strong><tr></strong> 标签定义），每行被分割为若干单元格（由 <strong><td></strong> 标签定义），表格可以包含标题行（<strong><th></strong>）用于定义列的标题。</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> <p>例如：</p> <p><table class="table table-bordered puock-text"></p> <p> <thead></p> <p> <tr></p> <p> <th>列标题 1 </th></p> <p> <th>列标题 2 </th></p> <p> <th>列标题 3 </th></p> <p> </tr></p> <p> </thead></p> <p> <tbody></p> <p> <tr></p> <p> <td>行 1，列 1 </td></p> <p> <td>行 1，列 2 </td></p> <p> <td>行 1，列 3 </td></p> <p> </tr></p> <p> <tr></p> <p> <td>行 2，列 1 </td></p> <p> <td>行 2，列 2 </td></p> <p> <td>行 2，列 3 </td></p> <p> </tr></p> <p> </tbody></p> <p></table></p> <p>其中<table class="table table-bordered puock-text"> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>。</p> <ul><li><strong><thead> </strong><strong>用于定义表格的标题部分:</strong> 在 <thead> 中，使用 <th> 元素定义列的标题，以上实例中列标题分别为 "列标题 1"，"列标题 2" 和 "列标题 3"。</li><li><strong><tbody> </strong><strong>用于定义表格的主体部分:</strong> 在 <tbody> 中，使用 <tr> 元素定义行，并在每行中使用 <td> 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。</li></ul> <p>通过使用 <th> 元素定义列标题，可以使其在表格中以粗体显示，与普通单元格区分开来。</p> <p>HTML 表格还可以具有其他部分，如 <tfoot>（表格页脚）和 <caption>（表格标题），<tfoot> 可用于在表格的底部定义摘要、统计信息等内容。<caption> 可用于为整个表格定义标题。</p> <p>HTML 表格还支持合并单元格和跨行 / 跨列的操作，以及其他样式和属性的应用，以满足各种需求。</p> <p><strong>HTML </strong><strong>表格和边框属性</strong></p> <p>例如：</p> <p><table class="table table-bordered puock-text" border="1"></p> <p> <tr></p> <p> <td>Row 1, cell 1</td></p> <p> <td>Row 1, cell 2</td></p> <p> </tr></p> <p></table></p> <p><strong>HTML </strong><strong>表格表头</strong></p> <p>例如：</p> <p><table class="table table-bordered puock-text" border="1"></p> <p> <tr></p> <p> <th>Header 1</th></p> <p> <th>Header 2</th></p> <p> </tr></p> <p> <tr></p> <p> <td>row 1, cell 1</td></p> <p> <td>row 1, cell 2</td></p> <p> </tr></p> <p> <tr></p> <p> <td>row 2, cell 1</td></p> <p> <td>row 2, cell 2</td></p> <p> </tr></p> <p></table></p> <p><strong>HTML </strong><strong>表格标签</strong></p> <table class="table table-bordered puock-text" cellspacing="0"><tbody readability="1"><tr><td> <p><strong><span>标签 </span></strong></p> </td><td> <p><strong><span> 描述 </span></strong></p> </td></tr><tr><td> <p><span><table class="table table-bordered puock-text"></span></p> </td><td> <p><span> 定义表格 </span></p> </td></tr><tr><td> <p><span><th></span></p> </td><td> <p><span> 定义表格的表头 </span></p> </td></tr><tr><td> <p><span><tr></span></p> </td><td> <p><span> 定义表格的行 </span></p> </td></tr><tr><td> <p><span><td></span></p> </td><td> <p><span> 定义表格单元 </span></p> </td></tr><tr><td> <p><span><caption></span></p> </td><td> <p><span> 定义表格标题 </span></p> </td></tr><tr><td> <p><span><colgroup></span></p> </td><td> <p><span> 定义表格列的组 </span></p> </td></tr><tr readability="3"><td> <p><span><col></span></p> </td><td readability="5"> <p><span> 定义用于表格列的属性 </span></p> </td></tr><tr><td> <p><span><thead></span></p> </td><td> <p><span> 定义表格的页眉 </span></p> </td></tr><tr><td> <p><span><tbody></span></p> </td><td> <p><span> 定义表格的主体 </span></p> </td></tr><tr><td> <p><span><tfoot></span></p> </td><td> <p><span> 定义表格的页脚</span></p> </td></tr></tbody></table> <p>表格三要素 <strong>table</strong><strong>、tr、td </strong>缺一不可。</p> <p><table class="table table-bordered puock-text"> 标签常用属性：</p> <p>border="1" 表格边框的宽度</p> <p>bordercolor="#fff" 表格边框的颜色</p> <p>cellspacing="5" 单元格之间的间距</p> <p>width="500" 表格的总宽度</p> <p>height="100" 表格的总高度</p> <p>align="right" 表格整体对齐方式 (参数有 left、center、right)</p> <p>bgcolor="#fff" 表格整体的背景色</p> <p><tr> 标签的常用属性:</p> <p>bgcolor="#fff" 行的颜色</p> <p>align="right" 行内文字的水平对齐方式 (参数有 left、center、right)</p> <p>valign="top" 行内文字的垂直对齐方式 (参数有 top、middle、bottom)</p> <p><td>、<th> 标签的常用属性</p> <p>width="500" 单元格的宽度，设置后对当前一列的单元格都有影响</p> <p>height="100" 单元格的高度，设置后对当前一行的单元格都有影响</p> <p>bgcolor="fff" 单元格的背景色</p> <p>align="right" 单元格文字的水平对齐方式 (参数 left、center、right)</p> <p>rowspan="3" 合并垂直水平方向的单元</p> <p>格表格结构语义标签：</p> <ul><li> 1.<table class="table table-bordered puock-text">：表格根元素。</li><li> 2.<thead>：表格头。</li><li> 3.<tbody>：表格体。</li><li> 4.<tfoot>：表格尾，一般可忽略该结构。</li><li> 5.<tr>：表格行。</li></ul> <p>表格内容标签：</p> <ul><li> 1.<th>：表头单元格。</li><li> 2.<td>：表体单元格。</li></ul> <p>跨列：colspan</p> <p>跨行：rowspan</p> <p>单元格内边距：cellpadding</p> <p>单元格外边距：cellspacing</p> <p>col 和 colgroup 用于便捷定义表格指定列的样式。</p> <p>colspan="3" 合并水平方向单元格</p> <p>valign="top" 单元格文字的垂直对齐方式 (参数 middle、bottom、top)</p> <p><strong>HTML </strong><strong>列表</strong></p> <p><strong>HTML</strong><strong>无序列表</strong></p> <p>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p> <p>无序列表使用 <ul> 标签</p> <p><ul><br><li>Coffee</li><br><li>Milk</li><br></ul></p> <p><strong>HTML </strong><strong>有序列表</strong></p> <p>同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。</p> <p>列表项使用数字来标记。</p> <p><ol><br><li>Coffee</li><br><li>Milk</li><br></ol></p> <p><strong>HTML </strong><strong>自定义列表</strong></p> <p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。</p> <p>自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。</p> <p><dl><br><dt>Coffee</dt><br><dd>- black hot drink</dd><br><dt>Milk</dt><br><dd>- white cold drink</dd><br></dl></p> <p><strong>HTML </strong><strong>列表标签</strong></p> <table class="table table-bordered puock-text" cellspacing="0"><tbody readability="1"><tr><td> <p><strong><span>标签 </span></strong></p> </td><td> <p><strong><span> 描述 </span></strong></p> </td></tr><tr><td> <p><span><ol></span></p> </td><td> <p><span> 定义有序列表 </span></p> </td></tr><tr><td> <p><span><ul></span></p> </td><td> <p><span> 定义无序列表 </span></p> </td></tr><tr><td> <p><span><li></span></p> </td><td> <p><span> 定义列表项 </span></p> </td></tr><tr><td> <p><span><dl></span></p> </td><td> <p><span> 定义列表 </span></p> </td></tr><tr><td> <p><span><dt></span></p> </td><td> <p><span> 自定义列表项目 </span></p> </td></tr><tr readability="3"><td> <p><span><dd></span></p> </td><td readability="5"> <p><span> 定义自定列表项的描述</span></p> </td></tr></tbody></table> <p>ul 是 unordered lists 的缩写 (无序列表)</p> <p>li 是 list item 的缩写（列表项目）</p> <p>ol 是 ordered lists 的缩写（有序列表）</p> <p>dl 是 definition lists 的英文缩写 (自定义列表)</p> <p>dt 是 definition term 的缩写 (自定义列表组)</p> <p>dd 是 definition description 的缩写（自定义列表描述）</p> <p>nl 是 navigation lists 的英文缩写（导航列表）</p> <p>tr 是 table row 的缩写（表格中的一行）</p> <p>th 是 table header cell 的缩写（表格中的表头）</p> <p>td 是 table data cell 的缩写（表格中的一个单元格）</p> <p><strong>HTML <div> </strong><strong>和<span></strong></p> <p>HTML 可以通过 <div> 和 <span>将元素组合起来。</p> <p><strong>HTML </strong><strong>区块元素</strong></p> <p>大多数 HTML 元素被定义为 <strong> 块级元素 </strong> 或<strong>内联元素</strong>。块级元素在浏览器显示时，通常会以新行来开始（和结束）。</p> <p><strong>HTML </strong><strong>内联元素</strong></p> <p>内联元素在显示时通常不会以新行开始。</p> <p><strong>HTML <div> </strong><strong>元素</strong></p> <p>HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。</p> <p><div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。</p> <p>如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。</p> <p><div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table class="table table-bordered puock-text"> 元素进行文档布局不是表格的正确用法。<table class="table table-bordered puock-text"> 元素的作用是显示表格化的数据</p> <p><strong>HTML <span> </strong><strong>元素</strong></p> <p>HTML <span> 元素是内联元素，可用作文本的容器</p> <p><span> 元素也没有特定的含义。</p> <p>当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。</p> <p><strong>HTML </strong><strong>分组标签</strong></p> <table class="table table-bordered puock-text" cellspacing="0"><tbody readability="2"><tr><td> <p><strong><span>标签 </span></strong></p> </td><td> <p><strong><span> 描述 </span></strong></p> </td></tr><tr readability="3"><td> <p><span><div></span></p> </td><td readability="5"> <p><span> 定义了文档的区域，块级 (block-level)</span></p> </td></tr><tr readability="3"><td> <p><span><span></span></p> </td><td readability="5"> <p><span>用来组合文档中的行内元素，内联元素(inline)</span></p> </td></tr></tbody></table> <p>当涉及到 <div> 和 <span> 的区别时，以下几点是值得进一步明确的：</p> <p><strong>块级元素 vs. 行内元素：</strong></p> <ul><li><div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。</li><li><span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。</li></ul> <p><strong>默认样式和布局：</strong></p> <ul><li><div> 元素的默认样式为块级显示，会以块的形式占据可用空间。</li><li><span> 元素的默认样式为行内显示，它不会独占一行，只占据其内容的宽度。</li></ul> <p><strong>嵌套关系：</strong></p> <ul><li><div> 可以容纳其他块级元素和行内元素，包括其他的 <div> 和 <span> 元素。</li><li><span> 通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式。</li></ul> <p>总之，<div> 用于创建页面结构和布局，而 <span> 用于对文本或行内元素进行样式化或包裹。它们在页面设计和样式设置中有不同的用途和作用。</p> <p><strong>HTML </strong><strong>布局</strong></p> <p><strong>HTML </strong><strong>布局 - 使用<div> 元素</strong></p> <p>div 元素是用于分组 HTML 元素的块级元素。</p> <p>下面的例子使用五个 div 元素来创建多列布局：</p> <p><!DOCTYPE html></p> <p><html></p> <p><head> </p> <p><meta charset="utf-8"> </p> <p><title>菜鸟教程(runoob.com) 主要的网页标题
内容在这里
运行结果如下：
HTML 布局 - 使用表格
使用 HTML
标签是创建布局的一种简单的方式。
大多数站点可以使用
或者元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
菜鸟教程(runoob.com) 主要的网页标题
菜单
HTML
CSS
JavaScript
内容在这里
版权 © 123456.com
运行结果如下：
HTML 布局 - 有用的提示
使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板
HTML 布局标签
标签
描述
定义文档区块，块级 (block-level)
定义 span，用来组合文档中的行内元素。
HTML 表单和输入
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
以下是一个简单的 HTML 表单的例子：
- 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联
以下实例创建了一个表单，包含两个输入框：
以下实例创建了一个表单，包含一个普通输入框和一个密码输入框：
HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。
我们可以使用 标签来创建表单:
HTML 表单 - 输入元素
多数情况下被用到的表单标签是输入标签 。
输入类型是由 type 属性定义。
接下来我们介绍几种常用的输入类型。
文本域（Text Fields）
文本域通过 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
运行结果如下：
密码字段
密码字段通过标签 来定义:
单选按钮（Radio Buttons）
标签定义了表单的单选框选项
运行结果如下：
复选框（Checkboxes
定义了复选框。复选框可以选取一个或多个选项：
运行结果如下：
提交按钮(Submit)
定义了提交按钮。
当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理:
运行结果如下：
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。
以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：
- post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
- get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
HTML 表单标签
标签
描述
定义供用户输入的表单
定义输入域
实体（Entities）
<等同于 <
> 等同于 >
© 等同于 ©
HTML 标签简写及全称
标签
英文全称
中文说明
a
Anchor
锚
abbr
Abbreviation
缩写词
acronym
Acronym
取首字母的缩写词
address
Address
地址
alt
alter
替用(一般是图片显示不出的提示)
b
Bold
粗体（文本）
bdo
Bi-Directional Override
文本显示方向
big
Big
变大（文本）
blockquote
Block Quotation
区块引用语
br
Break
换行
cell
cell
巢
cellpadding
cellpadding
巢补白
cellspacing
cellspacing
巢空间
center
Centered
居中（文本）
cite
Citation
引用
code
Code
源代码（文本）
dd
Definition Description
定义描述
del
Deleted
删除（的文本）
dfn
Defines a Definition Term
定义定义条目
div
Division
分隔
dl
Definition List
定义列表
dt
Definition Term
定义术语
em
Emphasized
加重（文本）
font
Font
字体
h1~h6
Header 1 to Header 6
标题 1 到标题 6
hr
Horizontal Rule
水平尺
href
hypertext reference
超文本引用
i
Italic
斜体（文本）
iframe
Inline frame
定义内联框架
ins
Inserted
插入（的文本）
kbd
Keyboard
键盘（文本）
li
List Item
列表项目
nl
navigation lists
导航列表
ol
Ordered List
排序列表
optgroup
Option group
定义选项组
p
Paragraph
段落
pre
Preformatted
预定义格式（文本）
q
Quotation
引用语
rel
Reload
加载
s/ strike
Strikethrough
删除线
samp
Sample
示例（文本
small
Small
变小（文本）
span
Span
范围
src
Source
源文件链接
strong
Strong
加重（文本）
sub
Subscripted
下标（文本）
sup
Superscripted
上标（文本）
td
table data cell
表格中的一个单元格
th
table header cell
表格中的表头
tr
table row
表格中的一行
tt
Teletype
打印机（文本）
u
Underlined
下划线（文本）
ul
Unordered List
不排序列表
var
Variable
变量（文本）
正文完转载说明：
评论（没有评论）搜一搜,打开新世界热门文章 WordPress3 和 jQuery（二）
原文：zh.annas-archive.org/md5/5EB3887BDFDDB364C2173BCD8CE... RabbitMQ 篇-深入了解 RabbitMQ 安装以及 SpringAMQP 的基础使用（声明队列和交换机、发送接收消息、配置 JSON 消息转化器）
🔥博客主页：【 小扳_-CSDN 博客】❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 Rab... CSS3新增属性(15个案例 代码 效果图 素材)
目录 1.rgba(透明度) 案例: 为图片添加蓝色的滤镜 1. 代码 2. 效果 2.opacity 属性... fastjson_1.2.24和Shiro(CVE-2016-4437)漏洞复现
文章目录 一、fastjson 1.2.24 远程命令执行漏洞复现 二、shiro 反序列化漏洞(CVE-20... 一文彻底搞定MySQL中的JSON类型，效率飞起。
写在开头 JSON 类型通常用于存储非结构化的数据或者一些可变的数据，比如存储日志、配置信息等。我们有时候需要...
