HTML5网页列表与段落设计

最新推荐文章于 2022-03-29 15:24:54 发布

而又何羡乎

最新推荐文章于 2022-03-29 15:24:54 发布

阅读量2k

点赞数 3

分类专栏： WEB前端学习文章标签： html

本文链接：https://blog.csdn.net/qq_44285092/article/details/108620920

版权

WEB前端学习专栏收录该内容

12 篇文章 4 订阅

订阅专栏

1 网页文字列表设计

1.1 建立无序列表<ul>

无序列表相当于markdown语法的-、*、+表示的项目符号，没有顺序，没有顺序，只把符号作为分项标识。无序列表使用标记<ul>，其中每一个列表项用<li>。在无序列表结构中，用<ul></ul>表示这一个列表的开始和结束，<li>表示一个列表的开始。在一个无序列表中可以包含多个列表项，<li>标记可以省略结束标记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套无序列表的使用</title>
</head>
<body>
<h1>网站建设流程</h1>
<ul>
    <li>项目需求</li>
    <li>系统分析
        <ul>
            <li>网站的定位</li>
            <li>内容收集</li>
            <li>栏目规划</li>
            <li>网站目录结构设计</li>
            <li>网站标志设计</li>
            <li>网站风格设计</li>
            <li>网站导航系统设计</li>
        </ul>
    </li>
    <li>伪网页草图
        <ul>
            <li>制作网页草图</li>
            <li>将草图转换为网页</li>
        </ul>
    </li>
    <li>站点建设</li>
    <li>网页布局</li>
    <li>网站测试</li>
    <li>站点的发布与站点的管理</li>
</ul>
</body>
</html>

1.2 建立有序列表<ol>

有序列表相当于是自动标号功能，与无序列表使用基本相同，不同的是每个项目都有前后顺序之分，多用数字表示，如下例所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套无序列表的使用</title>
</head>
<body>
    <ol>
        <li>千里之行</li>
        <li>始于足下</li>
        <li>一生所幸
        	<ol>
            	<li>哈哈</li>
                <li>好好</li>
            </ol>
        </li>
    </ol>
</body>
</html>

1.3 建立不同类型的无序列表

在无序列表的基础上，在<ul type=“类型”>，通过更改类型即可变化。

类型	说明
circle	空心圆
disc	实心圆（默认）
square	方形

1.4 建立不同类型的有序列表

在有序列表的基础上，在<ol type=“类型”>，通过更改类型即可变化。

类型	说明
1	数字（默认）
A	大写字母
a	小写字母
I	大写罗马数字
i	小写罗马数字

有序列表中<ol>其它属性设置：

属性	说明
start	规定有序列表的起始值。值为数字number
reversed	规定列表顺序为降序。(9,8,7…)，默认为非降序，降序为reversed
type	规定在列表中使用的标记类型。

1.5 嵌套列表

嵌套列表是网页中常用的元素，使用<ul>标签来制作网页中的嵌套列表。见1.1建立无序列表例子。

1.6 自定义列表<dl>

<!DOCTYPE html>
<html>
    <head>
        <title>自定义列表</title>
    </head>
    <body>
        <h4>
            一个自定义列表
        </h4>
        <dl>
            <dt>电脑</dt>
            <dd>是</dd>
            <dt>显示器</dt>
            <dd>ma</dd>
        </dl>
    </body>
</html>

2 网页段落格式的设计

2.1 设置单词间隔 word-spacing

word-spacing同于设定词与词之间的间距，即增加或减少词与词之间的间隔。只能设置英文之间的间隔，中文不能使用。其属性值为：

属性值	说明
normal	默认，定义单词之间的标准间隔
length	定义单词之间的固定宽带，可以接受正值和负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单词间隔</title>
</head>
<body>
<p style="word-spacing: normal">I love you</p>
<p style="word-spacing: normal">我爱你</p>
<p style="word-spacing: 10px">I love you</p>
<p style="word-spacing: 10px">我爱你</p>
</body>
</html>

2.2 设计字符间隔 letter-spacing

用法与参数都与单词间隔类似。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单词间隔</title>
</head>
<body>
<p style="letter-spacing: normal">I love you</p>
<p style="letter-spacing: normal">我爱你</p>
<p style="letter-spacing: 10px">I love you</p>
<p style="letter-spacing: 10px">我爱你</p>
</body>
</html>

2.3 设计文字修饰 text-decoration

目的是为了突出重点，吸引眼球。其属性值有：

属性值	说明
normal	默认值，不对文本进行修正
underline	下线
overline	上划线
line-through	删除线
blink	闪烁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计文字修饰</title>
</head>
<body>
<p style="text-decoration: none">千里之行，始于足下</p>
<p style="text-decoration: underline">千里之行，始于足下</p>
<p style="text-decoration: overline">千里之行，始于足下</p>
<p style="text-decoration: line-through">千里之行，始于足下</p>
<p style="text-decoration: blink">千里之行，始于足下</p>
</body>
</html>

2.4 设计垂直对齐方式 vertical-align

