网页基本元素排版教程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45966880/article/details/115036139

网页基本排版

添加与编辑文本、超链接、图像、列表和多媒体元素等网页元素

2.1 文字与段落排版

2.1.1 段落标签

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落p标签示例</title>
</head>
<body>
<p align="center">爱家商城优惠促销</p>
<p align="right">作者：张三</p>
<p align="left">10 周年店庆活动，所有产品6折销售，请抓紧时间领取商城优惠券，咨询热线：400-111-1111</p>
<p style="font-size: 12px;text-align: center">Copyright &copy; 2017 宇宙商务
    All rights reserved. &nbsp;热线：400-111-1111</p>
</body>
</html>

结果展示
段落标签展示

tip：不同段落间距相当于加了两个换行标签

2.1.1 标题标签

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题示例</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

结果展示
标题标签

2.1.3 换行标签

文字<br/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>br标签</title>
</head>
<body>
    <h3>联系人方式</h3>
    联系人：张三<br/>
    邮政编码：475000<br/>
    联系地址：开封市东京大道 3号<br/><br/> <!--两个<br/>标签相当于一个段落标签-->
    Email：zhangsan@163.com<br/>
</body>
</html>

结果展示
换行标签

2.1.4 水平标签

作为段落之间的分隔线，使文档结构清晰，层次分明。
当浏览器解释到水平标签时，会在此处换行，并加上一条水平线。

<hr align="left|center|right" size="横线粗细" width="横线长度" color="横线色彩" noshade="noshade"/>

size：线条长度，像素单位，默认值为2。
width：线段长度，可以是绝对值（像素）也可以是相对值（比例）。
color：线段颜色，可以是色彩的英文名称，也可以是十六进制。

颜色十六进制查询

2.1.5 预格式化标签

被包围在预格式化标签的文本会保留空格和换行，文本也会呈现等宽字体。
常用于表示计算机的源代码

<pre>文本块</pre>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pre标签示例</title>
</head>
<body>
    <pre>
        这是
        预格式化文本
        它保留了    空格和换行

        演示一段计算机代码

        for(int i=0;i<5;i++)
            printf(i);
    </pre>
</body>
</html>

结果展示
预格式化标签

2.1.6 缩排标签

<blockquote>文本</blockquote>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blockquote标签示例</title>
</head>
<body>
这里有一段长文本引用
<blockquote>
爱家商城多年从事家用产品的商机发布与产品推广，始终奉行质量第一、诚信为本、客户至上的经营理念为宗旨。
请注意：浏览器在blockquote标签前后添加了换行，并增加了外边框。
</blockquote>
</body>
</html>

结果展示
缩排标签

2.1.7 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱家商城企业简介</title>
</head>
<body>
    <h1 align="center">企业简介</h1>
    <hr align="center" size="10" width="75%" color="red" />
    <p>&nbsp;&nbsp;&nbsp;&nbsp;爱家实业有限公司是一家集设计、开发、生产于一体的企业，
        主要生产一次性纸餐具、一次性纸杯（广告纸杯，咖啡杯，奶茶杯，雪糕杯）等产品。
        几年后，公司在全体200多位员工共同努力下，本着“以信为本，以诚待人，以新拓展，以质取胜”的企业宗旨。
        大胆创新，不断进取，逐渐成为引领一次性纸制品发表潮流中的领先企业。<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;目前公司拥有
        德国海德堡CP2000四色胶印机、宽幅柔板印刷机、进口全自动高速纸杯成型机、台湾模切机等一系列具有国际生产水平的生产设备，以满足不同客户的需要。
        本公司本着“诚信为本、质量第一、开创新品、精益求精”的企业精神，致力为用户提供至善至美的服务，欢迎咨询。
    </p>
    公司的承诺：<br/>
    <blockquote>
        对工作：提供高质量的产品，传播优质理念，迅速反应，马上行动。<br/>
        对客户：合作双赢，共同发展。<br/>
        对员工：教育培训，成就人生。<br/>
        对社会：依法经营，保护生态，回馈大众。
    </blockquote>
</body>
</html>

结果展示
案例结果展示

2.2 超链接

一个网站是由多个网页组成的。创建超链接有利于页面与页面之间的跳转，从而实现多个页面的有机联系。是构成网站的重要一环。

2.2.1 超链接简介

介绍
超链接（hyperlink）：从一个网页指向一个目标（这个目标可以是该网页的不同位置，不同的网页，图片，电子邮件，应用程序）的连接关系。
分类
目标文件分类：分为页面超链接（内部链接）、锚点链接、外部链接
单击对象分类：分为文字超链接、图像超链接、图像映射
路径
统一资源定位器（URL）：每一个网站都具有独立的地址。同一个网站下的网页都属于同一个地址。

链接<–>被链接文本的路径

路径的3种表达方式：

绝对路径

文件的绝对物理路径	URL绝对路径
D:\ideaProject\algorithm\day01\src\demo02	https://www.hao123.com/

站点根文件夹–>被链接文档经过的路径

文档相对路径

