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

最新推荐文章于 2024-09-25 16:51:11 发布

业余绳匠

最新推荐文章于 2024-09-25 16:51:11 发布

阅读量977

点赞数 28

文章标签：前端

本文链接：https://blog.csdn.net/woyinyuebofangqi/article/details/142203746

版权

2.1 文字与段落排版

2.1.1 段落标签

由于浏览器忽略用户在HTML编辑器中输入的回车符，为了使文字段落排列得整齐、清晰，常用段落标签<p>..</p >实现这一功能。段落标签<p>是HTML格式中特有的段落元素，在HTML 格式里不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉，它会根据窗口的宽度自动转换到下一行。段落标签的语法为:
<p align = " left | center| right" >文字</p >
属性align:设置段落文字在网页上的对齐方式，包括left(左对齐)、center(居中)和 right(右对齐)，默认为 left。
格式中的“l”表示“或者”，即多项选其一。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二章练习</title>
	</head>
		<!--第2章 网页制作的排版方法 -->
		<p align="center">第一段</p>
		<p align="left">第二段</p>
		<p align="right">第三段</p>
		<p>第四段</p>
</body>
</html>

2.1.2 标题标签

在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题，HTML会自动在标题前后添加一个额外的换行。标题文字标签的格式为:
<h #align = " left | center l right">标题文字</h#>
属性 align:设置标题在页面中的对齐方式，包括left(左对齐)、center(居中)或right（右对齐），默认为left

2.1.3 换行标签

网页内容并不都是像段落那样，有时没有必要用多个<p>标签去分割内容。如果编辑网页内容只是为了换行，而不是从新段落开始，可以使用<br/>标签。
<br/>标签将打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行中都会使该行换行，如果<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。换行标签的语法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二章练习</title>
	</head>
	<body>
<!-- 2.1.3 换行标签 -->
		<p>
			江西应用工程职业学院<br />
			校训:爱国明治 敢为人先<br />
			</p>
</body>
</html>

2.1.4 水平线标签

水平线可以作为段落与段落之间的分隔线，使文档结构清晰，层次分明。当浏览器解释到HTML文档中的<hr/>标签时，会在此处换行，并加入一条水平线段。
水平线标签的格式为:
<hr align = " left I center ! right " size = "横线粗细”width ="横线长度"color="横线色彩”noshade=" noshade"/>
属性 size:设定线条粗细，以像素为单位，默认值为2。
属性 width:设定线段长度，可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指线段的长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终当前窗口。
属性 color:设定线条色彩，默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示

2.1.5 预格式化标签

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

2.1.6 缩排标签

<blockquote>标签可定义一个块引用。<blockquote>与</ blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。缩排标签的语法为

<p>.常见的色彩搭配：采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色，在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。</p>
<blockquote>.常见的色彩搭配：采用相近色配色:相近色是指相同色系的颜色，使用相近色进行网页色彩的搭配，可以使网页的效果更加统一和谐，如暖色调和冷色调就是相近色的两种运用。
采用近似色配色，在色相环中每一个颜色对面的颜色，称为互补色，也是对比最强的色组。</blockquote>

2.2 超链接

2.2.1 超链接简介

1.超链接的定义
所谓超链接(Hyperlink)，是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
2.超链接的分类
根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等;根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。
3.路径
URL-统一资源定位器，指的就是每一个网站都具有的独立的地址。同一个网站下的每一个网页都属于同一个地址下，但是，当创建网页时，不可能也不需要为每一个链接都输入完全的地址

2.2.2 超链接的应用

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

2.指向其他页面的超链接
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。根据目标文件与当前文件的目录关系，有4种写法。注意，应该尽量采用相对路径。
(1)链接到同一目录内的网页文件，语法:热点文本其中，“目标文件名”是链接所指向的文件。
(2)链接到下一级目录中的网页文件，格式:热点文本(3)链接到上一级目录中的网页文件，语法:热点文本其中,“../”表示退到上一级目录中。

<! DOCTYPE html><html>
<html>
<meat charset=" UTF-8">
<title>页面之间的链接</title>
</head>
<body>
<a href="register.html">免费注册</a><!--链接到同一目录内的网页文件-->
<a href="login.html">账户登录</a><!--链接到同一目录内的网页文件-->
</body>
</html>

2.3 图像

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

