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

迷茫.404

已于 2024-09-28 19:50:05 修改

阅读量946

点赞数 38

文章标签： html 前端

于 2024-09-18 20:24:34 首次发布

本文链接：https://blog.csdn.net/2402_87184304/article/details/142184274

版权

2.1 文字与段落排版

1.段落标签 <p>文字（一个段落）</p>

对齐方式

左对齐 <p align="left">文字（一个段落）</p>

右对齐 <p align="right">文字（一个段落）</p>

居中对齐 <p align="center">文字（一个段落）</p>

2.标题标签 <h1>标题文字</h1>

对齐方式

左对齐 <h1 align="left">标题文字</h1>

右对齐 <h1 align="right">标题文字</h1>

居中对齐 <h1 align="center">标题文字</h1>

3.换行标签文字<br />

4.水平线标签 <hr />

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

size属性：设定线条粗细，以像素为单位，默认为2

width属性：设定线段长度，可以是绝对值也可以是相对值，以像素为单位，默认值为100%

color属性：设定线条色彩，默认为黑色，由色彩相对应的英文或‘#’引导的16进制代码

5.预格式标签 <pre>文本块</pre>

文本块中的内容会保留空格和换行符，呈现等宽字体

示例

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

显示效果

6.缩排标签 <blockquote>文本</blockquote>

文本会从常规的文本分离出来，经常会左右两边缩进，有时会使用斜体

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>blockquote标签实例</title>
    </head>
    <body>
        这里有一段长文本引用
        <blockquote>江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。
办学宗旨：以人为本 培养高素质高技能人才校训：爱国明志  敢为人先校园精神：诚朴坚卓  达谦智勇
</blockquote>
    </body>
</html>

显示效果

2.2 超链接

1.超链接的简介

定义:从一个网页到一个目标（图片，网页，文本，声音等）的连接关系

分类：

目标文件不同：页面超链接，锚点超链接，电子邮件超链接

单击对象不同：文字超链接，图像超链接和图像映射

路径：

URL————统一资源定位器：每一个网站都具有的独立的地址

绝对路径：主页文件或目录在硬盘的真正路径

例如：D:\web\index.html代表了index.html文件的物理绝对路径；

http://www.hao123.com/index代表了URL绝对路径

根目录相对路径：站点根文件夹到链接文件经过的路径。站点根目录以相对路径（/）开始

例如：/support/tips.htm是文件（tips.htm）的站点根目录相对路径，该文件位于站点根文件的support子文件夹中

文档目录相对路径：相对于某个基准目录的路径，以当前文件路径为起点，进行相对文件查找

2.超链接的运用 <a href=""></a>

1锚点标签 <a></a>

<a href="ur1" title="指向链接显示的文字" target="窗口名称">文本文字</a>

href属性定义为这个超链接所指的目标地址

target属性（1）blank 在新窗口中打开被来链接的文档

（2）self 默认值在相同的框架中打开被链接的文档

（3）parent 在父框架中打开被链接的文档

（4）top 在整个窗口中打开被链接的文档

2.指向其他页面的超链接

链接到同一目录内的网页文件

<a href="目录文件名.html">热点文本</a>其中“目标文件名”是链接所指向的文件

链接到下一级目录中的网页文件

链接到上一级目录中的网页文件

<a href="../目标文件名.html">热点文本</a>其中“../”表示退到上一级目录中

链接到同级目录中的网页文件

表示先退回上一级目录中，然后再进入目标文件所在的目录

3.指向书签的超链接

书签名在<a>标签的name属性中定义

<a name="记号名">目标文本附近的内容</a>

（1）指向页面内书签的超链接

<a href="记号名">热点文本</a>单击“热点文本”，跳转到记号名开始的网页

（2）指向其他页面书签的超链接

<a href="目标文件名.html#记号名">热点文本</a>单击“热点文本”，跳转到目标记号名开始的网页

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

<a href="下载文件名">热点文本</a> 下载文件名输入文件所在的位置

5.指向电子邮件的超链接

<a href="mailto:E-mail地址">热点文本</a> E-mail地址输入邮箱地址

2.3 图像

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

格式

GIF：体积小，支持小型翻页型动画，可以使用256种颜色适合做图标，徽标等

JPEG：体积合适，可以使用多达百万种颜色适合摄影或连续色调图像

PNG：显示速度快，无专利权限的图像格式，兼有GIF,JPG的优点适合网络传输

要点

体积不能太大，太大不适合网络传输。图像不超过8kb

网页动画要合理适当

如果在同一文件多次使用，最好使用相对路径来查找图像

2.图像标签

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

3.图像超链接

