第二章 网页制作的排版方法

2.1 文字与段落排版

2.1.1 段落标签

在HTML（HyperText Markup Language，超文本标记语言）中，用于定义段落的标签是<p>。这个标签用于创建文本的一个段落。每个<p>标签内的内容默认会在其前后添加一些垂直间距（即外边距），以区分不同的段落。段落标签的语法为：

<p align="left center right">文字<p>

属性align:设置段落文字在网页上的对齐方式，center(居中)  left(左对齐) right(右对齐)，默认left。

示例：

 本例代码效果图如下：

 2.1.2 标题标签

HTML中的标题标签用于定义网页内容的标题。这些标题标签按照重要性递减的顺序，从 <h1> 到 <h6>。<h1> 是最重要的标题，通常用于主标题或页面标题，而 <h6> 是最不重要的标题，可能用于小节标题或次要内容。

标题标签的用途

结构清晰：通过不同级别的标题，可以帮助读者和搜索引擎更好地理解网页的结构和内容层次。
SEO（搜索引擎优化）：搜索引擎使用标题标签来索引网页内容，<h1> 标签尤为重要，因为它通常表示页面的主要主题。
无障碍性：屏幕阅读器等辅助技术依赖标题标签来识别页面内容的结构，从而帮助视障用户更好地理解网页
标题标签的语法为：

<h# align="left center right">标题文字<h#>

属性align:设置段落文字在网页上的对齐方式，center(居中)  left(左对齐) right(右对齐)，默认left。

示例：

 2.1.3 换行标签
在HTML中，换行标签通常指的是<br>标签（代表“break”的缩写）。这个标签用于在文本中插入一个简单的换行（即，不进行段落的分隔，只是换行），而不是开始一个新的段落。<br>标签是一个空元素，意味着它不需要结束标签。换行标签的语法：

文字<br />

示例：

 本例代码效果图如下：

2.1.4 水平线标签 

在HTML中，用于创建水平线的标签是<hr>。这个标签主要用于在文档中插入一条水平线，通常用于分隔文档中的不同部分，如章节、段落或内容块。<hr>标签是一个空元素，意味着它不需要结束标签（即不需要</hr>）。

<hr>标签的基本用法：
代码如下：

本例代码效果图如下：

 2.1.5 预格式化标签
在HTML中，用于预格式化的标签是<pre>。<pre>标签会保留文本中的空格、制表符（tab）和换行符，正如文本在源代码中所写的那样显示在页面上。这对于显示程序代码、ASCII艺术或任何需要精确格式控制的文本非常有用。

<pre>标签内的文本通常显示为等宽字体（monospaced font），这有助于保持字符之间的对齐，使得代码或文本更容易阅读。

<pre>标签的基本用法。

代码如下：

  本例代码效果图如下：

 2.1.6 缩排标签
<blockquote>标签通常包含来自另一个源的引用，如书籍、报纸、网站等。它可以帮助读者区分原始内容和引用内容，并且有时浏览器会默认添加一些样式（如引号、缩进或不同的字体）来突出显示这些内容。

标题标签的语法为：

<blockquote>文本</blockquote>

 代码如下：

   本例代码效果图如下：

 2.1.7 案例

使用文字与段落的基本排版知识制作“全球汇商城简介页面”。

代码如下：

  本例浏览效果图如下：

 2.2 超链接

2.2.1 超链接简介
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页和网页应用程序的标准标记语言。超链接（Hyperlinks）是HTML中一个非常重要的概念，它允许用户点击一个链接跳转到不同的页面或页面内的某个部分。超链接不仅限于文本，还可以是图片、按钮等元素。

超链接的基本语法

超链接主要通过<a>标签来定义，其基本语法如下：

<a href="URL">链接文本或图片</a>
href属性指定了链接的目标地址（URL）。它可以是同一网站内的页面地址，也可以是另一个网站的地址。
链接文本或图片是用户点击的部分，可以是普通的文本，也可以是<img>标签定义的图片等

 2.2.2 超链接的应用

1.锚点标签

在HTML中，锚点（Anchor）标签通常指的是<a>标签的一种特殊用法，它不仅可以用来创建指向其他网页或网站的超链接，还可以用来创建指向同一页面内某个部分的链接。这种在同一页面内部进行跳转的链接，通常被称为页面内的锚点链接。

代码如下：

2.指向其他页面的超链接
在HTML中，指向其他页面的超链接是通过<a>标签（anchor标签）实现的。<a>标签的href属性用于指定链接的目标URL。当用户在网页中点击这个链接时，浏览器会加载并显示href属性中指定的URL所指向的页面。

代码如下：

在这个例子中，<a>标签的href属性被设置为"about.html"，这是指向同一网站目录下名为about.html的文件的链接。用户点击“关于我们”这几个字时，浏览器就会尝试加载并显示about.html页面的内容。

3.指向书签的超链接 
在HTML中，指向书签（也称为锚点）的超链接允许用户点击链接后直接跳转到同一页面上的特定部分。要实现这一点，你需要在目标元素上使用id属性作为书签的标识符，并在<a>标签的href属性中使用#后跟该id值来创建指向该书签的链接。

