HTML 文本

在HTML中有两种标记。

  • 结构化标记:可用来描述标题和段落的元素。
  • 语义化标记:表达特定含义的标记。

标题

通常用于强调一篇文章。

html中有的标题有6个级别,使用<h1></h1>标签表示标题。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<h1>这是1级标题</h1>
<h2>这是1级标题</h2>
<h3>这是1级标题</h3>
<h4>这是1级标题</h4>
<h5>这是1级标题</h5>
<h6>这是1级标题</h6>
</body>
</html>

段落

在html中用<p></p>标签表示段落。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
<p>这是段落</p>
<p>这也是段落</p>
</body>
</html>

粗体和斜体

在html中用<b></b>标签表示粗体,用<i></i>表示斜体。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>粗体和斜体</title>
</head>
<body>
<p>这是一段话,其中有部分是<b>粗体</b>,有部分是<i>斜体</i>。</p>
</body>
</html>

粗体和斜体是结构化标记。

上标和下标

在html中用<sup></sup>标签表示上标,用<sub></sub>标签下标。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>上标和下标</title>
</head>
<body>
<p>今天气温是23<sup>o</sup></p>
<p>二氧化碳这样表示CO<sub>2</sub></p>
</body>
</html>

上标和下标是结构化标记。

空白

空白可以增强代码的可读性。

当浏览器遇到两个或两个以上的连续空格时,只将其显示为一个空格。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>空白</title>
</head>
<body>
<p>这是一段 佳
    话:学 好编程,就能改   变世界!</p>
</body>
</html>

显示效果如下

换行符

在html中用<br>标签表示换行符。换行符只有开始标签,没有结束标签。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>换行符</title>
</head>
<body>
<p>人所缺乏的不是才干而是志向,<br>不是成功的能力而是勤劳的意志。</p>
</body>
</html>

水平线

水平线通常用来在不同的主题间进行切换。或用于增强视觉效果。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>水平线</title>
</head>
<body>
<p>人所缺乏的不是才干而是志向,<br>不是成功的能力而是勤劳的意志。</p>
<hr>
<p>你知道吗?上面有条水平线呢</p>
</body>
</html>

强调和加粗

在html中用<strong></strong>标签表示强调,表示其中的内容十分重要,以粗体显示。

在html中用<em></em>标签表示强调,强度比<strong>低点,以斜体显示。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>强调和加粗</title>
</head>
<body>
<p>两部门:推进住房租赁资产证券化<strong>盘活存量资产</strong></p>
<p>善林金融非法吸资<em>600</em>亿8人被捕</p>
</body>
</html>

块引用和短引用

在html中用<blockquote></blockquote>标签表示块引用,块引用可以包括多个段落,以缩进的形式显示。

在html中用<q></q>标签表示短引用。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>块引用和短引用</title>
</head>
<body>
<blockquote>
<p>这部分将是块引用,它可以包括段落。</p>
<p>这是块引用的第二个段落。</p>
</blockquote>
<p>这部分是短引用。鲁迅说,<q>世上本没有程序员,写代码的人多了,于是就有了程序员。</q></p>
</body>
</html>

缩写词

在HTML5中缩写词和首字母缩写词都使用<abbr></abbr>标签表示。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>缩写词</title>
</head>
<body>
<!-- 缩写词和首字母缩写词都使用abbr -->
<p><abbr>ERP</abbr>  Enterprise Resource Planning</p>
</body>
</html>

引文

引文用于引用一部书籍或电影,在html中用<cite></cite>标签表示引文,在浏览器中以斜体显示。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>引文</title>
</head>
<body>
<!-- 引文用于引用一部书籍或电影 -->
<p>最近你看了古天乐主演的 <cite>杀破狼.贪狼</cite> 么</p>
</body>
</html>

定义

定义用于解释一些术语。

在html中用<dfn></dfn>标签表示定义。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>定义</title>
</head>
<body>
<!-- 定义,解释一些术语 -->
<p>面向对象<dfn></dfn>(Object Oriented,OO)是软件开发方法</p>
</body>
</html>

地址

在html中用<address></address>标签表示地址,在浏览器中以斜体显示。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>地址</title>
</head>
<body>
<!-- 定义,解释一些术语 -->
<p>上海宋庆龄故居位于</p>
<address>
<p>上海市淮海中路1843号</p>
</address>
</body>
</html>

内容修改标签

在html中用<ins></ins>标签表示插入的内容,在浏览器中有下划线。

在html中用<del></del>标签表示删除的内容,在浏览器中有删除线显示。

在html中用<s></s>标签表示不确定的内容,在浏览器中以中间穿一条线显示。

示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>内容修改元素</title>
</head>
<body>
<!-- 内容修改元素有ins del s -->
<p>ins 表示插入的内容。<ins>插图</ins></p>
<p>del 表示删除的内容。<del>注意,这是删除的内容</del>></p>
<p>s 表示不确定的内容。<s>这是不确定的内容</s>></p>
</body>
</html>

测试题目

1、完成书本上的例子

2、完成本篇的例子。

再完成以下测试题目。

1、html中的标题有几个级别?

2、本篇学的标签中,哪些是语义化标记 ?

3、空白有什么用?

4、本篇学的标签中,哪些标签只有开始标签没有结束标签?

5、换行符标签怎么写?水平线元素怎么写?

6、加粗和斜体有几种表示方式?它们的区别是什么?

7、说说块引用和短引用的区别。

8、地址标签怎么写?