HTML 元素简介

霞舞

发布： 2025-01-14 08:01:34

原创

893人浏览过

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

段落标签

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

<p>这是第一个段落。</p>
<p>这是第二个段落，另起一行。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

登录后复制

若无

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

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

登录后复制

代码演示 ↗

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

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

登录后复制

代码演示 ↗

标题标签

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

到

。

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

登录后复制

代码演示 ↗

一般情况下，

到

足够使用，过多的标题级别 (

,

) 会使网页结构过于复杂。

是主标题，每个 HTML 文档仅能有一个

元素，且应概括整个页面内容。

格式化元素

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

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

登录后复制

代码演示 ↗

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

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

登录后复制

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

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

登录后复制

元素定义高亮文本。

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

登录后复制

元素定义小号文本。

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

登录后复制

~~元素表示删除文本（加删除线），元素表示插入文本（加下划线）。~~

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

登录后复制

_{和 ^{元素分别定义下标和上标。}}

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

登录后复制

为 HTML 元素添加样式

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

可以使用 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 部分讲解。

超链接标签

超链接使用元素定义，连接到其他网页。鼠标悬停时，箭头变为手型。点击链接跳转到 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>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>
```
登录后复制
无序列表使用

以上就是HTML 元素简介的详细内容，更多请关注php中文网其它相关文章！

HTML 元素简介

到

。
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
登录后复制

到

足够使用，过多的标题级别 (

,

) 会使网页结构过于复杂。

是主标题，每个 HTML 文档仅能有一个

元素，且应概括整个页面内容。

到

等。是行内元素的示例，width 和 height 属性对其无效。
还有许多其他 HTML 元素，本课程无法全部涵盖，更多信息请参考 W3Schools。

进一步阅读

如何使用 CSS 选择器

什么是语义化 HTML 代码？

如何在 CSS 中居中 div

HTML 元素简介

到

。 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>登录后复制

到

足够使用，过多的标题级别 (

,

) 会使网页结构过于复杂。

是主标题，每个 HTML 文档仅能有一个

元素，且应概括整个页面内容。

到

等。 是行内元素的示例，width 和 height 属性对其无效。 还有许多其他 HTML 元素，本课程无法全部涵盖，更多信息请参考 W3Schools。 进一步阅读 如何使用 CSS 选择器 什么是语义化 HTML 代码？ 如何在 CSS 中居中 div

。
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
登录后复制

等。是行内元素的示例，width 和 height 属性对其无效。
还有许多其他 HTML 元素，本课程无法全部涵盖，更多信息请参考 W3Schools。

进一步阅读

如何使用 CSS 选择器

什么是语义化 HTML 代码？

如何在 CSS 中居中 div