百度360必应搜狗淘宝本站头条
filter函数excel用不了新代系统编程教学软件培训影视网站免费源码最新版网站留言板代码大全
当前位置：网站首页 > 文章教程 > 正文

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

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

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页面的基本构件。掌握它们的用法，你就能创建结构良好且内容丰富的网页。

练习题

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

相关推荐

了解计算机网络90个常见概念

计算机网络系列篇第一篇:90个常见概念定义如下:主机：计算机网络上任何一种能够连接网络的设备都被称为主机或者说端系统，比如手机、平板电脑、电视、游戏机、汽车等，随着5G的到来，将会有越来越多的终...

数控技巧:数控常用工艺术语(英文名称)

1工艺基本概念1.1一般概念1.1.1数控加工：numericalcontrolmachining根据被加工零件图样和工艺要求，编制成以数码表示的程序输入到机床的数控装置或控制计算机中，以...

常用模具零件广东术语，不会怎么混天下?

广东属最早引进模具工业地方之一,在工业界模具被称为永不衰败的行业,由于各师各法,广东各地对模具称呼的术语很多,有些不知怎译!!!为方便大家对模具术语交流，小编给大家整理了模具零件在广东的常用术语。深圳...

开发人员自我提升 - 软件开发技术术语表

开发工具与环境IDE(集成开发环境)VisualStudioCodeIntelliJIDEAEclipsePyCharmVersionControl(版本控制)GitSVNMercuria...

程序员术语趣味解释(1)

1.hotfixhotfix通常指的是一种紧急修复措施，用于解决已知的、严重的问题，比如安全漏洞、程序崩溃等。hotfix并不会包含任何新的功能或升级，它只是一个小型的程序补丁，能够快速而且有针对性地...

挑战 50 年霸主 C 语言:新语言 Hare，“异端”中的保守派

Hare原意为野兔，它的开发者希望这种编程语言能够如野兔般拥有顽强的生命力。本周，软件开发者DrewDeVault公布了一种名为Hare的全新系统编程语言，并用“简单、稳定和健壮”作为核心...

Python必须掌握的核心术语和概念，涵盖语法、编程范式和常用工具

以下是学习**Python**必须掌握的核心术语和概念，涵盖语法、编程范式和常用工具：---###**一、基础语法**1.**变量（Variable）**-存储数据的容器，无需声明类型，如...

编程中最难的事:如何命名

如何命名，其实是编程中最难的事。乔治·奥威尔的命名规范如何命名？简言之，根据语意来选择词汇，别无它法……然而，有时我们会不知用什么词汇更合适。当你想到某个抽象的东西，你更倾向于最先想到的词语，除非你故...

计算机网络的 166 个核心概念，你知道吗?

上回我整理了一下计算机网络中所有的关键概念，很多小伙伴觉得很有帮助，但是有一个需要优化的点就是这些概念不知道出自哪里，所以理解起来像是在云里穿梭，一会儿在聊应用层的概念，一会儿又跑到网络层协议了。针对...

黑客主要术语?什么是木马?什么是肉鸡?

本节将对常见的一些黑客术语进行简单的介绍1.肉鸡所谓肉鸡是一种很形象的比喻，比喻那些可以随意被控制的电脑，对方可以是各种电脑包括但不限于个人电脑，服务器等，在某种情况黑客进攻时会用他们干扰敌人。对直接...

计算机网络的 89 个核心概念

计算机网络中的概念也是非常庞杂，理解起来比较困难，所以这里，我给大家汇总了计算机网络中89个常见的概念，希望对你有所帮助。主机：计算机网络上任何一种能够连接网络的设备都被称为主机或者说端系统，比如...

开发人员自我提升 - 软件开发专业术语表

AAbstractClass(抽象类)-一种不能被实例化的类，用作其他类的模板Agile(敏捷开发)-一种迭代的软件开发方法论Algorithm(算法)-解决特定问题的一系列明确的...

Python编程术语词汇表(一)

这是一个非官方的Python编程术语表，是日常编程实践以及网络收藏所得的内容集合。Iteration迭代Loopingoveraniterableobject.遍历可迭代对象。Afor...

计算机领域有哪些高大上的术语描述的是很简单的事物?

云计算说白了就是服务器租赁，服务器在网线另一头，你也不用知道具体在哪，如远在天边的云。好比你想打网页小游戏，只想玩一次。你不会为此买个电脑、耳麦，再开通个宽带。你可能会去网吧，按时付费。网吧有按小时...

AI能代替你阅读吗

来源：科技日报原标题：AI能代替你阅读吗信息爆炸的当下，高校学生的阅读场景正经历着颠覆性变革——借助AI工具，他们不仅可以快速拓展通识阅读知识面，还可以轻松完成课堂上的深度思考作业，不用翻开书页就能...

一周热门
最近发表
标签列表
蜀ICP备2024111239号-27