2.1 文字与段落排版
网页的制作过程中，可以通过文字与段落的基本排版即可做出简单的网页。下面说几个常用的文字与段落排版所使用的标签
2.1.1 段落标签
在网页制作中，段落是通过 <p> 标签来定义的。这个标签用于包裹文本内容，创建一个段落。以下是一些关于使用 <p> 标签和进行网页排版的常见方法：
-
基本段落:
-
<p>这是一个段落。</p> align是设置对齐方式 有center，left，right等 -
多段落:
<p>这是第一个段落。</p> <p>这是第二个段落。</p> -
段落居中: 可以通过 CSS 来控制段落的对齐方式，例如居中对齐：
<style> p { text-align: center; } </style> -
段落缩进: 在 CSS 中设置
text-indent属性来给段落添加首行缩进：<style> p { text-indent: 2em; /* 缩进两个字符的宽度 */ } </style> -
行间距: 通过设置
line-height属性来调整行间距：<style> p { line-height: 1.5; /* 行间距为字体大小的1.5倍 */ } </style> -
段落间距: 可以通过
margin属性来设置段落之间的间距：<style> p { margin-top: 10px; /* 段落顶部间距 */ margin-bottom: 10px; /* 段落底部间距 */ } </style> -
文本颜色和字体: 设置文本的颜色和字体样式：
<style> p { color: #333333; /* 文本颜色 */ font-family: 'Arial', sans-serif; /* 字体 */ } </style> -
列表与段落结合: 有时候，你可能需要在段落中使用列表：
<p>这是一个段落，其中包含一个列表：</p> <ul> <li>列表项 1</li> <li>列表项 2</li> </ul> -
引用段落: 使用
<blockquote>标签来定义一个引用或引述的段落：<blockquote>这是一个引用段落。</blockquote> -
HTML5 语义化标签: HTML5 引入了一些新的语义化标签，如
<article>,<section>,<header>,<footer>等，它们可以用来更好地组织内容和段落。
在实际的网页设计中，通常会结合使用这些方法来创建一个既美观又符合语义的页面布局。记得，良好的排版可以提高用户的阅读体验。
以下是一个简单的 HTML 示例，展示了如何使用不同的排版方法来创建一个包含多个段落、列表和引用的网页：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页排版示例</title>
<style>
body {
font-family: 'Arial', sans-serif; /* 设置默认字体 */
line-height: 1.6; /* 设置全局行间距 */
margin: 20px; /* 设置页面边距 */
}
p {
text-align: justify; /* 两端对齐 */
text-indent: 2em; /* 首行缩进 */
margin-bottom: 1em; /* 段落间距 */
}
ul {
list-style-type: square; /* 列表符号类型 */
padding-left: 40px; /* 列表缩进 */
}
blockquote {
font-style: italic; /* 斜体 */
border-left: 5px solid #ccc; /* 引用边框 */
padding-left: 20px; /* 引用内边距 */
margin-left: 20px; /* 引用外边距 */
}
.highlight {
background-color: #ffff99; /* 高亮颜色 */
}
</style>
</head>
<body>
<header>
<h1>网页排版示例</h1>
</header>
<section>
<h2>段落和列表</h2>
<p>这是一个段落示例。段落是网页内容的基本组成部分。它们可以包含文本、链接和图片。</p>
<p class="highlight">这个段落有高亮背景色，以便突出显示重要信息。</p>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<p>列表可以是无序列表（如上所示）或有序列表，具体取决于内容的需要。</p>
</section>
<section>
<h2>引用</h2>
<blockquote>
<p>这是一个引用段落，通常用于展示引用或特别强调的内容。</p>
</blockquote>
<p>引用段落通常用于显示引用文本，如名人名言或书籍摘录。</p>
</section>
<footer>
<p>版权所有 © 2024</p>
</footer>
</body>
</html>运行图片
在这个示例中，我们使用了以下排版技巧：
- 全局样式：设置了默认字体、行间距和页面边距。
- 段落样式：设置了两端对齐、首行缩进和段落间距。
- 列表样式：定义了列表符号类型和列表缩进。
- 引用样式：为
<blockquote>标签设置了斜体、边框和内边距。 - 高亮样式：为需要突出显示的段落添加了背景色。
这个示例展示了如何使用 HTML 和 CSS 来创建一个具有良好排版的网页。通过调整 CSS 样式，你可以根据自己的需求来定制网页的外观。
2.1.2 标题标签
在 HTML 中，标题标签用于定义文档的标题或部分内容的标题。标题标签从 <h1> 到 <h6>，共六个级别，其中 <h1> 表示最高级别的标题，通常用于页面的主标题，而 <h6> 表示最低级别的标题。使用标题标签不仅可以提高内容的可读性，还有助于搜索引擎优化（SEO）和屏幕阅读器用户。
基本用法
<h1>这是 h1 标题，最高级别</h1>
<h2>这是 h2 标题</h2>
<h3>这是 h3 标题</h3>
<h4>这是 h4 标题</h4>
<h5>这是 h5 标题</h5>
<h6>这是 h6 标题，最低级别</h6>语义化和结构
标题标签在 HTML 文档中具有语义化的重要性，它们定义了内容的结构层次。例如，一个典型的文章页面可能包含以下结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文章标题</title>
</head>
<body>
<header>
<h1>网站或文章的主标题</h1>
</header>
<section>
<h2>章节标题</h2>
<p>章节内容...</p>
<article>
<h3>文章标题</h3>
<p>文章内容...</p>
</article>
<article>
<h3>另一个文章标题</h3>
<p>另一篇文章内容...</p>
</article>
</section>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>样式化标题
标题标签默认具有较大的字体和粗体样式，但你可以通过 CSS 进一步定制它们的样式：
<style>
h1 {
color: navy;
font-family: 'Arial', sans-serif;
}
h2 {
color: darkred;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
h3 {
color: darkblue;
}
</style>可访问性
对于提升网页的可访问性，合理使用标题标签非常重要。它们帮助屏幕阅读器用户理解页面的结构和内容层次。确保每个页面至少有一个 <h1> 标题，并且标题的级别在页面中是逻辑递减的。
结论
正确使用标题标签不仅有助于提升页面的语义结构和可访问性，还能增强用户的阅读体验。通过 CSS，你可以轻松地调整标题的样式，使其符合你的设计需求。
2.1.3 换行标签
在 HTML 中，换行标签用于在文本中创建一个新行。最常用的换行标签是 <br>，它是一个自闭合标签，意味着它没有结束标签。使用 <br> 标签可以在不开始一个新段落的情况下插入一个换行。
基本用法
<p>这是第一行文字。<br>这是第二行文字。</p>在上面的例子中，<br> 标签创建了两个文本行，但它们都属于同一个 <p> 段落标签内。
在诗或歌词中的应用
换行标签特别适用于显示诗歌、歌词或其他需要逐行显示文本的内容：
<p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p>多个连续换行
虽然 <br> 标签可以用来创建多个连续的换行，但通常不推荐这样做，因为它可能会使 HTML 代码难以阅读和维护。如果需要更多的空间，可以考虑使用 CSS 的 margin 或 padding 属性来控制间距。
换行与段落的区别
<br>标签仅创建一个简单的换行，不增加额外的空间，也不改变字体样式。<p>标签定义了一个段落，通常会有更多的空间（上下边距）和可能的样式变化。
使用场景
- 当你需要在文本中强制换行，但又不想开始一个新段落时，使用
<br>标签。 - 当你需要开始一个具有不同样式或间距的新段落时，使用
<p>标签。
可访问性考虑
在可访问性方面，通常建议使用 CSS 来控制文本的布局，而不是依赖过多的 <br> 标签，因为过多的换行标签可能会使页面结构变得复杂，对屏幕阅读器用户不太友好。
结论
<br> 标签是一个简单而强大的工具，用于在 HTML 文档中创建换行。合理使用它可以帮助改善文本的布局和可读性，但应注意不要过度使用，以免影响代码的清晰度和页面的可访问性。
2.1.4 水平线标签
在 HTML 中，水平线标签 <hr> 用于创建一条水平线，它可以用来分隔内容，或者表示文档中的一个主题变化。这个标签也是一个自闭合标签，不需要结束标签。
基本用法
<p>这是一段文本。</p>
<hr>
<p>这是另一段文本。</p>在上面的例子中，<hr> 标签在两个段落之间创建了一条水平线，视觉上分隔了这两段文本。
属性
<hr> 标签有几个属性可以用来控制线条的外观：
size：设置线条的高度。color：设置线条的颜色。width：设置线条的宽度。align：设置线条的对齐方式。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>这是一段文本。</p>
<hr size="2" color="blue" width="80%" align="center">
<p>这是另一段文本。</p>
</body>
</html>运行图片
在这个例子中，水平线的高度被设置为 2，颜色为蓝色，宽度为 80%，并且居中对齐。
HTML5 中的变化
在 HTML5 中，一些 <hr> 标签的属性（如 size、color、width 和 align）被认为是过时的，因为 CSS 应该用来控制样式。在现代网页设计中，推荐使用 CSS 来设置水平线的外观：
<style>
hr {
height: 2px; /* 线条高度 */
color: blue; /* 线条颜色 */
width: 80%; /* 线条宽度 */
border: none;
background-color: blue; /* 背景颜色作为线条 */
margin-left: auto;
margin-right: auto;
}
</style>
<p>这是一段文本。</p>
<hr>
<p>这是另一段文本。</p>运行图片
语义化和可访问性
尽管 <hr> 标签在视觉上只是一条线，但它在 HTML 文档中具有语义化的意义。它告诉屏幕阅读器用户内容的分隔。正确使用 <hr> 标签可以提高文档的可访问性。
结论
<hr> 标签是一个简单但有用的工具，用于在 HTML 文档中创建水平分隔线。在 HTML5 中，推荐使用 CSS 而不是 <hr> 标签的属性来控制线条的外观，以保持代码的语义化和可维护性。
2.1.5 预格式化标签
在 HTML 中，<pre> 标签用于显示预格式化的文本。这意味着文本中的空白符（如空格和换行符）会被浏览器保留，并且文本通常会被显示在一个固定宽度的字体中，如等宽字体。这使得 <pre> 标签非常适合显示代码、诗歌或任何需要保留原始格式的文本。
以下是 <pre> 标签的一个基本示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>预格式化文本示例</title>
</head>
<body>
<pre>
这是一个预格式化的文本示例。
这里的空格和换行符都会被保留。
例如，下面的代码：
for (int i = 0; i < 10; i++) {
System.out.println("这是一个示例。");
}
会按照你编写时的格式显示。
</pre>
</body>
</html>运行图片
在这个例子中，<pre> 标签内的文本和代码会按照你在 HTML 文件中编写的格式显示，包括空格和换行。这对于展示代码片段或需要保持特定格式的文本非常有用。
在这个示例中，通过 CSS 设置了 <pre> 标签的背景颜色、边框和内边距，以及 white-space 属性，后者确保文本在保持格式的同时，如果需要也可以自动换行
2.1.6 缩排标签
是的，<blockquote> 标签在 HTML 中确实用于表示缩进的文本块，通常用于引用或引用的文本。<blockquote> 标签会默认为文本添加缩进，使其在视觉上与其他文本区分开来，表示这是一段引用的内容。
以下是 <blockquote> 标签的一个基本示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>缩进标签示例</title>
</head>
<body>
<p>这是一个普通的段落。</p>
<blockquote>
这是一个引用段落，它会自动缩进。
你可以使用 <code><blockquote></code> 标签来创建这样的效果。
</blockquote>
<p>这是另一个普通的段落。</p>
</body>
</html>运行图片
在这个例子中，<blockquote> 标签内的文本会自动缩进，这是浏览器默认的样式。你可以通过 CSS 进一步定制 <blockquote> 的样式，比如改变缩进的大小、添加边框或者改变背景颜色等。
使用 CSS 自定义 <blockquote> 样式的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义缩进标签样式</title>
<style>
blockquote {
border-left: 5px solid #ccc; /* 添加边框 */
margin-left: 20px; /* 增加左边距 */
padding-left: 15px; /* 增加内边距 */
font-style: italic; /* 斜体字 */
}
</style>
</head>
<body>
<blockquote>
这是一个引用段落，它会自动缩进，并且具有自定义的样式。
</blockquote>
</body>
</html>运行图片
2.1.7 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第二章</title>
</head>
<body>
<!--段落标签-->
<a name="p"></a>
<p align="center">aaaaaa</p>
<p align="left">bbbbbb</p>
<p align="right">ccccccc</p>
<p >ddddddd</p>
<!--标题标签-->
<a name="h"></a>
<h1>标题一</h1>
<h2 align="center">标题二</h2>
<h3 align="left">标题三</h3>
<h4 align="right">标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<!--换行标签-->
<p>
qwfqvdvscv<br />
wfassdvdsd
</p>
<!--水平线标签-->
<hr/>
<hr color="#fffff0"/>
<hr size="20px" color="#55ffff"/>
<!--预格式化标签-->
<pre>
qw ertyu
iia sdf ghj
</pre>
<!--缩排标签-->
<p>
为更好的管理渠道全流程，联想为您提供端到端的物流全过程服务。
为满足渠道商正常产品销售流程，联想开放平台提供清晰完整的
【标准单】接口 ，即分销商下订单时，基于录入的分销商编号
、经销商编号【分销商经销商关系】、收货地址【经销商地址】
、物料编码【可用库存】、产品组编码、订单号等订单相关信息，
在向联想下订单的同时，也保证分销商下单流程的标准化和信息
的准确性，为整体下订单环节提供保障，流程概要如下图
</p>
<blockquote>
为更好的管理渠道全流程，联想为您提供端到端的物流全过程服务。
为满足渠道商正常产品销售流程，联想开放平台提供清晰完整的
【标准单】接口 ，即分销商下订单时，基于录入的分销商编号
、经销商编号【分销商经销商关系】、收货地址【经销商地址】
、物料编码【可用库存】、产品组编码、订单号等订单相关信息，
在向联想下订单的同时，也保证分销商下单流程的标准化和信息
的准确性，为整体下订单环节提供保障，流程概要如下图
</blockquote>
书上2.7案例
<!--案例-->
<h1 align="center">100%正品 失宠保证</h1>
<hr color="deeppink"/>
<p> 全球会成立于2008年，10年来凭借独创的特卖模式，
精选全球正品好货深度折扣在电子商务研究中心2018年6月发布的2017年度中国网络零售市场数据监
测报告中，全球会在bc市场交易份额方面发展势头良好继续保持第三位.<br />
唯品会是全球最大的特卖电商，以及中国第三大电商。<br />
</p><br />
全球汇承诺：
<blockquote>
全球直采：资源保障，全球布局 直采全世界好货。<br />
入仓全检：质检保障，独立治理仓库 检查入仓全检验。<br />
直营物流：物流保障，自营物流封闭操作 全球可溯。<br />
</blockquote>
<!--超链接的应用-->
<a href="https://www.taobao.com">淘宝</a>
<a href="login.html">登录</a>
<a href="register.html">注册</a>
<!--指向书签的超链接-->
<a href="#p">段落</a>
<a href="#h">标题</a>
<!--指向下载文件的超链接-->
<a href="文件名.zip">下载</a>
<!--指向电子邮件的超链接-->
<a href="mailto:1111111111@qq.com">联系我</a>
</body>
</html>
运行图片：
2.2 超链接
2.2.1 超链接简介 和 应用
超链接是 HTML 中的一个基本元素，它允许你将文本或图像与其他页面或页面上的特定部分链接起来。超链接是互联网的基础，因为它们允许用户从一个页面跳转到另一个页面，从而浏览和访问网络上的信息。
超链接的基本语法
超链接在 HTML 中使用 <a> 标签创建，其基本语法如下：
<a href="URL">链接文本</a>href属性：这是超链接的核心属性，它指定了链接的目标地址。这个地址可以是内部页面、外部网站、电子邮件地址、文件或其他资源。链接文本：这是用户点击时会激活链接的文本。
示例
<!-- 链接到另一个网页 -->
<a href="https://www.example.com">访问 Example 网站</a>
<!-- 链接到同一页面的不同部分 -->
<a href="#section2">跳转到第二节</a>
<!-- 链接到电子邮件地址 -->
<a href="mailto:someone@example.com">发送电子邮件</a>
<!-- 下载链接 -->
<a href="path/to/file.pdf" download>下载 PDF 文件</a>超链接的类型
- 内部链接：链接到同一网站内的其他页面。
- 外部链接：链接到其他网站上的页面。
- 锚点链接：链接到同一页面上的不同部分（使用
#后跟锚点的 ID）。 - 电子邮件链接：允许用户通过点击链接发送电子邮件。
- 下载链接：允许用户下载文件。
超链接的属性
除了 href 属性外，<a> 标签还支持其他一些属性，如：
target：指定在何处打开链接的文档。例如，target="_blank"会在新标签页中打开链接。download：提示浏览器下载而不是导航到链接的 URL。可以指定下载文件的名称。title：提供关于链接的额外信息，通常在鼠标悬停时显示。rel：定义链接和当前文档之间的关系。
样式化超链接
超链接可以被样式化以适应网站的设计。CSS 可以用来改变链接的颜色、下划线、悬停效果等：
a {
color: blue; /* 链接的默认颜色 */
text-decoration: none; /* 去除下划线 */
}
a:hover {
color: red; /* 鼠标悬停时的颜色 */
text-decoration: underline; /* 鼠标悬停时添加下划线 */
}超链接是 HTML 和互联网导航的核心组成部分，它们为用户提供了一种快速、直观的方式来探索和访问在线内容
2.3 图像
2.3.1网页图像的格式及使用要点
在网页设计中，图像是增强用户体验和传达信息的重要元素。选择合适的图像格式和使用正确的技术对于优化网页性能和视觉效果至关重要。以下是一些常用的网页图像格式及其使用要点：
常用图像格式
-
JPEG (Joint Photographic Experts Group)
- 用途：适用于照片和复杂的图像，如风景、人物和艺术作品。
- 特点：有损压缩，可以调整压缩率，压缩率高时图像质量下降。
- 优点：文件大小较小，适合网络传输。
- 缺点：压缩可能导致图像质量损失。
-
PNG (Portable Network Graphics)
- 用途：适用于需要透明度的图像，如图标、徽标和按钮。
- 特点：无损压缩，支持透明度（alpha transparency）。
- 优点：提供高质量的图像，保留透明度信息。
- 缺点：文件大小通常比 JPEG 大。
-
GIF (Graphics Interchange Format)
- 用途：适用于简单图形、图标和动画。
- 特点：无损压缩，支持动画和透明背景。
- 优点：支持动画，文件大小较小。
- 缺点：颜色限制（256色），不适合复杂图像。
-
WebP
- 用途：适用于需要高压缩率和良好图像质量的场景。
- 特点：由 Google 开发，支持无损和有损压缩，支持透明度和动画。
- 优点：提供高质量的图像，压缩率高，支持现代特性。
- 缺点：浏览器支持度不如 JPEG 和 PNG 广泛。
-
SVG (Scalable Vector Graphics)
- 用途：适用于图标、徽标和图形设计。
- 特点：基于 XML 的向量图形格式，可无限放大而不失真。
- 优点：文件大小小，可缩放，适合响应式设计。
- 缺点：不适合复杂的照片或具有丰富渐变的图像。
使用要点
-
选择合适的格式：根据图像的内容和用途选择合适的格式。例如，对于照片使用 JPEG，对于需要透明度的图像使用 PNG。
-
优化图像大小：使用图像编辑软件或在线工具压缩图像，以减少文件大小而不显著损失质量。
-
考虑响应式设计：为不同设备和屏幕尺寸提供不同尺寸的图像，或使用 CSS 媒体查询来调整图像大小。
-
使用
alt属性：为<img>标签提供alt属性，以提高可访问性，同时在图像无法显示时提供信息。 -
懒加载：对于非关键图像，可以使用懒加载技术，即在用户滚动到图像位置时才加载图像，以提高页面加载速度。
-
使用现代格式：如果浏览器支持，优先使用 WebP 等现代图像格式，以获得更好的压缩率和图像质量。
-
测试跨浏览器兼容性：确保图像在所有目标浏览器中都能正确显示。
通过遵循这些使用要点，你可以有效地在网页中使用图像，同时优化性能和用户体验
2.3.2 图像标签
在 HTML 中，图像是通过 <img> 标签嵌入的。这个标签用于在网页上显示图像文件。以下是 <img> 标签的基本用法和一些重要的属性：
基本语法
<img src="image.jpg" alt="描述性文字">src属性：指定图像文件的 URL。可以是相对路径或绝对路径。alt属性：为图像提供替代文本，这是重要的可访问性特性，用于图像无法显示时提供信息。
常用属性
-
src：图像的来源路径。<img src="images/flower.jpg" alt="一朵美丽的花"> -
alt：图像的替代文本。<img src="images/flower.jpg" alt="一朵美丽的花"> -
title：提供关于图像的额外信息，通常在鼠标悬停时显示。<img src="images/flower.jpg" alt="一朵美丽的花" title="点击这里查看更多花朵"> -
width和height：指定图像的宽度和高度。通常使用 CSS 控制尺寸更为灵活。<img src="images/flower.jpg" alt="一朵美丽的花" width="500" height="600"> -
class和id：用于将 CSS 样式或 JavaScript 功能应用到图像。<img src="images/flower.jpg" alt="一朵美丽的花" class="thumbnail" id="flower-image"> -
style：直接在标签内应用内联 CSS 样式。<img src="images/flower.jpg" alt="一朵美丽的花" style="border: 1px solid black;"> -
crossorigin：用于处理跨域图像资源。<img src="https://example.com/images/flower.jpg" alt="一朵美丽的花" crossorigin="anonymous"> -
ismap：指示图像是服务器端图像映射的一部分。<img src="images/map.jpg" ismap alt="地图">
响应式图像
为了使图像在不同设备上正确显示，可以使用 srcset 和 sizes 属性来提供多个图像源和尺寸。
<img src="images/flower.jpg"
srcset="images/flower-small.jpg 500w,
images/flower-medium.jpg 1000w,
images/flower-large.jpg 1500w"
sizes="(max-width: 600px) 500px,
(max-width: 1200px) 1000px,
1500px"
alt="一朵美丽的花">srcset属性：定义了一组图像，每个图像都有其宽度或像素密度。sizes属性：定义了一组媒体条件和对应的图像尺寸。
使用图像的注意事项
- 总是提供
alt属性，以提高可访问性。 - 尽可能使用图像压缩工具减小文件大小，以加快页面加载速度。
- 考虑使用现代图像格式（如 WebP）以提高图像质量和压缩效率。
- 使用 CSS 控制图像的布局和样式，而不是直接在
<img>标签中使用width和height属性。
通过合理使用 <img> 标签和相关属性，你可以有效地在网页中嵌入和控制图像的显示。
2.3.3 图像超链接
在 HTML 中，你可以将图像嵌入到超链接中，这样用户点击图像时，可以导航到另一个页面或网站。这通常通过将 <img> 标签嵌入到 <a> 标签中来实现。以下是如何创建图像超链接的基本步骤和示例：
基本语法
<a href="https://www.example.com">
<img src="image.jpg" alt="描述性文字">
</a>在这个例子中：
<a>标签定义了超链接，href属性指定了链接的目标 URL。<img>标签定义了要显示的图像，src属性指定了图像文件的路径，alt属性提供了图像的替代文本。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 图像作为链接到另一个网站 -->
<a href="https://www.baidu.com">
<img src="img/logo.png" alt="Example 网站 Logo">
</a>
<!-- 图像作为链接到同一网站的另一个页面 -->
<a href="contact.html">
<img src="img/彭于晏.jpg" alt="联系我们">
</a>
</body>
</html>运行图片
像我们单击了第一张图片就跳转了百度
使用图像超链接的要点
-
可访问性：总是为
<img>标签提供alt属性。这不仅有助于搜索引擎优化，还确保了视觉障碍用户能够理解图像的内容和功能。 -
点击区域：确保图像的点击区域足够大，以便用户容易点击。如果图像很小，可能需要增加其尺寸或使用 CSS 来增加可点击区域。
-
样式化：可以使用 CSS 来增强图像超链接的视觉效果，例如添加边框、阴影或其他装饰效果。
img:hover { opacity: 0.8; transition: opacity 0.3s; } -
目标属性：如果需要在新标签页中打开链接，可以使用
target="_blank"属性。<a href="https://www.example.com" target="_blank"> <img src="image.jpg" alt="描述性文字"> </a> -
下载链接：如果图像是一个文件，并且你希望用户能够下载它，可以在
<img>标签中使用download属性。<a href="image.jpg" download> <img src="image.jpg" alt="可下载的图像"> </a> -
图像映射：对于图像映射（图像的不同区域链接到不同的 URL），可以使用
<map>和<area>标签。<img src="map.jpg" alt="地图" usemap="#image-map"> <map name="image-map"> <area target="" alt="链接1" title="链接1" href="link1.html" coords="34,44,270,350" shape="rect"> <area target="" alt="链接2" title="链接2" href="link2.html" coords="291,172,333,250" shape="rect"> </map>
通过将图像嵌入到超链接中，你可以创建更具吸引力和功能性的网页，同时确保用户能够通过点击图像来导航到其他资源。
2.3.4 图文混排
图文混排是指在网页上将文本和图像结合在一起，以提高内容的吸引力和可读性。在 HTML 和 CSS 的帮助下，你可以轻松实现图文混排。以下是一些常见的图文混排布局方式和实现方法：
1. 基本的图文混排
在 HTML 中，你可以直接在文本中嵌入图像，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图文混排示例</title>
</head>
<body>
<h1>欢迎访问我的网站</h1>
<p>
这是一个图文混排的示例。你可以在文本中直接嵌入图像，如：
<img src="彭于晏.jpg" alt="示例图像" style="width: 100px; height: auto;">
这使得内容更加生动有趣。
</p>
</body>
</html>运行图片
在这个例子中，<img> 标签用于在段落 <p> 中嵌入图像。
注意事项
- 确保为图像提供适当的
alt属性，以提高网页的可访问性。 - 根据图像和文本的内容选择合适的布局方式。
- 使用媒体查询确保图文混排在不同设备和屏幕尺寸上也能保持良好的显示效果。
通过这些方法，你可以创建出既美观又实用的图文混排布局，增强网页的视觉效果和用户体验
2.4 列表
2.4.1 无序列表
在 HTML 中，无序列表使用 <ul> 标签来创建，其中每个列表项由 <li> 标签表示。无序列表通常用于显示一系列无需排序的条目，例如项目列表、购物清单等。浏览器会自动为无序列表的每个列表项添加标记，如圆点。
基本语法
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>在这个例子中，每个 <li> 元素代表列表中的一个项目，而 <ul> 标签定义了这些项目所属的无序列表。
嵌套无序列表
你可以在一个无序列表中嵌套另一个无序列表，以创建多级列表结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>父级列表项 1
<ul>
<li>子级列表项 1.1</li>
<li>子级列表项 1.2</li>
</ul>
</li>
<li>父级列表项 2
<ul>
<li>子级列表项 2.1</li>
<li>子级列表项 2.2</li>
</ul>
</li>
</ul>
</body>
</html>运行图片
列表属性
-
type：这个属性可以改变列表项前的标记类型。可能的值有disc（默认，实心圆点）、circle（空心圆点）、square（实心方块）和none（无标记）。<ul type="square"> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul>
响应式列表
为了使列表在不同设备上看起来更好，你可以使用媒体查询来调整列表的样式：
@media (max-width: 600px) {
ul {
padding-left: 20px; /* 在小屏幕上减少左内边距 */
}
}可访问性
确保无序列表的内容对所有用户都是可访问的，特别是对于使用屏幕阅读器的用户。适当使用语义化的 HTML 标签，并确保列表项的内容清晰、有意义。
通过这些基本的 HTML 和 CSS 技术，你可以创建出既美观又实用的无序列表，以增强网页的内容组织和用户体验。
2.4.2 有序列表
在 HTML 中，有序列表使用 <ol> 标签来创建，每个列表项由 <li> 标签表示。有序列表通常用于显示需要按特定顺序排列的项目，如步骤说明、编号列表等。浏览器会自动为有序列表的每个列表项添加数字编号。
基本语法
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>在这个例子中，每个 <li> 元素代表列表中的一个项目，而 <ol> 标签定义了这些项目所属的有序列表。
有序列表的属性
-
type：这个属性可以改变列表项的编号类型。可能的值有1（默认，传统的数字编号）、A（大写字母）、a（小写字母）、I（大写罗马数字）、i（小写罗马数字）。<ol type="A"> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ol>
嵌套有序列表
你可以在一个有序列表中嵌套另一个有序列表，以创建多级列表结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>父级列表项 1
<ol>
<li>子级列表项 1.1</li>
<li>子级列表项 1.2</li>
</ol>
</li>
<li>父级列表项 2
<ol>
<li>子级列表项 2.1</li>
<li>子级列表项 2.2</li>
</ol>
</li>
</ol>
</body>
</html>运行图片
响应式列表
为了使列表在不同设备上看起来更好，你可以使用媒体查询来调整列表的样式：
@media (max-width: 600px) {
ol {
padding-left: 20px; /* 在小屏幕上减少左内边距 */
}
}可访问性
确保有序列表的内容对所有用户都是可访问的，特别是对于使用屏幕阅读器的用户。适当使用语义化的 HTML 标签，并确保列表项的内容清晰、有意义。
通过这些基本的 HTML 和 CSS 技术，你可以创建出既美观又实用的有序列表，以增强网页的内容组织和用户体验。
2.4.3 定义列表
定义列表（Description List）在 HTML 中使用 <dl> 标签来创建，它用于描述一组术语或名称。定义列表由 <dt>（定义术语）和 <dd>（定义描述）标签组成，通常用于展示术语和其对应的描述或定义。
基本语法
<dl>
<dt>术语 1</dt>
<dd>描述或定义 1</dd>
<dt>术语 2</dt>
<dd>描述或定义 2</dd>
</dl>在这个例子中，<dl> 标签定义了一个定义列表，<dt> 标签用于列出术语，而 <dd> 标签用于提供每个术语的描述或定义。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定义列表示例</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言 (HTML) 是用于创建网页的标准标记语言。</dd>
<dt>CSS</dt>
<dd>层叠样式表 (CSS) 是用于描述网页样式（外观和格式）的一种样式表语言。</dd>
<dt>JavaScript</dt>
<dd>JavaScript 是一种编程语言，用于使网页具有交互性。</dd>
</dl>
</body>
</html>运行图片
嵌套定义列表
定义列表可以嵌套，以创建更复杂的数据结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套定义列表示例</title>
</head>
<body>
<dl>
<dt>编程语言</dt>
<dd>
<dl>
<dt>HTML</dt>
<dd>用于创建网页的标准标记语言。</dd>
<dt>CSS</dt>
<dd>用于描述网页样式的样式表语言。</dd>
</dl>
</dd>
<dt>脚本语言</dt>
<dd>
<dl>
<dt>JavaScript</dt>
<dd>用于使网页具有交互性的编程语言。</dd>
</dl>
</dd>
</dl>
</body>
</html>运行图片
可访问性
确保定义列表的内容对所有用户都是可访问的，特别是对于使用屏幕阅读器的用户。适当使用语义化的 HTML 标签，并确保术语和描述清晰、有意义。
通过这些基本的 HTML 和 CSS 技术，你可以创建出既美观又实用的定义列表，以增强网页的信息组织和用户体验。
2.5 综合案例——无线吸尘器说明书
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>红色文创产品网站</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--head begin-->
<div id="head">
<div class="nav">
<ul>
<li>网站首页</li>
<li>文创产品</li>
<li>新闻中心</li>
<li>关于我们</li>
<li class="search">输入商品名称</li>
</ul>
</div>
</div>
<!--head end-->
<!--产品信息 begin-->
<div id="newInfo">
<div class="new_info">产品信息</div>
<div class="new_con">
<img src="images/news1.jpg" />
<h2 class="one">文创万里长城积木</h2>
<p class="two">文创万里长城积木，为孩子搭建一个认识万里长城的桥梁，在拼积木中探索真实的万里长城，在玩乐中成长！</p>
<p class="shadow"></p>
</div>
<div class="new_con">
<img src="images/news2.png" />
<h2 class="one">东方红国潮鼠标垫</h2>
<p class="two">当代消费潮流化审美和中华传统文化的碰撞，用“中国风+时尚”产品，讲好中国故事。国潮文创产品，满足你感受文创的魅力。</p>
<p class="shadow"></p>
</div>
<div class="new_con">
<img src="images/news3.jpg" />
<h2 class="one">文创东方红新年礼盒</h2>
<p class="two">东方红新年礼盒外观典雅大气，采用红色基调，寓意吉祥如意。礼盒上点缀着精致的金色图案，彰显尊贵品质。整体设计既传统又现代，是新年送礼的不二之选。</p>
<p class="shadow"></p>
</div>
</div>
<!--产品信息 end-->
<!--热门推荐产品 begin-->
<div id="exhibition">
<h3 class="title">热门推荐</h3>
<div class="pic">
<div>
<img src="images/img1.png" />
<p class="info">文创水杯</p>
</div>
<div>
<img src="images/img2.png" />
<p class="info">文创挂坠</p>
</div>
<div>
<img src="images/img3.png" />
<p class="info">文创东方红钢笔</p>
</div>
</div>
</div>
<!--热门推荐产品 end-->
<!--footer begin-->
<div id="footer">红色文创产品网站©版权所有 2020-2026 赣ICP备20240301号-1</div>
<!--footer end-->
<!--tree begin-->
<div class="tree">
<img src="images/xfc.png" />
</div>
<!--tree end-->
</body>
</html>运行图片
扫一扫
3213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
