当前位置：网站首页 > 文章教程 > 正文

HTML5 零基础完全教程-2-HTML5 基础标签

yund56 2025-04-26 20:21 9 浏览

2. HTML5 基础标签

学习目标

掌握HTML5常用的文本格式化标签
理解语义化容器标签的使用
学会使用注释标签
熟悉常用的HTML字符实体

文本格式化标签

HTML5提供了多种标签来格式化文本，使其在页面上以特定的方式显示。下面介绍最常用的文本格式化标签：

标题标签（<h1>到<h6>）

HTML提供六个级别的标题，从<h1>（最大）到<h6>（最小）：

html复制代码<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

小贴士：每个HTML页面应该只有一个<h1>标题，它通常用于页面的主标题。标题标签不仅影响文本的显示大小，也对网页的结构和搜索引擎优化（SEO）非常重要。

段落标签（<p>）

<p>标签用于定义段落：

html复制代码<p>这是一个段落。它可以包含多行文本，浏览器会自动处理段落内的换行和空格。</p>
<p>这是另一个段落。每个段落之间浏览器会自动添加一些间距。</p>

换行标签（<br>）

<br>标签用于插入一个换行，而不开始一个新段落：

html复制代码<p>这是第一行文本。<br>这是第二行文本，位于同一段落内。</p>

小贴士：<br>是一个空元素，不需要结束标签。在HTML5中，可以写为<br>或自闭合形式<br/>。

水平线标签（<hr>）

<hr>标签用于插入一条水平线，通常用于分隔内容：

html复制代码<p>这是第一部分内容。</p>
<hr>
<p>这是第二部分内容。</p>

文本强调标签

HTML提供了多种方式来强调文本：

加粗文本：

<strong>：表示文本很重要，通常显示为加粗（推荐使用，有语义）
<b>：仅表示文本加粗显示（无特殊语义）

html复制代码
<p>这段文字包含<strong>重要内容</strong>和<b>加粗文本</b>。</p>
倾斜文本：

<em>：表示强调，通常显示为斜体（推荐使用，有语义）
<i>：仅表示文本斜体显示（无特殊语义）

html复制代码
<p>这段文字包含<em>强调内容</em>和<i>斜体文本</i>。</p>
下划线：

<u>：给文本添加下划线

html复制代码
<p>这段文字包含<u>带下划线的文本</u>。</p>
删除线：

<del>：表示已删除的文本（有语义）
<s> 或 <strike>：表示不再正确的文本

html复制代码
<p>这件商品原价<del>yen199</del>，现在只要<strong>yen99</strong>！</p> <p>这是<s>错误的信息</s>更正后的信息。</p>
插入线：

<ins>：表示插入的文本，通常显示为下划线

html复制代码
<p>我们将于<del>明天</del><ins>后天</ins>举行会议。</p>

上标和下标

<sup>：上标文本
<sub>：下标文本

html复制代码<p>水的化学式是H<sub>2</sub>O。</p>
<p>二次方表示为x<sup>2</sup>。</p>

预格式化文本（<pre>）

<pre>标签保留文本中的空格和换行，常用于显示代码：

html复制代码<pre>
function sayHello() {
    console.log("Hello, World!");
}
</pre>

代码标签（<code>）

<code>标签用于表示计算机代码片段：

html复制代码<p>HTML中段落使用<code><p></code>标签定义。</p>

标记标签（<mark>）

<mark>标签用于突出显示文本，通常背景为黄色：

html复制代码<p>请注意这段文字中的<mark>重要信息</mark>需要特别关注。</p>

小号文本（<small>）

<small>标签用于定义小号文本，常用于免责声明、注释等：

html复制代码<p>这是正常大小的文本。<small>这是小号文本，常用于脚注或法律声明。</small></p>

缩写标签（<abbr>）

<abbr>标签用于定义缩写，并提供完整描述：

html复制代码<p>我们使用<abbr title="超文本标记语言">HTML</abbr>来构建网页。</p>

小贴士：当用户将鼠标悬停在带有title属性的<abbr>元素上时，会显示完整的描述。

地址标签（<address>）

<address>标签用于定义文档或文章的联系信息：

html复制代码<address>
    Written by <a href="mailto:john@example.com">John Doe</a>.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

文字方向标签（<bdo>）

<bdo>标签用于改变文本的方向：

html复制代码<p>从左到右：<bdo dir="ltr">这是正常文本</bdo></p>
<p>从右到左：<bdo dir="rtl">这是反向文本</bdo></p>

语义化容器标签

通用容器（<div>）

<div>是一个通用的块级容器，常用于组织和样式化内容：

html复制代码<div>
    <h2>我的博客文章</h2>
    <p>这是文章内容...</p>
    <p>更多内容...</p>
</div>

小贴士：<div>本身没有特定语义，它主要用于结合CSS进行页面布局和样式设计。

行内容器（<span>）

