文章目录
- h标签
- p标签
- a标签
- img 标签
- table、tr、td标签
- ul、ol、li 标签
- div 标签
h标签
<h> 标签用于定义 HTML 文档中的标题，其中 h 后面跟着一个数字，表示标题的级别。HTML 提供了 <h1> 到 <h6> 六个不同级别的标题，其中 <h1> 表示最高级别的标题，<h6> 表示最低级别的标题。
以下是 <h> 标签的简单介绍：
-
<h1>to<h6>：标题标签<h1>: 表示最高级别的标题。<h2>: 表示较次级别的标题，依此类推。<h6>: 表示最低级别的标题。
示例：
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<!-- 依此类推，直到 <h6> -->
这些标签用于组织文档结构，使得页面内容更具有层次感。浏览器通常会根据标题级别的不同，自动调整文本的大小和样式，使得用户能够更容易地识别和理解文档的结构。标题标签在 SEO（搜索引擎优化）中也很重要，因为搜索引擎会根据标题来理解文档的内容和重要性。
p标签
<p> 标签用于定义 HTML 文档中的段落（paragraph）。这是一种常用的文本标签，它用于将文本分组成段落，使文档更易读和有组织。
以下是 <p> 标签的简单介绍：
-
<p>: 段落标签示例：
<p>This is a paragraph of text. It can contain <strong>strong</strong> or <em>emphasized</em> text.</p>在这个例子中，
<p>标签包裹了一段文本，并且可以包含其他内联标签，如<strong>和<em>，用于加粗和强调文本。
使用 <p> 标签有助于提高文档的可读性，并将文本内容划分成逻辑段落，使网页结构更清晰。
a标签
<a> 标签是 HTML 中的锚点标签，用于创建超链接（hyperlinks）。超链接可以链接到其他网页、文件、位置内文档的锚点等，使用户能够通过点击链接跳转到目标资源。
以下是 <a> 标签的简单介绍：
-
<a>: 锚点标签示例：
<a href="https://www.example.com">Visit Example.com</a>在这个例子中，
<a>标签创建了一个超链接，href属性指定了链接的目标 URL，而链接文本是 “Visit Example.com”。用户点击这个链接后，将跳转到指定的网址。
<a> 标签还可以与其他属性一起使用，如：
-
target: 指定链接如何在浏览器中打开。例如，target="_blank"将在新标签页中打开链接。<a href="https://www.example.com" target="_blank">Visit Example.com in a new tab</a> -
download: 提供一个下载链接，使用户能够下载链接的目标资源。<a href="documents/example.pdf" download>Download Example PDF</a>
超链接是网页中连接不同页面和资源的主要手段，通过 <a> 标签，用户可以轻松导航到其他网页或下载文件。
img 标签
<img> 标签是 HTML 中用于嵌入图像的标签。它允许在网页中显示图片，并通过指定图像的源（src 属性）来引用图像文件。
以下是 <img> 标签的简单介绍：
-
<img>: 图像标签示例：
<img src="example.jpg" alt="Example Image">在这个例子中，
<img>标签通过src属性指定图像文件的路径（相对路径或绝对路径），而alt属性用于提供图像的替代文本，以增强可访问性和在图像加载失败时显示。
<img> 标签还可以包含其他属性，例如：
-
width和height: 用于指定图像的宽度和高度。<img src="example.jpg" alt="Example Image" width="300" height="200"> -
border: 用于指定图像的边框宽度。<img src="example.jpg" alt="Example Image" border="1"> -
style: 允许通过 CSS 样式规则为图像应用样式。<img src="example.jpg" alt="Example Image" style="border: 1px solid #ccc; max-width: 100%;">
通过 <img> 标签，可以轻松地在网页中插入图像，丰富页面内容。
table、tr、td标签
<table>, <tr>, 和 <td> 是用于创建表格的 HTML 标签。它们共同构成了表格的结构，允许在网页中以行和列的形式组织和展示数据。
-
<table>: 表格标签<table>标签用于定义 HTML 表格的开始和结束。- 可以包含
<tr>,<th>,<td>,<caption>,<thead>,<tbody>,<tfoot>等子元素，用于定义表格的各个部分。
示例：
<table> <!-- 表格的内容 --> </table> -
<tr>: 表格行标签<tr>标签用于定义表格中的行。- 包含在
<table>元素内，可以包含<th>或<td>元素作为子元素，用于定义行中的表头或数据。
示例：
<table> <tr> <!-- 行的内容，包含表头或数据 --> </tr> </table> -
<td>: 表格数据单元格标签<td>标签用于定义表格中的数据单元格。- 包含在
<tr>元素内，表示表格中的一个数据项。
示例：
<table> <tr> <td>Data 1</td> <td>Data 2</td> <!-- 更多数据单元格 --> </tr> </table>
这些标签的组合允许创建复杂的表格结构，用于展示和组织数据。表格还可以包括表头、表格标题、合并单元格等功能，以适应不同的数据展示需求。
ul、ol、li 标签
<ul>, <ol>, 和 <li> 是用于创建列表的 HTML 标签。它们允许在网页中有序或无序地组织信息。
-
<ul>: 无序列表标签<ul>标签用于定义无序列表。- 包含在
<ul>元素内的内容通常是使用<li>标签定义的列表项。
示例：
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>这将创建一个包含三个无序列表项的无序列表。
-
<ol>: 有序列表标签<ol>标签用于定义有序列表。- 包含在
<ol>元素内的内容也是使用<li>标签定义的列表项，但列表项会按照数字或字母的顺序排列。
示例：
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>这将创建一个包含三个有序列表项的有序列表。
-
<li>: 列表项标签<li>标签用于定义列表中的每个项目（列表项）。- 可以包含在
<ul>或<ol>元素内，表示无序或有序列表中的一个项目。
示例：
<ul> <li>Item 1</li> <li>Item 2</li> </ul> <ol> <li>First item</li> <li>Second item</li> </ol>在这个例子中，
<li>被用于定义两个无序列表项和两个有序列表项。
这些标签允许开发者以有序或无序的方式组织信息，以便更好地呈现内容。
div 标签
<div> 标签是 HTML 中的块级容器标签，用于将文档分割为独立的部分或区块，从而对这些部分进行样式或布局上的控制。<div> 本身不会添加任何视觉效果，但它提供了一种将内容分组并应用样式的方法。
以下是 <div> 标签的简单介绍：
-
<div>: 分割文档的块级容器标签示例：
<div> <p>This is some text inside a div.</p> <p>Another paragraph in the same div.</p> </div>在这个例子中，
<div>包裹了两个<p>（段落）元素。通过使用<div>，可以将这两个段落视为一个单独的组，并且可以轻松地为这个组应用样式、布局或其他属性。<div>经常与 CSS 一起使用，通过为<div>元素添加类或ID，并应用相应的样式规则，以实现对网页布局和外观的更精细的控制。它在构建复杂的网页结构时经常用于包装和组织内容。
