HTML 标签大观园：常见标签逐个看

<div>标签是HTML中的一个容器标签，用于创建一个块级元素，可以用来组织和布局页面内容。它没有特定的功能，主要用于分组和样式化元素。

<div>标签有以下常用属性：

• class：用于指定一个或多个类名，可以用来为元素定义样式。
• id：用于指定一个唯一的标识符，可以通过id来操作和引用该元素。
• style：用于直接为元素设置样式。

<div>标签的使用场景：

• 用于组织和布局页面的各个部分，例如头部、主体、侧边栏、页脚等。
• 用于创建容器，可以将其他HTML元素放在<div>中，并对其应用样式。

以下是一个简单的<div>标签的示例代码：

<div>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

<p>标签是HTML中的一个块级元素，用于创建段落。它会自动添加段落的空白和换行。

<p>标签没有特定的属性。

<p>标签的使用场景：

• 用于创建段落文本，用于展示大段的文字内容。

以下是一个简单的<p>标签的示例代码：

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

<a>标签是HTML中的一个行内元素，用于创建超链接。它可以将文本或其他元素转变为可点击的链接。

<a>标签有以下常用属性：

• href：用于指定链接的目标URL。
• target：用于指定链接在何处打开，例如在当前窗口中打开还是在新窗口中打开。

<a>标签的使用场景：

• 用于创建文本链接，将用户导航到其他页面或文件。
• 用于创建锚点链接，将用户导航到页面的特定位置。
• 用于创建邮箱链接，将用户导航到发送电子邮件的默认邮件客户端。

以下是一个简单的<a>标签的示例代码：

<a href="https://www.example.com">点击这里</a>访问网站。
<a href="page2.html">点击这里</a>查看第二个页面。
<a href="#section1">点击这里</a>跳转到页面上的特定位置。
<a href="mailto:example@example.com">发送电子邮件</a>给我们。

<img>标签是HTML中的一个行内元素，用于插入图像。

<img>标签有以下常用属性：

• src：用于指定图像的URL。
• alt：用于指定当图像无法显示时的替代文本。

<img>标签的使用场景：

• 用于插入图像，可以用于显示图片、图标、标志等。

以下是一个简单的<img>标签的示例代码：

<img src="image.jpg" alt="这是一个图片">

以上是<div>、<p>、<a>、<img>等基础标签的功能、属性及使用场景的简要介绍和示例代码。希望这能帮助新手理解如何构建网页的基本框架。

原文地址：https://blog.csdn.net/jht_520/article/details/144010579

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！