相对于某个基准目录的路径

2.2.2 超链接应用

锚点标签
<a href="url" title="指向链接显示的文字" target="窗口名称">文本文字</a>
指向其他页面（不同页面）
<a href="目标文件名.html">热点文本</a> 
<a href="子目录名/目标文件名.html">热点文本</a> 
<a href="../目标文件名.html">热点文本</a> 
<a href="../子目录名/目标文件名.html">热点文本</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面之间的链接</title>
</head>
<body>
    <a href="register.html">[免费注册]</a>
    <a href="login.html">[会员登录]</a>
</body>
</html>

结果展示
指向其他页面的链接

指向书签的超链接（同一页面的不同位置&&其他页面的对应位置）

<a name="记号名">目标文本附近的内容</a>
<a href="#记号名">热点文本</a> 
<a href="目标文件名.html # 记号名">热点文本</a> 

指向页面内书签的超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指向页面内书签的超链接</title>
</head>
<body>
    <img src="logo.png">
    <a href="register.html">[免费注册]</a>
    <a href="login.html">[会员登录]</a>
    <a href="#intro">[企业简介]</a>
    <p>页面1......</p>
    <p>页面2......</p>
    <p>页面3......</p>
    <p>页面4......</p>
    <a name="intro"></a><p>&nbsp;&nbsp;&nbsp;&nbsp;爱家实业有限公司是一家集设计、开发、生产于一体的企业，
        主要生产一次性纸餐具、一次性纸杯（广告纸杯，咖啡杯，奶茶杯，雪糕杯）等产品。
        几年后，公司在全体200多位员工共同努力下，本着“以信为本，以诚待人，以新拓展，以质取胜”的企业宗旨。
        大胆创新，不断进取，逐渐成为引领一次性纸制品发表潮流中的领先企业。<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;目前公司拥有
        德国海德堡CP2000四色胶印机、宽幅柔板印刷机、进口全自动高速纸杯成型机、台湾模切机等一系列具有国际生产水平的生产设备，以满足不同客户的需要。
        本公司本着“诚信为本、质量第一、开创新品、精益求精”的企业精神，致力为用户提供至善至美的服务，欢迎咨询。
    </p>
</body>
</html>

结果展示
指向页面内书签的超链接

指向其他页面书签的超链接
主页面
跳转页面书签

指向下载文件的超链接
<a href="下载文件名">热点文本</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指向其他页面书签的超链接</title>
</head>
<body>
    <img src="logo.png">
    <a href="register.html">[免费注册]</a>
    <a href="login.html">[会员登录]</a>
    <a href="info.html # intro">[企业简介]</a>
    <a href="download.rar">下载</a>
</body>
</html>

结果展示
指向下载文件的超链接

指向电子邮件的超链接
<a href="mailto:E-mail 地址">热点文本</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指向其他页面书签的超链接</title>
</head>
<body>
    <img src="logo.png">
    <a href="register.html">[免费注册]</a>
    <a href="login.html">[会员登录]</a>
    <a href="info.html # intro">[企业简介]</a>
    <a href="download.rar">下载</a>
    <a href="mailto:1812316822@qq.com">和我联系</a>
</body>
</html>

结果展示
指向电子邮件的超链接

2.2.3 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爱家商城购物流程</title>
</head>
<body>
    <h2><a name="top">购物流程</a></h2>
    <!--href="#"是指联接到当前页面,target属性表示是当前窗口还是新窗口-->
    <a href="#" target="_blank">1.注册会员</a>
    <a href="#">2.登陆商城</a>
    <a href="#">3.选购物品</a>
    <a href="#">4.订单结算</a>
    <a href="2-7.html">5.关于我们</a> <!--指向2.其他页面的超链接-->
    <a href="info.html #intro">6.企业简介</a> <!--指向书签（3.2其他页面书签）的超链接-->
    <hr>
    <h2>请下载购物流程电子文档</h2>
    <p>下载：<a href="download.rar">购物流程下载</a></p> <!--指向（4.下载文件）的超链接-->
    <p>和我联系：<a href="mailto:1812316822@qq.com">爱家商城客服中心</a> </p> <!--指向（5.邮箱）的超链接-->
    &nbsp;&nbsp;<a href="#top">返回首页</a> <!--指向书签（3.1页面内书签）的超链接-->
</body>
</html>

结果展示
主页

“关于我们”页面跳转
在这里插入图片描述
[企业简介]其他页面书签跳转

其他页面书签跳转
[购物下载]下载文件
下载测试
[和我联系]邮箱
邮箱测试

2.3 图像

图像可以作为文档的内在对象加入，也可以通过超链接加入，同时作为背景加入文档。

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

常用的网页图像格式（GIF、JPEG、PNG）

2.3.2 图像标签

<img src="图像文件名" alt="替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度" border="边框宽度" align="环绕方式|对齐方式"/>

