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

snow_wind_rain

已于 2024-09-13 17:39:00 修改

阅读量565

点赞数 19

分类专栏：上课文章标签：前端 html5 css

于 2024-09-13 17:18:48 首次发布

本文链接：https://blog.csdn.net/m0_66763041/article/details/142215633

版权

上课专栏收录该内容

1 篇文章 0 订阅

订阅专栏

2.1 文字与段落排版

2.1.1 段落标签

段落标签

用于定义文档中的一个段落。浏览器会自动在段落前后添加一些空白。

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

2.1.2 标题标签

标题标签从 <h1> 到 <h6>，其中 <h1> 是最大的标题，而 <h6> 是最小的标题。

<h1>这是最大的标题</h1>
<h2>这是一个次级标题</h2>
<h3>这是一个更小的标题</h3>
<h4>这个标题很小</h4>
<h5>这个标题更小</h5>
<h6>这是最小的标题</h6>

2.1.3 换行标签

换行标签 <br> 可以用来插入一个换行符。

这是第一行。<br>
这是第二行。

2.1.4 水平线标签

水平线标签 <hr> 可以用来表示主题的转换。

<p>段落一</p>
<hr>
<p>段落二</p>

border: none; 移除了默认的边框样式。
height: 2px; 设置了线条的高度。
background-color: red; 设置了线条的颜色为红色，当然也可以使用RGB的16进制代码。

<hr style="border: none; height: 2px; background-color: red;">

2.1.5 预格式化标签

预格式化标签 <pre> 保持源文本的空格和换行。

<pre>
    这是预格式化的文本。
    它保留了原始的空格和换行。
</pre>

2.1.6 缩排标签

缩排标签 <blockquote> 通常用来表示引用或特殊段落的缩进。

<blockquote>
    这是一段引用的文字，它会有一个缩进效果。
</blockquote>

2.1.7 案例

结合上述元素创建一个简单的网页布局。

<!DOCTYPE html>
<html>
<head>
    <title>HTML基本元素示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是首页的一个段落。</p>
    <blockquote>这是一个引用段落。</blockquote>
    <hr>
    <pre>
        这里展示的是预格式化的文本。
    </pre>
</body>
</html>

在这里插入图片描述

2.2 超链接

2.2.1 超链接简介

2.2.1.1 超链接的定义

超链接允许用户通过点击链接跳转到其他位置，例如网页、文件或者同一网页内的不同部分。

2.2.1.2 超链接的分类

内部链接：指向同一个网站内部的资源。
外部链接：指向其他网站的资源。

2.2.1.3 路径

绝对路径：完整的URL地址。
相对路径：相对于当前文档的位置。

2.2.2 超链接的应用

2.2.2.1 锚点标签 `<a>`

锚点标签 <a> 用于创建超链接。

<a href="http://www.dreamysoulsx.com">访问www.dreamysoulsx.com</a>

2.2.2.2 指向其他页面的超链接

链接到同一站点的不同页面。

<a href="my.html">访问1.9示例</a>

图中为跳转到同目录下的my.html文件

2.2.2.3 指向书签的超链接

链接到同一页面内的某个位置。

<a href="#section">跳转到页面顶部</a>

其中#号后的内容为可自定义的标签名，以下是设定标签名的代码。

<a name="one">测试部分</a>

