第二章网页制作的排版方法

最新推荐文章于 2025-05-10 12:16:35 发布

修璟647

最新推荐文章于 2025-05-10 12:16:35 发布

阅读量383

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/2302_81225472/article/details/142261702

版权

2.1 文字与段落排版

2.1.1 段落标签

在HTML（超文本标记语言）中，段落标签指的是用于定义文本段落的标签。最常用的段落标签是 <p> 标签。当你在HTML文档中使用 <p> 标签包围一段文本时，浏览器会将这段文本显示为一个段落，通常会自动在段落前后添加一些垂直空间，使得文本在页面上更加清晰易读。

例如：

<p>这是一个段落。</p >

<p>这是另一个段落。</p >

在这两个段落之间，浏览器会自动添加一些空间，使得它们在视觉上分隔开来。

除了 <p> 标签，还有其他一些HTML标签也可以用来组织文本内容，比如：

<div> ：用于定义文档中的分区或节，它本身不表示任何内容，但可以用来组织页面的结构。

<h1> 到 <h6> ：这些是标题标签，用于定义不同级别的标题。

<blockquote> ：用于定义一个块级的引用，通常用于引用文本段落。

这些标签都有助于组织和格式化网页内容，使页面结构更加清晰。

2.1.2 标题标签

标题标签（Heading Tags）在HTML中用于定义文档的标题和子标题。它们从 <h1> 到 <h6> ，其中 <h1> 表示最高级别的标题，通常用于页面的主标题，而 <h6> 表示最低级别的标题。标题标签不仅有助于组织内容，提高可读性，而且对搜索引擎优化（SEO）也很重要，因为它们可以帮助搜索引擎理解页面的结构和重点内容。

以下是HTML中标题标签的基本用法：

<h1>这是主标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

<h4>这是四级标题</h4>

<h5>这是五级标题</h5>

<h6>这是六级标题</h6>

使用标题标签时，应该遵循一些最佳实践：

1. 逻辑结构：确保标题的层级关系清晰，不要跳过级别，例如直接从 <h1> 跳到 <h3> 。

2. 关键词：在标题中使用关键词，有助于SEO。

3. 简洁性：标题应该简洁明了，直接传达主题。

4. 一致性：在整个网站中保持标题标签的一致使用。

如果你有关于HTML或SEO的具体问题，或者需要帮助理解某个特定的概念，请随时告诉我！

2.1.3 换行标签

在HTML中，换行标签用于在文档中创建一个换行。最常用的换行标签是 <br> ，它是一个自闭合标签，意味着它不需要成对的结束标签。

<br> 标签

用途：在文本中创建一个换行。

语法： <br>

例如：

<p>这是第一行文字。<br>这是第二行文字。</p >

在这个例子中， <br> 标签使得 "这是第二行文字" 显示在新的一行。

<hr> 标签

用途：在文档中创建一个水平线。

语法： <hr>

虽然 <hr> 不是传统意义上的换行标签，但它在视觉上可以作为文本内容的分隔线，通常用于分隔段落或章节。

例如：

<p>这是一段文本。</p >

<hr>

<p>这是另一段文本。</p >

在这个例子中， <hr> 标签在两个段落之间创建了一个水平分隔线。

使用场景

文本换行：当你需要在文本中强制换行，而不是让浏览器自动处理时，可以使用 <br> 。

内容分隔：使用 <hr> 来分隔不同的内容部分，增加文档的可读性和美观性。

注意事项

<br> 标签是自闭合的，不需要结束标签。

在现代网页设计中，过度使用 <br> 标签可能会影响页面的响应式设计和可访问性。通常，合理的CSS样式和HTML结构应该能够满足大多数布局需求，而不是依赖于HTML标签来控制格式。

在实际开发中，应根据内容的语义和设计需求合理使用这些标签。

2.1.4 水平线标签

在HTML中，创建水平线通常使用 <hr> 标签。这个标签用于在文档中创建一条水平分割线，它可以在视觉上分隔内容或定义文档中的不同部分。 <hr> 标签是自闭合的，不需要成对出现。

基本用法

<p>这是段落文本。</p >

<hr>

<p>这是另一个段落文本。</p >

CSS样式化

虽然 <hr> 标签本身很简单，但你可以通过CSS来改变其外观，例如颜色、粗细和宽度。以下是一些常见的样式化示例：

