2.1 文字与段落排版
1.段落标签：<p>...</p>是HTML格式中特有的段落元素，它会根据窗口的宽度自动转换到下一行。
段落标签的语法为：<p align="left|center|right">文字</p>
注：属性align：设置段落文字在网页上的对齐方式，包括left（左对齐），center（居中对齐），right（右对齐），默认为左对齐。
2.标题标签：用加强的效果来表示,标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题，HTML 会自动在标题前后添加一个额外的换行。
语法格式为：<h# align="left|center|right">标题文字</h#>
3.换行标签：，可以使用<br/>标签表示换行。<br/>标签将打断HTML 文档中正常段落的行间距和换行。<br/>放在任意一行中都使该行换行，如果<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一6而又不会在行与行之间留下空行，即强制文本换行。
换行标签的语法为：文字</br>
4.水平线标签：水平线可以作为段落与段落之间的分隔线，使文档结构清晰，层次分明。当浏览器解释到 HTML 文档中的<hr/>标签时，会在此处换行，并加人一条水平线段。
水平线标签的语法格式为：<hr align="left | center | right" size ="横线粗细” width="横线长度”color="横线色彩" noshade="noshade" />
注：属性 size:设定线条粗细，以像素为单位，默认值为 2。
属性 width:设定线段长度，可以是绝对值 (以像素为单位) 或相对值(相对于当前窗口的百分比)。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指线段的长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终当前窗口。
属性 color: 设定线条色彩，默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示。
5.预格式化标签：<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码。
语法格式为：<pre>文本</pre>
6.缩排标签：<blockquote>标签可定义一个块引用。<blockquote>与</ blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
语法格式为：<blockquote>文本</blockquote>
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/>
唯品会是全球最大的特卖电商,以及中国第三大电商
</p ><br />
全球汇承诺:
<blockquote>
全球直采:货源保障,全球布局 直采全世界好货。<br />
入仓全检:质检保障,独立自理仓库 坚持入仓全检验。<br />
自营物流:物流保障,自营物流封闭操作 全程可溯。<br />
假货必赔:第三方保障,中国人保正品保险,假货必赔。<br/>
</blockquote>
</body>
</html>运行结果如下：
2.2 超链接
1.超链接定义：是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个程序。
2.超链接分类：根据超链接目标文件的不同，超链接可分为页面超链接、错点超链接和电子邮件超链接等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。
3.路径：URL--统一资源定位器，指的就是每一个网站都具有的独立的地址。。同一个网站下的每一个网页都属于同一个地址下。创建超链接时必须了解链接与被链接文本的路径。
（1）绝对路径：绝对路径就是主页上的文件或目录在硬盘上真正的路径(URL和物理路径）。
（2）根目录相对路径：根目录相对路径是指从站点根文件夹到被链接文档经过的路径。站点上所有公开的文件都存放在站点的根目录下。站点根目录相对路径以一个正斜杠(/)开始。
（3）文档目录相对路径：它是相对于某个基准目录的路径，以当前文件所在的路径为起点，进行相对文件的查找。相对路径适合于创建网站内部链接。
3.锚点标签：超链接的另外一个叫法称为锚，它是使用<a>标签标记的，，可以用两种方式表示，一是通过使用<a>标签的 href 属性来创建超文本链接，以链接到同一文档的其他位置或其他文栏中，在这种情况下，当前文档就是链接的源，href 属性的值就是 URL的目标;二是通过使用<a>标签的name属性或id 属性在文档中创建一个文档内部的书签。
锚点标签的语法为：<a href="url” title="指向链接显示的文字" target="窗口名称">文本文字</a>
建立超链接时，href属性定义了这个超链接所指的目标地址，也就是路径。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL。
4.指向其他页面的超链接：创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有 4 种写法。注意，应该尽量采用相对路径。
（1）链接到同一目录内的网页文件，
语法为：<a href="目标文件名,html">热点文本</a>
（2）链接到下一级目录中的网页文件，
语法为：<a href="子目录名/目标文件名,html">热点文本</a>
（3）链接到上一级目录中的网页文件，
语法为：<a href="../目标文件名,html">热点文本</a>
（4）链接到同级目录中的网页文件，
语法为：<a href="../子目录名/目标文件名,html">热点文本</a>
5.指向书签的超链接：书签就是用<a>标签对网页元素作一个记号，其功能类似于用于固定船的锚，所以书签也称锚记或锚点。如果页面中有多个书签链接，对不同目标元素要设置不同的书签名。书签名在<a>标签的name 属性中定义。
语法为：<a name="记号名">目标文本附近的内容</a>
（1）指向页面内书签的超链接：要在当前页面内实现书签超链接，需要定义两个标签：一个为超链接标签，另一个为书签标签。
超链接标签的格式:<a href="记号名">热点文本</a>
即单击“热点文本”，将跳转到“记号名”开始的网页元素。
（2）指向其他页面书签的超链接：。书签超链接还可以在不同页面间进行链接。。当单击
书签超链接标题，页面会根据超链接中的 href属性所以定的地址，将网页跳转到目标地址中书签名称所表示的内容。要在其他页面内实现书签链接，需要定义两个标签:一个为当前页面的超链接标签，另一个为跳转页面的书签标签。
当前页面的超链接标签的语法:<a href="目标文件名.html#记号名”>热点文本</a>
6.指向下载文件的超链接：语法为：<a href="下载文件名"热点文本</a>
7.指向电子邮件的超链接：语法为：<a href=" mailto: E-mail 地址"＞热点文本</a>
2.3 图像
1.常用图像格式：
（1)GIF:GIP 是Internet 上应用最广泛的图像文件格式之一，是一种素引颜色的图像
格式，此格式在网页中使用较多。它的特点是体积小，支持小型翻页型动画，CIF 图像最多
可以使用 256 种颜色，最适合制作徽标、因标、按钮和其他颜色、风格比较单一的图片。
(2)JPEG:JPEC 是Intemet 上应用最广泛的图像文件格式之一，适用于摄影或连续色
调因像。JPEG 文件可以包含多达数百万种颜色，因此 JPG 格式的文件体积较大，图片质量
较佳，通常可以通过压缩JPG 文件在图像品质和文件大小之间取得良好的平衡。当网页中
对图像的质量有要求时，建议使用此格式。
(3)PNG:PNG 是
一种新型的无专利权限的图像格式，兼有 GIP 和 JPC 的优点。它的
显示速度很快，只需下载1/64 的图像信息就可以显示出低分辦率的预览图像。它可以用来
代替 CIP格式，同样支持透明层，在质量和体积方面都具有优势，适合在网络中传输。
2.使用网页图像的要点：（1） 高质量的图像因其图像体积过大，不太适合网络传输。
(2）网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站
访客的注意力。
(3)如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。
3.图像标签：在HTML中，用<img>标签在网页中添加图像，图像是以嵌入的方式添加到网页中的。
图像标签的格式:<img src="图像文件名” alt="替代文字 title="鼠标悬停提示文字” width="图像宽度”height="图像高度" border="边框宽度" align="环绕方式|对齐方式"/>
4.设置图像大小：在HTML中，通过img标签的属性 width 和 height 来调整图像大小，其目的是通过图像的高度和宽度加快图像的下载速度。默认情况下，页面中显示的是图像的原始大小，如果不设置 width和 height属性，浏览器就要等到图像下载完毕才显示网页，因此延缓其他页面元素的显示。
width 和 height 的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。
5.图像的边框：可以通过 img标签的 border 属性为图像添加边框，添加边框后的图像显得更醒目、美观。
6.图像超链接：图像也可作为超链接热点，单击图像则跳转到被链接的文本或其他文件。
语法为：<a href="URL">< img src="图像文件名"/></a>
7.设置网页背景图像：在网页中可以利用图像作为背景，但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框，这样有利于生成无缝背景。
格式为：<body background="背景图像路径">
设置网页背景图像应注意以下要点:
(1)背景图像是否增加了页面的加载时间，背景图像文件大小不应超过 10 KB。
(2) 背景图像是否与页面中的其他图像搭配良好。
(3) 背景图像是否与页面中的文字颜色搭配良好。
8.图文混排：图文混排技术是指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式。在制作网页时往往要在网页中的某个位置插人一个图像，使文本环绕在图像的周围。。img标签的align 属性用来指定图像与周围元素的对齐方式，实现图文混排效果。
与其他元素不同的是，图像的 align 属性既包括水平对齐方式，又包括垂直对齐方式，align 属性的默认值为 bottom。
2.4 列表
1.无序列表：无序列表，就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈和方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰、更合理。
当创建一个无序列表时，主要使用 HTML 的u>标签和<li>标签来标记。其中<ul>标签标识一个无序列表的开始;<li>标签标识一个无序列表项。
格式为：<ul type="符号类型">
<li type="符号类型1">第一个列表项 </li>
<li type="符号类型2">第二个列表项 </li>
....
</ul>
<ul>标签的 type 属性用来定义一个无序列表的前导字符，如果省略了 type 属性，浏览器会默认显示为 disc 前导字符。type 取值可以为 disc(实心圆)、circle (空心圆)、square(方框)。
2.有序列表：有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用<ol>标签可以建立有序列表，表项的标签仍为<li>。
格式为：<ol type="符号类型">
<li type="符号类型1">第一个列表项
<li type="符号类型2">第二个列表项
....
</ol>
在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白;列表项目向右缩进并左对齐:各表项前带顺序号。
有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母和大写罗马字母。<ol>标签的 type 属性用来定义一个有序列表的符号样式，在<ol>后指定符号的样式，可设定直到</ol>的表项加重记号。
3.定义列表：定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一列实物以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签:<dl>标签，<dt>和<dd>标签。可以使用dl 创建自定义列表，使用dt 和dd 定义列表中具体的数据项。
一般情况下使用dt定义列表的二级列表项，也可以认为是 dd 的一个概要信息，使用dd来定义最底层的列表项。
格式为：<dl>
<dt>......第一个标题项......</dt>
<dd>.....·对第一个标题项的解释文字......</dd>
<dt>......第二个标题项......</dt>
..........
<dd>.....·对第二个标题项的解释文字......</dd>
</dl>
默认情况下，浏览器一般会在左边界显示条目的名称，并在下一行缩进显示其定义或解释。如果<dd>标签中内容很多，可以嵌套<p>标签使用。
4.嵌套列表：所谓嵌套列表，就是无序列表与有序列表出嵌套混合使用。嵌套列表可以把页面分为多个层次，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可分为无序列表中嵌套无序列表、有序列表中嵌套有序列表、无序列表中嵌套有序列表、在有序列表中嵌套无序列表等方式。
例：
<ul>
<li>第一项
<ul>
<li>子项一</li>
<li>子项二</li>
</ul>
</li>
<li>第二项</li>
</ul>
运行结果如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