代码如下：

 4.指向下载文件的超链接 

在HTML中，指向下载文件的超链接与指向网页的超链接类似，但href属性中包含了要下载文件的URL。当用户点击这样的链接时，浏览器会尝试下载指定的文件，而不是在浏览器中打开它（这取决于文件的类型以及浏览器的设置）。

代码如下：

 5.指向电子邮件的超链接 
在HTML中，指向电子邮件的超链接并不是直接通过<a>标签的href属性中的URL来实现的，因为电子邮件不是一个网页地址。但是，你可以使用mailto:协议来创建一个指向电子邮件的超链接。当用户点击这样的链接时，他们的默认邮件客户端（如Outlook、Gmail的网页版或Apple Mail）会被打开，并创建一个新的邮件，邮件的收件人地址已经预先填写好了。

代码如下：

 2.3 图像

2.3.1 网页图像的格式及使用要点

1、常见网页图像格式
JPEG（JPG）
特点：JPEG格式对色彩的信息保留较好，支持丰富的色彩和渐变效果，适用于照片和其他具有复杂色彩和细节的图像。
使用要点：JPEG采用有损压缩技术，可以在保证一定质量的前提下减小文件大小，适合在网页上展示高质量的图片，但需要注意避免过度压缩导致图像质量下降。
PNG
特点：PNG格式支持无损压缩，适用于需要清晰边缘的图像，如图标、按钮等。PNG-24还支持真彩色和透明度，非常适合需要透明背景的图像。
使用要点：PNG格式的文件通常比JPEG大，因此在选择使用PNG格式时需要考虑网页的加载速度。对于需要透明背景的图像，PNG是首选格式。
GIF
特点：GIF格式最多只能存储256色，因此色彩表现不如JPEG和PNG丰富。但其优势在于可以保存透明背景和动画效果，非常适合用于简单的动画图像或表情包。
使用要点：GIF格式的文件通常较小，适合在网络上快速传输。但由于色彩限制，它不适合用于色彩丰富的图像。
SVG
特点：SVG是可缩放矢量图形，与像素图像不同，SVG文件的大小不会因放大而失真。它非常适合用于图标、标志等需要清晰呈现的图像。
使用要点：SVG格式的文件可以通过文本编辑器进行编辑，具有高度的可编辑性和可访问性。在响应式设计中，SVG能够保持图像的清晰度，提升用户体验。
PSD
特点：PSD是Photoshop的专用格式，里面可以存放图层信息、通道、遮蔽等多种设计稿。对于前端开发人员来说，可以直接从上面复制文字、获得图片，还可以测量大小距离。
使用要点：PSD格式主要用于设计过程中的图像编辑和保存设计稿，不建议直接在网页中使用。如果需要在网页上展示PSD格式的图像，需要先将其导出为其他适合网页的格式。
2、使用要点
选择合适的格式：根据图像的类型和用途选择合适的格式。例如，对于照片和复杂图像，JPEG是较好的选择；对于需要透明背景的图像，PNG或SVG更合适；对于简单的动画或表情包，GIF是不错的选择。

优化图像：在将图像上传到网页之前，需要对其进行优化以减小文件大小，提高加载速度。这包括调整图像尺寸、压缩图像质量、去除不必要的元数据等。

遵守版权法规：在使用图像时，需要确保拥有合法的使用权，避免侵犯他人的版权。如果需要使用他人的图像，应事先获得授权或购买合法授权的图像。

考虑响应式设计：在响应式网页设计中，需要确保图像能够适应不同设备和屏幕尺寸的显示需求。这可以通过使用CSS媒体查询、图片懒加载等技术来实现。

2.3.2 图像标签 
HTML中用于插入图像的标签是<img>。这个标签允许你在网页上嵌入图片。<img>标签是一个空元素，意味着它不需要结束标签（即没有</img>）。相反，所有必要的信息都包含在标签的属性中。

<img>标签的主要属性包括：

src（必需）：指定图像的URL地址。这是图像文件的路径，可以是相对路径或绝对路径。

alt（推荐）：为图像提供替代文本。如果图像因为某种原因无法显示（比如网络问题或用户使用了屏幕阅读器），alt属性中的文本将被显示或读出。这对于提高网站的可访问性非常重要。

width 和 height：设置图像的宽度和高度。这些值可以是像素值（如width="100"）或百分比（如width="50%"）。虽然这些属性不是必需的，但指定它们可以帮助浏览器更好地布局页面，因为浏览器可以在图像加载之前预留出空间。

title：提供图像的额外信息，当鼠标悬停在图像上时，这些信息会以工具提示的形式显示

 <img>标签的语法格式：

1.图像的替换文本说明 
在HTML中，图像的替换文本（Alternative Text）是通过<img>标签的alt属性来提供的。这个属性对于图像无法显示的情况特别重要，因为它为图像提供了替代的文本说明。这些情况可能包括：