定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值，其属性值如下：

属性值	说明
baseline	默认值。元素放置在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端和行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体顶端对齐
middle	把此元素放置在次元素的中部
bottom	把元素的顶端与行中最低元素的顶端对齐
text-bottom	把元素的低端与父元素字体的低端对齐
length	设置元素的堆叠顺序
%	使用“line-height”属性的百分比值来排列此元素，可用负值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置垂直对齐方式</title>
</head>
<body>
<!--super:垂直对齐文本上标、sub:垂直对齐文本下标、baseline:默认值，置于父元素的基线上-->
<p>
    中国<b style="font-size: 8pt;vertical-align: super">2012</b>神龙架
    <b style="vertical-align: sub;font-size: 8pt">[注]</b>是一个充满神奇色彩的美丽地方。<br>
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP.xfqXMBzeBSvgXieSZutzEQHaE8?pid=Api&rs=1" style="vertical-align: baseline" >
</p>
<!--100%最上端，相当于super；-100%最下端，相当于sub；0%与父元素同基线，相当于baseline-->
<p>
    中国<b style="font-size: 8pt;vertical-align: -100%">2012</b>万里长城
    <b style="vertical-align: -100%;font-size: 8pt">[注]</b>是雄伟的历史遗迹！
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP.S-JIvxFRXS5JN8tHjNvI_wHaHd?pid=Api&rs=1" style="vertical-align: middle" width=30>
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP.S-JIvxFRXS5JN8tHjNvI_wHaHd?pid=Api&rs=1" style="vertical-align: text-top" width=30>
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP.S-JIvxFRXS5JN8tHjNvI_wHaHd?pid=Api&rs=1" style="vertical-align: bottom" width=30>
    <img src="https://tse1-mm.cn.bing.net/th/id/OIP.S-JIvxFRXS5JN8tHjNvI_wHaHd?pid=Api&rs=1" style="vertical-align: text-bottom" width=30>
</p>
</body>
</html>

2.5 设计文本转换 text-transform

根据所需，将小写字母转变为大写字母，或者将大写字母转换为小写字母等，其属性值如下：

属性值	说明
none	无转换发生
capitalize	将单词首字母大写，其余无转换
uppercase	转换为大写
lowercase	转换为小写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计文本转换</title>
</head>
<body>
<p style="text-transform: none">we are friends</p>
<p style="text-transform: capitalize">we are friends</p>
<p style="text-transform: lowercase">WE ARE FRIENDS</p>
<p style="text-transform: uppercase">we are friends</p>
</body>
</html>

2.6 设计水平对齐方式 text-align

text-align属性值如下：

属性值	说明
start	文本向行的开始边缘对齐
end	文本向行的结束边缘对齐
left	文本向行的左边缘对齐，垂直方向文本在left-to-right模式下向开始边缘对齐
right	文本向行的右边缘对齐，垂直方向文本在left-to-right模式下向结束边缘对齐
center	文本在行内居中对齐
justify	文本根据text-justify的属性设置方法分散对齐，即两端对齐，均匀分布
match-parent	继承父元素对齐方式，但有例外可能是根据left或right
inherit	继承父元素的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计水平对齐方式</title>
</head>
<body>
<h1 style="text-align: center">关山月</h1>
<h3 style="text-align: left">选自：唐诗三百首</h3>
<h3 style="text-align: right">作者：李白</h3>
<p style="text-align: justify">
    明月出天上，苍茫云海间。<br>
    长风几万里，吹度玉门关。
</p>
<p style="text-align: start">开始</p>
<p style="text-align: end">结束</p>
</body>
</html>

2.7 设计文本缩进 text-indent

通常在文本段落中首行需要缩进两个字符，一次表示段落的开始。通过设置属性为长度和百分比来实现缩进。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计水平对齐方式</title>
</head>
<body>
<h1 style="text-align: center">关山月</h1>
<h3 style="text-align: left">选自：唐诗三百首</h3>
<h3 style="text-align: right">作者：李白</h3>
<p style="text-indent: 10mm;text-align: start" >
    明月出天上，苍茫云海间。<br>
</p>
<p style="text-indent: 10mm;text-align: start" >
    长风几万里，吹度玉门关。
</p>
<p style="text-align: start">开始</p>
<p style="text-align: end">结束</p>
</body>
</html>

2.8 设计文本行高 line-height

设置行间距，其属性值如下：

属性值	说明
normal	默认行高，即网页的标准行高
length	百分比数字或由浮点数字和单位表示符组成的长度值，允许为负值。百分比是居于字体的高度尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计水平对齐方式</title>
</head>
<body>
<h1 style="text-align: center">关山月</h1>
<h3 style="text-align: left">选自：唐诗三百首</h3>
<h3 style="text-align: right">作者：李白</h3>
<p style="text-indent: 10mm;text-align: start;line-height: 100px" >
    明月出天上，苍茫云海间。<br>
</p>
<p style="text-indent: 10mm;text-align: start;line-height: 800%" >
    长风几万里，吹度玉门关。