图像的替换文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像基本功能</title>
</head>
<body>
    <h1 align="center">清新纸杯</h1>
    <p align="center"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=456489504,527848459&fm=15&gp=0.jpg"
                           alt="清新纸杯" title="清新纸杯"></p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;清新纸杯使用的原材料满足食品包装级的要求，无人为添加荧光增白剂，使用节能环保型油墨生产纸杯</p>
</body>
</html>

结果展示
图像插入

调整图像大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像基本功能</title>
</head>
<body>
    <h1 align="center">清新纸杯</h1>
    <p align="center"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=456489504,527848459&fm=15&gp=0.jpg"
                           alt="清新纸杯" title="清新纸杯"></p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;清新纸杯使用的原材料满足食品包装级的要求，无人为添加荧光增白剂，使用节能环保型油墨生产纸杯</p>
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=456489504,527848459&fm=15&gp=0.jpg" width="150" height="174">
</body>
</html>

在这里插入图片描述

图像的边框

2.3.3 图像超链接

2.3.4 设置网页背景图片

图像作为超链接，点击图像跳转到被链接的文本或其他文件。
为了方便演示这里图片链接直接指向自己

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像基本功能</title>
</head>
<body>
    <h1 align="center">清新纸杯</h1>
    <a href="2-12.html">
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=456489504,527848459&fm=15&gp=0.jpg" alt="清新纸杯" title="清新纸杯" style="border: none">
    </a>
    <body background="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1467185356,2616406287&fm=26&gp=0.jpg"></body>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;清新纸杯使用的原材料满足食品包装级的要求，无人为添加荧光增白剂，使用节能环保型油墨生产纸杯</p>
</body>
</html>

自己运行看看

2.3.5 图文混排

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品描述图文简介</title>
</head>
<body>
    <h1 align="center">商品描述</h1>
    <hr/>
    <img src="images/cup.jpg" width="450" height="185" align="right" alt="商品描述"/>
    &nbsp;&nbsp;&nbsp;&nbsp;清新纸杯使用的原材料满足食品包装级的要求，无人为添加荧光增白剂，使用节能环保型油墨生产纸杯。
    纸杯的所有包装材料要有足够的密封性和牢固性，纸杯包装应防尘、防潮和防霉。
    纸杯的底部和侧面均不漏水、渗水。<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;杯身材质为食品级木浆纸+内外表面pe薄膜。
    有效防止木浆纸因为接触水分和失去原本该有的挺度和韧性。
    爱家商城是国内首家网上从事纸杯印刷定做的专业供应平台。
    让您一站式批发到厂家一次性纸杯、广告纸杯、豆浆纸杯、奶茶纸杯、咖啡纸杯及纸碗等种类齐全、款式新颖、质量优、价格低的商品。
</body>
</html>

结果展示
在这里插入图片描述

2.4 列表

2.4.1 无序列表

在<ul>后指定符号样式
在<li>后指定符号样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表</title>
</head>
<body>
    <h2 align="center">爱家商城支付中心</h2>
    <ul tpye="disc"> <! --列表样式为实心圆点-- >
        <li>货到付款
        <li>财付通
        <li>支付宝
        <li>网银在线
    </ul>
</body>
</html>

结果展示
在这里插入图片描述

2.4.2 有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表</title>
</head>
<body>
    <h2 align="center">爱家商城支付中心</h2>
    <ol type="i"> <! --列表样式为小写罗马字母-- >
        <li>选择您要使用的网上银行；
        <li>显示您的应付总价，单击“确认无误，付款”；
        <li>确定您在银行的预留信息，单击“确定”按钮；
        <li>输入您的网银账号、登陆密码、验证码；
        <li>支付成功，提示“已完成付款”。
    </ol>
</body>
</html>

结果展示
在这里插入图片描述

2.4.3 定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
    <h2 align="center">客服中心联系方式</h2>
    <dl>
        <dt>电话：</dt>
        <dd>400-111-1111</dd>
        <dt>地址：</dt>
        <dd>开封市东京大道3号</dd>
        <dt>邮编：</dt>
        <dd>475000</dd>
    </dl>
</body>
</html>

结果展示
在这里插入图片描述

2.4.4 嵌套列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套列表</title>
</head>
<body>
<h2>爱家商城支付向导</h2>
<ul type="circle">
    <li>爱家商城支付中心
        <ul type="disc"> <! --实心圆点-- >
            <li>货到付款
            <li>财付通
            <li>支付宝
            <li>网银在线
        </ul>
        <hr/>
    <li>网银在线支付步骤
        <ol type="i">
            <li>选择您要使用的网上银行；
            <li>显示您的应付总价，单击“确认无误，付款”；
            <li>确定您在银行的预留信息，单击“确定”按钮；
            <li>输入您的网银账号、登陆密码、验证码；
            <li>支付成功，提示“已完成付款”。
        </ol>
        <hr/>
    <li>联系方式
        <dl>
            <dt>电话：</dt>
            <dd>400-111-1111</dd>
            <dt>地址：</dt>
            <dd>开封市东京大道3号</dd>
            <dt>邮编：</dt>
            <dd>475000</dd>
        </dl>
</ul>
</body>
</html>