<span>是一个行内容器，常用于对文本的一部分应用样式：

html复制代码<p>我最喜欢的颜色是<span style="color:blue">蓝色</span>。</p>

小贴士：<div>和<span>的主要区别是：<div>是块级元素，会另起一行；而<span>是行内元素，不会破坏文本流。

注释标签

HTML注释用于在源代码中添加说明，这些注释不会显示在浏览器中：

html复制代码<!-- 这是一个HTML注释，用户在浏览网页时看不到它 -->
<p>这是可见的段落。</p>
<!-- 
    这是多行注释
    可以跨越多行
    用于较长的说明
-->

小贴士：注释对于代码维护非常重要，特别是在复杂项目中。好的注释可以帮助你和其他开发者理解代码的结构和目的。

字符实体

HTML中的一些字符是预留的，如<和>。要在文本中显示这些特殊字符，我们需要使用字符实体。

常用的字符实体包括：

显示结果	描述	实体名称	实体编号
	不间断空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
’	撇号	'	'
(c)	版权符号	©	©
(R)	注册商标	®	®
TM	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

示例：

html复制代码<p>在HTML中，小于号 < 和大于号 > 需要使用字符实体。</p>
<p>版权所有 (c) 2023 我的网站。</p>

小贴士：记住最常用的字符实体（如<、>、&和©）是很有用的。对于不常用的字符，可以在需要时查阅参考资料。

实际应用示例

下面是一个综合使用多种基础标签的例子：

html复制代码<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5基础标签示例</title>
</head>
<body>
    <!-- 页面标题 -->
    <h1>我的个人博客</h1>
    
    <!-- 文章部分 -->
    <div>
        <h2>HTML5学习笔记</h2>
        <p>HTML5是<abbr title="超文本标记语言">HTML</abbr>的第五个主要版本，于2014年正式发布。</p>
        <p>它引入了许多新特性，包括：</p>
        <p>1. 语义化标签如<code><header></code>和<code><footer></code></p>
        <p>2. 多媒体支持如<code><audio></code>和<code><video></code></p>
        
        <p>这段代码：</p>
        <pre><code>
<!DOCTYPE html>
<html>
<head>
    <title>示例</title>
</head>
<body>
    <p>你好，世界！</p>
</body>
</html>
        </code></pre>
        
        <p>创建了一个简单的HTML页面。</p>
        
        <p>HTML中的特殊字符如<、>、&需要使用字符实体表示。</p>
    </div>
    
    <hr>
    
    <!-- 联系信息 -->
    <address>
        作者：张三<br>
        电子邮件：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br>
        网站：<a href="https://www.example.com">www.example.com</a>
    </address>
    
    <p><small>(c) 2023 我的博客。保留所有权利。</small></p>
</body>
</html>

章节总结

在本章中，我们学习了：

多种文本格式化标签，包括标题、段落、换行、加粗、倾斜等
语义化容器标签<div>和<span>的使用
HTML注释的添加方法
常用的HTML字符实体

这些基础标签是构建HTML页面的基本构件。掌握它们的用法，你就能创建结构良好且内容丰富的网页。

练习题

创建一个HTML页面，包含一个主标题(h1)，两个子标题(h2)，和三个段落(p)。为内容选择一个你感兴趣的主题，如你的爱好或最近的一次旅行。
在上述页面中，使用<strong>或<b>标签强调段落中的关键词，使用<em>或<i>标签表示段落中的引文或特殊术语。
使用<pre>和<code>标签展示一段HTML或其他编程语言的代码片段，确保代码格式保持不变并且特殊字符正确显示。
创建一个包含至少三个不同HTML字符实体的段落，例如版权符号((c))、注册商标((R))、小于号(<)和大于号(>)等。
使用<div>和<span>标签创建一个简单的布局，并解释这两种标签的区别和各自的使用场景。你可以使用简单的内联样式(style属性)来突显它们的不同。

html5设计网页代码

HTML5 零基础完全教程-2-HTML5 基础标签

2. HTML5 基础标签

学习目标

文本格式化标签

标题标签（<h1>到<h6>）

段落标签（<p>）

换行标签（<br>）

水平线标签（<hr>）

文本强调标签

上标和下标

预格式化文本（<pre>）

代码标签（<code>）

标记标签（<mark>）

小号文本（<small>）

缩写标签（<abbr>）

地址标签（<address>）

文字方向标签（<bdo>）

语义化容器标签

通用容器（<div>）

行内容器（<span>）

注释标签

字符实体

实际应用示例

章节总结

练习题

相关推荐

django留言板_留言板html好看的模板

一次分享给你29个PHP基础常用类助力你快速提升

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一篇文章轻松掌握VLookup、XLookup与Filter函数

新函数FILTER函数_filter函数的作用

初学ThinkPHP(一):用TP6+LayUI实现数据表格

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

Excel筛选也智能?一个FILTER函数就搞定!

营商在上海_营商上海数字科技有限公司