2.1 文字与段落排版
2.1.1 段落标签
段落标签<p>是HTML格式中特有的段落元素，其其语法为：
<p align="left|center|right">文字</p>
属性 align：设置段落文字在网页上的对齐方式，包括left（左对齐）、center（居中）和right（右对齐），默认为left。
格式中的“|”表示或者，级多项选一项。
2.1.2 标题标签
在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题，HTML 会自动在标题前后加一个额外的换行。其格式为：
<h #align="left|center|right">标题文字</h#>
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords"content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="css/index.css" type ="text/css"/>
<script type="text/javascript" src="/js/index.js"></script>
<title>第一个网页</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
我的第一个网页</br>
<p>2023级软件一班</p>
<a href="http://www.baibu.com">百度一下</a>
</body>
</html>
结果：
2.1.3 换行标签
网页内容并不都是像段落那样，有时没有必要用多个<p>标签去分割内容。如果编辑页内容只是为了换行，而不是从新段落开始，可以使用<br/>标签。
<br>标签将打断 HTTML文档中正常段落的行间距和换行。<br/>放在任意一行中都会使该行换行，如果<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。换行标签的语法：
文字<br/>
2.1.4 水平线标签
水平线标签的格式为：
<hr align="left|center|right" size="横线粗细” width="横线长度“ color="横线色彩" noshade="noshade"/>
属性：size：设定线条粗细，以像素为单位
width：设定线条长度
color：设定线条颜色
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页学习</title>
</head>
<body bgcolor="#99ffff" text="blue">
<p>欢迎大家一起开始学习网页制作</p>
<!--水平线-->
<hr size="5" color="#ff3333"/>
</body>
</html>
结果：
2.1.5 预格式化标签
<pre> 标签可定义预格式化的文本。<pre> 标签的一个常见应用就是用来表示计算机的源代码，其语法为：
<pre> 文本块</pre>
2.1.6 缩排标签
<blokquote>标签可定义一个块引用。<blockquote>与</ blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。缩排标签的语法为：
<blockquote>文本</blockquole>
2.1.7 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全球汇商城简介</title>
</head>
<body>
<h1 align="center">100%正品 十重保障</h1>
<hr color="depppink"/>
<p> 全球汇成立于2008年，10年来，凭借独创的特卖模式，精选全球正品好货，深度折扣，在电子商务研究中心2018年6月发布的"2017年度中国网络零售市场数据监测报告"中，全球汇在 B2C 市场交易份额方面发展势头良好，继续保持第三位。<br/>
唯品会是全球最大的特卖电商，以及中国第三大电商。<br/>
</p><br/>
全球汇承诺：
<blockquote>
全球直采：货源保障，全球布局 直采全世界好货。<br/>
入仓全检：质检保障，独立自理仓库 坚持入仓全检验。<br/>
自营物流：物流保障，自营物流封闭操作 全程可溯。<br/>
假货三赔：第三方保障，中国人保正品保险，假货必赔。<br/>
</blockquote>
</body>
</html>结果：
2.2 超链接
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
2.2.2.2 指向其他页面的超链接
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面之间的链接</title>
</head>
<body>
<a href="register.html">免费注册</a><!--链接到同一目录内的网页文件-->
<a href="login.html">账户登录</a><!--链接到同一目录内的网页文件-->
</body>
</html>结果：
2.2.2.3 指向书签的超链接
书签就是用<a>标签对网页元素做一个记号，其功能类似于用于固定船的锚。书签在<a>标签的name属性中定义，语法：
<a name="记号名">目标文本附近的内容</a>
2.2.2.4 指向下载文件的超链接
指向下载文件的超链接语法：
<a href="下载文件名">热点文本</a>
2.2.2.5 指向电子邮件的超链接
指向电子邮件超链接的语法：
<a href="malito：E-mail 地址">热点文本</a>
2.3 图像
2.3.1 网页图像的格式及使用要点
在网页设计中，选择合适的图像格式对于优化网页加载速度和视觉效果至关重要。常见的网页图像格式包括JPEG、PNG、GIF、SVG等，每种格式都有其特定的用途和优势。
-
JPEG：适用于照片和其他具有丰富色彩和渐变效果的图片。JPEG采用有损压缩技术，能在保证一定质量的前提下减小文件大小。这种格式普遍用于显示摄影图片和其他连续色调图像的高级格式，支持24位真彩色，适合对图像颜色要求较高的场景。
-
PNG：支持无损压缩，适用于需要清晰边缘的图像，如图标、按钮等。PNG格式的文件可以保留所有与图像品质有关的信息，同时支持透明度，因此在网页设计中应用广泛。PNG格式的图像适用于需要高清晰度和透明度的场景。
-
GIF：主要用于显示简单的动画图像或包含透明背景的图像。GIF格式支持256色，分为静态GIF和动画GIF两种，适合在网络上展示小一点的动画。GIF格式适用于需要展示动态效果或简单图形时使用。
-
SVG：可缩放矢量图形，适用于需要清晰呈现的图像，如图标和标志等。SVG文件的大小不会因放大而失真，适用于需要高度可伸缩性的场景。SVG格式适用于需要高度可定制和可缩放的图形设计。
选择正确的图片格式不仅能确保图片的显示效果达到最佳状态，还能提高网站的加载速度和性能。同时，使用这些格式时也需要注意遵守相关的版权法规和规定，避免侵犯知识产权
2.3.2 图像标签
2.3.2.1 图像的替换文本说明
在使用<img>标签时，最好同时使用alt属性和title属性，避免因图片路径错误带来的错误信息：同时，增加了鼠标提示信息也方便了浏览者使用。
2.3.2.2 设置图像大小
width和height的单位可以是像素，也可以百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。例如：
<img src="images/waitao.jpg"width="150"height="174">
2.3.2.3 图像的边框
可通过img标签的border属性为图像添加边框，border属性的值用数字表示，单位为像素。
2.3.3 图像超链接
图像也可以作为超链接热点，单击图像则跳转到被链接的文本或其他文件。语法：
<a href="URL"><img src="图像文件名"/></a>
2.3.4 设置网页背景图像
背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。格式：
<body background="背景图像路径">
设置网页背景图像应注意以下要点：
（1）背景图像是否增加了页面的加载时间，背景图像文件大小不应超过10 KB。
（2）背景图像是否与页面中的其他图像搭配良好。
（3） 背景图像是否与页面中的文字颜色搭配良好。
2.3.5 图文混排
2.4 列表
2.4.1 无序列表
设置type属性的方法有两种。
2.4.2 有序列表
有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用＜ol＞标签可以建立有序列表，表项的标签仍为＜I>。
格式：
<ol type="符号类型”>
cli type="符号类型1”>表项1
cli type=”符号类型2”>表项2
</ol>
在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。
有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母和大写罗马字母。<ol>标签的 type 属性用来定义一个有序列表的符号样式，在<o>后指定符号的样式，可设定直到</ol>的表项加重记号。格式：
<oltype =" 1"> 序号为数字
Coltype =" A"> 序号为大写英文字母
<oltype ="a" > 序号为小写英文字母
<oltype="|”> 序号为大写罗马字母
<oltype="i"> 序号为小写罗马字母
在＜i>后指定符号的样式，可设定该表项前的加重记号。在格式上只需把上面的ol 改li.
2.4.3 定义列表
格式：
<dl>
<dt>••⋯第一个标题项⋯••••</dt>
<dd>•对第一个标题项的解释文字……<dd>
<dt>……第二个标题项⋯：</dt>
<dd>.••对第二个标题项的解释文字⋯.</dd>
<dl>
2.4.4 嵌套列表
<!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>
<li>支付成功,提示"已完成付款"。</li>
</ol>
<hr/>
<li>联系我们</li><dl>
<dt>E-mail:</dt>
<dd>worldall@ 163.com</dd>
<dt>传真:</dt>
<dd>0750-3118888</dd>
<dt>地址:</dt>
<dd>广东省江门市江海区五邑路</dd>
</dl>
</ul>
</body>
</html>
</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/>
适用面积：91m2-150m2<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.5厘米，宽18厘米，高22.5厘米<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>结果：
