2.1 文字与段落排版

2.1.1 段落标签

由于浏览器忽略用户在HTML编辑器中输入的回车符，为了使文字段落排列整齐，清晰常用段落标签

.....

这其中还有属性align：设置段落文字在网页上的对齐方式，包括left（左对齐）center（居中）right（右对齐），其中默认为left。格式中的 “ | ” 表示 “或者”，即多项选其一。

2.1.2 标题表签

标题是一段文字的核心内容，所以总是用加强的效果来表示。共分为6个标题，用

至

标签进行定义，从1到6逐渐变小。标题也可添加属性align

一级标题

二级标题

三级标题

2.1.3 换行标签

网页内容如果不是段落而是简单换行时，可以使用
标签。
标签是强制文本换行，无论放在哪一行，都会使该行换行

2.1.4 水平线标签

水平线可作为段落与段落之间的分割线，使文档结构清晰，层次分明。

标签格式：

属性size：设定线条粗细，以像素为单位，默认为2

属性width ：设置线段长度，可以是绝对值（长度不随窗口改变而改变）或相对值（随着窗口的宽度改变而改变）

属性color：设定线条颜色，默认为黑色。

2.1.5 预格式化标签

标签可定义预格式化的文本。









预格式化文件可保留 空格以及
换行


2.1.6 缩排标签
标签可以定义一个块引用。所有在
标签中的文本都会分离常规文本

在左右进行缩进，拥有自己的空间。
2.1.7 案例
使用文字与段落的基本排版知识制作 “全球汇商城简介界面”







100%正品 十重保障


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

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



全球汇承诺：

全球直采：货源保障，全球布局 直采全世界好货。

入仓全检：质检保障，独立自理仓库 坚持入仓全检验。

自营物流：物流保障，自营物流封闭操作 全程可溯。

假货必赔：第三方保障，中国人保正品保险，假货必赔。