hr {

border: 0; /* 移除默认边框 */

height: 1px; /* 设置高度 */

background-color: #333; /* 设置背景颜色 */

width: 80%; /* 设置宽度 */

margin: 20px auto; /* 居中显示 */

}

HTML5中的 <hr> 标签

在HTML5中， <hr> 标签还可以用来表示文档中的一个主题变化，这有助于屏幕阅读器理解内容的结构。正确使用 <hr> 标签可以提高页面的可访问性和用户体验。

例子

<!DOCTYPE html>

<head>

<title>水平线示例</title>

<style>

hr {

border: 0;

height: 2px;

background-color: #000;

width: 100%;

margin: 20px 0;

}

</style>

</head>

<body>

<p>这是段落文本。</p >

<hr>

<p>这是另一个段落文本。</p >

</body>

</html>

在这个例子中，我们创建了一个简单的HTML页面，其中包含一个标题和两个段落，它们之间用 <hr> 标签分隔。

如果你有更多关于HTML或CSS的问题，或者需要进一步的帮助，请随时告诉我！

2.1.5 预格式化标签

HTML 中的 <pre> 标签用于定义预格式化的文本。被包围在 <pre> 标签中的文本通常会保留空格和换行符，并且文本会呈现为等宽字体。这使得 <pre> 标签非常适合用来表示计算机的源代码或者需要保留格式的文本，如诗歌、ASCII 艺术等。

<pre> 标签的一些常见用法包括：

1. 保留空格和换行：在 <pre> 标签中的文本，包括空格、换行和制表符，都会按照原样显示，而不会被浏览器忽略或合并。

2. 等宽字体显示：文本会以等宽字体显示，通常为 Courier 或类似的字体。

3. 用于显示代码：由于其能够保留格式的特性， <pre> 标签常用于显示编程代码，可以与 <code> 标签结合使用以提供更清晰的语义。

4. 处理特殊字符：在 <pre> 标签中的特殊符号会被转换为符号实体，例如 < 会被转换为 < ， > 会被转换为 > 。

在 HTML5 中， <pre> 标签不支持 width 属性，这个属性在 HTML 4.01 中已经废弃。如果需要设置宽度，应该使用 CSS 来实现。

在实际应用中，如果文本内容过长导致溢出，可以通过 CSS 设置 white-space 属性为 pre-wrap 来使得文本自动换行，或者为 pre 元素添加横向滚动条。

此外，为了提高可访问性，当使用 <pre> 标签创建图像或图表时，应提供替代描述，以便使用屏幕阅读器的用户能够理解预格式化文本的内容。

总的来说， <pre> 标签是一个强大的工具，用于在网页上准确地展示格式化文本。

2.1.6 缩排标签

在 HTML 中，缩排（缩进）通常是通过使用空格或制表符（Tab 键）来实现的，而不是通过专门的缩排标签。然而，HTML 提供了一些元素和方式来创建具有视觉效果的缩进，这些包括：

1. 使用空格和制表符：直接在文本前添加空格或制表符可以实现文本的缩进效果。

2. 使用 CSS：通过样式表可以更精确地控制文本的缩进，例如使用 margin 或 padding 属性。

<p style="margin-left: 40px;">这段文本有左边距，看起来像是缩进。</p >

3. 使用 blockquote 标签：这个标签用于引用一段文本，并且通常会在视觉上自动缩进。

<blockquote>这是一个引用，通常浏览器会自动为其添加缩进。</blockquote>

4. 使用 q 标签：这个标签用于短的引用，通常也会显示为缩进。

<p>这里有一个引用：<q>这是引用的内容。</q></p >

5. 使用列表： <ul> （无序列表）和 <ol> （有序列表）标签创建的项目符号列表也会自动缩进。

<ul>

</ul>

6. 使用 pre 标签：如果你需要显示代码或保留文本的格式（包括缩进）， <pre> 标签可以保留空格和换行符。

<pre> 这是预格式化的文本

这里的缩进会被保留</pre>

在实际的网页设计中，通常推荐使用 CSS 来控制缩进，因为它提供了更多的灵活性和控制能力。直接在 HTML 中添加大量空格或制表符来创建缩进是不推荐的，因为这样难以维护，且在不同的浏览器和设备上可能会显示不一致。

2.1.7 案例

<!DOCTYPE html>

<html>

<head>

<title>全球汇商城简介</title>

</head>

<body>

<h1 align="center">100%正品十重保障</h1>

