2.1.文字与段落排版
2.1.1.段落标签
p标签的定义：是段落标签，是HTML格式中的特有的段落元素，它会根据窗口的宽度自动跳转下一行。
p标签的作用：
1.组织文本：p标签将文本分成清晰的段落，使文本更容易阅读和理解。
2.控制间距：p标签在段落前后添加默认的垂直间距，从而在文本中创建视觉分隔。
3.设置文本样式：p标签可以应用样式，如字体、颜色、对齐和文本缩进，以增强文本外观。
4.搜索优化（SEO）：段落结构有助于搜索引擎索引网站内容，清楚定义的段落可以提高文本的可读性和可访问性，从而影响网站的排名。
5.增强可访问性：p标签可被屏幕阅读器和其他辅助技术识别，为残疾用户提供更佳的文本访问性。
p标签的属性align：设置段落文字在网页上的对齐方式，包括left（左对齐）、center（居中）、right（右对齐），而浏览器默认为左对齐（left）。
其语法格式为：
<p align="left|center|right">文字</p>而格式中的 “|”表示“或者”，即多项选择其一
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落p标签的示例</title>
</head>
<body>
<p align="center">江西职业技术大学</p>
<p align="right">作者：计算机信息工程学院</p>
<p align="left">计算机信息工程学院开设了软件技术、计算机网络技术、计算机应用技术、数字媒体应用技术、
物联网应用技术、大数据技术、人工智能、数字艺术、
等七个专业其中软件技术专业是我院首批重点建设专业</p>
<p align="center">©2023 计算机信息工程学院</p>
</body>
</html>运行结果如图所示：
2.1.2.标题标签
定义：在页面之中，标题是一段文字内容的核心，所以总是用加强效果来表示。标题是使用<h1>至<h6>标签来定义的，其中<h1>标签定义为最大的标题，<h6>标签定义最小的标题，以此类推下去。HTML会自动在标题前后添加一个额外的换行。
其中标题文字标签格式为：
<h #align="center|left|right">标题文字</h#>标题标签的属性align：设置标题文字在网页上的对齐方式，包括left（左对齐）、center（居中）、right（右对齐），而浏览器默认为左对齐（left）。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签的示例</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标签</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>运行结果如图所示：
2.1.3.换行标签
<br/>标签的定义:
<br/>标签是HTML中的一个空标签，用于在文本中插入一个换行符。它是一个单标签，意味着它没有结束标签，即不需要使用</br>来闭合。〈br/〉标签没有任何属性，它仅仅用来在文本中创建一个强制换行，而不是自动换行。这个标签在HTML文档中非常有用，尤其是在需要特定位置强制换行的情况下，比如地址、诗歌或其他需要格式化的文本。使用〈br/〉标签可以避免使用额外的CSS样式或JavaScript代码来实现简单的文本换行，从而使HTML代码更加简洁和易于维护。
值得注意的是，虽然〈br/〉标签在某些情况下可能看起来像是结束标签（例如，在源代码中），但实际上它是一个空标签，不需要配对的使用。在HTML文档中正确使用〈br/〉标签，可以看到预期的换行效果，如果看到的是标签本身而不是换行效果，这通常意味着网页设计或编码中存在错误。
<br/>标签的作用：
在HTML中插入一个换行符。如果将<br/>标签放在一行的末尾，可以使后面的文字、图像、表格等显示下一行，而不会在行与行之间留下空行，即为强制文本换行。
其语法：
文字<br/>而浏览器解释的时候，从该处换行。最后换行标签单独使用，可使页面更加的清晰、整齐。
示例代码如下 ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>换行标签的示例</title>
</head>
<body>
<h3>请联系我们</h3>
联系地址：xxx省xxx市xxx县<br />
联系电话：13679964012
传真电话：+86-750-3073898 3073890<br />
网址：WWW.GDNFU.COM<br />
</body>
</html>运行结果如图所示：
2.1.4.水平线标签
水平线可以作为段落与段落之间的分隔线，使文档结构清晰，层次分明。当浏览器解释到HTML文档中的<hr/>标签时，会在此处换行，并加上一条水平线段。
其中包括的属性分别为:
size:设定线条粗细，以像素为单位，默认值为2。
width：设定线条的长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。
color：设定线条色彩，默认为黑色，而色彩可以用相应的英文名称或以“#”来引导的一个十六进制代码来表示。
如图所示：
其水平线标签的格式为：
<hr align="left|center|right" size="横线的粗细" width="横线的长度" color="横线色彩" noshade="noshade"/>示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平线标签以及水平线标签颜色的示例</title>
</head>
<body>
<p>关于2023届计算机信息工程学院优秀毕业生的名称</p>
<hr color="blue"/> <! --颜色也可以用十六进制的代码#0000ff来表示-->
软件技术1班(6):张三，李四，王五，小明，小红，小亮<br />
计网4班(4):王小名，李大强，刘小峰，张三香<br />
</body>
</html>运行结果如图所示 ：
2.1.5.预格式化标签
<pre>标签可定义预格式化的文本。而被包围在<pre>标签之中的文本通常会保留空格和换行符，而文本也会呈现为等宽的字体。<pre>标签的一个常见的应用就是用来表示计算机的源代码。
<pre>标签的作用：
表示预格式化文本
预格式化标签的格式为：
<pre>文本块</pre>示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pre标签的示例</title>
</head>
<body>
<pre>
<h4>这是预格式文本</h4>
它保留了空格和换行
</pre>
<p>pre标签很适合显示计算机的代码:</p>
<pre>
for i=1 to 10
print i
next i
</pre>
</body>
</html>运行结果如图所示：
2.1.6.缩排标签
<blockquote>标签可定义一个块引用。<blockquote>与</blockquote>之间的所有文本都从常规文本分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
<blockquote>标签的作用：
用于建立引文，它能够将引用的文本从常规文本中分离出来，通常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blockquote标签的示例</title>
</head>
<body>
这里有一段长文本的引用:
<blockquote>
江西职业技术大学是经中华人民共和国教育部批准成立的全日制普通高等学校是国家示范性高等职业院校，国家优质专科高等职业院校，
中国特色高水平高职学校”立项建设单位，江西省“高水平高等职业院校和优势特色专业”立项建设单位，
江西省首批联合培养应用技术型本科人才试点院校。
</blockquote>
*请注意，浏览器在blockquote标签前后添加了换行，并增加了外边框。
</body>
</html>运行结果如图所示：
2.1.7.案例
使用文字与段落的基本排版知识制作“全球汇商城简介页面”。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全球汇商城简介</title>
</head>
<body>
<h1 align = "center">
100%正品 十重保障
</h1>
<hr color="deeppink"/>
<p> 全球汇成立于2008年，10年来，凭借独创的特卖模式，精选全球正品好货，深度折扣，在电子商务研究中心2018年6月发布的"2017年度中国网络零售市场数据监测报告"中
全球汇在B2C市场交易份额方面发展势头良好，继续保持第三位。<br />
唯品会是全球最大的特卖电商，以及中国第三大电商。<br />
</p><br />
全球汇承诺:
<blockquote>全球直采:货源保障，全球布局直采全世界好货。<br />
入仓全检:质检保障，独立自理仓库坚持入库全检验。<br />
自营物流:物流保障，自营物流封闭操作全程可溯。<br />
假货必赔:第三方保障，中国人保正品保险，假货必赔。<br />
</blockquote>
</body>
</html>运行结果如图所示：
2.2 超链接
一个网站是由多个网页组成的，创建超链接有利于页面与页面之间的跳转，从而将整个网站之中的页面有机地链接起来，它是网页中至关重要的元素。超链接在本质上属于网页的一部分，通过超链接将各个网页连接在一起后，才能构成一个真正的网站。
2.2.1.超链接的简介
2.2.1.1：超链接的定义
超链接是Web页面区别于其他媒体的重要特征之一，它允许用户从一个网页跳转到另一个网页、文件、电子邮件地址等。超链接可以是文本或图片，当用户点击这些链接时，浏览器会自动跳转到目标对象。
超链接的组成部分：一个完整的超链接由两部分组成：链接的载体和链接的目标地址。链接的载体是指显示链接的部分，即包含超链接的文本或图像。链接的目标是单击超链接后显示的内容，可能是打开另一个网页、输入另一个网站或打开电子邮件等。
超链接的作用：超链接的作用在于提供了网页之间的连接，使得用户可以方便地从一个页面跳转到另一个页面。通过点击超链接，用户可以访问不同的网页、文件、电子邮件等，极大地提高了Web页面的互动性和信息获取的效率。
2.2.1.2.超链接的分类
超链接主要分为以下几类：
（1）外部超链接：链接目标信息端在站点以外，浏览者可以从当前网站跳转到其他站点上。
（2）内部超链接：链接目标信息端在同一网站内部的不同页面之间，浏览者可以在网站中不同的页面之间进行导航。
（3.）锚点超链接：链接目标信息端在同一网页或不同网页的指定位置，可以在网页的不同位置之间进行跳转。
（4）邮件超链接：链接目标信息端为电子邮件地址，用于发送电子邮件。
（5）特殊超链接：链接目标信息端为应用程序或特殊对象，如下载链接、脚本链接和空链接等。
如果根据超链接目标文件的不同和超链接单击对象的不同又可分为：页面超链接，文字超链接，图象超链接以及图像映射。
2.2.1.3.路径
URL——统一资源定位器，指的就是每一个网站都具有的独立的地址。
URL的主要作用：
是通过浏览器或其他网络工具访问互联网上的各种资源，如网页、图片、音视频等。URL的构成包括协议（如HTTP、HTTPS）、服务器名称（或IP地址）、路径和文件名，有时还包括查询参数和锚点等，这些元素共同构成了访问特定资源的位置和方式。
我们在创建超链接的时候必须了解链接与被链接文本的路径。
在一个网站之中，路径通常分为：
1、绝对路径：是指从文件系统的根目录开始，到目标文件或目录的完整路径。 它不受当前工作目录的影响，总是指向文件在文件系统中的确切位置。
绝对路径的特点
绝对路径的特点包括：
(1)、从根目录开始：绝对路径是从文件系统的根目录开始，逐步指向目标文件或目录的完整路径。
(2、)不受当前工作目录影响：无论当前工作目录在哪里，绝对路径总是指向文件在文件系统中的确切位置。
(3、完整路径：绝对路径包含所有父目录的路径，直到目标文件或目录所在的位置。
例如，D:web\index.html就代表了index.html文件的物理绝对路径；http://www.hao123.com/index.html代表了一个URL绝对路径。
2、根目录相对路径
根目录相对路径的定义是指从站点文件夹到被链接文档经过的路径。站点上所有公开的文件都存放在站点的根目录下。站点根目录相对路径以一个正斜杠（/）开始。例如/support/tips.html是文件（tips.html）的站点根目录相对路径，该文件位于站点根文件夹的support子文件夹中。
根目录相对路径的特点为：
主要体现在其定义和用途上。根目录相对路径指的是从站点文件夹到被链接文档经过的路径，这种路径是从站点的根目录开始，依序指向目标文件的目录路径。在网站或文件系统中，所有公开的文件都存放在站点的根目录下。每使用一次“../”就表示返回上一级目录。这种路径关系适合于网站的内部链接，即使文件不在同一目录下，只要是同属一个站点，相对路径可以自由地在文件之间构建链接。这种地址形式利用了构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响。因此，这种书写形式省略了绝对路径中的相同部分，使得站点文件的内部链接在服务器地址发生变化时仍能保持正确。
根目录相对路径的优点在于其灵活性、可移植性强，不受文件或目录实际位置的影响。只要保持相对位置不变，无论文件或目录在哪里，相对路径都能正确地工作。然而，相对路径的缺点是不够明确，有时需要知道当前工作目录才能确定目标文件或目录的确切位置3。
总的来说，根目录相对路径是一种基于站点根目录的路径表示方法，它允许在网站或文件系统中灵活地引用和链接文件，同时保持了良好的可移植性，是网站开发和文件管理中的重要概念。
3、文档目录相对路径
它是相对于某个基准目录的路径，以当前文件所在的路径分起点，进行相对文件的查找。相对路径适合于创建网站内部链接。
它们之间的区别：
文档相对路径、根目录相对路径和文档目录相对路径的主要区别在于它们的参考点和适用场景。文档相对路径基于当前文档的位置，适用于本地站点或网站内部的链接；根目录相对路径则基于网站的根目录，适用于任何位置的内部链接；而文档目录相对路径可能更侧重于描述相对于当前文档所在目录的路径，但与根目录相对路径一样，都基于网站的整体结构进行定位。
2.2.2 超链接的应用
超链接的另外一个叫法为锚，它是用<a>标签来标记的，可以用两种方式来表示，一是通过使用<a>标签的href属性来创建超文本链接，以链接到同一个文档的其他位置或其他文档中，在这种情况下，当前文档就是链接的源，href属性的值就是URL的目标；二是通过使用<a>标签的name属性在文档中创建一个文档内部的书签。
2.2.2.1.锚点标签<a> </a>
HTML使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a>开始，以</a>结束。锚可以指向网络上的任何资源：一张HTML的页面、一幅图像、一个声音或者视频文件等。
其语法为：
<a href="url" title="指向链接显示的文字" target="窗口名称">文本文字</a>用户可以单击<a>和</a>标签之间的文本文字来实现网页的浏览访问，通常<a>和</a>标签之间的文本文字用颜色和下划线加以强调。建立超链接时，href属性定义了这个超链接所指的目标网址，也就是路径。如果要创建一个不连接到其他位置的空超链接，可以用“#”代替URL。
属性target：设定链接被单击后所要开始的窗口的方式有以下4种：
（1）blank：在新的窗口中打开被链接的文档。
（2）self：默认值，在相同的框架中打开被链接的文档。
（3）parent：在父框架集中打开被链接的文档。
（4）top：在整个窗口中打开被链接的文档。
2.2.2.2.指向其他页面的超链接
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有4种写法。请注意，应该尽量采用相对路径。
（1）链接到同一目录内的网页文件，其语法为：
<a href="目标文件名.html">热点文本</a>
<! --其中“目标文件名”是链接所指向的文件-->（2） 链接到下一级目录中的网页文件，其格式为：
<a href="子目录名/目标文件名.html">热点文本</a>（3）链接到上一级目录中的网页文件，其语法为：
<a href="../目标文件名.html">热点文本</a>
<! --其中，“../”表示退到上一级目录中-->
（4）链接到同级目录中的网页文件，其格式为：
<a href="../子目录名/目标文件名.html">热点文本</a>
<! --表示退到上一级目录中,然后再进入目标文件所在的目录-->
示例代码如下：
首先先创建register .html以及login.html，然后创建页面之间的链接。
register.html文件代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员注册</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/a.png" width="600" height="195" /></td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" align="right">用户名：</td>
<td><input name="textfield" type="text" id="textfield" value="请输入手机号码" /></td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td width="200" align="right">确认密码：</td>
<td><input type="password" name="textfield3" id="textfield3" /></td>
</tr>
<tr>
<td width="200" align="right">性别：</td>
<td><input name="radio" type="radio" id="radio" value="radio" checked="checked" />
男<img src="images/Male.gif" width="22" height="21" align="absmiddle" />
<input type="radio" name="radio" id="radio2" value="radio2" />
女<img src="images/Female.gif" width="23" height="21" align="absmiddle" /></td>
</tr>
<tr>
<td width="200" align="right">出生日期：</td>
<td><input name="textfield4" type="text" id="textfield4" size="12" />
年
<select name="select" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
月
<select name="select2" id="select2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
日</td>
</tr>
<tr>
<td width="200" align="right">业余爱好：</td>
<td><input type="checkbox" name="checkbox" id="checkbox" />
看书
<input type="checkbox" name="checkbox2" id="checkbox2" />
上网
<input type="checkbox" name="checkbox3" id="checkbox3" />
打球</td>
</tr>
<tr>
<td width="200" align="right">头像：</td>
<td height="25"><input type="file" name="fileField" id="fileField" /></td>
</tr>
<tr>
<td width="200" align="right">意见或建议：</td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="提交" />
<input type="reset" name="button2" id="button2" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
login.html文件代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>账户登录</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/a.png" width="600" height="195" /></td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" align="right">用户名：</td>
<td><input name="textfield" type="text" id="textfield" value="请输入手机号码" /></td>
</tr>
<tr>
<td width="200" align="right">密码：</td>
<td><input type="password" name="textfield2" id="textfield2" /></td>
</tr>
<tr>
<td width="200" align="right"><input type="checkbox" name="checkbox" id="checkbox" />记住用户名</td>
<td><input type="submit" name="button" id="button" value=" 提 交 " /></td>
</tr>
</table>
</form>
</body>
</html>
页面之间链接的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面之间的链接</title>
</head>
<body>
<! --链接到同一目录内的网页文件-->
<a href="register.html" title="点击一下,了解更多" target="_blank">免费注册</a>
<! --链接到同一目录内的网页文件-->
<a href="login.html" title="点击一下,了解更多"target="_blank">账户登录</a>
</body>
</html>运行结果如图所示：
如果单击了免费注册则出现如图所示：
如果单击了账户登录则出现如图所示：
2.2.2.3.指向书签的超链接
在浏览页面时，如果页面篇幅很长，要不断地拖动滚动条，就给用户浏览带来不便。浏览者需要既可以从头阅读到尾，又可以很快寻找到自己感兴趣的特定内容进行部分阅读时，就可以通过书签链接来实现。当浏览者单击页面上的某一“标签”，就能自动跳到页面相应的位置进行阅读，给浏览者带来方便。
书签就是用<a>标签来对网页元素做一个记号，其功能类似于用于固定船的锚，所以书签也被称为锚记或者锚点。如果页面中有多个书签链接，对不同目标元素要设置不同的书签名。书签名在<a>标签的name属性中定义。其语法为：
<a name="记号名">目标文本附近的内容</a>（1）指向页面内书签的超链接。要在当前页面内实现书签超链接，需要定义两个标签：
一个为超链接标签，另一个为书签标签，超链接标签的格式为 ：
<a href="记号名">热点文本</a>
<! --单击“热点文本”将跳转到“记号名”开始的网页元素-->示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>指向页面内书签的超链接</title>
<h1>杜甫诗词全集</h1>
<style>
nav a{
display: block;
margin: 10px 0;
}
section {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<nav>
<a href="#one">1.《绝句》</a>
<a href="#two">2.《登高》</a>
<hr color="#000000"/>
</nav>
<br />
<br />
<a id="one">《绝句》</a>
<p>两个黄鹂鸣翠柳，<br />
一行白鹭上青天。<br />
窗含西岭千秋雪，<br />
门泊东吴万里船。<br /></p>
<a id="two">《登高》</a>
<p>风急天高猿啸哀，<br />
渚清沙白鸟飞回。，<br />
无边落木萧萧下，<br />
不尽长江滚滚来。<br />
万里悲秋常作客，<br />
百年多病独登台。</p>
</body>
</html>运行结果如图所示：
（2）指向其他页面书签的超链接。书签超链接还可以再不同页面间进行链接。当单击书签超链接标题，页面会根据超链接中的href属性所以定的地址，将网页跳转的目标地址中书签名称所表示的内容。要在其他页面内实现书签链接，需要定义两个标签：一个为当前页面的超链接标签，另一个为跳转页面的书签标签。
当前页面的超链接标签的语法：
<a href="目标文件名.html#记号名">热点文本</a>
<! --单击“热点文本”将跳转到目标页面“记号名”开始的网页元素-->示例代码：
首先创建一个intro.html，然后再创建一个指向其他页面书签的超链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>指向其他页面书签的超链接</title>
</head>
<body>
<a href="intro.html">企业简介</a>
</body>
</html>运行结果如图所示：
单击企业简介后则出现如图所示 ：
2.2.2.4.指向下载文件的超链接
如果希望制作下载文件的超链接，只需要在链接地址处输入文件所在的位置，当浏览户单击出超链接后，浏览器会自动判断文件的类型，做出不同情况的处理。
指向下载文件的超链接语法：
<a href="下载文件名">热点文本</a>示例代码：
<a href="guider.rar">下载</a>运行结果如图所示：
2.2.2.5.指向电子邮件的超链接
网页中电子邮件地址的超链接，可以使网页浏览者将有关信息以电子邮件的形式发送给电子邮件的接受者，通常情况下，接收者的电子邮件位于网页页面的底部。
指向电子邮件的超链接的语法：
<a href="mailto:E-mail地址">热点文本</a>示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="mailto:gdnanfang@163.com">和我联系</a>
</body>
</html>运行结果如图所示：
2.3 图像
HTML的一个重要特性就是可以在文本中加入图像，既可以把图像作为文档的内在对象加入，又可以通过超链接的方式加入，还可以将图片作为背景加入文档中。在文档合理地使用图像会使浏览器显示的网页更活泼、引入入胜。
2.3.1.网页图像的格式及使用要点
2.3.1.1.常用的网页图像格式
主要的网页格式为GIF、JPEG、PNG
（1）GIF的定义：
是一种图像文件格式，最初由CompuServe公司在1987年开发，用于在网络上传输静态图像。后来，GIF格式被扩展以包含多帧动画，成为一种流行的动画格式。GIF支持透明背景，允许创建具有半透明、闪烁等效果的动画。这种格式因其体积小、成像相对清晰的特点，特别适合于初期慢速的互联网环境，因此在万维网上得到了广泛应用。
GIF的主要作用包括：
动画效果：GIF通过将一系列静态图像组合在一起，形成一个连续的动画，这种形式既节省了存储空间，又能吸引用户的注意力。在网页设计、广告制作、社交媒体分享等领域有着广泛的应用。
透明背景：GIF支持透明背景，可以与任何颜色的背景无缝融合，使得它在网页设计中作为装饰元素或在社交媒体上作为表情包使用时，能够发挥出独特的优势。
无损压缩：GIF采用无损压缩技术，只要图像不多于256色，就可以既减少文件的大小又保持成像的质量。这种格式的压缩率一般在50%左右，使得它成为传输图像和动画的高效选择。
此外，GIF格式因其广泛的支持和可移植性，已经成为万维网上广泛使用的网络传输图像格式之一。尽管存在256色的限制，这在一定程度上局限了GIF的应用范围，但它普遍适用于需要少量颜色的图像，如黑白照片和简单的图表、按钮等。
GIF的特点：体积小、支持动画、采用LZW压缩算法、256色调色板、透明度支持以及广泛兼容性。
（1）支持动画：GIF格式支持动画功能，可以在一张图像中存储多个图像帧，并按照指定的时间间隔进行播放，形成连续的动画效果。这使得GIF格式成为互联网上常见的动画图像格式之一。
（2）LZW压缩算法：GIF格式采用Lempel-Ziv-Welch（LZW）无损压缩算法，能够在保持图像质量的前提下减小文件大小。这种压缩算法不仅减小了文件大小，还保留了图像的透明和动画功能。
（3）256色调色板：GIF格式最多支持256种颜色，这是因为其使用调色板机制，将图像中的每个像素映射到调色板中的颜色。这种机制使得GIF文件大小较小，但限制了其用于高质量彩色照片等领域。
（4）透明度支持：GIF格式支持图像中的透明像素，通过指定某个颜色作为透明色，可以使该颜色在显示时变为透明，从而实现图像的非矩形显示效果。
广泛兼容性：由于GIF格式早在1987年由CompuServe开发，并广泛用于互联网，许多平台和软件都支持GIF格式。这使得GIF在网页装饰、表情包、简单动画等方面得到广泛应用。
综上所述，GIF格式以其支持动画、高效的压缩算法、有限的色彩支持和广泛的兼容性，在互联网上被广泛应用于表情包、简单动画、小型图标等方面。然而，由于其色彩限制，GIF格式不适合用于存储高质量的彩色照片等领域。
（2）JPGE的定义：
JPEG（[Joint Photographic Experts Group）是一种由国际标准化组织（ISO）和国际电报电话咨询委员会（CCITT）为静态图像所建立的国际数字图像压缩标准。它是至今一直在使用的、应用最广的图像压缩标准之一。JPEG格式以其高效的压缩算法而闻名，可以显著减小图像文件大小，同时保持较高的图像质量。JPEG格式支持有损压缩，这意味着在压缩过程中会丢失一些数据，但对于大多数应用来说，这种数据丢失并不明显。JPEG格式的文件后缀名为.jpg或.jpeg，广泛用于网络图片、数码照片以及印刷图像等领域。
JPEG格式的作用主要体现在以下几个方面：
（1）网络传输：由于JPEG格式的文件大小较小，适合在互联网上共享图像，因此在网络传输方面具有显著优势。
数码照片保存：大多数数码相机都使用JPEG格式来保存图像，因为它提供了较好的图像质量和文件大小之间的平衡。
（2）印刷需求：虽然JPEG格式不如其他文件格式（如TIFF）适合高分辨率印刷，但对于大多数家庭和小型企业印刷需求来说已经足够。
（3）有损压缩：JPEG使用有损压缩技术，能够在保持图像质量的同时大大减少文件大小，这对于存储和传输大量图像非常有用。
总之，JPEG格式因其高效压缩、广泛兼容性和良好的图像质量，成为了一种非常受欢迎的图像文件格式，广泛应用于各个领域。
JPEG（Joint Photographic Experts Group）格式是一种广泛使用的图像文件格式，其特点主要体现在以下几个方面：
（1）高度压缩：JPEG格式采用有损压缩技术，能够在保持图像品质的前提下大幅缩减文件体积，非常适合网络分享和打印。这种压缩技术使得JPEG格式在文件大小和图像质量之间提供了良好的平衡。
（2）广泛支持：几乎所有的设备和浏览器都可以无障碍显示JPEG图片，这使得JPEG格式在各种平台上都有很好的兼容性，便于用户在不同设备上分享和浏览。
（3）灵活的压缩质量选择：用户可以根据需要选择不同的压缩比率，以达到文件大小和图像质量之间的最佳平衡。这种灵活性使得JPEG格式适用于多种不同的应用场景。
（4）有损压缩：JPEG格式采用有损压缩方式，这意味着在压缩过程中会丢失一些数据，从而导致图像质量下降。过度压缩可能会导致图像出现模糊和压缩痕迹，因此不适合需要高保真度的应用。
（5）不支持透明背景：JPEG格式不支持透明背景，这使得它在设计需要透明效果的图形时不如其他格式如PNG适用。
（6）体积小巧：由于高效的压缩算法，JPEG格式的文件通常体积较小，便于存储和传输。
（7）兼容性好：JPEG格式被广泛应用于互联网和数码相机领域，几乎所有的设备和浏览器都支持这种格式，使得图像的分享和展示变得非常便捷。
综上所述，JPEG格式以其高度压缩、广泛支持、灵活的压缩质量选择等特点，成为摄影和实际拍摄图片的理想选择，同时也适用于网络分享和打印等多种场景
（3）PNG的定义：
PNG（Portable Network Graphics）是一种无损压缩的位图图形格式，设计用于网络传输，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。
PNG格式的主要特点和作用包括：
（1）无损压缩：PNG格式采用无损压缩算法，能够在保存图片细节与色彩的同时，保证图像质量不受损失，适用于需要高质量图像的场合，如网络图像、图标、LOGO等。
（2）支持透明度：PNG格式支持透明度调整，可以呈现图像的透明效果，为设计和网页制作提供了便利。设计师和开发者可以指定特定区域为全透明，增加图像应用的灵活性。
（3）多样调色板：PNG格式拥有丰富多样的调色板，适应性强，适用于不同种类的图像需求。这有助于维持图像品质的同时，大幅缩减图像体积，提升加载效率。
（4）开放性标准：PNG格式是开源行业的通用标准，其技术框架及实施方式对外公开，无任何专利权与著作权之约束，便于创新和发展。
PNG格式因其上述特点和优势，被广泛应用于互联网、网页设计、图标制作等领域，成为设计师和开发人员的首选图像格式之一。
2.3.1.2.使用网页图像的要点
（1）高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选图像不要超过8KB，如必须选用最大图像时，可先将其分成若干个小图像，显示时再通过将这些小图像拼合起来。
（2）网页中的动画并非越多越好，页面中应该合理运用动画，太炫酷的动画会分散网站访客的注意力。
（3）如果在同一文件中多次使用相同的图像时，最好用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在的目录依次往下直到文件所在的位置。
第（3）点如图所示：
2.3.2.图像标签
在HTML中，用<img>标签在网页中添加图像，图像是以嵌入的方式添加到网页中的。
其格式为：
<img src="图像文件名"alt="替换文字" title="鼠标悬停提示文字"
width="图像宽度" heigh="图像的高度" border="边框宽度" align="环绕方式|对齐方式"/>标签中的属性如图所示：
其中src是必需的属性，但是需要注意的是，在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示 。如果两个属性都进行了设置，且其比例和原图大小的比例不一致，那些显示的图像会相对于原图变形或者是失真。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图像的标签的示例</title>
</head>
<body>
<img src="img/2.2.jpg" title="百度一下" width="350px" height="200px"
border ="10px"
/>
</body>
</html>
运行结果如图所示：
2.3.2.1.图像的替换文本说明
有时候，由于网速过慢或者用户在图片上还没有下载完全就单击了浏览器的停止键，在浏览器中就看不到要看的图片，这时候替换文本说明就十分有必要啦。替换文本说明就应该简洁而清晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息。
示例代码如图所示：
图像路径错误时显示的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图像的基本用法示例</title>
</head>
<body>
<h1 align ="center">新年开运款时尚保暖羽绒服新品短款茧型宽松羽绒服面包服女</h1>
<p align="center"><img src="img/2.jpg" alt="宽松羽绒服面包服" title="宽松羽绒服面包服"/></p>
<p align="center"> 材质:面料:100% 锦纶里料:100%聚酯纤维 胆布:100%聚酯纤维 填充物:90%
白鸭绒:10%羽毛</p>
</body>
</html>
运行结果如图所示：
图像路径正确时显示的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图像的基本用法示例</title>
</head>
<body>
<h1 align ="center">新年开运款时尚保暖羽绒服新品短款茧型宽松羽绒服面包服女</h1>
<p align="center"><img src="img/31.jpg" width="450px" height="700px"
alt="宽松羽绒服面包服" title="宽松羽绒服面包服"/></p>
<p align="center"> 材质:面料:100% 锦纶里料:100%聚酯纤维 胆布:100%聚酯纤维 填充物:90%
白鸭绒:10%羽毛</p>
</body>
</html>
运行结果如图所示：
综上所述：
在使用<img>标签的时候，最好同时使用alt属性和title属性 ，避免因路径错误带来的错误信息的同时，增加了鼠标的提示信息也方便了浏览者的使用
2.3.2.2.设置图像的大小
在HTML中，通过img标签中的width和height来调整图像的大小，其目的是:
通过图像的高度以及宽度加快图像的下载速度。
在默认的情况下:
页面中显示的是图像的原始大小，如果不设置width和height属性，浏览器就要等到图像下载完毕才能显示网页，因此延缓其他页面元素的显示。
width和height属性的单位可以是像素也可以是百分比。百分比表示显示图像大小为浏览器窗口的百分比。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>设置图像大小</title>
</head>
<body>
<p align ="center"><img src="img/2.2.jpg"/></p>
<p align ="center"><img src="img/2.2.jpg" width="300px" height="400px"/>
</p>
</body>
</html>
运行结果如图所示：
2.3.2.3.图像的边框
在网页中显示的图像如果没有边框，会显得有些单调，可以通过img标签的border属性为图像添加边框，添加边框后显得更加的醒目、美观。
border属性的值可以用数字来表示，单位为像素；默认的情况下图像没有边框，即border=0，图像的边框颜色不能调整，默认为黑色，当图片作为超链接使用时，图像边框的颜色和文字超链接的颜色一致，默认为深蓝色。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置图像边框</title>
</head>
<body>
<img src="img/2.2.jpg" border="10px"/>
</body>
</html>运行结果如图所示：
2.3.3图像超链接
图像也可以作为超链接热点，单击图像则跳转到被链接的文本或其他文件。
其语法为：
<a href="URL"><img src="图像文件名"/></a>去除图像超链接边框的方法是为图像标签添加样式：style="border:none"
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置图像超链接</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="img/2.2.jpg"/></a>
</body>
</html>运行结果如图所示：
点击图像则跳转到百度官网如图所示：
2.3.4设置网页背景图像
在网页中可以利用图像作为背景，但是要注意不要上背景图影响网页的内容显示，因为背景图像只是起到渲染网页的作用。此外注意背景图片不用设置边框，这样有利于生成无缝背景。
背景属性将背景设置为图像。属性值为URL。
其格式为：
<body background ="背景图像的路径">设置网页背景图需要注意以下几点:
（1）背景图像是否增加了页面加载时间，背景图像不要超过10KB。
（2）背景图像是否与页面中的其他图像搭配良好。
（3）背景图像是否与页面中的文字颜色搭配良好。
示例代码：
<!DOCTYPE html>
<html>
<head>
<mtea name="keywords" content="宋词,苏轼" charset="uft-8" />
<mtea name="descripiot" content="本网收录精选宋词" />
<title>宋词精选</title>
<style type="text/css">
p{
text-align:center;
font-size:larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#333333" background="img/1.1.jpg">
<h2 align="center">临江山送·钱穆父</h2>
<p>宋词 苏轼</p>
<!--使用<br/>的效果-->
<p>一别都门三改火,天涯踏尽红尘<br/>
依然一笑作春温<br/>
无波真古井,有节是秋筠<br/>
惆怅孤帆连夜发,送行淡月微云<br/>
尊前不用翠眉顰<br/>
<font color="brown" face="行书">人生如逆旅,我亦是行人</font>
</p>
<! --水平线-->
<hr size="2" color="black" width="100%"/>
<p align="center">网页制作教程Copyright©广东南方职业学院</p>
</body>
</html>
运行结果如图所示：
2.3.5.图文混排
图文混排是指将文字与图片混合排列，文字可以位于图片的四周、嵌入图片下面、浮于图片上方等位置。在网页设计中，图文混排是一种重要的排版技术，通过将适当的图像与文字有效地排列在一起，可以大大丰富版面内容，提升页面的视觉效果和阅读体验。
用img标签中的align属性来指定图像与周围元素的对齐方式，实现图文混排效果。
其取值简表所示：
与其他元素不同的是，图像的align属性既包括了水平对齐方式又包括了垂直对齐方式。align属性的默认值为bottom。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图像混排示例</title>
</head>
<body>
<h1 align ="center">个人简介</h1>
<hr />
<img src="img/31.jpg" width="250" height="350" align ="right" alt="个人简介"/>
章若楠，1996年11月14日出生于浙江省温州乐清市，毕业于杭州电子科技大学，中国内地女演员。</br>
2017年12月，章若楠因参演电影《悲伤逆流成河》而正式进入演艺圈,
首次拍戏，她的表现就给大家带来了惊喜。<br/>
2020年，章若楠的演艺事业迎来“小爆发”
,其主演的《谁都渴望遇见你》
《师爷请自重》
《如果声音不记得》等影视剧陆续播出。
</body>
</html>
运行结果如图所示：
2.4 列表
在制作网页的时候，列表经常被用到写提纲以及说明书。通过列表标记的使用能使这些内容在网页中条理清晰、层次分明、格式美观地表现出来。
主要的形式：有序、无序、自定义列表以及嵌套列表。
2.4.1.无序列表
无序列表是一个没有特定顺序的列表项的集合，也称为项目列表。在无序列表中，各个列表项之间属于并列关系，没有先后顺序之分。它们之间以一个项目符号来标记，用户可以指定出现在列表项前的项目符号的样式，主要有disc（实心圆点）、circle（空心圆点）、square（实心方块）、none（无项目符号）。无序列表通过使用成对的<ul></ul>标签来定义，而每个列表项则使用<li></li>标签来定义。
无序列表的作用和特点主要体现在以下几个方面：
作用：无序列表主要用于展示一系列项目，这些项目之间没有特定的顺序或优先级。它适用于表示并列关系的项目，如菜单选项、特点列举等。
特点：
无序性：无序列表中的项目没有固定的顺序，每个项目都是独立的，可以根据需要随意调整位置。
并列关系：无序列表中的项目之间是并列关系，即它们之间没有主次之分，可以任意排列组合。
可定制的项目符号：通过CSS的list-style属性，用户可以自定义项目符号的样式，包括实心圆点、空心圆点、实心方块或无项目符号等，增加了无序列表的灵活性和美观性。
通过使用无序列表，可以清晰地展示一系列相关的信息，同时保持页面的整洁和美观。无论是网页制作、文档编辑还是日常生活中的笔记整理，无序列表都是一个非常实用的工具。
2.4.1.1在<ul>后指定符号的样式
在<ul>后指定符号样式，可设定直到</ul>的加重符号。
其格式为：
<ul type= "disc"><!--符号为实心圆点-->
<ul type= "circle"><！--符号为空心圆点-->
<ul type= "square"><！--符号为方块-->
<ul img src= "graph,gif"><！--符号为指定的图片文件-->2.4.1.2.在<li>后指定符号的样式
在<li>后指定符号的样式，可以设置从该<li>起直到</ul>的项目符号。
其格式为：
<li type= "disc"><!--符号为实心圆点-->
<li type= "circle"><！--符号为空心圆点-->
<li type= "square"><！--符号为方块-->
<li img src= "graph,gif"><！--符号为指定的图片文件-->示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无序列表示例</title>
</head>
<body>
<h2 align ="center">无序列表</h2>
<ul type ="disc"></ul>
<li>无序列表一</li>
<li>无序列表二</li>
<li>无序列表三</li>
<li>无序列表四</li>
</body>
</html>
运行结果如图所示：
2.4.2.有序列表
有序列表用于展示一系列按顺序排列的项目，每个列表项前默认带有数字标记。有序列表通过:ml-search[HTML <ol>标签创建，其中的列表项由[<li>`标签表示。有序列表适合于步骤说明、排名列表等需要强调顺序的信息。
有序列表的特点包括：
（1）顺序性：有序列表中的项目按照一定的顺序排列，通常每个项目前会有数字标记，用于表示项目的顺序。
（2）结构化：有序列表提供了一种结构化的方式来展示信息，使得信息更加易于理解和阅读。
（3）灵活性：有序列表可以包含任意数量的项目，并且可以根据需要调整项目的顺序。
使用有序列表时，需要注意以下几点：
（1）正确使用：当列表项间存在明确的顺序时，应使用:ml-search[有序列表<ol>而非无序列表<ul>`。
（2）起始编号：虽然可以通过:ml-search[start属性自定义起始编号，但初学者往往忽略这一功能，导致编号不连续。
通过上述特点和使用注意事项，有序列表在HTML中扮演着重要的角色，特别是在需要展示具有明确顺序的信息时，如步骤说明、排名列表等场景，有序列表能够清晰地传达信息，提高可读性和用户体验。
其格式为：
<ol type="符号类型"></ol>
<li type="符号类型一">表项一
<li type="符号类型二">表项二
</ol>有序列表的列表项的前导符号是有序的符号标识，包括阿拉伯数字（缺省方式）、小写英文字母、大写英文字母、小写罗马数字和大写罗马数字。这些符号标识用于表示列表项的顺序或等级。
<ol>标签的type属性用来定义一个有序列表的符号样式，在<ol>后指定符号的样式，可设定直到</oi>的表项加重记号。
其格式为：
<ol type="1"> <!--序号为数字-->
<ol type="A"> <!--序号为大写英文字母-->
<ol type="a"> <!--序号为小写英文字母-->
<ol type="I"> <!--序号为大写罗马数字-->
<ol type="i"> <!--序号为小写罗马数字-->在<li>后指定符号的样式，可设定该表项前的加重记号。只需要把格式上的ol改成为li 。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>有序列表示例</title>
</head>
<body>
<h2 align ="center">退货流程</h2>
<ol type="I">
<li>联系商家或客服:</li>
<li>填写退货申请:</li>
<li>等待审核:</li>
<li>发送退货商品:</li>
<li>等待退款:</li>
<li>确认退款:</li>
</ol>
</body>
</html>
运行结果如图：
2.4.3定义列表
HTML定义列表是一种特殊的列表类型，用于定义术语或名词及其解释。它由两部分组成：术语（使用<dt>标签）和其对应的定义（使用<dd>标签）。定义列表的特点在于它们通常用于创建词汇表、术语解释、FAQ页面等，其中每个定义项（<dt>）后面跟着一个或多个描述（<dd>），用于详细说明前面的术语。
定义列表的作用和特点主要体现在以下几个方面：
（1）无序性：与无序列表类似，定义列表中的术语和定义之间没有特定的顺序或优先级，它们是平级的。
（2）结构化信息：通过将术语与其定义分开，定义列表帮助用户更清晰地理解复杂的概念或技术术语。
（3）样式灵活性：虽然定义列表的基本结构是由术语和定义组成，但通过CSS样式，可以自定义术语和定义的显示方式，包括字体、颜色、间距等，以满足不同的视觉需求。
（4）嵌套使用：定义列表也支持嵌套使用，可以在一个定义列表中嵌套另一个定义列表，或者在一个定义的内部使用列表来进一步解释概念，这有助于创建多层次的解释结构。
在实际应用中，定义列表的作用不仅限于提供清晰的术语解释，它们还可以用于教学材料、技术文档、网站导航等，帮助用户更好地理解和记忆复杂的信息。此外，通过合理地使用CSS样式，定义列表可以成为提升网站或应用用户体验的一个重要元素。
其格式为：
<dl>
<dt>第一个标题项</dt>
<dd>对第一个标题项的解释文字</dd>
<dt>第二个标题项</dt>
<dd对第二个标题项的解释文字</dd>
</dl>默认的情况下，浏览器会在左边界显示条目名称 ，并在下一行缩进显示其显示其定义或解释。如果<dd>中的内容很多，可以嵌套<p>标题使用。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定义列表示例</title>
</head>
<body>
<h2 align ="center">联系我们</h2>
<dl>
<dt>E-mail:</dt>
<dd>world@163.com</dd>
<dt>传真:</dt>
<dd>0750-3118888</dd>
<dt>地址:</dt>
<dd>广东省东莞市常平镇</dd>
</dl>
</body>
</html>
运行结果如图所示：
2.4.4嵌套列表
嵌套列表指的是在一个列表内部再嵌套另一个列表，通常用于展示层级关系或复杂的信息结构。嵌套列表可以提升页面的可读性和组织性，帮助用户更清晰地理解信息。嵌套列表的实现主要依赖于HTML的列表标签，包括无序列表、有序列表以及自定义列表
（1）无序列表（Unordered List）：使用<ul>标签定义，每个列表项使用<li>标签表示。无序列表通常用于呈现项目之间没有特定顺序或优先级关系的内容，如菜单、项目清单等。无序列表的嵌套是通过在<ul>标签内部再嵌套一个或多个<ul>标签来实现的。
（2）有序列表（Ordered List）：使用<ol>标签表示，每个列表项同样使用<li>标签表示。有序列表用于呈现有序内容，如步骤、排名等，列表项前面会有自动编号（数字、字母、罗马数字等）。有序列表的嵌套也是在<ol>标签内部嵌套<ol>或<ul>标签。
（3）自定义列表（Definition List）：使用<dl>标签表示，其中每个术语使用<dt>标签表示，对应的描述使用<dd>标签表示。自定义列表用于呈现术语与其定义之间的关系，常用于创建词汇表、术语表、定义清单等。自定义列表的嵌套是通过在<dl>标签内部嵌套<dl>、<ul>或<ol>标签来实现的。
嵌套列表的作用和特点主要体现在以下几个方面：
（1）提升可读性：通过嵌套列表，可以清晰地展示信息之间的层级关系，使得复杂的信息结构更易于理解和阅读。
（2）组织复杂内容：对于包含多个层级的信息，如菜单、步骤说明等，嵌套列表能够有效地组织这些内容，提高信息的可读性和可访问性。
（3）样式定制：嵌套列表可以通过CSS进行样式定制，如改变标记的形状、颜色等，以适应不同的设计需求。
总之，HTML嵌套列表是一种强大的工具，用于在网页上展示复杂的信息结构和层级关系，通过合理的嵌套和样式定制，可以显著提升页面的可读性和用户体验。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>嵌套列表示例</title>
</head>
<body>
<h2>全球汇支付向导</h2>
<ul type="circle">
<li>全球汇支付方式</li>
<ul type="disc">
<li>货到付款</li>
<li微信支付</li>
<li>支付宝</li>
<li>网银在线</li>
</ul>
<hr />
<li>网银在线支付步骤:</li>
<ol>
<li>选择您使用的网上银行：</li>
<li>显示您的应付总价，单价"确认无误，付款!"</li>
<li>确定您在银行的预留信息，单击"确定"按钮</li>
<li>支付成功，提示"已完成付款"</li>
</ol>
<dl>
<dt>E-mail:</dt>
<dd>world@163.com</dd>
<dt>传真:</dt>
<dd>0750-3118888</dd>
<dt>地址:</dt>
<dd>广东省东莞市常平镇</dd>
</dl>
</ul>
</body>
</html>
运行结果如图所示：
2.5.综合案例——无线吸尘器说明书
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无线吸尘器说明书</title>
</head>
<body>
<h1>Dyson V8 absolute 无线吸尘器</h1>
<hr color=" deeppink” />
<ul style =" font-size:25px" >
<li type=" square" style=" color:deeppink >商品参数</li>
<p style=" font-size:25px">吸尘器类别:手持式吸尘器<br/>功率:500W<br/>
储尘类型:旋风尘盒/尘桶<br />吸尘类型:干/湿吸均可<br/>
适用面积:91m²-150 m²<br />产品特色:除螨,HEPA滤网<br/>
线长:充电式(无线)<br/>吸嘴类型:圆毛刷<br/>
适用环境:厨房,地板,地毯,床铺,汽车,沙发,瓷砖,酒店<br/>售后服务:海外进口商品不支持国内联保,无法享受与产地同等售后服务<br/>
品牌名称:Dyson<br/>商品名称:我家那闺女Dyson V8 absolute 无线吸尘器<br/>
产地:马来西亚<br />商品编号:V8absoluteUS<br/></p >
<li type = " square"style =" color:deeppink">商品展示</li></ul>
<img src="img/1.jpg""title="无线手持吸尘器”align =" middle"/>
<h2>产品信息</h2>
<p style = " font-size:25px;">品牌:Dyson戴森<br />
品名:无线手持吸尘器美版<br />
型号:V8 Absolute<br />
吸力:高达 115空气瓦特<br />
使用时间:普通模式约40分钟、MAX模式约7分钟<br/>
(电动驱动吸头在非MAX模式下运行约25分钟)<br />
充电时间:约5小时<br />
产品尺寸:长124.4厘米,宽18厘米,高22.4厘米<br />
重量:2.61公斤<br/>
容量:0.54升<br/>
吸头配件:软绒滚筒吸头、升级版直驱吸头、缝隙吸头、<br />
电动床褥吸头、二合一吸头、软除尘毛吊<br />
产品特点:电力升级、新形式集尘桶、双层放射式气旋、HEPA<br />
过滤系统、噪声分贝更小<br />
</p >
<h2>产品特点</h2>
<img src="img/tedian.JPG"width ="750" height=" 450" />"/>
<h2>戴森科技,英国品质</h2>
<p style= " font-size: 25px">戴森V8 美版无绳吸尘器高配版,新的动力设计。<br />
有助吸除家中四处的过敏原,吸附99.97%小至0.3 微米的微尘,<br />
运行时间高达40分钟,2款地板吸头及4款配件吸头,清洁空间高达 291平米。</p >
<img src="img/left.JPG"align=" left" width =" 350" height =" 290" /><br/><br/><h1>
HEPA 过滤系统<br/>
吸附微尘 99.97%小至0.3 微米<br />
米的微尘,减少过敏原回流空至<br />
气中。<br /></h1>
<br />
<br />
<img src="img/canbin.jpg">
"<blockquote style =" font -size: 25px" >官网地址:<a href=" https://shop.dyson.cn/">
https://shop.dyson.cn/</a ></blockquote>
</h1>
</body>
</html>运行结果如图所示：
扫一扫
1863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
