2.1.1 段落标签
在HTML（HyperText Markup Language，超文本标记语言）中，用于定义段落的标签是<p>。这个标签用于创建文本的一个段落。每个<p>标签内的内容默认会在其前后添加一些垂直间距（即外边距），以区分不同的段落。段落标签的语法为：
<p align="left center right">文字<p>
属性align:设置段落文字在网页上的对齐方式，center(居中) left(左对齐) right(右对齐)，默认left。
示例：
效果图：
2.1.2 标题标签
HTML中的标题标签用于定义网页内容的标题。这些标题标签按照重要性递减的顺序，从 <h1> 到 <h6>。<h1> 是最重要的标题，通常用于主标题或页面标题，而 <h6> 是最不重要的标题，可能用于小节标题或次要内容。
标题标签的用途
结构清晰：通过不同级别的标题，可以帮助读者和搜索引擎更好地理解网页的结构和内容层次。
SEO（搜索引擎优化）：搜索引擎使用标题标签来索引网页内容，<h1> 标签尤为重要，因为它通常表示页面的主要主题。
无障碍性：屏幕阅读器等辅助技术依赖标题标签来识别页面内容的结构，从而帮助视障用户更好地理解网页
标题标签的语法为：
<h# align="left center right">标题文字<h#>
属性align:设置段落文字在网页上的对齐方式，center(居中) left(左对齐) right(右对齐)，默认left。
2.1.3 换行标签
在HTML中，换行标签通常指的是<br>标签（代表“break”的缩写）。这个标签用于在文本中插入一个简单的换行（即，不进行段落的分隔，只是换行），而不是开始一个新的段落。<br>标签是一个空元素，意味着它不需要结束标签。换行标签的语法：
文字<br />
2.1.4 水平线标签
在HTML中，用于创建水平线的标签是。这个标签主要用于在文档中插入一条水平线，通常用于分隔文档中的不同部分，如章节、段落或内容块。标签是一个空元素，意味着它不需要结束标签（即不需要）。
<hr>标签的基本用法：
代码如下：
2.1.5 预格式化标签
在HTML中，用于预格式化的标签是<pre>。<pre>标签会保留文本中的空格、制表符（tab）和换行符，正如文本在源代码中所写的那样显示在页面上。这对于显示程序代码、ASCII艺术或任何需要精确格式控制的文本非常有用。
<pre>标签内的文本通常显示为等宽字体（monospaced font），这有助于保持字符之间的对齐，使得代码或文本更容易阅读。
<pre>标签的基本用法。
2.1.6 缩排标签
<blockquote>标签通常包含来自另一个源的引用，如书籍、报纸、网站等。它可以帮助读者区分原始内容和引用内容，并且有时浏览器会默认添加一些样式（如引号、缩进或不同的字体）来突出显示这些内容。
标题标签的语法为：
http://<blockquote>文本</blockquote>
2.1.7 案例
使用文字与段落的基本排版知识制作“全球汇商城简介页面”。
代码如下：
2.2 超链接
2.2.1 超链接简介
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页和网页应用程序的标准标记语言。超链接（Hyperlinks）是HTML中一个非常重要的概念，它允许用户点击一个链接跳转到不同的页面或页面内的某个部分。超链接不仅限于文本，还可以是图片、按钮等元素。
超链接的基本语法
超链接主要通过<a>标签来定义，其基本语法如下：
http://<a href="URL">链接文本或图片</a>
href属性指定了链接的目标地址（URL）。它可以是同一网站内的页面地址，也可以是另一个网站的地址。
链接文本或图片是用户点击的部分，可以是普通的文本，也可以是<img>标签定义的图片等
2.2.2 超链接的应用
1.锚点标签
在HTML中，锚点（Anchor）标签通常指的是<a>标签的一种特殊用法，它不仅可以用来创建指向其他网页或网站的超链接，还可以用来创建指向同一页面内某个部分的链接。这种在同一页面内部进行跳转的链接，通常被称为页面内的锚点链接。
代码如下：
2.指向其他页面的超链接
在HTML中，指向其他页面的超链接是通过标签（anchor标签）实现的。标签的属性用于指定链接的目标URL。当用户在网页中点击这个链接时，浏览器会加载并显示属性中指定的URL所指向的页面。
代码如下：
在这个例子中，<a>标签的href属性被设置为"about.html"，这是指向同一网站目录下名为about.html的文件的链接。用户点击“关于我们”这几个字时，浏览器就会尝试加载并显示about.html页面的内容。
3.指向书签的超链接
在HTML中，指向书签（也称为锚点）的超链接允许用户点击链接后直接跳转到同一页面上的特定部分。要实现这一点，你需要在目标元素上使用id属性作为书签的标识符，并在<a>标签的href属性中使用#后跟该id值来创建指向该书签的链接。
4.指向下载文件的超链接
在HTML中，指向下载文件的超链接与指向网页的超链接类似，但属性中包含了要下载文件的URL。当用户点击这样的链接时，浏览器会尝试下载指定的文件，而不是在浏览器中打开它（这取决于文件的类型以及浏览器的设置）。
代码如下：
5.指向电子邮件的超链接
在HTML中，指向电子邮件的超链接并不是直接通过<a>标签的href属性中的URL来实现的，因为电子邮件不是一个网页地址。但是，你可以使用mailto:协议来创建一个指向电子邮件的超链接。当用户点击这样的链接时，他们的默认邮件客户端（如Outlook、Gmail的网页版或Apple Mail）会被打开，并创建一个新的邮件，邮件的收件人地址已经预先填写好了。
代码如下：
2.3 图像
2.3.1 网页图像的格式及使用要点
1、常见网页图像格式
1.JPEG（JPG）
1.特点：JPEG格式对色彩的信息保留较好，支持丰富的色彩和渐变效果，适用于照片和其他具有复杂色彩和细节的图像。
2.使用要点：JPEG采用有损压缩技术，可以在保证一定质量的前提下减小文件大小，适合在网页上展示高质量的图片，但需要注意避免过度压缩导致图像质量下降。
2.PNG
1.特点：PNG格式支持无损压缩，适用于需要清晰边缘的图像，如图标、按钮等。PNG-24还支持真彩色和透明度，非常适合需要透明背景的图像。
使用要点：PNG格式的文件通常比JPEG大，因此在选择使用PNG格式时需要考虑网页的加载速度。对于需要透明背景的图像，PNG是首选格式。
GIF
2.特点：GIF格式最多只能存储256色，因此色彩表现不如JPEG和PNG丰富。但其优势在于可以保存透明背景和动画效果，非常适合用于简单的动画图像或表情包。
使用要点：GIF格式的文件通常较小，适合在网络上快速传输。但由于色彩限制，它不适合用于色彩丰富的图像。
3.SVG
1.特点：SVG是可缩放矢量图形，与像素图像不同，SVG文件的大小不会因放大而失真。它非常适合用于图标、标志等需要清晰呈现的图像。
2.使用要点：SVG格式的文件可以通过文本编辑器进行编辑，具有高度的可编辑性和可访问性。在响应式设计中，SVG能够保持图像的清晰度，提升用户体验。
4.PSD
1.特点：PSD是Photoshop的专用格式，里面可以存放图层信息、通道、遮蔽等多种设计稿。对于前端开发人员来说，可以直接从上面复制文字、获得图片，还可以测量大小距离。
2.使用要点：PSD格式主要用于设计过程中的图像编辑和保存设计稿，不建议直接在网页中使用。如果需要在网页上展示PSD格式的图像，需要先将其导出为其他适合网页的格式。
2、使用要点
1.选择合适的格式：根据图像的类型和用途选择合适的格式。例如，对于照片和复杂图像，JPEG是较好的选择；对于需要透明背景的图像，PNG或SVG更合适；对于简单的动画或表情包，GIF是不错的选择。
2.优化图像：在将图像上传到网页之前，需要对其进行优化以减小文件大小，提高加载速度。这包括调整图像尺寸、压缩图像质量、去除不必要的元数据等。
3.遵守版权法规：在使用图像时，需要确保拥有合法的使用权，避免侵犯他人的版权。如果需要使用他人的图像，应事先获得授权或购买合法授权的图像。
4.考虑响应式设计：在响应式网页设计中，需要确保图像能够适应不同设备和屏幕尺寸的显示需求。这可以通过使用CSS媒体查询、图片懒加载等技术来实现。
2.3.2 图像标签
HTML中用于插入图像的标签是<img>。这个
）。相反，所有必要的信息都包含在标签的属性中。
<img>标签的主要属性包括：
src（必需）：指定图像的URL地址。这是图像文件的路径，可以是相对路径或绝对路径。
alt（推荐）：为图像提供替代文本。如果图像因为某种原因无法显示（比如网络问题或用户使用了屏幕阅读器），alt属性中的文本将被显示或读出。这对于提高网站的可访问性非常重要。
width 和 height：设置图像的宽度和高度。这些值可以是像素值（如width="100"）或百分比（如width="50%"）。虽然这些属性不是必需的，但指定它们可以帮助浏览器更好地布局页面，因为浏览器可以在图像加载之前预留出空间。
title：提供图像的额外信息，当鼠标悬停在图像上时，这些信息会以工具提示的形式显示
<img>标签的语法格式：
1.图像的替换文本说明
在HTML中，图像的替换文本（Alternative Text）是通过<img>标签的alt属性来提供的。这个属性对于图像无法显示的情况特别重要，因为它为图像提供了替代的文本说明。这些情况可能包括：
1.图像文件不存在：如果指定的图像文件路径错误或文件本身不存在，浏览器将不会显示图像，而是显示alt属性中提供的文本。
2.网络问题：如果用户的网络连接出现问题，导致图像无法加载，alt文本将作为图像的占位符显示。
3.屏幕阅读器：对于使用屏幕阅读器的视障用户来说，alt文本是他们了解图像内容的重要途径。屏幕阅读器会读取alt属性中的文本，以便用户能够理解图像所传达的信息。
4.搜索引擎优化（SEO）：搜索引擎无法直接“看到”图像，但它们可以读取alt文本。因此，为图像提供描述性的alt文本有助于搜索引擎理解图像的内容，并可能提高网站在搜索结果中的排名。
包含alt属性的<img>标签的语法格式：
2.设置图像大小
在标签中使用和属性来直接设置图像的大小。
代码如下：
3. 图像的边框
标签的属性中直接使用CSS的属性来添加边框。
代码如下：
2.3.3 图像的超链接
在HTML中，你可以将图像（标签）包裹在超链接（标签）内，以创建可点击的图像链接。当用户点击图像时，浏览器会导航到你在标签的属性中指定的URL。
代码如下：
2.3.4 设置网页背景图像
在网页中可以利用图像作为背景，但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框，这样有利于生成无缝背景。背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
2.3.5 图文混排
在HTML中实现图文混排，主要涉及到标签（用于插入图像）与文本内容的排列。图文混排可以通过CSS（层叠样式表）来控制图像和文本的相对位置、间距、对齐方式等，以达到预期的视觉效果。
代码示例：
2.4 列表
2.4.1 无序列表
HTML中的无序列表是通过<ul>（unordered list）标签来定义的，每个列表项则是通过<li>（list item）标签来定义的。无序列表中的项目默认以圆点（bullet points）作为标记，但你可以通过CSS来改变这些标记的样式。
下面是一个简单的无序列表的HTML示例：
2.4.2 有序列表
HTML中的有序列表（Ordered List）是通过<ol>标签来定义的，而列表中的每个项目则是通过<li>（list item）标签来指定的。与无序列表（<ul>）不同，有序列表中的项目会按照数字顺序（默认为1, 2, 3...）自动编号。
下面是一个简单的无序列表的HTML示例：
2.4.3 定义列表
HTML中的定义列表（Definition List）是一种用于展示术语及其定义或描述的列表。它通过使用<dl>（definition list）、<dt>（definition term）和<dd>（definition description）标签来创建。<dl>标签定义了一个定义列表，<dt>标签定义了列表中的术语（或名称），而<dd>标签则提供了该术语的定义或描述。
下面是一个定义列表的HTML示例：
2.4.4 嵌套列表
HTML中的嵌套列表允许你在一个列表内部创建另一个列表。这对于组织具有层次结构的信息非常有用，比如菜单、目录或任何需要分组的列表项。你可以在一个无序列表（<ul>）或有序列表（<ol>）内部嵌套另一个无序列表或有序列表。
下面是一个嵌套列表的HTML示例：
2.5 综合案例
本章综合前面学习的网页制件排版知识，可以利用文字与段落排版、超链接、图像和列表设置。
代码如下