整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
例
使用 <figure> 元素标记文档中的一个图像：
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
浏览器支持
IE 9、Firefox、Opera、Chrome 和 Safari 支持 <figure> 标签。
注释：IE 8 或更早版本的 IE 浏览器不支持 <figure> 标签。
标签定义及使用说明
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
HTML 4.01 与 HTML5之间的差异
<figure> 标签是 HTML 5 中的新标签。
提示和注释
提示：<figcaption> 元素被用来为 <figure> 元素定义标题。
全局属性
<figure> 标签支持 HTML 的全局属性。
事件属性
<figure> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
TML（HyperText Markup Language）是一种用于创建网页的标准标记语言。在HTML中，"元素"和"标签"是构建网页的基本组成部分，它们一起定义了网页的结构和内容。HTML标签是用来定义HTML元素的开始和结束的，而HTML元素是由标签及其包含的内容组成的。
参考文档：https://www.cjavapy.com/article/3303/
HTML元素指的是从开始标签到结束标签的所有内容。它们是HTML文档的构建块，用于创建和组织网页内容。HTML元素可以包含文本、图片、链接、表格等多种类型的数据。元素可能包括一个开始标签和一个结束标签，也可能只有一个标签（在自闭合元素的情况下）。
1） <!DOCTYPE> 声明
用于定义文档类型，告诉浏览器此文档使用哪个HTML版本。
<!DOCTYPE html>2） <html>
根元素，包含整个HTML文档。
<html lang="en">
</html>3） <head>
包含文档的元数据，如标题、字符集声明和链接到样式表。
<head>
<title>页面标题</title>
<meta charset="UTF-8">
</head>4）<title>
定义文档的标题，显示在浏览器的标题栏或页面的标签页上。
<title>这是文档的标题</title>5）<body>
包含文档的所有可见内容，如文本、图片、链接和其他多媒体元素。
<body>
<h1>这是一个主标题</h1>
<p>这是一个段落。</p>
</body>6） <header>
定义一个区域或页面的头部，通常包含标题和导航链接。
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>7） <footer>
定义页面或区域的页脚部分，通常包含版权信息、联系信息等。
<footer>
<p>版权所有 ? 2024</p>
</footer>8） <nav>
定义导航链接的部分，用于页面内或页面间的导航。
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
</ul>
</nav>9）<section>
定义文档中的一个独立部分，通常与标题一起使用。
<section>
<h2>章节标题</h2>
<p>这是该章节的一些内容。</p>
</section>10. <article>
定义可以独立于内容其余部分的完整自包含内容，例如博客帖子或新闻文章。
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>11. <aside>
定义与周围内容稍微分离的内容，如侧边栏或广告栏。
<aside>
<p>这是一些附加信息。</p>
</aside>12. <figure> 和 <figcaption>
<figure> 定义独立的流内容（如图表、图像、代码示例等），<figcaption> 提供该内容的标题。
<figure>
<img src="image.jpg" alt="描述性文本">
<figcaption>图像标题</figcaption>
</figure>HTML标签是HTML元素的一部分，用于从逻辑上开始或结束一个元素。标签通常成对出现，包括一个开始标签和一个对应的结束标签，结束标签的名称前会有一个斜线（/）作为区分。有些HTML标签是自闭合的，意味着它们不需要结束标签，如图像标签（<img />）和换行标签（<br />）。
标签 | 说明 |
<!DOCTYPE> | 声明文档类型和HTML版本。 |
<html> | 标识一个HTML文档的根元素。 |
<head> | 包含了文档的元数据。 |
<title> | 指定文档的标题。 |
<body> | 包含了可见的页面内容。 |
<h1> - <h6> | 定义标题，从 <h1> 到 <h6> 重要性递减。 |
<p> | 定义段落。 |
<br> | 插入一个换行符。 |
<hr> | 在页面上绘制一条水平线。 |
<b> | 定义粗体文本。 |
<i> | 定义斜体文本。 |
<u> | 定义下划线文本。 |
<strong> | 定义重要文本。 |
<em> | 定义强调文本。 |
<mark> | 定义被标记或高亮的文本。 |
<small> | 定义小号文本。 |
<sub> | 定义下标文本。 |
<sup> | 定义上标文本。 |
<a> | 定义超链接。 |
<img> | 在页面中嵌入图像。 |
<ul> | 定义无序列表。 |
<ol> | 定义有序列表。 |
<li> | 定义列表项。 |
<table> | 定义表格。 |
<th> | 定义表格的表头单元格。 |
<tr> | 定义表格的行。 |
<td> | 定义表格单元。 |
<form> | 定义HTML表单。 |
<input> | 定义输入控件。 |
<textarea> | 定义多行文本输入控件。 |
<button> | 定义按钮。 |
<select> | 定义下拉列表。 |
<option> | 定义下拉列表中的选项。 |
<article> | 定义文章。 |
<section> | 定义文档中的一个区域（或节）。 |
<header> | 定义介绍性内容或导航链接的容器。 |
<footer> | 定义注脚或文档的页脚。 |
<nav> | 定义导航链接的部分。 |
<aside> | 定义侧边栏内容。 |
使用示例：
<!DOCTYPE html>
使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML标签使用示例</title>
</head>
<body>
<header>
<h1>欢迎来到我的网页</h1>
<nav>
<a href="#content">主要内容</a> |
<a href="#contact-form">联系表单</a>
</nav>
</header>
<section id="content">
<article>
<h2>HTML基础</h2>
<p>HTML是构建网页的基石。<strong>标签</strong>是它的核心组成部分。<mark>本文</mark>介绍了一些最常用的HTML标签。</p>
</article>
<aside>
<h3>注意</h3>
<p>记得检查HTML5的新特性和标签。</p>
</aside>
<ul>
<li>文本标签</li>
<li>列表</li>
<li>表格</li>
<li>表单</li>
</ul>
<ol>
<li>先介绍基础</li>
<li>然后是进阶</li>
</ol>
<table>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td><p></td>
<td>段落标签</td>
</tr>
<tr>
<td><a></td>
<td>链接标签</td>
</tr>
</table>
</section>
<section id="images">
<h2>图片</h2>
<img src="example.jpg" alt="示例图片">
</section>
<footer>
<section id="contact-form">
<h2>联系我们</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
<p>? 2024 HTML标签示例</p>
</footer>
</body>
</html>参考文档：Hhttps://www.cjavapy.com/article/3303/
TML <base> 元素
指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个 <base> 元素。
包含属性href 和
target 可以指定a 标签的默认窗口打开行为
<base href="https://www.baidu.com/img/123" target="_banlk"></base> 默认就打开新的窗口 <a href="aaa">123</a>
使用
<base href="https://www.baidu.com/img/"></base> <img src="bd_logo1.png?where=super"></img>
虽然在codepen 的代码上编写的但是能够正确的通过base url + img 的src 定位显示出图片
content 标签
HTML <aside> 元素
表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。
HTML <blockquote> 元素
（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注 中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。
HTML <figure> 元素
代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
Inline text semantics
HTML 缩写元素（<abbr>）
用于展示缩写，并且可以通过可选的 title 属性提供完整的描述。
ps: 完整描述样式貌似不能自定义
HTML键盘输入元素(<kbd>)
用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。
HTML标记文本元素(< Mark >)
表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
ps:项目中大量使用span 标记的做法不符合html5 的语义化
HTML Ruby Base（<rb>）
元素用于分隔<ruby>注释的基本文本组件（即正在注释的文本）。一个<rb>元素应该包装基本文本的每个单独的原子段。
ps: 拼音注解
<samp> 元素
用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体（例如 Lucida Console）。
HTML 中的<small>
元素將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。
HTML <sub> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更低并且更小。
ps: 下脚标
HTML <sup> 元素定义了一个文本区域，出于排版的原因，与主要的文本相比，应该展示得更高并且更小。
ps: 上脚标
HTML <u> 元素
使文本在其内容的基线下的一行呈现下划线。在HTML5中, 此元素表示具有未标注的文本跨度，显示渲染，非文本注释，例如将文本标记为中文文本中的专有名称(一个正确的中文标记), 或 将文本标记为拼写错误
HTML <map>
与 <area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).
HTML <track> 元素
被当作媒体元素—<audio> 和 <video>的子元素来使用。它允许指定计时字幕（或者基于时间的数据），例如自动处理字幕。
HTML <object> 元素
（或者称作 HTML 嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源
ps: 支持引入的资源类型
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
关于支持资源类型的测试
http://joliclic.free.fr/html/object-tag/en/index.php
*请认真填写需求信息，我们会在24小时内与您取得联系。