</p>
<p style="text-align: start">开始</p>
<p style="text-align: end">结束</p>
</body>
</html>

2.9 处理空白 white-space

忽略额外的空白字符，使用white-space属性可以设置对象内空格字符的处理方式。其属性值如下：

属性值	说明
normal	默认，空白会被浏览器忽略
pre	空白会被浏览器保留
nowrap	文本不会换行，文本在同一行上继续，直到遇到br为止
pre-wrap	保留空白序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承white-space属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计水平对齐方式</title>
</head>
<body>
<p style="white-space: normal">
    明月出天上，苍茫云海间。<br>
    长风几万里，吹度玉门关。
</p>
<p style="white-space: pre">
    明月出天上，苍茫云海间。<br>
    长风几万里，吹度玉门关。
</p>
<p style="white-space: nowrap">
    明月出天上，苍茫云海间。
    长风几万里，吹度玉门关。
</p>
<p style="white-space: pre-wrap">
    明月出天上，苍茫云海间。<br>
    长风几万里，吹度玉门关。
</p>
<p style="white-space: pre-line">
    明月出天上，苍茫云海间。<br>
    长风几万里，吹度玉门关。
</p>
</body>
</html>

2.10 文本排版 unicode-bidi

如果文档需要对齐顺序由从左到右进行排序时，可以通过设置一下属性进行排序：

unicode-bidi属性值	说明
normal	默认值。元素不会打开一个额外的嵌入级别，对于内联元素，跨元素边界起作用
bidi-override	与embed值相同，除此之外：在元素内，重新排序依照direction属性严格按顺序进行，此值代替隐式双向算法
embed	元素将打开一个额外的嵌入级别。direction属性的值指定嵌入级别，重新排序是在元素内影式进行的

direction属性用于设定文本流的方向，其属性值有：

direction属性值	说明
ltr	文本流从左到右
rtl	文本流从右到左
inherit	文本流的值不可继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本反排</title>
</head>
<body>
<h3 style="text-align: center">文本反向排序</h3>
<p style="direction: rtl;unicode-bidi: bidi-override;text-align: left">千里之行，始于足下</p>
</body>
</html>

3 综合案例

图文混排案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图文混排网页设计</title>
</head>
<body>
<h1 style="text-align: center;text-shadow: 0.1em 2px 6px rgb(45,116,112);font-size: 48px">塞外江南：伊犁哈萨克自治州</h1>
<img src="http://n4-q.mafengwo.net/s11/M00/9B/0D/wKgBEFt6VoyAHSNAAA_LQiYl9aM96.jpeg" style="text-align: center;width: 300px;float: left;border: #000000 solid 2px">
<p style="text-indent: 8mm;line-height: 7mm">伊犁哈萨克自治州，是新疆维吾尔自治区自治州，地处新疆维吾尔自治区西部天山北部的伊犁河谷内，属温带大陆性气候、高山气候。伊犁州辖11个县级行政区（州直）。全州总面积268593平方千米 。2019年末全州户籍人口455.68万人。2019年末州直户籍人口291.65万人 。</p>
<p style="text-indent: 8mm;line-height: 7mm">伊犁州境内驻有新疆生产建设兵团第四、七、八、九和第十师、伊犁师范大学、新疆矿冶局、新疆维吾尔自治区天山西部国有林管理局、新疆维吾尔自治区阿尔泰山国有林管理局、新疆卷烟厂、阿希金矿等一批中央和自治区直属单位 。伊犁哈萨克自治州是新疆细毛羊、伊犁马、新疆褐牛、中国美利奴羊的主要培育和生产基地，沿边有霍尔果斯、都拉塔、木扎尔特等9个国家一类口岸，主要旅游地有恰西、唐布拉、那拉提等草原民俗旅游区。文化遗迹有夏特古城、包扎墩乌孙古城、格登碑以及草原岩画等。</p>
<br>
<img src="http://n6.map.pg0.cn/T1ZIKTBTL_1RCvBVdK" style="text-align: center;width: 300px;float: left;border: #000000 solid 2px">
<p style="text-indent: 8mm;line-height: 7mm">2019年伊犁哈萨克自治州（全州）生产总值2226.45亿元，比上年增长6.0%。其中第一产业增加值509.33亿元，增长5.3%；第二产业增加值571.48亿元，增长5.1%；第三产业增加值1145.64亿元，增长6.8%。2019年州直属县市生产总值1190.71亿元，比上年增长6.5%。 [3]
</p>
</body>
</html>

而又何羡乎

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5网页列表与段落设计

1 网页文字列表设计1.1 建立无序列表<ul> 无序列表相当于markdown语法的-、*、+表示的项目符号，没有顺序，没有顺序，只把符号作为分项标识。无序列表使用标记<ul>，其中每一个列表项用<li>。在无序列表结构中，用<ul></ul>表示这一个列表的开始和结束，<li>表示一个列表的开始。在一个无序列表中可以包含多个列表项，<li>标记可以省略结束标记。<!DOCTYPE html><
复制链接

扫一扫