本课程深入探讨 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>
登录后复制
点击链接后跳转到 destination.html。
在 destination.html 中添加返回链接：
<p>这是目标页面。 <a href="/index.html">返回</a></p>
登录后复制
target="_blank" 属性可在新标签页打开链接：
<a href="/destination.html" target="_blank">链接</a>
登录后复制
代码演示 ↗
链接颜色变化与 CSS 伪类有关，将在 CSS 部分详细讲解。
列表
代码演示 ↗
HTML 有三种列表：有序列表、无序列表和描述列表。
有序列表使用
- 元素定义，列表项用
- 元素定义。
<ol> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ol>
登录后复制
无序列表使用
- 元素定义。
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
登录后复制
描述列表由
- 元素定义，列表项用
- 定义，描述用
- 定义。
<dl> <dt>苹果</dt> <dd>美味又营养的水果，口感清脆。</dd> <dt>香蕉</dt> <dd>香甜软糯的水果，富含营养。</dd> <dt>橙子</dt> <dd>多汁清爽的柑橘类水果，富含维生素 C。</dd> </dl>
登录后复制
布局元素
HTML 还有一些布局元素用于组织内容，与 CSS 结合使用，创建网页布局。
: 定义文档标题部分。 : 定义文档的一个部分。 - : 定义独立的部分。
- : 定义主要内容之外的内容，例如侧边栏。
ails>: 创建可展开和折叠的选项卡。 : 为 元素创建标题。
<details> <summary>lorem ipsum dolor sit amet consectetur adipisicing elit</summary> lorem ipsum dolor sit amet consectetur... </details>
登录后复制
代码演示 ↗
是通用布局元素，创建块级区域，常用于页面布局。
<p style="border: 2px black solid;">这是一个 p</p>
登录后复制
代码演示 ↗
无 CSS 样式时，布局元素（除
和）外观相同，但与 CSS 结合使用后，它们才能发挥作用。
块元素与行内元素
元素总是另起一行，占用全部水平空间（块元素）。 元素则只占用必要空间（行内元素）。
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="/">Fuga blanditiis...</a> Labore ipsum... </p>
登录后复制
大多数已讨论元素都是块元素，例如
、
、
到
等。 是行内元素的示例，width 和 height 属性对其无效。
还有许多其他 HTML 元素，本课程无法全部涵盖，更多信息请参考 W3Schools。
进一步阅读
- 如何使用 CSS 选择器
- 什么是语义化 HTML 代码？
- 如何在 CSS 中居中 p
以上就是HTML 元素简介的详细内容，更多请关注其它相关文章！