以下是一些示例代码以及效果图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>指向页面内书签的超链接</title>
    <style>
        hr {
            border: none;
            height: 2px;
            background-color: chocolate;
            margin: 20px 0;
        }
        p {
            margin: 0;
        }
        a[name] {
            display: block;
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>杜甫诗词全集</h1>

    <ul>
        <li><a href="#one">《绝句》</a></li>
        <li><a href="#two">《登高》</a></li>
        <li><a href="#three">《茅屋为秋风所破歌》</a></li>
        <li><a href="#four">《望岳》</a></li>
        <li><a href="#five">《春望》</a></li>
    </ul>

    <hr>

    <a name="one"></a>
    <p>《绝句》<br>
    两个黄鹂鸣翠柳，<br>
    一行白鹭上青天。<br>
    窗含西岭千秋雪，<br>
    门泊东吴万里船。</p>

    <a name="two"></a>
    <p>《登高》<br>
    风急天高猿啸哀，<br>
    渚清沙白鸟飞回。<br>
    无边落木萧萧下，<br>
    不尽长江滚滚来。<br>
    万里悲秋常作客，<br>
    百年多病独登台。<br>
    艰难苦恨繁霜鬓，<br>
    潦倒新停浊酒杯。</p>

    <a name="three"></a>
    <p>《茅屋为秋风所破歌》<br>
    八月秋高风怒号，<br>
    卷我屋上三重茅。<br>
    茅飞渡江洒江郊，<br>
    高者挂胃长林梢，<br>
    下者飘转沉塘坳。<br>
    南村群童欺我老无力，<br>
    忍能对面为盗贼，<br>
    公然抱茅入竹去。<br>
    唇焦口燥呼不得，<br>
    归来倚杖自叹息。<br>
    俄顷风定云墨色，<br>
    秋天漠漠向昏黑。<br>
    布衾多年冷似铁，<br>
    娇儿恶卧踏里裂。<br>
    床头屋漏无干处，<br>
    雨脚如麻未断绝。<br>
    自经丧乱少睡眠，<br>
    长夜沾湿何由彻？<br>
    安得广厦千万间，<br>
    大庇天下寒士俱欢颜，<br>
    风雨不动安如山！<br>
    呜呼！<br>
    何时眼前突兀见此屋，<br>
    吾庐独破受冻死亦足！</p>

    <a name="four"></a>
    <p>《望岳》<br>
    南岳配朱鸟，秩礼自百王。<br>
    欺吸领地灵，鸿洞半炎方。<br>
    邦家用祀典，在德非馨香。<br>
    巡守何寂寥，有虞今则亡。<br>
    泊吾隘世网，行迈越潇湘。<br>
    渴日绝壁出，漾舟清光旁。<br>
    祝融五峰尊，峰峰次低昂。<br>
    紫盖独不朝，争长业相望。<br>
    恭闻魏夫人，群仙夹翱翔。<br>
    有时五峰气，散风如飞霜。<br>
    牵迫限修途，未暇杖崇冈。<br>
    归来觊命驾，沐浴休玉堂。<br>
    三叹问府主，蜀以赞我皇。<br>
    牲璧忍衰俗，神其思降祥。</p>

    <a name="five"></a>
    <p>《春望》<br>
    国破山河在，<br>
    城春草木深。<br>
    感时花溅泪，<br>
    恨别鸟惊心。<br>
    烽火连三月，<br>
    家书抵万金。<br>
    白头搔更短，<br>
    浑欲不胜簪。</p>
</body>
</html>

在这里插入图片描述

2.2.2.4 指向下载文件的超链接

链接到可供下载的文件，此时点击链接将会下载指定文件。

<a href="/downloads/report.pdf" download>下载报告</a>

2.2.2.5 指向电子邮件的超链接

创建一个邮件客户端的新消息窗口。

<a href="mailto:support@example.com">联系我们</a>

2.3 图像

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

2.3.1.1 常见的网页图像格式

JPEG：适合照片。
PNG：适合图形和透明背景。
GIF：支持动画。

2.3.1.2 使用网页图像的要点

确保图片大小适中，加载速度快，并且有替代文本。

2.3.2 图像标签 `<img>`

标签用于在网页中嵌入图像。

<img src="杜甫.jpg" alt="杜甫画像">

在这里插入图片描述

2.3.2.1 图像的替换文本说明

当图像无法显示时，alt 属性提供了一个替代文本，在下面的示例中我删除了杜甫.jpg文件。

在这里插入图片描述

2.3.2.2 设置图像大小

可以使用 width 和 height 属性来设置图像尺寸。

<img src="杜甫.jpg" alt="杜甫图像" width="200" height="100">

2.3.2.3 图像的边框

可以使用CSS为图像添加黑色边框。

img {
    border: 1px solid #000;
}

此时只需要在HTML文件内引用CSS文件

<link rel="stylesheet" type="text/css" href="styles.css">

在这里插入图片描述

2.3.3 图像超链接

可以将<img>放在<a> 标签内创建图像超链接。

<a href="http://www.dreamysoulsx.com"><img src="杜甫.jpg" alt="杜甫图像"></a>

2.3.4 设置网页背景图像

使用CSS可以为整个网页设置背景图像，当我将这段代码插入到CSS文件末尾时。

body {
    background-image: url('杜甫.jpg');
}

在这里插入图片描述

当然还有更复杂的参数。

/* 设置 body 和 html 标签的高度为100%，移除默认边距 */
html, body {
    height: 100%;
    margin: 0;
    /* 设置默认背景颜色 */
    background-color: #f0f0f0; /* 任意颜色 */
}

/* 设置背景图片，使其覆盖整个视口 */
body {
    background-image: url('path/to/your/image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed; /* 可选，如果需要背景固定 */
}

/* 响应式设计，对于小屏幕设备改变背景大小 */
@media (max-width: 600px) {
    body {
        background-size: contain;
    }
}

/* 创建一个全屏覆盖的容器 */
.container {
    min-height: 100%; /* 至少与html/body高度相同 */
    /* 这里可以添加其他样式，例如 padding, margin, background-color 等 */
}

2.3.5 图文混排

使图像与其他内容并排显示。

<img src="杜甫.jpg" alt="杜甫图像" style="float:left; margin-right:15px;">
<p>这段文字将会环绕在图像周围。</p>

2.4 列表

2.4.1 无序列表

无序列表使用<ul>开始，每个列表项使用<li>。

<ul>
        <li><a href="#one">《绝句》</a></li>
        <li><a href="#two">《登高》</a></li>
        <li><a href="#three">《茅屋为秋风所破歌》</a></li>
        <li><a href="#four">《望岳》</a></li>
        <li><a href="#five">《春望》</a></li>
    </ul>

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

可以使用CSS来自定义列表项的符号。

ul {
    list-style-type: square;
}

2.4.2 有序列表

有序列表使用<ol>开始，每个列表项使用<li>。

<ol>
    <li>一</li>
    <li>二</li>
    <li>三</li>
</ol>

2.4.3 定义列表

定义列表使用<dl>,<dt>(定义术语) 和<dd>(定义描述)。

<dl>
    <dt>术语一</dt>
    <dd>术语一的解释</dd>
    <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="无线手持吸尘器.jpg" 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="产品特点.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="过滤系统.jpg" align="left" width="350" height="290"/>
        吸附微尘 99.97%小至0.3 微米的微尘, 减少过敏原回流空气中。<br/>
    </p>
    <img src="dyson.jpg" alt="canbin" />
    <blockquote style="font-size:25px;">
        官网地址：<a href="https://shop.dyson.cn/">https://shop.dyson.cn/</a>
    </blockquote>
</body>
</html>

在这里插入图片描述