UI设计师-前端基础-HTML5_HTML5文本与排版.docx

PAGE1

PAGE1

HTML5文本标签入门

HTML5,作为互联网上最常用的标记语言之一，提供了丰富的文本标签，用于描述网页的结构，对文本进行分类和标注，从而增强内容的可读性和可理解性。这一节，我们将聚焦于HTML5中用于文本基础的标签，了解它们如何帮助我们更好地组织和展示网页上的文本信息。

1文本元素概述

1.11p标签

p标签用于定义一个段落。每个段落应该是一个有意义的语义单元，如一篇文章中的一个想法或一个段落的文本。当浏览器遇到这个标签时，它会自动在段落前后添加一些空白行，以增加文本的可读性。

!--使用p标签定义段落--

p这是一个段落。段落通常包含一个完整的想法或主题。/p

p这是另一个段落。每个段落应该是一个独立的思路。/p

1.22b和strong标签

b标签用于加粗文本，而strong标签同样具有使文本加粗的效果，但语义上更强调文本的重要性，它是用于强调文本重量级的重要性的。

!--使用b标签加粗文本，但不强调语义--

b这是一个加粗的文本。/b

!--使用strong标签加粗文本，强调文本的重要性--

strong这是一个非常重要的文本，使用strong强调其重要性。/strong

1.33i和em标签

i标签通常用于表示斜体文本，没有特定的语义含义。em标签也用于显示斜体文本，但具有语义重要性，表示强调。

!--使用i标签表示斜体文本--

i这是一个斜体的文本，主要用于表示斜体。/i

!--使用em标签表示斜体文本，同时强调文本--

em这是一个需要特别注意的文本，使用em强调其含义。/em

1.44small标签

small标签用于定义小尺寸的文本，通常用于版权信息或免责声明等。

!--使用small标签定义小尺寸文本--

small版权所有?2023，此内容仅供学习用途。/small

1.55abbr标签

abbr标签用于定义缩写或首字母缩略词。在abbr标签中使用title属性来解释缩写词的全称。

!--使用abbr标签定义缩写，并解释全称--

pHTML5是abbrtitle=HyperTextMarkupLanguage5HTML5/abbr的缩写，是用于网页内容的标记语言。/p

2转义字符与特殊实体

在HTML中，某些字符被保留为标记的一部分，例如和。当你需要在文本中显示这些字符时，必须使用转义字符或特殊实体。

lt;代表

gt;代表

amp;代表

!--使用转义字符显示HTML保留字符--

p这是小于号:lt;和大于号:gt;的实例。/p

!--使用特殊实体展示版权符号--

p版权所有?2023,此内容仅用于学习目的，使用实体:copy;展示符号。/p

3超链接与锚点

3.11a标签

a标签，也称为锚标签，用于创建超链接。超链接是互联网的主要组成部分，它们允许用户在不同的网页、文件或网址之间导航。

!--使用a标签创建超链接--

ahref=访问/a

!--使用锚点链接到当前页面的其他部分--

ahref=#section1直接跳转到页面的第1部分/a

3.22定义锚点

在HTML中，可以使用id属性来定义锚点，然后在超链接的href属性中引用该锚点。

!--定义一个锚点--

h2id=section1页面的第1部分/h2

!--使用超链接链接到上面定义的锚点--

ahref=#section1跳转到页面的第1部分/a

3.3列表与项目

HTML5提供了多种列表标签，用于组织和显示项目列表。

3.3.11无序列表

ul标签创建一个无序列表，列表项使用li标签定义。

!--无序列表实例--

p以下是水果列表：/p

ul

li苹果/li

li香蕉/li

li樱桃/li

/ul

3.3.22有序列表

ol标签创建一个有序列表，列表项同样使用li标签定义。

!--有序列表实例--

p以下是水果按字母顺序的列表：/p

ol

li苹果/li

li香蕉/li

li樱桃/li

/ol

3.3.33自定义列表

dl创建定义列表，每个项目由dt（定义项）和dd（定义描述）标签定义。

!--自定义列表实例--

p以下是水果和它们的颜色：/p

dl

dt苹果/dt

dd红色或绿色/dd

dt香蕉/dt

dd黄色/dd

dt樱桃/dt

dd深红色/dd

/dl

4引用与引用标签

4.11q标签

q标签用于定义短引用。引用通常用引号来表示。