本课程深入探讨 html 标签及其在 web 应用中的有效运用。我们将讲解最常用的 html 标签和属性。
段落标签
<p> 标签是 HTML 中最常用的元素，用于创建段落。它是一个块级元素，每个段落都另起一行。
<code class="html"><p>这是第一个段落。</p> <p>这是第二个段落，另起一行。</p></code>
若无 <p> 元素，浏览器会忽略多余空格，将文本显示在一行。
<code>这是第一个段落。这是第二个段落，另起一行。</code>
代码演示 ↗
立即学习“前端免费学习笔记（深入）”；
段落内换行需使用 <br> 元素 (无需闭合标签)。
<code class="html"><p> 这是第一个段落。<br> 这是第二个段落，另起一行。 </p></code>
代码演示 ↗
立即学习“前端免费学习笔记（深入）”；
标题标签
文章标题能提升可读性，HTML 文档亦然。HTML 提供六级标题，从 <h1> 到 <h6>。
<code class="html"><h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6></code>
代码演示 ↗
立即学习“前端免费学习笔记（深入）”；
一般情况下，<h1> 到 <h3> 足够使用，过多的标题级别 (<h5>, <h6>) 会使网页结构过于复杂。
<h1> 是主标题，每个 HTML 文档仅能有一个 <h1> 元素，且应概括整个页面内容。
格式化元素
HTML 提供格式化元素来强调文本，例如加粗、斜体或下划线。
<code class="html"><b></b> <strong></strong> <i></i> <em></em> <mark></mark> <small></small> <del></del> <ins></ins> <sub></sub> <sup></sup></code>
代码演示 ↗
立即学习“前端免费学习笔记（深入）”；
<b> 和 <strong> 效果相同，都使文本加粗，但 <strong> 表示文本的重要性。
<code class="html"><p> lorem ipsum <b>dolor sit</b> amet consectetur <strong>adipisicing elit</strong>. </p></code>
<i> 和 <em> 类似，都使文本斜体，但 <em> 表示强调。
<code class="html"><p>lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p></code>
<mark> 元素定义高亮文本。
<code class="html"><p>lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p></code>
<small> 元素定义小号文本。
<code class="html"><p>lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p></code>
<del> 元素表示删除文本（加删除线），<ins> 元素表示插入文本（加下划线）。
<code class="html"><p> lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit. </p></code>
<sub> 和 <sup> 元素分别定义下标和上标。
<code class="html"><p> lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit. </p></code>
为 HTML 元素添加样式
格式化元素的默认样式可能不足以表达其含义，例如 <ins> 使用下划线表示插入，容易造成混淆。
可以使用 style 属性来改善元素外观：
<code class="html"><p> lorem ipsum <del style="color: red;">dolor sit</del> amet <ins style="color: green;">consectetur adipisicing</ins> elit. </p></code>
这适用于几乎所有 HTML 元素。样式以键值对形式定义：
<code class="html"><p style="key: value;">...</p></code>
分号 ; 分隔样式声明。
<code class="html"><p style="color: red; text-decoration: underline;"> lorem ipsum dolor sit amet consectetur adipisicing elit. </p></code>
代码演示 ↗
立即学习“前端免费学习笔记（深入）”；
更多样式将在 CSS 部分讲解。
超链接标签
超链接使用 <a> 元素定义，连接到其他网页。鼠标悬停时，箭头变为手型。点击链接跳转到 href 属性指定的文档。
<code class="html"><a href="path/to/destination">链接文本</a></code>
链接默认带下划线并显示为蓝色，点击后变为红色，再次访问则变为紫色。
在工作目录中创建 destination.html 文件：
<code class="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></code>
在 index.html 中添加指向 destination.html 的链接：
<code class="html"><p> lorem ipsum <a href="/destination.html">dolor sit</a> amet consectetur adipisicing elit. </p></code>
点击链接后跳转到 destination.html。
在 destination.html 中添加返回链接：
<code class="html"><p>这是目标页面。 <a href="/index.html">返回</a></p></code>
target="_blank" 属性可在新标签页打开链接：
<code class="html"><a href="/destination.html" target="_blank">链接</a></code>
代码演示 ↗
立即学习“前端免费学习笔记（深入）”；
链接颜色变化与 CSS 伪类有关，将在 CSS 部分详细讲解。
列表
代码演示 ↗
立即学习“前端免费学习笔记（深入）”；
HTML 有三种列表：有序列表、无序列表和描述列表。
有序列表使用 <ol> 元素定义，列表项用 <li> 元素定义。
<code class="html"><ol> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ol></code>
无序列表使用 <ul> 元素定义。
<code class="html"><ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul></code>
描述列表由 <dl> 元素定义，列表项用 <dt> 定义，描述用 <dd> 定义。
<code class="html"><dl> <dt>苹果</dt> <dd>美味又营养的水果，口感清脆。</dd> <dt>香蕉</dt> <dd>香甜软糯的水果，富含营养。</dd> <dt>橙子</dt> <dd>多汁清爽的柑橘类水果，富含维生素 C。</dd> </dl></code>
布局元素
HTML 还有一些布局元素用于组织内容，与 CSS 结合使用，创建网页布局。
-
<header>: 定义文档标题部分。 -
<nav>: 定义导航栏。 -
<section>: 定义文档的一个部分。 -
<article>: 定义独立的部分。 -
<aside>: 定义主要内容之外的内容，例如侧边栏。 -
<footer>: 定义页脚部分。 -
<details>: 创建可展开和折叠的选项卡。 -
<summary>: 为<details>元素创建标题。
<code class="html"><details> <summary>lorem ipsum dolor sit amet consectetur adipisicing elit</summary> lorem ipsum dolor sit amet consectetur... </details></code>
代码演示 ↗
立即学习“前端免费学习笔记（深入）”；
<div> 是通用布局元素，创建块级区域，常用于页面布局。
<code class="html"><div style="border: 2px black solid;">这是一个 div</div></code>
代码演示 ↗
立即学习“前端免费学习笔记（深入）”；
无 CSS 样式时，布局元素（除 <details> 和 <summary>）外观相同，但与 CSS 结合使用后，它们才能发挥作用。
块元素与行内元素
<p> 元素总是另起一行，占用全部水平空间（块元素）。<a> 元素则只占用必要空间（行内元素）。
<code class="html"><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. <a href="/">Fuga blanditiis...</a> Labore ipsum... </p></code>
大多数已讨论元素都是块元素，例如 <p>、<div>、<h1> 到 <h6> 等。<a> 是行内元素的示例，width 和 height 属性对其无效。
还有许多其他 HTML 元素，本课程无法全部涵盖，更多信息请参考 W3Schools。
进一步阅读
- 如何使用 CSS 选择器
- 什么是语义化 HTML 代码？
- 如何在 CSS 中居中 div
