本课程深入探讨 html 标签及其在 web 应用中的有效运用。我们将讲解最常用的 html 标签和属性。
段落标签
标签是 HTML 中最常用的元素,用于创建段落。它是一个块级元素,每个段落都另起一行。
这是第一个段落。
这是第二个段落,另起一行。
立即学习“前端免费学习笔记(深入)”;
若无 元素,浏览器会忽略多余空格,将文本显示在一行。
这是第一个段落。这是第二个段落,另起一行。
代码演示 ↗
段落内换行需使用 元素 (无需闭合标签)。
这是第一个段落。
这是第二个段落,另起一行。
代码演示 ↗
标题标签
文章标题能提升可读性,HTML 文档亦然。HTML 提供六级标题,从 到 。
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
代码演示 ↗
一般情况下, 到 足够使用,过多的标题级别 (, ) 会使网页结构过于复杂。
是主标题,每个 HTML 文档仅能有一个 元素,且应概括整个页面内容。
格式化元素
HTML 提供格式化元素来强调文本,例如加粗、斜体或下划线。
代码演示 ↗
和 效果相同,都使文本加粗,但 表示文本的重要性。
lorem ipsum dolor sit amet consectetur adipisicing elit.
和 类似,都使文本斜体,但 表示强调。
lorem ipsum dolor sit amet consectetur adipisicing elit.
元素定义高亮文本。
lorem ipsum dolor sit amet consectetur adipisicing elit.
元素定义小号文本。
lorem ipsum dolor sit amet consectetur adipisicing elit.
元素表示删除文本(加删除线), 元素表示插入文本(加下划线)。
lorem ipsum
dolor sitamet consectetur adipisicing elit.
和 元素分别定义下标和上标。
lorem ipsum dolor sit amet consectetur adipisicing elit.
为 HTML 元素添加样式
格式化元素的默认样式可能不足以表达其含义,例如 使用下划线表示插入,容易造成混淆。
可以使用 style 属性来改善元素外观:
lorem ipsum
dolor sitamet consectetur adipisicing elit.
这适用于几乎所有 HTML 元素。样式以键值对形式定义:
...
分号 ; 分隔样式声明。
lorem ipsum dolor sit amet consectetur adipisicing elit.
代码演示 ↗
更多样式将在 CSS 部分讲解。
超链接标签
超链接使用 元素定义,连接到其他网页。鼠标悬停时,箭头变为手型。点击链接跳转到 href 属性指定的文档。
链接文本
链接默认带下划线并显示为蓝色,点击后变为红色,再次访问则变为紫色。
在工作目录中创建 destination.html 文件:
destination 这是目标页面。
在 index.html 中添加指向 destination.html 的链接:
lorem ipsum dolor sit amet consectetur adipisicing elit.

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

在 destination.html 中添加返回链接:
这是目标页面。 返回

target="_blank" 属性可在新标签页打开链接:
链接
代码演示 ↗
链接颜色变化与 CSS 伪类有关,将在 CSS 部分详细讲解。
列表
代码演示 ↗
HTML 有三种列表:有序列表、无序列表和描述列表。
有序列表使用 元素定义,列表项用 元素定义。
- 苹果
- 香蕉
- 橙子
无序列表使用 元素定义。
- 苹果
- 香蕉
- 橙子
描述列表由 元素定义,列表项用 定义,描述用 定义。
- 苹果
- 美味又营养的水果,口感清脆。
- 香蕉
- 香甜软糯的水果,富含营养。
- 橙子
- 多汁清爽的柑橘类水果,富含维生素 C。
布局元素
HTML 还有一些布局元素用于组织内容,与 CSS 结合使用,创建网页布局。
-
: 定义文档标题部分。 -
: 定义导航栏。 -
: 定义文档的一个部分。 -
: 定义独立的部分。 -
: 定义主要内容之外的内容,例如侧边栏。 -
: 定义页脚部分。 -
: 创建可展开和折叠的选项卡。 -
: 为元素创建标题。
lorem ipsum dolor sit amet consectetur adipisicing elit
lorem ipsum dolor sit amet consectetur...
代码演示 ↗
代码演示 ↗ 无 CSS 样式时,布局元素(除 块元素与行内元素
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Fuga blanditiis...
Labore ipsum...
大多数已讨论元素都是块元素,例如 和 )外观相同,但与 CSS 结合使用后,它们才能发挥作用。 元素总是另起一行,占用全部水平空间(块元素)。 元素则只占用必要空间(行内元素)。
、