1.常用的网页图像格式
图像文件的格式很多，但一般在网页中使用的图片格式并不多，主要有GIF,JPEG，PNG。下面进行简单的介绍，以便初学者在网页制作过程中做出适当的选择。
(1) GIF。GIF 是Internet上应用最广泛的图像文件格式之一，是一种索引颜色的图像格式，此格式在网页中使用较多。它的特点是体积小，支持小型翻页型动画，GIF图像最多可以使用256种颜色,最适合制作徽标、图标、按钮和其他颜色、风格比较单一的图片。
(2) JPEG。JPEG是Internet上应用最广泛的图像文件格式之一，适用于摄影或连续色调图像。JPEG 文件可以包含多达数百万种颜色，因此JPG格式的文件体积较大，图片质量较佳，通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡。当网页中对图像的质量有要求时，建议使用此格式。
(3) PNG。PNG是一种新型的无专利权限的图像格式，兼有GIF和JPC的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。它可以用来代替GIF格式，同样支持透明层，在质量和体积方面都具有优势，适合在网络中传输。
2.使用网页图像的要点
(1)高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选图像不要超过8KB，如必须选用较大图像时，可先将其分成若干小图像，显示时再通过将这些小图像拼合起来。
(2)网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。
(3)如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。例如，文件 X.Y与A文件夹在同一目录下，那么文件B.A在目录A下的B文件夹中，它对于文件X.Y的相对路径则为A/B/B.A，、

2.3.2 图像标签

在HTML中，用<img>标签在网页中添加图像，图像是以嵌入的方式添加到网页中的
图像标签的格式: < img sre="图像文件名”aht="替代文字title="鼠标悬停提示文字”width="图像宽度"height="图像高
度”border="边框宽度”align="环绕方式|对齐方式"/>
标签中的属性说明见表2-2，其中sre是必需的属性。
需要注意的是，在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致，那么显示的图像会相对于原图变形或失真。

属性说明
srC 指定图像源，即图像的 URL路径
alt        如果图像无法显示，代替图像的说明文字
title        为浏览者提供额外的提示或帮助信息，方便用户使用
width       指定图像的显示宽度(像素数或百分数)，通常只设为图像的真实大小以免失真。若需要改变图像大小，最好事先使用图像编辑工具进行修改。百分数是指相对于当前浏览器窗口的百分比
height        指定图像的显示高度(像素数或百分数)
border        指定图像的边框大小，用数字表示，默认单位为像素，默认情况下图片没有边框，即                 border = 0
align        指定图像的对齐方式，设定图像在水平(环绕方式)或垂直方向(对齐方式)上的位置，包括le 图像居左，文本在图像的右边)、right(图像居右，文本在图像的左边)、叩(文本与图像在顶部对齐)、midde(文本与图像在中央对齐)或botom(文本与图像在底部对齐)

2.3.3 图像超链接

图像也可作为超链接热点，单击图像则跳转到被链接的文本或其他文件。语法:< img src =" 图像文件名"/>例如，制作产品图像的超链接，代码如下:<a href= " waitao. html"> <! --单击图像则打开waitao.html-->
< img src =" images/ waitao.jpg”alt="宽松羽绒服面包服”title="宽松羽绒服面包服”/>
</a >
去除图像超链接边框的方法是为图像标签添加样式style=" border:none"，代码如下:

<a href=" waitao.html">
<! --单击图像则打开waitao.html-->
< img src =" images/waitao.jpg" alt ="宽松羽绒服面包服"title="宽松羽绒服面包服"style =" border: none"/>
</a >

2.3.4 设置网页背景图像

在网页中可以利用图像作为背景，但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框，这样有利于生成无缝背景。
背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。格式:
<bodybackground="背景图像路径">
设置网页背景图像应注意以下要点:
(1)背景图像是否增加了页面的加载时间，背景图像文件大小不应超过10KB。

(2)背景图像是否与页面中的其他图像搭配良好。

(3)背景图像是否与页面中的文字颜色搭配良好。
例如，设置品牌LOGO图像作为网页的背景图像，

<body background = " images/logo. JPG" >

2.3.5 图文混排

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

 
<!-- 示例 2.12 程序 -->
<! DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>图文混排</title>
</head>
 
<body>
    <h1 align="center">商品描述</h1>
    <hr />
    < img src="images/milkpowder.JPG" width="250" height="350" align="right" alt="商品描述" />