<p>      全球汇成立于 2008年, 10年来,凭借独创的特卖模式,精选全球正品好货,深度折扣,在电子商务研究中心2018年6月发布的"2017年度中国网络零售市场数据监测报告"中,全球汇在B2C市场交易份额方面发展势头良好,继续保持第三位。<br/>

      唯品会是全球最大的特卖电商,以及中国第三大电商。<br/>

</p ><br/>

全球汇承诺:

全球直采:货源保障,全球布局直采全世界好货。<br/>

入仓全检:质检保障,独立自理仓库坚持入仓全检验。<br/>

自营物流:物流保障,自营物流封闭操作全程可溯。<br/>

</blockquote>

</body>

</html>

2.2 超链接

2.2.1 超链接简介

超链接（Hyperlink）是互联网上的一种链接方式，它允许用户通过点击一个文本、图片或其他元素，从一个网页跳转到另一个网页或者同一网页上的不同位置。超链接是构建网页之间联系的基础，使得用户能够轻松地在不同页面或网站间导航。

在HTML（HyperText Markup Language，超文本标记语言）中，超链接是通过 <a> 标签来定义的。下面是一个基本的超链接示例：

<a href=" ">访问示例网站</a >

在这个例子中：

<a> 标签定义了一个超链接。

href 属性指定了链接的目标地址，即用户点击链接后将访问的URL。

链接文本是“访问示例网站”，用户点击这个文本时，浏览器会打开指定的URL。

超链接不仅可以链接到其他网页，还可以链接到同一页面的不同部分，或者用于下载文件、发送电子邮件等。此外，超链接还可以包含各种属性，如 title （提供链接的额外信息）、 target （指定在何处打开链接，例如新窗口或同一窗口）等，以增强用户体验和控制链接行为。

2.1.1.1 超链接的定义

超链接（Hyperlink）是互联网上的一种链接方式，它允许用户通过点击一个文本、图片或任何其他元素，直接跳转到另一个网页、页面或网站的不同部分。超链接是构成互联网的基础之一，它使得信息的组织和导航变得简单直观。

在HTML（超文本标记语言）中，超链接是通过 <a> 标签来定义的。以下是一个基本的超链接的例子：

<a href=" ">访问示例网站</a >

在这个例子中：

<a> 标签定义了一个超链接。

href 属性指定了点击链接后要跳转的URL地址。

链接文本是“访问示例网站”，用户点击这个文本就会跳转到 https://www.example.com 。

超链接不仅可以链接到其他网页，还可以链接到同一页面的不同部分（称为锚点链接），或者链接到电子邮件地址、文件下载等。此外，超链接还可以包含在图片或其他元素中，以提供更丰富的交互体验。

2.1.1.2 超链接的分类

超链接在网页设计和网络导航中扮演着重要角色，它们可以根据不同的标准进行分类。以下是一些常见的超链接分类方式：

1. 内部链接 vs 外部链接：

内部链接：指向同一网站内的其他页面。这有助于用户在网站内部导航。

外部链接：指向其他网站的页面。这允许用户访问不同的资源。

2. 绝对链接 vs 相对链接：

绝对链接：包含完整的URL，包括协议（如http或https）、域名和路径。

相对链接：只包含相对于当前页面的路径。它们依赖于当前页面的URL来确定目标位置。

3. 锚点链接：

这种链接指向同一页面上的特定部分，通常用于长页面，以便用户可以快速跳转到页面的不同部分。

4. 下载链接：

允许用户下载文件，如PDF、图片或文档。这种链接通常通过 <a> 标签的 href 属性指向文件的URL，并可能使用 download 属性来提示浏览器下载文件。

5. 电子邮件链接：

允许用户通过点击链接直接发送电子邮件。这种链接通常使用 mailto: 协议。

6. JavaScript链接：

当点击链接时，会执行一段JavaScript代码而不是导航到另一个页面。这可以用来执行各种客户端脚本，如打开模态窗口、更改页面内容等。

7. 空链接：

这种链接没有指定 href 属性，或者 href 属性为空。它们通常用于通过JavaScript来处理点击事件。

8. 友好链接（友情链接）

9. 跟踪链接

10. 社交媒体链接

每种类型的超链接都有其特定的用途和实现方式，选择合适的链接类型可以提高网站的用户体验和功能性。

2.1.1.3 路径

在计算机术语中，“路径”通常指的是文件系统中文件或目录的位置。路径可以是相对的或绝对的：