2.2 超链接
2.1.1 超链接简介
2.1.1.1 超链接的定义
所谓超链接(Hyperlink)，是指从一个网页指向一个目标的连接关系，这个目标可以是 用另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一 标签之个文件，甚至是一个应用程序。
超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以 一个不将网站建设成一个丰富多彩的多媒体世界。当网页中包含超链接时，其外观形式为彩色 属（一般为蓝色）且带下划线的文字或图像。单击这些文本或图像，可跳转到相应位置。鼠标指针指向超链接时，将变成手形。
2.1.1.2 超链接的分类
根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接
等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。
2.1.1.3 路径
URL——统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的 (1每一个网页都属于同一个地址下，但是，当创建网页时，不可能也不需要为每一个链接都输 
创建超链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示 (2方式：绝对路径、根目录相对路径和文档目录相对路径。 
(1)绝对路径。绝对路径就是主页上的文件或目录在硬盘上真正的路径(URL和物理 (3路径)。例如，D:\ web \ index.html 代表了 index.html文件的物理绝对路径；http:// www.haol23.com/index.html代表了一个URL绝对路径。

(2)根目录相对路径。根日录相对路径是指从站点根文件夹到被链接文档经过的路径。站点上所有公开的文件都存放在站点的根目录下。站点根目录相对路径以一个正斜杠 表(/)开始。例如，/support/tips.htm是文件(tips.htm)的站点根目录相对路径，该文件位于站点根文件夹的support子文件夹中。
(3)文档目录相对路径。它是相对于某个基准目录的路径，以当前文件所在的路径为起点，进行相对文件的查找。相对路径适合于创建网站内部链接。
2.2.2 超链接的应用
超链接的另外一个叫法称为锚，它是使用标签标记的，可以用两种方式表示，一是通过使用标签的href属性来创建超文本链接，以链接到同一文档的其他位置或其他文档中，在这种情况下，当前文档就是链接的源，href属性的值就是URL的目标；二是通过使用标签的name属性或id属性在文档中创建一个文档内部的书签。

2.2.2.1 锚点标签···
HTML使用标签来建立一个链接，通常标签又称为锚。建立超链接的标签以开始，以结束。锚可以指向网络上的任何资源：一张HTML页面、一幅图像、一个声音或视频文件等。标签的语法：文本文字
用户可以单击和标签之间的文本文字来实现网页的浏览访问，通常和标签之间的文本文字用颜色和下划线加以强调。

建立超链接时，href属性定义了这个超链接所指的目标地址，也就是路径。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL。
属性target：设定链接被单击后所要开始窗口的方式有以下4种：
(1)blank。在新窗口中打开被链接的文档。
(2)self。默认值。在相同的框架中打开被链接的文档。
(3) parent。在父框架集中打开被链接的文档。
(4) top。在整个窗口中打开被链接的文档。
2.2.2.2 指向其他页面的超链接
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有4种写法。注意，应该尽量采用相对路径。
(1)链接到同一目录内的网页文件，语法：
热点文本
其中，“目标文件名”是链接所指向的文件。
(2)链接到下一级目录中的网页文件，格式：
热点文本
(3)链接到上一级目录中的网页文件，语法：
热点文本
其中，“../”表示退到上一级目录中
(4)链接到同级目录中的网页文件，格式：
热点文本
表示先退到上一级目录中，然后再进入目标文件所在的目录。







免费注册
账户登录


2.2.2.3 指向书签的超链接
指向页面内书签的超链接。要在当前页面内实现书签超链接，需要定义两个标签：
一个为超链接，另一个为书签标签。超链接标签的格式：
热点文本
即单击“热点文件”，将跳转到“记号名”开始的网页元素
2.2.2.4 指向下载文件的超链接
如果希望制作下载文件的超链接，只需在链接地址输入文件所在的位置，当用户单击超链接后，浏览器会自动判断文件类型，已做出不同情况的处理。
语法：热点文件
2.2.2.5 指向电子邮件的超链接
网页中电子邮件地址的超链接，可以使网页浏览者将有关信息以电子邮件的形发送给电子邮件的接收者，通常情况下，接收者的电子邮件地址位于网页页面的底部。
指向电子邮件超链接的语法：
例如，E-mail地址是gdnanfang@163.com，可以建立如下超链接：
电子邮箱：和我联系
2.3 图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
图像文件的格式很多，但一般在网页中使用的图片格式并不多，主要有GIF;JPEG;PNG。下面进行简单的介绍，以便初学者在网页制作过程中做出合适的选择。
(1)GIF。GIF是 lnternet上应用最广泛的图像文件格式之一，是一种索引颜色的图像2008年、 格式，此格式在网页中使用较多。它的特点是体积小，支持小型翻页型动画，GIF图像最多的"2017 可以使用256种颜色，最适合制作徽标、图标、按钮和其他颜色、风格比较单一的图片。第三位。 (2) JPEG。JPEG 是 Internet上应用最广泛的图像文件格式之一，适用于摄影或连续色调图像。JPEG文件可以包含多达数百万种颜色，因此JPG格式的文件体积较大，图片质量国第三 较佳，通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡。当网页中对图像的质量有要求时，建议使用此格式。
(3)PNG。PNG是一种新型的无专利权限的图像格式，兼有CIF和JPG的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。它可以用来代替GIF格式，同样支持透明层，在质量和体积方面都具有优势，适合在网络中传输。
2.3.1.2 使用网页图像的要点
(1)高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选图像不要超过8KB，如必须选用较大图像时，可先将其分成若干小图像，显示时再通过将这些小图像拼合起来。
(2)网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。
(3)如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。例如，文件X.Y与A文件夹在同一目录下，那么文件B.A在目录A下的B文件夹中，它对于文件X.Y送给电 的相对路径则为A/B/B.A
2.3.2 图像标签
用标签在网页中添加图像，以嵌入的方式添加到网页中的。

需要注意的是，在width和height中，若只设置其中一个属性，则另一个会根据已设置的属性按原图等比例显示。若两属性都对其进行设置，且比例与原图大小不一，则会导致图片较原图失真或变形。以下是常用属性表
属性说明src指定图像源，即图像的URL路径alt如果图像无法显示，代替图像的说明文字title为浏览者提供额外的提示或帮助信息，方便用户使用width指定图像的显示宽度(像素数或百分数)，通常只设为图像的真实大小以免失真。若需width 要改变图像大小，最好事先使用图像编辑工具进行修改。百分数是指相对于当前浏览器窗
口的百分比height指定图像的显示高度（像素数或百分数）border指定图像的边框大小，用数字表示，默认单位为像素，默认情况下图片没有边框，即
border=0align指定图像的对齐方式，设定图像在水平(环绕方式)或垂直方向(对齐方式)上的位align 置，包括left图像居左，文本在图像的右边）、right（图像居右，文本在图像的左边）、top
(文本与图像在顶部对齐)、middle(文本与图像在中央对齐)或bottom(文本与图像在底
部对齐)2.3.2.1 图像的替换文本说明
有时，由于网速过慢或者用户在图片还没有下载完全就单击了浏览器的停止键，在浏览器中就看不到要看到图片，这时替换文本说明就十分有必要了。替换文本说明应该简洁而清晰 能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息。
2.3.2.2 设置图像大小
在HTML中，通过img标签的属性width和height来调整图像大小，其目的是通过图像的高度和宽度加快图像的下载速度。默认情况下，页面中显示的是图像的原始大小，如果不设置width和height属性，浏览器就要等到图像下载完毕才显示网页，因此延缓其他页面元素的显示。
width和height的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。例如，设置宽松羽绒服面包服图像的宽度和高度。代码如下：< img src="images/waitao. jpg" width="150" height="174">
2.3.2.3 图像的边框
可以用border标签为图片添加边框使其更加美观。
border属性的值用数字表示，单位为像素；默认情况下图像没有边框，即border=0；像边框的颜色不可调整，默认为黑色：当图片作为超链接使用时，图像边框的颜色和文字超链接的颜色一致，默认为深蓝色。
2.3.3 图像超链接
图像也可作为超链接热点，单击图像则跳转到被链接的文本或其他文件。语法：44 < img src="图像文件名"/>
例如，制作产品图像的超链接，代码如下：

< img sre="images/ waitao.jpg”alt="宽松羽绒服面包服”title="宽松羽绒服面包服”/>

去除图像超链接边框的方法是为图像标签添加样式style="border:none”，代码如下：

< img src="images/waitao.jpg"alt="宽松羽绒服面包服"title="宽松羽绒服面包服”style=" border: none"/>

2.3.4 设置网页背景图像
在网页中可以利用图像作为背景，但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框，这样有利于生成无缝背景。
背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。格式：

设置网页背景图像应注意以下要点：
(1)背景图像是否增加了页面的加载时间，背景图像文件大小不应超过10KB。
(2)背景图像是否与页面中的其他图像搭配良好。
(3)背景图像是否与页面中的文字颜色搭配良好。







免费注册
账户登录



2.3.5 图文混排
图文混排技术是指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式。在制作网页时往往要在网页中的某个位置插入一个图像，使文本环绕在图像的周围。img标签的align属性用来指定图像与周围元素的对齐方式，实理图文混排效果。
align的取值说明left在水平方向上左对齐center在水平方向上居中对齐
right
在水平方向上右对齐top图片顶部与同行其他元素顶部对齐middle图片顶部与同行其他元素中部对齐bottom图片顶部与同行其他元素底部对齐示例：







商品描述



产地：新西兰奶粉配方：常规配方

包装：罐装适用人群：婴幼儿

供货渠道：海外原装品牌名称：Aptamil

商品名称：澳洲Aptamil金装婴幼儿配方奶粉3段900克保质期：18个月

成分:矿物质(1.2%), 维生素(0.10%), 奶粉(全脂奶粉、益生元、鱼油)(98.7%)

生产日期：2018年4月(具体以收到实物为准)










商品描述



院校名称：江西应用工程职业学院

办学宗旨：以人为本 培养高素质高技能人才

校训：爱国明志 敢为人先

校园精神：诚朴坚卓 达谦智勇

江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。

办学宗旨：以人为本 培养高素质高技能人才

校训：爱国明志 敢为人先

校园精神：诚朴坚卓 达谦智勇



2.4 列表
2.4.1 无序列表
无序列表，就是列表中列表项的的导行以没作一定的伙序，而是川供点、叫脚和万框等
一些特殊符号标识。无序列表并不是使列表项张队无章，而是使列表项的结构更清晰、更合理。








无序列表第一项

无序列表第二项

无序列表第三项







2.4.1.1 在
后指定符号的样式

在
后指定符号的样式，可设定直到
的加重符号。

 符号为实心圆点

 符号为空心圆点

 符号为方块

 符号为实心圆点

 符号为空心圆点O

 符号为方块

 符号为指定的图片文件

2.4.2 有序列表
有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用
标签可以建立有序列表，表项的标签仍为
。格式：


表项1

表项2

……
<

在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐：各表项前带顺序号。
有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母和大写罗马字母。
标签的type属性用来定义一个有序列表的符号样式，在
后指定符号的样式，可设定直到
的表项加重记号。格式：

 序号为数字
 序号为大写英文字母
 序号为小写英文字母
 序号为大写罗马字母
 序号为小写罗马字母
在cli>后指定符号的样式，可设定该表项前的加重记号。在格式上只需把上面的ol改li
2.4.3 定义列表
定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一列实物以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签：
标签
和
标签。可以使用dl创建自定义列表，使用dt和dd定义列表中具体的数据项，一般情况下使用dt定义列表的二级列表项，也可以认为是dd的一个概要信息，使用dd来定义最底层的列表项。格式：



..……对第一个标题项的解释文字.....…

.....
..…对第二个标题项的解释文字....(/dd>


默认情况下，浏览器一般会在左边界显示条目的名称，并在下一行缩进显示其定义或
释。如果
标签中内容很多，可以嵌套
标签使用。
2.4.4 嵌套列表
所谓嵌套列表，就是无序列表与有序列表出嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可分为无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套有序列表、在有序列表中嵌套无序列表等方式，需要灵活掌握。
2.5 综合案例——无线吸尘器说明书
!DOCTYPE html>






Dyson V8 absolute 无线吸尘器


商品参数

吸尘器类别：手持式吸尘器
功率:500 W

储尘类型：旋风尘盒/尘桶
吸尘类型：干/湿吸均可

适用面积:91 m2-150 m2
产品特色：除螨, HEPA 滤网

线长：充电式（无线）
吸嘴类型：圆毛刷

适用环境：厨房，地板，地毯，床铺，汽车，沙发，瓷砖，酒店
售后服务：海外进口商品不支持
国内联保，无法享受与产地同等售后服务

品牌名称：Dysoncbr/>商品名称：Dyson V8 absolute 无线吸尘器cbr />
产地:马来西亚
商品编号：V8absoluteUSc

商品展示


产品信息

品牌：Dyson 戴森

品名：无线手持吸尘器美版

型号:V8 Absolute

吸力：高达115空气瓦特

使用时间：普通模式约40分钟、MAX模式约7分钟cbr />（电动驱动吸头在非MAX模式下运行约25分钟）
充电时间：约5小时

产品尺寸:长124.4厘米，宽18厘米，高22.4厘米

重量：2.61公斤

容量:0.54升

吸头配件：软绒滚简吸头、升级版直驱吸头、缝隙吸头、

电动床褥吸头、二合一吸头、软除尘毛吊

产品特点：电力升级、新形式集尘桶、双层放射式气旋、HEPA

过滤系统、噪声分贝更小


产品特点


戴森科技，英国品质

戴森 V8 美版无绳吸尘器高配版，新的动力设计。

有助吸除家中四处的过敏原，吸附 99.97%小至0.3 微米的微尘，

运行时间高达40分钟,2款地板吸头及4款配件吸头,清洁空间高达291平米。




HEPA 过滤系统

吸附微尘99.97%小至0.3微米
米的微尘，减少过敏原回流空至
气中。






官网地址：

https://shop.dyson.cn/