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

最新推荐文章于 2024-09-27 15:52:57 发布

id2197

最新推荐文章于 2024-09-27 15:52:57 发布

阅读量584

点赞数 15

文章标签：前端

本文链接：https://blog.csdn.net/id2197/article/details/142353739

版权

2.1 文字与段落排版

在网页制作过程中，通过文字与段落的基本排版即可制作出简单的网页。以下讲解常用的文字与段落排版所使用的标签。

2.1.1 段落标签

在HTML中浏览器会忽略用户输入的回车符，为了使文字段落排列整齐，通常会使用标签实现这一功能，段落标签<p>是HTML格式中特有的段落元素，HTML会根据文本每行长度进行自动下一行，不必要注意文本长度，

2.1.2 标题标签

在网页中，标题是一段文字的核心，所以总是用加强的效果表示；标题使用<h1>至<h6>标签进行定义。由大到小为<h1>——><h6>，HTML会自动在标题前后添加一个额外的换行符。

2.1.3 换行标签

网页并都像段落那样，有时并不需要那么多的<p>标签来分割内容。如果编辑网页内容时只是为了换行可以使用<br/>来进行换行

<br/>标签会将HTML文档中正常段落修改间距和换行。<br/>放在任意一行都会使改行进行换行操作，如果放于文字末尾，可以将后面的文字、图像、表格等显示于下一行，而又不会在行宇行之间留下空行，也就是强制文本进行换行操作。

2.1.4 水平线标签

水平线标签<hr/>可以当作是段落与段落之间的分隔线，使文档结构清晰，层次分明。当浏览器解释到<hr/>时会换行并加入一条水平线段

2.1.5 预格式化标签

<pre>标签是可预定格式化的文本。被包裹在<pre>标签中的文本通常会保留空格和换行符，而文本也会呈现出等宽字体。常用于来表示计算机的源代码

2.1.6 缩排标签

<blockquote>标签可定义一个块引用。此标签体内所有的文本会从常规文本中分离出来，经常会在左右两边进行缩进，而且有时会使用斜体，也就是说，块引用拥有自己独立的空间，本文章也使用了块引用

2.1.7 案例

<! DOCTYPE>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>实例</title>
    </head>
    <body>
		<h1 align="center">京东JD.COM-专业综合网上购物商城</h1>
		<hr align="center" size="10" color="red" width="100%" noshade="noshade"/>
		<p align="left">&nbsp;&nbsp;&nbsp;销售超数万品牌，4020万种商品，囊括家电、手机、电脑、服装、居家、健康、母婴、美妆、个护、食品、旅游等品类。<br/></p>
		<pre>京东PLUS会员	免费体验30天！ 更多优惠尽在京东！</pre>
		<blockquote>京东秉承客户为先， 100％正品行货保障，提供全国联保，机打发票，专业配送，售后服务！</blockquote>
		<p align="center">Copyright &copy;2024 MortalTom</p>
	</body>
</html>

2.2 超链接
2.1.1 超链接简介

超链接（Hyperlink），通常简称为链接（link），是网络背后的核心概念。为了解释什么是链接，我们需要回到网络架构的底层。

早在1989年，网络发明人蒂姆·伯纳斯 - 李（Tim Berners-Lee）就提出了网站的三大支柱：

URL, 跟踪Web文档的地址系统
HTTP, 一个传输协议，以便在给定URL时查找文档
HTML, 允许嵌入超链接的文档格式

2.1.1.1 超链接的定义

所谓超链接(Hyperink)，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址。超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以个文件，甚至是一个应用程序。将网站建设成一个丰富多彩的多媒体世界。当网页中包含超链接时，其外观形式为彩色(一般为蓝色)且带下划线的文字或图像。单击这些文本或图像，可跳转到相应位置。鼠标指针指向超链接时，将变成手形。

2.1.1.2 超链接的分类

根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等;根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。

2.2.2 超链接的应用

超链接的另外一个叫法称为锚，它是使用<a>标签标记的，可以用两种方式表示，一是通过使用<a>标签的href属性来创建超文本链接，以链接到同一文档的其他位置或其他文档中，在这种情况下，当前文档就是链接的源，href属性的值就是URL的目标;二是通过使
用<a>标签的name属性或id属性在文档中创建一个文档内部的书签。

2.2.2.1 锚点标签<a>···</a >

HTML使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a>开始，以</a>结束。锚可以指向网络上的任何资源:一张HTML页面、一幅图像、一个声音或视频文件等

2.2.2.2 指向其他页面的超链接

如指向当前目录下的登录页面。<a href="login.html">登录</a>

2.2.2.3 指向书签的超链接

2.2.2.4 指向下载文件的超链接

<a href="文件名.zip">下载</a>用于下载文件。

2.2.2.5 指向电子邮件的超链接

使用协议，格式如。mailto:<a href="mailto:email@example.com">联系我</a>

2.3 图像

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

2.3.1.1 常见的网页图像格式

常见格式包括 GIF、PNG 和 JPEG，分别适用于不同的用途（如动画、透明背景、照片等）。

GIF：适用于简单动画。
PNG：支持透明背景，适合图标。
JPEG：适用于照片，压缩比高

2.3.2 图像标签

2.3.2.1 图像的替换文本说明

有时，由于网速过慢或者用户在图片还没有下载完全就单击了浏览器的停止键，在浏览器中就看不到要看到图片，这时替换文本说明就十分有必要了。替换文本说明应该简洁面晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息。