图像文件不存在：如果指定的图像文件路径错误或文件本身不存在，浏览器将不会显示图像，而是显示alt属性中提供的文本。

网络问题：如果用户的网络连接出现问题，导致图像无法加载，alt文本将作为图像的占位符显示。

屏幕阅读器：对于使用屏幕阅读器的视障用户来说，alt文本是他们了解图像内容的重要途径。屏幕阅读器会读取alt属性中的文本，以便用户能够理解图像所传达的信息。

搜索引擎优化（SEO）：搜索引擎无法直接“看到”图像，但它们可以读取alt文本。因此，为图像提供描述性的alt文本有助于搜索引擎理解图像的内容，并可能提高网站在搜索结果中的排名。

包含alt属性的<img>标签的语法格式：

2.设置图像大小

在<img>标签中使用width和height属性来直接设置图像的大小。

代码如下：

3. 图像的边框

在<img>标签的style属性中直接使用CSS的border属性来添加边框。

代码如下：

2.3.3 图像的超链接

在HTML中，你可以将图像（<img>标签）包裹在超链接（<a>标签）内，以创建可点击的图像链接。当用户点击图像时，浏览器会导航到你在<a>标签的href属性中指定的URL。

代码如下：

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

格式：

< body background = "背景图像路径" >

 2.3.5 图文混排

在HTML中实现图文混排，主要涉及到<img>标签（用于插入图像）与文本内容的排列。图文混排可以通过CSS（层叠样式表）来控制图像和文本的相对位置、间距、对齐方式等，以达到预期的视觉效果。

代码示例：

 示例效果图如下：

2.4 列表 

2.4.1 无序列表
HTML中的无序列表是通过<ul>（unordered list）标签来定义的，每个列表项则是通过<li>（list item）标签来定义的。无序列表中的项目默认以圆点（bullet points）作为标记，但你可以通过CSS来改变这些标记的样式。

下面是一个简单的无序列表的HTML示例：

 代码效果图如下：

 2.4.2 有序列表
 HTML中的有序列表（Ordered List）是通过<ol>标签来定义的，而列表中的每个项目则是通过<li>（list item）标签来指定的。与无序列表（<ul>）不同，有序列表中的项目会按照数字顺序（默认为1, 2, 3...）自动编号。

下面是一个简单的无序列表的HTML示例：

  代码效果图如下：

 2.4.3 定义列表
HTML中的定义列表（Definition List）是一种用于展示术语及其定义或描述的列表。它通过使用<dl>（definition list）、<dt>（definition term）和<dd>（definition description）标签来创建。<dl>标签定义了一个定义列表，<dt>标签定义了列表中的术语（或名称），而<dd>标签则提供了该术语的定义或描述。

下面是一个定义列表的HTML示例：

   代码效果图如下：

2.4.4 嵌套列表 
HTML中的嵌套列表允许你在一个列表内部创建另一个列表。这对于组织具有层次结构的信息非常有用，比如菜单、目录或任何需要分组的列表项。你可以在一个无序列表（<ul>）或有序列表（<ol>）内部嵌套另一个无序列表或有序列表。

下面是一个嵌套列表的HTML示例：

 代码效果图如下：

 2.5 综合案例

本章综合前面学习的网页制件排版知识，可以利用文字与段落排版、超链接、图像和列表设置。

代码如下：

<!--综合案例.html-->
<!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 syle="fon-size:25px">吸尘器类别:手持式吸尘器<br>功率:500W<br />
            储尘类型:旋风尘盒/尘桶<br />吸尘类型:千/湿吸均可<br>
            适用面积:91m'-150 m’<lr/>产品特色:除端,HEPA 滤网<br/>
            线长:充电式(无线)<lr />吸嘴类型:圓毛刷<br />
            适川环境:厨房,地板,地毯,床铺,汽车,沙发,凭砖,酒店<br/>售后服务:海外进口商品不支持内联保,无法享受与产地同等售后服务<br />
            品牌名称:Dyson<hr />商品名称:我家那闺女 Dyson V8 absolule 无线吸尘器<br />
            产地:马来西亚<br/>商品编号:V8mbsoluleUS<br/></p>
            <li lype="gquure" slyle="color:deeppink">商品展示</li></ul>
            <img src="img/1.jpg" "iille=" 无线手持吸尘器”align="middle" />
            <h2>产品信息</h2>
            <p slyle="font-size:25px;">品牌:Dyson 戴森<br />
                品名:无线手持吸尘器美版<br />
                型号:V8 Absolule<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 slyle="font-size:25px">戴森 V8 美版无绳吸尘器高配版,新的动力设计。<br />
                有助吸除家中四处的过敏原,吸附99.97%小至0.3微米的微尘,<br />
                运行时间高达 40分钟,2款地板吸头及4款配件吸头,清洁空间高达291平米。
            </p><img src="img/left.JPG" align=" le" 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 slyle=" fonl-size : 25px">宮网地址:<a href=" https://shop. dyson. c"> https ://shop. dyson.cn/</a></blockquote>
            </h1>
    </body>
</html>

本案例效果图如下