首页 > 文章 > 前端

HTML 元素简介

时间：2025-01-20 14:01:17 334浏览收藏

golang学习网今天将给大家带来《HTML 元素简介》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

本课程深入探讨 HTML 标签及其在 Web 应用中的有效运用。我们将讲解最常用的 HTML 标签和属性。

段落标签

<p> 标签是 HTML 中最常用的元素，用于创建段落。它是一个块级元素，每个段落都另起一行。

<p>这是第一个段落。</p>
<p>这是第二个段落，另起一行。</p>

若无 <p> 元素，浏览器会忽略多余空格，将文本显示在一行。

这是第一个段落。这是第二个段落，另起一行。

代码演示 ↗

段落内换行需使用 <br> 元素 (无需闭合标签)。

<p>
  这是第一个段落。<br>
  这是第二个段落，另起一行。
</p>

代码演示 ↗

标题标签

文章标题能提升可读性，HTML 文档亦然。HTML 提供六级标题，从 <h1> 到 <h6>。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

代码演示 ↗

一般情况下，<h1> 到 <h3> 足够使用，过多的标题级别 (<h5>, <h6>) 会使网页结构过于复杂。

<h1> 是主标题，每个 HTML 文档仅能有一个 <h1> 元素，且应概括整个页面内容。

格式化元素

HTML 提供格式化元素来强调文本，例如加粗、斜体或下划线。

<b></b>
<strong></strong>
<i></i>
<em></em>
<mark></mark>
<small></small>
<del></del>
<ins></ins>
<sub></sub>
<sup></sup>

代码演示 ↗

<b> 和 <strong> 效果相同，都使文本加粗，但 <strong> 表示文本的重要性。

<p>
  lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

<i> 和 <em> 类似，都使文本斜体，但 <em> 表示强调。

<p>lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

<mark> 元素定义高亮文本。

<p>lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

<small> 元素定义小号文本。

<p>lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

<del> 元素表示删除文本（加删除线），<ins> 元素表示插入文本（加下划线）。

<p>
  lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

<sub> 和 <sup> 元素分别定义下标和上标。

<p>
  lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

为 HTML 元素添加样式

格式化元素的默认样式可能不足以表达其含义，例如 <ins> 使用下划线表示插入，容易造成混淆。

可以使用 style 属性来改善元素外观：

<p>
  lorem ipsum <del style="color: red;">dolor sit</del> amet
  <ins style="color: green;">consectetur adipisicing</ins> elit.
</p>

这适用于几乎所有 HTML 元素。样式以键值对形式定义：

<p style="key: value;">...</p>

分号 ; 分隔样式声明。

<p style="color: red; text-decoration: underline;">
  lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>

代码演示 ↗

更多样式将在 CSS 部分讲解。

超链接标签

超链接使用 <a> 元素定义，连接到其他网页。鼠标悬停时，箭头变为手型。点击链接跳转到 href 属性指定的文档。

<a href="path/to/destination">链接文本</a>

链接默认带下划线并显示为蓝色，点击后变为红色，再次访问则变为紫色。

在工作目录中创建 destination.html 文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>destination</title>
</head>
<body>
  <p>这是目标页面。</p>
</body>
</html>

在 index.html 中添加指向 destination.html 的链接：

<p>
  lorem ipsum <a href="/destination.html">dolor sit</a> amet consectetur
  adipisicing elit.
</p>

HTML 元素简介

点击链接后跳转到 destination.html。

HTML 元素简介

在 destination.html 中添加返回链接：

<p>这是目标页面。 <a href="/index.html">返回</a></p>

HTML 元素简介

target="_blank" 属性可在新标签页打开链接：

<a href="/destination.html" target="_blank">链接</a>

代码演示 ↗

链接颜色变化与 CSS 伪类有关，将在 CSS 部分详细讲解。

列表

代码演示 ↗

HTML 有三种列表：有序列表、无序列表和描述列表。

有序列表使用 <ol> 元素定义，列表项用 <li> 元素定义。

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

无序列表使用 <ul> 元素定义。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

描述列表由 <dl> 元素定义，列表项用 <dt> 定义，描述用 <dd> 定义。

<dl>
  <dt>苹果</dt>
  <dd>美味又营养的水果，口感清脆。</dd>
  <dt>香蕉</dt>
  <dd>香甜软糯的水果，富含营养。</dd>
  <dt>橙子</dt>
  <dd>多汁清爽的柑橘类水果，富含维生素 C。</dd>
</dl>

布局元素

HTML 还有一些布局元素用于组织内容，与 CSS 结合使用，创建网页布局。

<header>: 定义文档标题部分。
<nav>: 定义导航栏。
<section>: 定义文档的一个部分。
<article>: 定义独立的部分。
<aside>: 定义主要内容之外的内容，例如侧边栏。
<footer>: 定义页脚部分。
<details>: 创建可展开和折叠的选项卡。
<summary>: 为 <details> 元素创建标题。

<details>
  <summary>lorem ipsum dolor sit amet consectetur adipisicing elit</summary>
  lorem ipsum dolor sit amet consectetur...
</details>

代码演示 ↗

<div> 是通用布局元素，创建块级区域，常用于页面布局。

<div style="border: 2px black solid;">这是一个 div</div>

代码演示 ↗

无 CSS 样式时，布局元素（除 <details> 和 <summary>）外观相同，但与 CSS 结合使用后，它们才能发挥作用。

块元素与行内元素

<p> 元素总是另起一行，占用全部水平空间（块元素）。<a> 元素则只占用必要空间（行内元素）。

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
  <a href="/">Fuga blanditiis...</a>
  Labore ipsum...
</p>

HTML 元素简介

大多数已讨论元素都是块元素，例如 <p>、<div>、<h1> 到 <h6> 等。<a> 是行内元素的示例，width 和 height 属性对其无效。

还有许多其他 HTML 元素，本课程无法全部涵盖，更多信息请参考 W3Schools。

进一步阅读

如何使用 CSS 选择器
什么是语义化 HTML 代码？
如何在 CSS 中居中 div

以上就是《HTML 元素简介》的详细内容，更多关于的资料请关注golang学习网公众号！