2.3.2.2 设置图像大小

在 HTML 中，通过img 标签的属性 width 和 height 来调整图像大小，其目的是通过图像的高度和宽度加快图像的下载速度。默认情况下，页面中显示的是图像的原始大小，如果不设置 width 和 height属性，浏览器就要等到图像下载完毕才显示网页，因此延缓其他页面元素的显示。
width 和 height 的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比。

2.3.2.3 图像的边框

在网页中显示的图像如果没有边框，会显得有些单调，可以通过img标签的border属性为图像添加边框，添加边框后的图像显得更醒目、美观。
border属性的值用数字表示，单位为像素;默认情况下图像没有边框，即border=0;图像边框的颜色不可调整，默认为黑色;当图片作为超链接使用时，图像边框的颜色和文字超链接的颜色一致，默认为深蓝色。

2.3.3 图像超链接

可以将图像包裹在标签内，实现点击图像跳转。<a>

<a href="http://www.baidu.com">
<img src="img/baidu.jpg" title="百度一下"/>
</a>

2.3.4 设置网页背景图像

使用来设置页面背景。<body background="图片地址">

<body background="img/baidu.jpg">

2.3.5 图文混排

图文混排技术是指设置图像与同一行中的文本、图像、插件或其他元素的对齐方式。在制作网页时往往要在网页中的某个位置插人一个图像，使文本环绕在图像的周围。img标签的aign 属性用来指定图像与周围元素的对齐方式，实现图文混排效果。

与其他元素不同的是，图像的align属性既包括水平对齐方式，又包括垂直对齐方式align 属性的默认值为 bottom。

2.4 列表

在制作网页时，列表经常被用到写提纲和品种说明书。通过列表标记的使用能使这些内容在网页中条理清晰、层次分明、格式美观地表现出来。本节将重点介绍列表标签的使用。列表的存在形式主要分为无序列表、有序列表、定义列表以及嵌套列表等。

2.4.1 无序列表

无序列表，就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈和方框等些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰、更合理。

当创建一个无序列表时，主要使用HTML,的<ul>标签和<li>标签来标记。其中<d>标签

标识一个无序列表的开始;<li>标签标识一个无序列表项

<ul>
  <li>无序列表第一项</li>
  <li>无序列表第二项</li>
  <li>无序列表第三项</li>
</ul>

2.4.1.1 在<ul>后指定符号的样式

使用标签定义无序列表，标签表示列表项，属性可设置项目符号样式。<ul><li>type

2.4.1.2 在<li>后指定符号的样式

在<li>后指定符号的样式，可以设置从该<li>起直到</li>的项目符号。

2.4.2 有序列表

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

2.4.3 定义列表

定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一列实物以及与其相关的解释。当创建一个定义列表时，主要用到3个 HTML 标签;<dl>标签<dt>和<dd>标签。可以使用创建自定义列表,使用 dt 和 dd 定义列表中具体的数据项一般情况下使用dt定义列表的二级列表项,也可以认为是dd的一个概要信息，使用 dd来定义最低层的列表项。

<dl>
  <dt>名称：</dt>
  <dd>某某某</dd>
</dl>

2.4.4 嵌套列表

所谓的嵌套列表，就是无序列表和有序列表混合使用。嵌套列表可以把页面分为多个层次，给人很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。嵌套方式可以分为无序列表中嵌套有序列表、有序列表中嵌套无序列表、无序嵌套无序、有序嵌套有序，可灵活使用

ul>
  <li>第一项
    <ul>
      <li>子项一</li>
      <li>子项二</li>
    </ul>
  </li>
  <li>第二项</li>
</ul>

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 />
            功率：500 W<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="https://img2.baidu.com/it/u=2352358307,3668897717&fm=253&fmt=auto&app=138&f=JPEG?w=444&h=387" title="无线手持吸尘器" alt="无线手持吸尘器" />
    <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/>
        产品特点：电力升级、新形式集尘桶、双层放射式气旋、HEPA过滤系统、噪声分贝更小<br/>
    </p>
    <h2>产品特点</h2>
    <img src="https://image.suning.cn/uimg/sop/commodity/111654781189573810694660_x.jpg" width="750" height="450"/>
    <h2>戴森科技，英国品质</h2>
    <p style="font-size:25px;">
        戴森 V8 美版无绳吸尘器高配版, 新的动力设计。<br />
        有助吸除家中四处的过敏原，吸附99.97%小至0.3微米的微尘，<br/>
        运行时间高达40分钟，2款地板吸头及4款配件吸头，清洁空间高达291平米。
    </p>
    <p style="font-size:25px;">
        HEPA 过滤系统<br />
        <img src="https://img01.yzcdn.cn/upload_files/2022/03/16/FqPfhLnVLWm5gSIyRiFW8NMtXlQ_.jpg" align="left" width="350" height="290"/>
        吸附微尘 99.97%小至0.3 微米的微尘, 减少过敏原回流空气中。<br/>
    </p>
    <img src="https://ww4.sinaimg.cn/mw690/00689phBly1hrcufrve7cj30qy0qbtbf.jpg" alt="canbin"/>
    <blockquote style="font-size:25px;">
        官网地址：<a href="https://shop.dyson.cn/">https://shop.dyson.cn/</a>
    </blockquote>
	<p align="center">Copyright &copy;2024 MortalTom</p>
</body>
</html>