15年来,为全国50万+企业提供互联网数字化基础应用服务。
微网小程序
电商运营
关于我们
付款方式
荣誉资质
业务提交
代理合作
知 识
400-1100-266
9:00-24:00(工作日)
首 页
企业400电话
Hot
网站建设
商标✡知产
网络优化推广
热
AI电话机器人
呼叫中心
彩铃•短信
增值拓展业务
新
主页
>
知识库
> HTML网页的段落排版和换行
HTML网页的段落排版和换行
热门标签:
使用U盘装系统
检查注册表项
硅谷的囚徒呼叫中心
阿里云
美图手机
网站建设
百度竞价点击价格的计算公式
智能手机
网页的外观是否美观,很大程度上取决于其排版。在页面中出现大段的文字,通常采用分段进行规划,对换行也有极其严格的划分。本节从段落的细节设置入手,使读者学习后能利用标签自如地处理大段的文字。
HTML网页中的文字和段落
通过上一章的学习,读者在网页整体表现设置方面有了比较扎实的基础。但是读者不仅是希望在网页上表现文字,更希望对网页上的文字进行排版、修饰。本章将学习文字的简单排版、修饰、滚动文字以及超级链接。超级链接在网站开发中无处不在,是网页中的重点。
学习本章时,在D:\web\目录下创建一个目录命名为chapter3,把上一章的文件移动到D:\web\chapter3,做一个归类。本章继续在D:\web\目录下创建示例文件,这样方便用IIS测试示例文件。
— 说明:以后章节都作类似处理,不再重复说明。如第4章文件归类到D:\web\ chapter4。
4.1 段落排版和换行
网页的外观是否美观,很大程度上取决于其排版。在页面中出现大段的文字,通常采用分段进行规划,对换行也有极其严格的划分。本节从段落的细节设置入手,使读者学习后能利用标签自如地处理大段的文字。
4.1.1 给大段文字进行分段
简单地对文字分段常用<p></p>标签,即段落的开始用<p>,段落的结束用</p>标签。某些网页分段时省略了</p>,即作为单标签使用,因为下一段开始的<p>标签就意味上一段的结束。
— 注意:笔者不推荐把<p>当作单标签使用,这样代码不规范,易出错。
在D:\web\目录下创建网页文件,命名为p.htm,编写代码如代码4.1所示。
代码4.1 分段的设置:p.htm
<html>
<head>
<title>分段的设置</title>
</head>
<body>
<p>电影双周刊:《无间道三:终极无间》评论专题</p>
<p>落幕后刚刚开始</p>
<p>2002年岁末,神话开始。2003年秋冬,走向高潮和终极。《无间道》即自承取乎佛家理念,光明与黑暗、生存与消亡、存在与虚无纠结于混然一体,愕然分崩离析,亦是丰富兼统一的过程。有因就有果,有孽就有缘,境与相的妙处在于言诠的限度,不可道破,又不可沉默,相互依托。心音始终在,拷问自我,拷问时空。这是最好的时代,这是最坏的时代,几乎每个时代的人都在这么说。然而《维摩诘经·观众生品第七》中说:无住则无本。从身体的言行开始,经过辩难言说的层面,初步达到存有自视境界,最后不过是归结为生存的态度。在我看来,刘健明、陈永仁、韩琛、黄志诚、倪永孝、陆启昌、杨锦荣、沈澄等人其实是宿命中的镜像人物,都可以从对方身上看到自我,抗争、迸发、沉雄、挥洒,仿佛的劫数、扭曲的生命,于是乎“无间道”。</p>
<p>顾准说从理想主义到经验主义,王小波说要警惕僭主和英雄,谁是英雄?他们从哪里来?他们来了又怎样?我们这个时代还要不要英雄?我在编辑这期E论坛时,有一些欣慰,从文字中可以看出大家都在思考,毕竟我们不再是盲从的一代。在我看来,娱乐从来就不仅仅是娱乐本身,从一滴水、一朵花、一粒沙可以看到一个世界,从一场电影中我们想到的注定更多,理解定可变奏无穷。我们每个人就构成了这个世界,无论这个世界是好是坏,我们都有份。我们每个人都有自己的生活,都有优点都有缺点,这是我们共同进步的基础。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/p.htm,浏览效果如图4.1所示。
图4.1 分段的设置
通过<p></p>标签的分段,大段的文字排版井井有条。
4.1.2 给文字加入空格
仔细观察图4.1,图中的分段感觉有点别扭,因为每段开始没有字符空格。
— 说明:按中文写作习惯,段落的首行须空格2个中文字符。
前面章节学习过,在HTML代码中直接用键盘敲击空格键,是无法显示在页面上的。HTML使用“ ”表现1个空格字符(英文的空格字符)。由于1个中文字符占两个英文字符的宽度,所以在段落的首行开头加上4个“ ”字符,修改p.htm的代码如代码4.2所示。
代码4.2 空格符的设置:p.htm
<html>
<head>
<title>分段的设置</title>
</head>
<body>
<p>电影双周刊:《无间道三:终极无间》评论专题</p>
<p>落幕后刚刚开始</p>
<p> 2002年岁末,神话开始。2003年秋冬,走向高潮和终极。《无间道》即自承取乎佛家理念,光明与黑暗、生存与消亡、存在与虚无纠结于混然一体,愕然分崩离析,亦是丰富兼统一的过程。有因就有果,有孽就有缘,境与相的妙处在于言诠的限度,不可道破,又不可沉默,相互依托。心音始终在,拷问自我,拷问时空。这是最好的时代,这是最坏的时代,几乎每个时代的人都在这么说。然而《维摩诘经·观众生品第七》中说:无住则无本。从身体的言行开始,经过辩难言说的层面,初步达到存有自视境界,最后不过是归结为生存的态度。在我看来,刘健明、陈永仁、韩琛、黄志诚、倪永孝、陆启昌、杨锦荣、沈澄等人其实是宿命中的镜像人物,都可以从对方身上看到自我,抗争、迸发、沉雄、挥洒,仿佛的劫数、扭曲的生命,于是乎“无间道”。</p>
<p> 顾准说从理想主义到经验主义,王小波说要警惕僭主和英雄,谁是英雄?他们从哪里来?他们来了又怎样?我们这个时代还要不要英雄?我在编辑这期E论坛时,有一些欣慰,从文字中可以看出大家都在思考,毕竟我们不再是盲从的一代。在我看来,娱乐从来就不仅仅是娱乐本身,从一滴水、一朵花、一粒沙可以看到一个世界,从一场电影中我们想到的注定更多,理解定可变奏无穷。我们每个人就构成了这个世界,无论这个世界是好是坏,我们都有份。我们每个人都有自己的生活,都有优点都有缺点,这是我们共同进步的基础。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/p.htm,浏览效果如图4.2所示。
图4.2 空格符的设置
段落已经初步成形了,空格已经表现了出来。读者可以在段落中任意加上空格符测试。
4.1.3 设置文字换行与不换行
图4.1看上去已经没有问题了,当文字到达浏览器的边界后将自动换行。但是当调整浏览器的宽度时,文字换行的位置也相应发生变化,格式显得相当混乱。为了规范格式,读者应该在编写代码时在需要换行的位置用单标签<br />标签强制换行。反之,不需要换行的部分用双标签<nobr></nobr>包含。修改p.htm代码如代码4.3所示。
代码4.3 换行的控制:p.htm
<html>
<head>
<title>分段的设置</title>
</head>
<body>
<p>电影双周刊:《无间道三:终极无间》评论专题</p>
<p>落幕后刚刚开始</p>
<p> 2002年岁末,神话开始。2003年秋冬,走向高潮和终极。<br /><nobr>《无间道》即自承取乎佛家理念,光明与黑暗、生存与消亡、存在与虚无纠结于混然一体,愕然分崩离析,亦是<br />丰富兼统一的过程。有因就有果,</nobr>有孽就有缘,境与相的妙处在于言诠的限度,不可道破,又不可沉默,相互依托。心音始终在,拷问自我,拷问时空。<nobr>这是最好的时代,这是最坏的时代,几乎每个时代的人都在这么说。然而《维摩诘经·观众生品第七》中说:无住则无本。</nobr>从身体的言行开始,经过辩难言说的层面,初步达到存有自视境界,最后不过是归结为生存的态度。在我看来,刘健明、陈永仁、韩琛、黄志诚、倪永孝、陆启昌、杨锦荣、沈澄等人其实是宿命中的镜像人物,都可以从对方身上看到自我,抗争、迸发、沉雄、挥洒,仿佛的劫数、扭曲的生命,于是乎“无间道”。</p>
<p> 顾准说从理想主义到经验主义,王小波说要警惕僭主和英雄,谁是英雄?他们从哪里来?他们来了又怎样?我们这个时代还要不要英雄?我在编辑这期E论坛时,有一些欣慰,从文字中可以看出大家都在思考,毕竟我们不再是盲从的一代。在我看来,娱乐从来就不仅仅是娱乐本身,从一滴水、一朵花、一粒沙可以看到一个世界,从一场电影中我们想到的注定更多,理解定可变奏无穷。我们每个人就构成了这个世界,无论这个世界是好是坏,我们都有份。我们每个人都有自己的生活,都有优点都有缺点,这是我们共同进步的基础。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/p.htm,浏览效果如图4.3所示。
图4.3 换行的控制
由本例可得,被<nobr></nobr>包含的部分不会自动换行,除非有<br />强制换行。
4.1.4 设置文字对齐方式
段落中的文字在某些时候需要有不同的对齐方式,默认对齐方式是左对齐。<p>标签的对齐属性为align,通过设置align为left、right或center值实现左对齐、右对齐和居中对齐。修改p.htm代码如代码4.4所示。
代码4.4 对齐的控制:p.htm
<html>
<head>
<title>分段的设置</title>
</head>
<body>
<p>电影双周刊:《无间道三:终极无间》评论专题</p>
<p>落幕后刚刚开始</p>
<p align="center"> 2002年岁末,神话开始。2003年秋冬,走向高潮和终极。《无间道》即自承取乎佛家理念,光明与黑暗、生存与消亡、存在与虚无纠结于混然一体,愕然分崩离析,亦是丰富兼统一的过程。有因就有果,有孽就有缘,境与相的妙处在于言诠的限度,不可道破,又不可沉默,相互依托。心音始终在,拷问自我,拷问时空。这是最好的时代,这是最坏的时代,几乎每个时代的人都在这么说。然而《维摩诘经·观众生品第七》中说:无住则无本。从身体的言行开始,经过辩难言说的层面,初步达到存有自视境界,最后不过是归结为生存的态度。在我看来,刘健明、陈永仁、韩琛、黄志诚、倪永孝、陆启昌、杨锦荣、沈澄等人其实是宿命中的镜像人物,都可以从对方身上看到自我,抗争、迸发、沉雄、挥洒,仿佛的劫数、扭曲的生命,于是乎“无间道”。</p>
<p align="right"> 顾准说从理想主义到经验主义,王小波说要警惕僭主和英雄,谁是英雄?他们从哪里来?他们来了又怎样?我们这个时代还要不要英雄?我在编辑这期E论坛时,有一些欣慰,从文字中可以看出大家都在思考,毕竟我们不再是盲从的一代。在我看来,娱乐从来就不仅仅是娱乐本身,从一滴水、一朵花、一粒沙可以看到一个世界,从一场电影中我们想到的注定更多,理解定可变奏无穷。我们每个人就构成了这个世界,无论这个世界是好是坏,我们都有份。我们每个人都有自己的生活,都有优点都有缺点,这是我们共同进步的基础。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/p.htm,浏览效果如图4.4所示。
图4.4 对齐的控制
4.1.5 添加水平分隔线
HTML提供了修饰段落的水平分隔线,在很多场合中可以轻松使用,不需要另外作图。水平分隔线的标签是单标签<hr />,默认情况下占一行。
在D:\web\目录下创建网页文件,命名为hr.htm,编写代码如代码4.5所示。
代码4.5 分隔线的设置:hr.htm
<html>
<head>
<title>分隔线的设置</title>
</head>
<body>
<p align="center">回顾乐坛粤语歌曲辉煌</p>
<hr />
<p> 究竟哪首歌是最早的粤语歌,还存在争议。1973年,“筷子姊妹花”成员仙杜拉演唱了由顾嘉辉创作的电视剧《啼笑因缘》同名主题歌,此歌也是香港歌坛第一首粤语剧集主题歌。同年,初出茅庐的郑少秋同样在TVB剧集《烟雨蒙蒙》中出演并主唱同名主题歌。而1974年由许冠杰演唱的大热电影《鬼马双星》同名主题歌则更是乐坛的重磅炸弹,成为第一首在英国BBC电台播放的中文歌曲,在当时名震一时,也最受大家对粤语歌起源的认同。</p>
</body>
</html>
在浏览器地址栏输入http://localhost/hr.htm,浏览效果如图4.5所示。
究竟哪首歌是最早的粤语歌,还存在争议。1973年,“筷子姊妹花”成中仙杜拉演唱了上顾嘉辉创作的电视剧《啼笑因缘》同名主题歌,此歌也是香港歌坛第一首粤语剧集主题歌。同年,初了茅庐的郑少秋同样在TVB剧集《烟雨蒙蒙》中出演并主唱同名主题歌。而1974年由许冠杰演唱的大热电影《鬼马双星》同名主题歌则更是乐坛的重磅炸弹,成为第一首在英国BBC电台播放的中文歌曲,在当时名震一时,也最受大家对粤语起源的认同。
图4.5 分隔线的设置
一个简单的<hr />标签就可以实现分隔线,轻松地修饰了段落排版,使之更美观。不过对于不同的应用场合,<hr />默认单一的线条样式显然不能满足要求。<hr />标签的多种属性解决了这个问题,常用的属性有width、size、align、color和title。width即宽度设置,属性值默认单位为像素,也可以用百分比来表示分隔线所占空间的比例。size可以理解为分隔线的厚度或高度,属性值默认单位同宽度。align为对齐方式,类似于<p>的align。color即颜色,根据需要设置分隔线的不同颜色。title属性使用不多,浏览者光标悬停在分隔线上时出现属性值的内容提示。
— 说明:<hr />的默认对齐方式是居中。HTML的宽度和高度属性默认单位为像素,一般无须标识单位。不过style属性中必须标识单位。
<hr />还有一个属性是noshade,当分隔线没有设置颜色,并且设置了一定的size时,分隔线看上去是立体下凹的,有阴影。如果使用了noshade属性,分隔线将会呈现单色。修改hr.htm代码如代码4.6所示。
代码4.6 分隔线的样式设置:hr.htm
<html>
<head>
<title>分隔线的设置</title>
</head>
<body>
设置了300像素宽度并且右对齐的分隔线:<br />
<hr width="300" align="right" />
设置了50%宽度并且居中对齐的分隔线:<br />
<hr width="50%" align="left" />
设置了50%宽度、50像素的厚度并且没有使用noshade的分隔线:<br />
<hr width="50%" size="50" />
设置了50像素的厚度并且使用noshade的分隔线:<br />
<hr size="50" noshade="noshade" />
设置了50像素的厚度并且设置了深红色的分隔线:<br />
<hr size="50" color="770000"/>
设置了50像素的厚度、设置了浅蓝色并且设置了“感谢你的到来!”提示的分隔线:<br />
<hr size="50" color="0000cc" title="感谢你的到来!"/>
</body>
</html>
在浏览器地址栏输入http://localhost/hr.htm,浏览效果如图4.6所示。
图4.6 分隔线的样式设置
标签:
烟台
湘潭
湖北
贺州
怀化
黄山
山南
通辽
巨人网络通讯声明:本文标题《HTML网页的段落排版和换行》,本文关键词 ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
相关文章
电销机器人到底如何运作的?
很多人对 电销 机器人到底如何运作存在着巨大的好奇心,那么今天,小编就带大家看一下机器人的运作流程! 电销...
10-24
电话机器人的兴起对电销行业来说是“惊喜”还
随着互联网 大数据 的普及,许多 电销 行业如雨后春笋般争先恐后地冒出来。而今电销行业的混乱,让各位涉足电销...
10-24
百应电话机器人有哪些功能?百应电话机器人好
百应 智能 电话机器人 能够协助企业进行呼入接待、 外呼 回访等服务场景,能够经过不断的培训学习,逐步完善成专...
10-24
客服外呼系统都有哪些优势?
当前呼叫中心电话系统被企业用于业务 电销 以及客户服务,然而随着企业需求不断扩大,原来传统的自建 呼叫中心...
10-24
电销机器人效果怎么样?智能电话机器人可行吗
几百数千年后,或许没人会记得卡斯帕罗夫曾是世界第一的围棋高手,但人们会记得,他败给了电脑深蓝。那虽算不...
10-24
百应智能外呼系统,贷后管理科技升级
去年底开始,接连出台政策和法规加强对消费 金融 等金融形态进行 规范 。强 监管 下,行业走向规范发展,行业竞...
10-24
百应智能外呼系统引领外呼行业新风向
电话销售: 您好,我这边是XX地产,给您推荐一下精装酒店式公寓,有兴趣了解一下吗? 客户: 具体位置在哪里啊?...
10-24
小贷企业为什么需要电销机器人?
随着信贷行业逐步进入我们的生活中,越来越多人选择借款来处理资金难题。信贷企业不断涌现,业务开展迅猛,行...
10-24
雷霆电话机器人是如何转接人工的?
当我们在拨通移动、联通或电信 运营商 的客服电话时,总会要先经过一些机械化的选择,然后成功连接人工坐席反馈...
10-24
米卡迪电话机器人效果怎么样?
外呼 电话机器人 ,之所以能智能的与客户无忧交流,因为运用了下面这么多高技术。 ASR 语音识别 米卡迪电话机器人...
10-24
灵声电话机器人效果怎么样?好用吗
外呼 电话机器人 ,之所以能智能的与客户无忧交流,因为运用了下面这么多高技术。 灵声 电话机器人 效果怎么样?...
10-24
电销机器人要想效果好,话术定制有多重要
电话机器人 是基于智能语音技术的智能营销工具。它会像真人一样主动拨打客户的电话,介绍产品并回答客户的咨询...
10-24
智能电话机器人的实现原理,使用安全吗?
随着科学技术的进步和 人工智能 的发展,越来越多的智能产品已经进入我们的工作和生活。智能手机、智能电视、智...
10-24
福州哪里有电话机器人研发公司?
人工智能 再次成为各行各业关注的焦点,自从这个概念首次提出以来,60年已经过去了。自从AlphaGo以巨大优势击败人...
10-24
电销机器人销售能力怎么样?
自从 电话机器人 一出现,在 电销 行业火爆了起来。面对电话机器人的各种优势,企业跃跃欲试,但又害怕效果不理...
10-24
推荐文章
如何搭建安装型呼叫中心系统
什么是电话营销
保护未注册商标的合理性
c#加密类使用方法示例
vbs实现右键菜单中添加CMD HERE
浅谈laravel 5.6 安装 windows上使用composer的安装过程
黑客窃取澳军资料,涉30GB敏感信息
ASP.NET中RadioButtonList绑定后台数据后触发点击事件
上一篇:
网页HTML代码:滚动文字的制作
下一篇:
HTML网页各种字体格式的细节修饰
一起分享吧
版权所有:巨人网络(扬州)科技有限公司——拥有网站建设十年经验,具备独立网站开发能力,能够提供完善的网站设计及相关的网站制作服务! 全国统一服务热线:400-1100-266
展开
收缩
QQ咨询
在线咨询
客服小董
客服小张
客服小刘
客服小李
客服小王
招商加盟
财务查询
微信客服
电话咨询
400-1100-266