本课程深入探讨 html 标签及其在 web 应用中的有效运用。我们将讲解最常用的 html 标签和属性。
段落标签
标签是 HTML 中最常用的元素，用于创建段落。它是一个块级元素，每个段落都另起一行。
<p>这是第一个段落。</p>
<p>这是第二个段落，另起一行。</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 有三种列表：有序列表、无序列表和描述列表。
有序列表使用
- 元素定义，列表项用
- 元素定义。
PHP
<ol> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ol>无序列表使用
- 元素定义。
PHP<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>描述列表由
- 元素定义，列表项用
- 定义，描述用
- 定义。
PHP
<dl> <dt>苹果</dt> <dd>美味又营养的水果，口感清脆。</dd> <dt>香蕉</dt> <dd>香甜软糯的水果，富含营养。</dd> <dt>橙子</dt> <dd>多汁清爽的柑橘类水果，富含维生素 C。</dd> </dl>布局元素
HTML 还有一些布局元素用于组织内容，与 CSS 结合使用，创建网页布局。
: 定义文档标题部分。 : 定义文档的一个部分。 - : 定义独立的部分。
- : 定义主要内容之外的内容，例如侧边栏。
ails>: 创建可展开和折叠的选项卡。 : 为 元素创建标题。
PHP<details> <summary>lorem ipsum dolor sit amet consectetur adipisicing elit</summary> lorem ipsum dolor sit amet consectetur... </details>代码演示 ↗
是通用布局元素，创建块级区域，常用于页面布局。PHP<div style="border: 2px black solid;">这是一个 div</div>代码演示 ↗
无 CSS 样式时，布局元素（除
和）外观相同，但与 CSS 结合使用后，它们才能发挥作用。
块元素与行内元素
元素总是另起一行，占用全部水平空间（块元素）。 元素则只占用必要空间（行内元素）。
PHP<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="/">Fuga blanditiis...</a> Labore ipsum... </p>大多数已讨论元素都是块元素，例如
、
、 到 等。 是行内元素的示例，width 和 height 属性对其无效。还有许多其他 HTML 元素，本课程无法全部涵盖，更多信息请参考 W3Schools。
进一步阅读
- 如何使用 CSS 选择器
- 什么是语义化 HTML 代码？
- 如何在 CSS 中居中 div
以上就是HTML 元素简介的详细内容，更多请关注知识资源分享宝库其它相关文章！
版权声明
本站内容来源于互联网搬运，
仅限用于小范围内传播学习，请在下载后24小时内删除，
如果有侵权内容、不妥之处，请第一时间联系我们删除。敬请谅解!
E-mail：dpw1001@163.com
发表评论