1. 绝对路径：从根目录开始的完整路径，它指定了从根目录到目标文件或目录的完整路径。例如，在Windows系统中，绝对路径可能看起来像这样： C:\Users\Username\Documents\file.txt 。在Unix或Linux系统中，它可能看起来像这样： /home/username/documents/file.txt 。

2. 相对路径：相对于当前工作目录的路径。它不从根目录开始，而是从当前位置开始。例如，如果当前工作目录是 /home/username/documents ，那么相对路径 file.txt 将指向 /home/username/documents/file.txt 。

在编程中，路径还可能涉及到文件访问权限、文件系统结构等概念。

如果你有特定的文件路径需要帮助，或者想要了解更多关于路径的信息，请提供更多的细节，我会尽力帮助你。

2.2.2 超链接的应用

超链接在互联网上有着广泛的应用，它们不仅增强了网页的功能性，还改善了用户体验。以下是一些超链接的主要应用场景：

1. 网页导航：超链接使得用户可以在不同的网页之间轻松跳转，是网站导航的基础。

2. 内容组织：在长篇文章或文档中，超链接可以用来链接到相关内容的不同部分，方便用户快速定位。

3. 引用和参考：在学术文章或报告中，超链接可以用来引用外部资源或提供额外的参考资料。

4. 社交媒体：社交媒体平台广泛使用超链接来分享内容，如链接到新闻文章、视频或个人资料。

5. 电子商务：在线商店使用超链接来展示产品详情、用户评价和购买选项。

6. 广告：超链接是在线广告的重要组成部分，它们可以引导用户到特定的产品页面或促销活动。

7. 资源下载：网站提供软件、文档或其他资源的下载链接，用户可以通过点击这些链接来下载所需的文件。

8. 表单提交：超链接可以用来提交表单，例如，用户可以通过点击链接来注册账户或订阅服务。

9. 多媒体内容：超链接可以链接到图片、视频、音频等多媒体内容，增强网页的互动性和吸引力。

10. 电子邮件链接：超链接可以直接打开用户的电子邮件客户端，让用户可以快速发送邮件。

11. 移动应用：在移动设备上，超链接可以用来打开应用程序或特定功能，如地图导航或电话拨打。

12. 搜索引擎优化（SEO）：合理使用超链接可以提高网站的搜索引擎排名，因为它们帮助搜索引擎更好地理解网站内容和结构。

13. 用户反馈和支持：网站可以通过超链接提供用户反馈表单或技术支持页面，以改善客户服务。

14. 内容更新和维护：超链接可以用来指向最新的内容更新或网站维护通知，确保用户获得最新信息。

超链接的应用几乎涵盖了互联网的每一个角落，它们是连接数字世界中信息和资源的关键工具。

2.2.2.1 锚点标签<a>···</a >

在HTML中，锚点标签 <a> 用于创建超链接，它可以让你链接到同一页面上的不同部分，或者链接到其他页面。锚点链接通常用于长页面，以便用户可以快速跳转到页面的特定部分。

锚点链接的基本语法如下：

<a href="https://www.example.com">访问Example网站</a >

在上面的例子中， #section1 是一个锚点，它指向页面上具有相同 id 属性值的元素。当用户点击这个链接时，浏览器会自动滚动到页面上 id 为 section1 的元素。

锚点链接的详细说明

1. 链接到同一页面的不同部分：

使用 href 属性中的 # 符号后跟 id 属性值来创建锚点。

被链接的元素需要有一个 id 属性，其值与 href 属性中的锚点名称相同。

</div>

2. 链接到其他页面：

直接在 href 属性中指定完整的URL。

<a href="https://www.example.com">访问Example网站</a >

3. 使用锚点进行页面内部导航：

可以将锚点链接与页面内部的导航菜单结合使用，方便用户快速跳转到页面的不同部分。

<nav>

<ul>

</ul>

</nav>

<p>这里是介绍部分的内容。</p >

</section>

<p>这里是特点部分的内容。</p >

</section>

<p>这里是价格部分的内容。</p >

</section>

<p>这里是联系信息。</p >

</section>

锚点链接的高级用法

1. 使用JavaScript进行更复杂的导航：

可以使用JavaScript来增强锚点链接的行为，例如添加动画效果或处理更复杂的导航逻辑。