产地:新西兰奶粉配方:常规配方<br/>
包装:罐装适用人群:婴幼儿<br/>
供货渠道:海外原装品牌名称:Aptamil<br/>
商品名称:澳洲 Aptamil 金装婴儿配方奶粉 3 段 900 克保质期:18 个月<br/>
成分:矿物质(1.2%)、维生素(0.10%)，奶粉(全脂奶粉、益生元、鱼油)(98.7%)<br/>
生产日期:2018年4月(具体以收到实物为准)<br/>
规格:90 g/罐配件/备注:见详情<br/>
商品编号:9418783002844<br/>
储存方法:<br/>
1. 请将奶粉存放在阴凉干燥处,开罐后密封保存,并请于开罐后四周内用完。<br/>
2. 请在奶粉罐底部注明的日期前食用。<br/>
</body>
 
</html>

2.4 列表

2.4.1 无序列表

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

 
<! -- 示例 2.13 程序 -->
<! DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>无序列表</title>
 </head>
 <body>
    <h2 align="center">学校二级学院机构</h2>
    <ul type="disc"> <!-- 列表样式为实心圆点 -->
    <li>信息与计算机学院</li>
    <li>管理学院</li>
    <li>经济贸易学院</li>
    <li>建设工程学院</li>
    <li>智能学院</li>
    <li>马克思主义学院</li>
</body>
</html>

2.4.2 有序列表

有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分、它们之间以编号来标记。使用<ol>标签可以建立有序列表，表项的标签仍为<i>。格式:
<ol type=”符号类型”>
<li type=”符号类型 1”>表项1
<li type=”符号类型 2”>表项2
</ol>
在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白;列表项目向右缩进并左对齐;各表项前带顺序号。
有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母和大写罗马字母。<ol>标签的type属性用来定义一个有序列表的符号样式，在<ol>后指定符号的样式，可设定直到</ol>的表项加重记号。格式:
序号为数字序号为大写英文字母序号为小写英文字母序号为大写罗马字母序号为小写罗马字母
<oltype= " 1” >
<oltype=" A”>
<oltype= " a” >
<oltype=" 【”>
<oltype= " i” >

<! -- 示例 2.14 程序 -->
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<h2 align="center">退货流程</h2>
<ol type="1">
    <!-- 列表样式为小写罗马字母 -->
    <li>进入订单管理,点击"退货"按钮;</li>
    <li>填写退货原因,提交退货申请;</li>
    <li>审核通过,全球汇,短信发送退货地址;</li>
    <li>自行选择快递,邮寄商品到全球汇;</li>
    <li>商品返仓后,全球汇退款并补贴10元。</li>
</ol>
</body>
</html>

2.4.3 定义列表

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

2.4.4 嵌套列表

所谓诚套列表、就是无序列表与有序列表出嵌套混合使用。嵌套列表可以把页面分为个层次、给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相套。套方式可分为无序列表中长套无序列表、有序列表中嵌套有序列表、无序列表中有序列表、在有序列表中嵌套无序列表等方式，读者需要灵活掌握

2.5 综合案例——无线吸尘器说明书

<!--综合案例.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无线吸尘器说明书</title>
</head>
<body>
    <h1>Dyson V8absolute 无线吸尘器</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>
			 适用面积:91 m²-150m²<br/>产品特色:除螨,HEPA滤网<br/>
			线长:充电式(无线)<br/>吸嘴类型:圆毛刷<br/>
			适用环境:厨房,地板,地毯,床铺,汽车,沙发,瓷砖,酒店<br/>售后服务:海外进口商品不支持国内联保,无法享受与产地同等售后服务</br >
			品牌名称:Dyson / 商品名称:我家那闺女 Dyson V8 absolute 无线吸尘器<br/>
			产地:马来西亚<br/>商品编号:V8absoluteUS<br/></p>
			<li type="square" style="color:deeppink">商品展示</li></ul>
			<img src="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.4厘米,宽18厘米,高22.4厘米<br/>
			重量:2.61公斤<br/>容量:0.54升<br/>
			吸头配件:软绒滚筒吸头、升级版直驱吸头、缝隙吸头<br/>
			电动床褥吸头、二合一吸头、软除尘毛吊<br/>
			产品特点:电力升级 新形式集尘桶 双层放射式气旋 HEPA<br/>
			过滤系统、噪声分贝更小
		</p>
			<h2>产品特点</h2>
			<img src="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="left.JPG" align="left" width="350" height="290"/><br/><br/><h1>
HEPA过滤系统<br/>
吸附微尘99.97%小至0.3微米<br/>
减少过敏原回流至空气中。</h1>
			<br/>
			<br/>
			<img src="canbin.jpg"/>
			<blockquote style="font-size:25px;">官网地址:<ahref="https://shop.dyson.cn/"target="_blank">
			https://shop.dyson.cn/</a ></blockquote>
			</body>
</html>