html5教程之HTML网页的段落排版和换行
每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5viewport的使用能帮你做到这一点……网页制造WEB文章简介：网页的表面是不是美妙，很年夜水平上取决于其排版。在页面中呈现年夜段的笔墨，一般接纳分段举行计划，对调行也有极为严厉的分别。本节从段落的细节设置动手，使读者进修后能使用标签自若地处置年夜段的笔墨。HTML网页中的笔墨和段落
经由过程上一章的进修，读者在网页全体体现设置方面有了对照踏实的基本。可是读者不但是但愿在网页上体现笔墨，更但愿对网页上的笔墨举行排版、润色。本章将进修笔墨的复杂排版、润色、转动笔墨和超等链接。超等链接在网站开辟中无处不在，是网页中的重点。
进修本章时，在D:web目次下创立一个目次定名为chapter3，把上一章的文件挪动到D:webchapter3，做一个回类。本章持续在D:web目次下创立示例文件，如许便利用IIS测试示例文件。
—申明：今后章节都作相似处置，不再反复申明。如第4章文件回类到D:webchapter4。
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，扫瞄效果如.1所示。
.1分段的设置
经由过程<p></p>标签的分段，年夜段的笔墨排版井然有序。
4.1.2给笔墨到场空格
细心察看.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，扫瞄效果如.2所示。
.2空格符的设置
段落已开端成形了，空格已体现了出来。读者能够在段落中恣意加上空格符测试。
4.1.3设置笔墨换行与不换行
.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，扫瞄效果如.3所示。
.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>
<palign="center">2002年事末，神话入手下手。2003年秋冬，走向低潮和最终。《无间道》即自承取乎佛家理念，光亮与暗中、保存与灭亡、存在与虚无纠结于混然一体，惊诧四分五裂，亦是丰厚兼一致的历程。有因就有果，有孽就有缘，境与相的妙处在于言诠的限制，不成道破，又不成缄默，互相依托。心音一直在，拷问自我，拷问时空。这是最好的时期，这是最坏的时期，几近每一个时期的人都在这么说。但是《维摩诘经·不雅众生品第七》中说：无住则无本。从身材的言行入手下手，经由辩难言说的层面，开端到达存有自视地步，最初不外是回结为保存的立场。在我看来，刘健明、陈永仁、韩琛、黄志诚、倪永孝、陆启昌、杨锦荣、沈澄等人实际上是宿射中的镜像人物，都能够从对方身上看到自我，抗争、迸发、沉雄、挥洒，似乎的劫运、歪曲的性命，因而乎“无间道”。</p>
<palign="right">顾准说从幻想主义到履历主义，王小波说要小心僭主和好汉，谁是好汉？他们从那里来？他们来了又如何？我们这个时期还要不要好汉？我在编纂这期E论坛时，有一些欣喜，从笔墨中能够看出人人都在思索，究竟我们不再是顺从的一代。在我看来，文娱历来就不单单是文娱自己，从一滴水、一朵花、一粒沙能够看到一个天下，从一场影戏中我们想到的必定更多，了解定可变奏无量。我们每一个人就组成了这个天下，不管这个天下是好是坏，我们都有份。我们每一个人都有本人的生存，都有长处都出缺点，这是我们配合前进的基本。</p>
</body>
</html>
在扫瞄器地点栏输出http://localhost/p.htm，扫瞄效果如.4所示。
.4对齐的把持
4.1.5增加程度分开线
HTML供应了润色段落的程度分开线，在良多场所中能够轻松利用，不必要别的作图。程度分开线的标签是单标签<hr/>，默许情形下占一行。
在D:web目次下创立网页文件，定名为hr.htm，编写代码如代码4.5所示。
代码4.5分开线的设置：hr.htm
<html>
<head>
<title>分开线的设置</title>
</head>
<body>
<palign="center">回忆乐坛粤语歌曲光辉</p>
<hr/>
<p>事实哪首歌是最早的粤语歌，还存在争议。１９７３年，“筷子姊妹花”成员仙杜拉演唱了由顾嘉辉创作的电视剧《啼笑人缘》同名主题歌，此歌也是喷鼻港歌坛第一首粤语剧集主题歌。同年，初出茅庐的郑少秋一样在ＴＶＢ剧集《烟雨蒙蒙》中出演并主唱同名主题歌。而１９７４年由许冠杰演唱的年夜热影戏《鬼马双星》同名主题歌则更是乐坛的重磅炸弹，成为第一首在英国ＢＢＣ电台播放的中文歌曲，在事先声誉鹊起，也最受人人对粤语歌劈头的认同。</p>
</body>
</html>
在扫瞄器地点栏输出http://localhost/hr.htm，扫瞄效果如.5所示。
事实哪首歌是最早的粤语歌，还存在争议。1973年，“筷子姊妹花”成中仙杜拉演唱了上顾嘉辉创作的电视剧《啼笑人缘》同名主题歌，此歌也是喷鼻港歌坛第一首粤语剧集主题歌。同年，初了茅庐的郑少秋一样在TVB剧集《烟雨蒙蒙》中出演并主唱同名主题歌。而1974年由许冠杰演唱的年夜热影戏《鬼马双星》同名主题歌则更是乐坛的重磅炸弹，成为第一首在英国BBC电台播放的中文歌曲，在事先声誉鹊起，也最受人人对粤语劈头的认同。
.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/>
<hrwidth="300"align="right"/>
设置了50%宽度而且居中对齐的分开线：<br/>
<hrwidth="50%"align="left"/>
设置了50%宽度、50像素的厚度而且没有利用noshade的分开线：<br/>
<hrwidth="50%"size="50"/>
设置了50像素的厚度而且利用noshade的分开线：<br/>
<hrsize="50"noshade="noshade"/>
设置了50像素的厚度而且设置了深白色的分开线：<br/>
<hrsize="50"color="770000"/>
设置了50像素的厚度、设置了浅蓝色而且设置了“感激你的到来！”提醒的分开线：<br/>
<hrsize="50"color="0000cc"title="感激你的到来！"/>
</body>
</html>
在扫瞄器地点栏输出http://localhost/hr.htm，扫瞄效果如.6所示。
.6分开线的款式设置
</p>
历经多年来的停滞不前，如今全球信息网联盟(WorldWideWebConsortium，W3C)重拾HTML标准化。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
页:
[1]