function scrollToSection(sectionId) {

var element = document.getElementById(sectionId);

if (element) {

element.scrollIntoView({ behavior: 'smooth' });

}

</script>

2. 结合CSS进行样式定制：

可以使用CSS来定制锚点链接的样式，使其更符合页面的整体设计。

a {

color: blue;

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

通过这些方法，你可以灵活地使用锚点标签 <a> 来创建超链接，实现页面内部导航或其他链接功能。

2.2.2.2 指向其他页面的超链接

根据您提供的文件内容，这里是对文件中描述的超链接写法的总结：

1. 链接到同一目录内的网页文件：

语法： <a href=" ">热点文本</a >

说明：直接使用目标文件名作为链接地址。

2. 链接到下一级目录中的网页文件：

格式： <a href="子目录名/目标文件名.html">热点文本</a >

说明：在目标文件名前加上子目录名和斜杠。

3. 链接到上一级目录中的网页文件：

语法： <a href="../目标文件名.html">热点文本</a >

说明：使用 ../ 来表示上一级目录。

4. 链接到同级目录中的网页文件：

格式： <a href="../子目录名/目标文件名.html">热点文本</a >

说明：先使用 ../ 退到上一级目录，然后指定目标文件所在的子目录和文件名。

文件中还提到了一个例子，关于如何制作全球汇商城页面之间的链接，指向注册页和登录页。这个例子说明了如何使用相对路径来创建页面间的超链接。

请注意，文件内容中的一些格式可能有误，例如重复的 <a href="../子目录名/目标文件名.html">热点文本</a > ，这可能是文件内容的复制错误。正确的格式应该只出现一次。

2.2.2.3 指向书签的超链接

<!DOCTYPE html>

<html>

<head>

<title>指向其他页面书签的超链接同页效果</title>

</head>

<body>

</body>

</html>

<p>两个黄鹂鸣翠柳,<br/>一行白鹭上青天。<br/>窗含西岭千秋雪,<br/>门泊东吴万里船。</p >

<p>风急天高猿啸哀,<br/>渚清沙白鸟飞回。<br/>无边落木萧萧下,<br/>不尽长江滚滚来。<br/>万里悲秋常作客,<br/>百年多病独登台。<br/>艰难苦恨繁霜鬓,<br/>潦倒新停浊酒杯。</p >

<a name="three">《茅屋为秋风所破歌》</a >

<p>八月秋高风怒号,<br/>卷我屋上三重茅。<br/>茅飞渡江洒江郊,<br/>高者挂罥长林梢,<br/>下者飘转沉塘坳。<br/>南村群童欺我老无力,<br/>忍能对面为盗贼,<br/>公然抱茅入竹去。<br/>唇焦口燥呼不得,<br/>归来倚杖自叹息。<br/>俄顷风定云墨色,<br/>秋天漠漠向昏黑。<br/>布衾多年冷似铁,<br/>娇儿恶卧踏里裂。<br/>床头屋漏无干处,<br/>雨脚如麻未断绝。<br/>自经丧乱少睡眠,<br/>长夜沾湿何由彻?</p >

<p>南岳配未鸟，秩礼自百王。欻吸领地灵，鸿洞半炎方。<br/>

那家用祀典，在德非馨香。巡守何寂寥，有虞今则亡。<br/>

清香溢世网，行还越潇湘。渴日绝壁出，漾舟清光旁。<br/>

祝融五峰尊，峰峰次低昂。紫盖独不朝，争长囊相望。<br/>

泰闻魏夫人，群仙夹翱翔。有时五峰气，数风如飞霜。<br/>

养闻魏夫人,群仙夹翱翔。有时五峰气,散风如飞霜。<br/>牵迫限修途,未暇杖崇冈。归来觊命驾,沐浴休玉堂。<br/>

三叹问府主,曷以赞我皇。牲璧忍衰俗,神其思降祥。</p >

<p>国破山河在,<br/>城春草木深。<br/>感时花溅泪,<br/>恨别鸟惊心。<br/>烽火连三月,<br/>家书抵万金。<br/>白头搔更短,<br/>浑欲不胜簪。<br/></p >

</body>

<p>      全球汇成立于 2008年，此格式在网页年度中国网络零售市场数据监测报告中，全球汇在 B2C市场交易份额方面发展势头良好，继续保持第三位。10年来，凭借独创的特卖模式，精选全球正品好货，深度折扣，在电子商务研究中心 2018年 6月发布的"20调图像。JPEG文</p >

<p>      唯品会是全球最大的特卖电商，以及中国第三大电商。</p >

<br/>

</body>

</html>

2.2.2.4 指向下载文件的超链接

语法： <a href=" ">热点文本</a >

说明：在链接地址处输入文件所在的位置，点击超链接后，浏览器会自动判断文件类型并进行下载。

例如，下载一个名为 guide.rar 的文件，可以创建如下超链接：购物向导：<a href="guide.rar">下载</a >

2.2.2.5指向电子邮件的超链接：

语法： <a href="mailto:E-mail地址">热点文本</a >

说明：创建指向电子邮件地址的超链接，点击后可以自动打开用户的邮件客户端，准备发送邮件。

例如，电子邮件地址是 gdnanfang@163.com ，可以创建如下超链接：电子邮箱：<a href="mailto:gdnanfang@163.com">和我联系</a >

文件中还提到了图像质量和显示速度的考虑，提到了PNG格式的图像质量高，适合代替GIF格式，且显示速度快。此外，还提到了小图像可以拼合起来以不超过8KB的大小，以吸引访客的注意。

请注意，文件内容中的一些格式可能有误，例如重复的段落和不完整的句子，这可能是文件内容的复制错误。正确的格式应该只出现一次，并且句子应该是完整的。

2.3 图像

2.3.1 网页图像的格式及使用要点

2.3.1.1 常见的网页图像格式

图像格式介绍

1. GIF：

GIF是Internet上应用广泛的图像文件格式之一。

索引颜色的图像格式，体积小，适合网页使用。

支持小型翻页型动画。

最多使用256种颜色，适合制作徽标、图标、按钮等颜色风格单一的图片。

2. JPEG：

适用于摄影或连续色调图像。

可以包含数百万种颜色，文件体积较大，图像质量佳。

可以通过压缩在图像品质和文件大小之间取得平衡。

适用于对图像质量有要求的网页。

3. PNG：

新型无专利权限的图像格式。

结合了GIF和JPEG的优点。

显示速度快，下载少量信息即可显示预览图像。

支持透明层，质量和体积方面具有优势。

适合网络传输。

2.3.1.2使用网页图像的要点

图像大小：

高质量图像体积大，不适合网络传输。

网页设计中建议图像不超过8KB。

大图像可以分割成小图像，显示时再拼合。

2. 动画使用：

动画不宜过多，应合理使用。

过度炫酷的动画可能分散访客注意力。

3. 图像路径：

多次使用相同图像时，推荐使用相对路径。

相对路径是相对于当前文件的路径。

例如，如果文件X.Y与A文件夹在同一目录下，文件B.A在目录A下的B文件夹中，对于文件X.Y的相对路径为 A/B/B.A 。

2.3.2 图像标签

2.3.2.1 图像的替换文本说明

根据您提供的文件内容，这里是对文件中描述的图像替换文本说明的总结：

图像的替换文本说明

在某些情况下，如网速过慢或用户在图片未完全下载时点击了浏览器的停止键，用户可能无法看到图片。

这时，替换文本说明就显得非常重要。

替换文本说明应该清晰，能够为用户提供足够的图片说明信息，即使在无法看到图片的情况下，用户也能了解图片的内容。

示例

文档中提到了一个示例（例2.11），说明了图像的替换文本在正常显示和无法显示时的效果。

正常显示的效果如图2-12所示（虽然图2-12没有直接提供，但可以理解为正常情况下图片会正常显示）。

当图片无法显示时，替换文本会提供必要的说明。

HTML中的替换文本说明

在HTML中，可以使用 alt 属性为图像提供替换文本说明。例如：

< img src="image.jpg" alt="这是一张描述性的文本，说明图片内容">

src 属性指定图像的路径。

alt 属性提供替换文本，当图像无法显示时，浏览器会显示这段文本。

<!DOCTYPE html>

<html>

<head>

<title>图像的基本用法</title>

</head>

<body>

<h1 align="center">新年开运款时尚保暖羽绒服冬季新品短款茧型宽松羽绒服</h1>

<p align="center">  材质:面料:100%锦纶里料:100%聚酯纤维纤维填充物:90%白鸭绒10%羽毛</p >

</body>

</html>

2.3.2.2 设置图像大小

在HTML中，可以通过 <img> 标签的 width 和 height 属性来调整图像的大小。

调整大小的目的是为了加快图像的下载速度，因为较小的图像会更快地加载。

默认情况下，页面中显示的是图像的原始大小。

width 和 height 的单位可以是像素，也可以是百分比。百分比表示相对于父元素的大小。

< img src="images/waitao.jpg" width="150" height="174">

2.3.2.3图像的边框：

网页中的图像如果没有边框，可能会显得单调。

可以通过 img 标签的 border 属性为图像添加边框，使图像更醒目、美观。

border 属性的值用数字表示，单位为像素。

默认情况下图像没有边框，即 border=0 。

图像边框的颜色默认为黑色，不可调整。

当图片作为超链接使用时，图像边框的颜色和链接的颜色一致，默认为深蓝色。

2.3.3. 图像超链接：

图像也可以作为超链接热点，点击图像可以跳转到被链接的文本或其他文件。

语法： <a href=" ">< img src="图像文件名"/></a >

例如，制作产品图像的超链接，代码如下：<a href="product-page.html">< img src="images/waitao.jpg" alt="产品图像" /></a >

2.3.4 设置网页背景图像

在网页中可以利用图像作为背景，但要注意背景图像不应影响网页内容的显示，因为背景图像主要是为了增强网页的视觉效果。

背景图像不应该设置边框，以便于创建无缝的背景效果。

格式：

设置网页背景图像应注意以下要点：

1. 背景图像是否增加了页面的加载时间：背景图像文件大小不应超过10KB，以减少页面加载时间。

2. 背景图像是否与页面中的其他图像搭配良好：确保背景图像与页面上其他元素的风格和颜色协调。

3. 背景图像是否与页面中的文字颜色搭配良好：背景图像的颜色和图案不应干扰文字的可读性。

2.3.5 图文混排

图文混排是将图像和文字结合在一起，以提升网页的视觉效果。以下是一些关键点：

1. 布局合理：合理安排图像和文字的位置，确保整体布局和谐。

2. 保证可读性：确保文字在图像背景前清晰可见，通过调整颜色和对比度来实现。

3. 优化加载速度：选择合适大小的图像，避免影响页面加载时间。

4. 响应式设计：确保在不同设备上图文都能良好展示。

简单HTML示例：

< img src="image.jpg" alt="描述" style="width:300px;">

<p style="color:#333;">这里是文字描述，与图像相得益彰。</p >

</div>

这段代码展示了一个图像和文字的简单混排，图像居中显示，文字紧随其后。

2.4 列表

2.4.1 无序列表

无序列表通常用于列出一系列不按特定顺序排列的项目。在Markdown格式中，无序列表的创建非常简单，只需在每个项目前加上一个星号（*）、加号（+）或减号（-），然后跟一个空格。这里是一个简短的无序列表示例：

* 苹果

* 香蕉

* 橘子

这将显示为：

苹果

香蕉

橘子

2.4.1.1 在<ul>后指定符号的样式

type="disc" ：设置列表项的符号为实心圆点。

type="circle" ：设置列表项的符号为空心圆点。

type="square" ：设置列表项的符号为方块。

img src="graph.gif" ：设置列表项的符号为指定的图片文件。

2. 4.1.2在 <li> 标签后指定符号样式：

type="disc" ：从该 <li> 标签开始，直到 </ul> ，列表项的符号为实心圆点。

type="circle" ：从该 <li> 标签开始，直到 </ul> ，列表项的符号为空心圆点。

type="square" ：从该 <li> 标签开始，直到 </ul> ，列表项的符号为方块。

img src="graph.gif" ：从该 <li> 标签开始，直到 </ul> ，列表项的符号为指定的图片文件。

2.4.2 有序列表

HTML中的有序列表（ <ol> 标签）用于创建带有编号的列表。以下是一些基本的属性和用法：

1. 基本结构：

<ol>

</ol>

2. 类型：

type="1" ：默认，数字编号。

type="A" ：大写字母编号。

type="a" ：小写字母编号。

type="I" ：大写罗马数字编号。

type="i" ：小写罗马数字编号。

3. 起始编号：

通过 start 属性设置列表的起始编号，例如：<ol start="5">

</ol>这将从5开始编号。

这些是创建有序列表的基本要点，你可以根据需要调整类型和起始编号。

2.4.3 定义列表

定义列表（Definition List）是一种 HTML 标签，用于定义术语和解释。在 HTML 中，定义列表由 <dl> 标签包围，每个术语由 <dt> 标签定义，每个术语的解释由 <dd> 标签定义。

例如：

<dl>

<dd>超文本标记语言 (Hyper Text Markup Language) 是用于创建网页的标准标记语言。</dd>

<dd>层叠样式表 (Cascading Style Sheets) 是用于描述 HTML 或 XML 文档的显示样式。</dd>

</dl>

在这个例子中，"HTML" 和 "CSS" 是术语，它们的定义分别在 <dd> 标签中给出。定义列表通常用于术语和解释的列表。

2.4.4 嵌套列表

<ul>

<li>水果

<ul>

<li>香蕉

<ul>

</ul>

</li>

</ul>

</li>

<li>蔬菜

<ul>

</ul>

</li>

</ul>

.nested-list ul {

list-style-type: none; /* 移除默认的列表符号 */

padding-left: 20px; /* 为嵌套列表增加缩进 */

}

.nested-list li {

margin-bottom: 5px; /* 为列表项增加一些间距 */

}

.nested-list li::before {

content: "→"; /* 在每个列表项前添加一个箭头符号 */

padding-right: 5px; /* 为箭头符号增加一些间距 */

color: #666; /* 改变箭头符号的颜色 */

}

2.5 综合案例——无线吸尘器说明书

<!DOCTYPE html>

<html>

<head>

<title>无线吸尘器说明书</title>

<style>

body { font-family: Arial, sans-serif; }

h1, h2 { color: #333; }

ul { list-style-type: none; padding: 0; }

li { margin-bottom: 10px; }

.param { font-weight: bold; }

img { max-width: 100%; height: auto; }

.clearfix::after {

content: "";

clear: both;

display: table;

}

</style>

</head>

<body>

<h1>无线吸尘器说明书</h1>

<hr>

<p>品牌：Dyson 戴森</p >

<p>型号：V8 Absolute</p >

<p>使用时间：普通模式约40分钟，MAX模式约7分钟</p >

<ul>

<li>软绒滚筒吸头</li>

<li>升级版直驱吸头</li>

<li>电动床褥吸头</li>

<li>二合一吸头</li>

<li>软除尘毛吊</li>

</ul>

<p>启动清扫：按下电源开关启动，松开关闭。</p >

<p>切换挡位：短按挡位切换按钮，循环切换标准挡和强力挡。</p >

<h2>维护与保养</h2>

<p>定期清理集尘桶，确保不超过最大标记线。</p >

<p>使用清水冲洗滤网，晾干后重新安装。</p >

<p>至少每3个月充电一次避免电池出现过放。</p >

<ul>

<li>吸尘器不工作：检查电源是否接通，电池是否需要充电。</li>

<li>吸力减弱：清理或更换堵塞的滤网。</li>

<li>电池充电缓慢：确保使用原装充电器，并在适宜温度下充电。</li>

</ul>

<p>本产品享有12个月的有限保修服务。</p >

<p>非保修范围：不当使用、改装或未经授权的维修。</p >

< img src="dyson_v8_absolute.jpg" alt="Dyson V8 Absolute 无线吸尘器" class="img">

</div>

<p>官网地址：<a href=" ">Dyson Official Website</a ></p >

</body>

</html>

第二章 网页制作的排版方法

2.1 文字与段落排版

2.1.1 段落标签

2.1.2 标题标签

2.1.3 换行标签

2.1.4 水平线标签

2.1.5 预格式化标签

2.1.6 缩排标签

2.1.7 案例

2.2 超链接

2.2.1 超链接简介

2.1.1.1 超链接的定义

2.1.1.2 超链接的分类

2.1.1.3 路径

2.2.2 超链接的应用

2.2.2.1 锚点标签<a>···</a >

2.2.2.2 指向其他页面的超链接

2.2.2.3 指向书签的超链接

2.2.2.4 指向下载文件的超链接

2.2.2.5指向电子邮件的超链接：

2.3 图像

2.3.1 网页图像的格式及使用要点

2.3.1.1 常见的网页图像格式

2.3.1.2使用网页图像的要点

2.3.2 图像标签

2.3.2.1 图像的替换文本说明

2.3.2.2 设置图像大小

2.3.2.3图像的边框：

2.3.3. 图像超链接：

2.3.4 设置网页背景图像

2.3.5 图文混排

2.4 列表

2.4.1 无序列表

2.4.1.1 在<ul>后指定符号的样式

2. 4.1.2在 <li> 标签后指定符号样式：

2.4.2 有序列表

2.4.3 定义列表

2.4.4 嵌套列表

2.5 综合案例——无线吸尘器说明书

第二章网页制作的排版方法