<a href="URL"><img src="图像文件名"/></a>

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图像超链接</title>
    </head>
    <body>
    <img src="img/kunkun.png" width="100px" height="300px"/>
    <!--设置图像大小-->
    <img src="img/kunkun.png" border="50px"/>
    <!--设置图像边框-->
    <a href="http://www.baidu.com"><img src="img/kunkun.png"/></a>
    <!--图片超链接-->
    </body>
</html>

显示效果

4.设置网页背景图像

<body background="背景图像路径"> 在正文中设置背景

设置网页背景图像要点文件不能太大，与其他图像和其他文字搭配良好

5.图文混排

图文混排技术是指设置图像与同一行的文本，图像，插件或其他元素的对齐方式

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图文混排</title>
    </head>
    <body>
        <h1 align="center">江西运用工程职业学院</h1>
        <hr />
        <img src="img/6da863db28aab1476066a77846efd1a.png" width="600" height="400" align="right"/>
        江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。
        办学宗旨：以人为本 培养高素质高技能人才<br />
        校训：爱国明志  敢为人先<br />
        校园精神：诚朴坚卓  达谦智勇<br />
    </body>
</html>

显示效果

2.4列表

1.无序列表

无序列表：列表中列表项的前导符号没有一定的次序，而是黑点，圆圈，方框等特殊符号标识

<li type="符号类型">第一个列表表</li>

<li type="符号类型">第二个列表表</li>

.......

</ul>

在<ul>后指定符号样式

<ul type="disc"></ul> 符号为实心圆点

<ul type="circle"></ul> 符号为空心圆点

<ul type="square"></ul> 符号为方块

<ul img src="图片文件"></ul> 符号为指定的图片文件

在<li>后指定符号样式

<li type=""></li> 符号为实心圆点

<li type=""></li> 符号为空心圆点

<li type=""></li> 符号为方块

<li type=""></li> 符号为指定的图片文件

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表</title>
    </head>
    <body>
        <ul type="disc">
        <li>无序列表第一项</li>
        <li>无序列表第二项</li>
        <li>无序列表第三项</li>
        </ul>
        <ul type="circle">
        <li>无序列表第一项</li>
        <li type="square">无序列表第二项</li>
        <li>无序列表第三项</li>
        </ul>

        </body>
</html>

显示效果

2.有序列表

有序列表：一个有特定顺序的列表项的集合

</ol>

在<ol>后指定符号的样式

<ol type="1"> 序号为数字

<ol type="A"> 序号为大写英文字母

<ol type="a"> 序号为小写英文字母

<ol type="I"> 序号为为大写罗马字母

<ol type="i"> 序号为小写罗马字母

在<li>后指定符号样式

只需要把<ol>改成<li>

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表</title>
    </head>
    <body>
    <ol type="i">
    <li>有序列表第一项</li>
    <li>有序列表第二项</li>
    <li>有序列表第三项</li>    
    </body>
</html>

显示效果

3.定义列表

定义列表不是带有前导字符的列项目，而是一列实物以及与其的相关解释

<dl>dl用来创建自定义列表；<dt><dd>标签定义列表具体的数据项

格式

<dl>

<dt>...第一标题项...</dt>

<dd>...对第一个标题项的解释文字...</dd>

<dt>...第二标题项...</dt>

<dd>...对第二个标题项的解释文字...</dd>

</dl>

4.嵌套列表

嵌套列表是无序列表和有序列表嵌套混合使用

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>列表</title>
    </head>
    <body>
        <ul type="符号类型">
            <li type="符号类型1">第一个无序列表项</li>
            <li type="符号类型2">第二个无序列表项</li>
        </ul>
        <ol oltyoe="1">
            <li>有序列表第一项</li>
            <li>有序列表第二项</li>
            <li>有序列表第三项</li>
        </ol>
        <dl>
        <dt>办学宗旨:</dt>
        <dd>以人为本 培养高素质人才</dd>
        <dt>校训:</dt>
        <dd>爱国明治 敢为人先</dd>
        <dt>校园精神:</dt>
        <dd>诚朴兼卓 达谦智勇</dd>
        </dl>
    </body>
</html>

显示效果

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" >
        <hype="square" style="color:deeppink">商品参数</li>
        <p siyle="font-size:25px">吸尘器类别:手持式吸尘器<br/>
        功率:500 W<br/>
        错尘类型:旋风尘盒/尘桶<br/>
        吸尘类型:干/湿吸均可<br/>
        适用面积:91 m'-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="img/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 />
        过滤系统、噪声分贝更小<br />
        </p >
        <h2>产品特点</h2>
        <img src="img/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="img/left.JPG" align =" left" 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 style = " font - size ; 25px">官网地址:https ://shop. dyson. cn/</blockquote>
        
        </hl>
    </body>
</html>