Maison >interface Web >tutoriel HTML >Disposition des paragraphes et retour à la ligne des pages Web HTML_HTML/Xhtml_Production de pages Web
Disposition des paragraphes et retour à la ligne des pages Web HTML_HTML/Xhtml_Production de pages Web
- PHP中文网original
- 2016-05-16 16:43:212374parcourir
L'apparence d'une page Web dépend en grande partie de sa mise en page. Lorsque de gros paragraphes de texte apparaissent sur la page, ils sont généralement planifiés en paragraphes et les sauts de ligne sont également divisés de manière très stricte. Cette section commence par les paramètres détaillés des paragraphes, afin que les lecteurs puissent utiliser des balises pour gérer librement de gros paragraphes de texte après avoir appris.
Texte et paragraphes dans les pages web HTML
Grâce à l'étude du chapitre précédent, les lecteurs disposent d'une base solide pour mettre en place les performances globales des pages web. Cependant, les lecteurs souhaitent non seulement afficher du texte sur la page Web, mais également formater et modifier le texte sur la page Web. Dans ce chapitre, vous découvrirez la mise en page simple du texte, la décoration, le défilement du texte et les hyperliens. Les hyperliens sont omniprésents dans le développement de sites Web et sont au centre des pages Web.
Lors de l'étude de ce chapitre, créez un répertoire nommé chapitre3 dans le répertoire D:web, déplacez les fichiers du chapitre précédent vers D:webchapter3, et faites un classement. Ce chapitre continue à créer des exemples de fichiers dans le répertoire D:web afin que IIS puisse être utilisé pour tester les exemples de fichiers.
— Remarque : les chapitres suivants seront traités de la même manière et ne seront pas répétés. Par exemple, les fichiers du chapitre 4 sont classés dans le chapitre D:web4.
4.1 Disposition des paragraphes et sauts de ligne
L'apparence d'une page Web dépend en grande partie de sa mise en page. Lorsque de gros paragraphes de texte apparaissent sur la page, ils sont généralement planifiés en paragraphes et les sauts de ligne sont également divisés de manière très stricte. Cette section commence par les paramètres détaillés des paragraphes, afin que les lecteurs puissent utiliser des balises pour gérer librement de gros paragraphes de texte après avoir appris.
4.1.1 Divisez les gros paragraphes de texte en paragraphes
Utilisez simplement la balise
d'un paragraphe. Les paragraphes se terminent par la balise
. Certaines pages Web omettent lors de la segmentation, qui est utilisée comme une balise unique, car la balise au début du paragraphe suivant signifie la fin du paragraphe précédent.
— Remarque : l'auteur ne recommande pas d'utiliser
comme balise unique, car ce code n'est pas standardisé et est sujet aux erreurs.
Créez un fichier de page Web dans le répertoire D:web, nommez-le p.htm et écrivez le code comme indiqué dans le code 4.1.
Paramètres du segment Code 4.1 : p.htm Paramètres du segment Code 4.1 : p.htm
<html> <head> <title>分段的设置</title> </head> <body> <p>电影双周刊：《无间道三：终极无间》评论专题</p> <p>落幕后刚刚开始</p> <p>2002年岁末，神话开始。2003年秋冬，走向高潮和终极。《无间道》即自承取乎佛家理念，光明与黑暗、生存与消亡、 存在与虚无纠结于混然一体，愕然分崩离析，亦是丰富兼统一的过程。有因就有果，有孽就有缘， 境与相的妙处在于言诠的限度，不可道破，又不可沉默，相互依托。心音始终在，拷问自我，拷问时空。这是最好的时代， 这是最坏的时代，几乎每个时代的人都在这么说。然而《维摩诘经·观众生品第七》中说：无住则无本。从身体的言行开始， 经过辩难言说的层面，初步达到存有自视境界，最后不过是归结为生存的态度。在我看来，刘健明、陈永仁、韩琛、黄志诚、 倪永孝、陆启昌、杨锦荣、沈澄等人其实是宿命中的镜像人物，都可以从对方身上看到自我，抗争、迸发、沉雄、挥洒， 仿佛的劫数、扭曲的生命，于是乎“无间道”。</p> <p>顾准说从理想主义到经验主义，王小波说要警惕僭主和英雄，谁是英雄？他们从哪里来？他们来了又怎样？ 我们这个时代还要不要英雄？我在编辑这期E论坛时，有一些欣慰，从文字中可以看出大家都在思考， 毕竟我们不再是盲从的一代。在我看来，娱乐从来就不仅仅是娱乐本身，从一滴水、一朵花、一粒沙可以看到一个世界， 从一场电影中我们想到的注定更多，理解定可变奏无穷。我们每个人就构成了这个世界，无论这个世界是好是坏， 我们都有份。我们每个人都有自己的生活，都有优点都有缺点，这是我们共同进步的基础。</p> </body> </html>
Entrez http://localhost/p.htm dans la barre d'adresse du navigateur pour voir l'effet Comme indiqué dans Graphique 4.1. 
Figure 4.1 Paramètre de segmentation
Grâce à la segmentation des balises
4.1.2 Ajouter des espaces au texte
Regardez attentivement la figure 4.1. La segmentation dans l'image semble un peu gênante car il n'y a pas d'espace de caractère au début de chaque paragraphe.
— Remarque : selon les habitudes d'écriture chinoises, la première ligne d'un paragraphe doit être espacée de 2 caractères chinois.
Comme nous l'avons appris dans le chapitre précédent, si vous appuyez directement sur la barre d'espace du clavier dans le code HTML, celui-ci ne s'affichera pas sur la page. HTML utilise " " pour représenter un caractère espace (caractère espace anglais). Puisqu'un caractère chinois occupe la largeur de deux caractères anglais, quatre caractères " " sont ajoutés au début de la première ligne du paragraphe. Le code pour modifier p.htm est tel qu'indiqué dans le code 4.2.
Code 4.2 Paramètre du caractère espace : p.htm
<html> <head> <title>分段的设置</title> </head> <body> <p>电影双周刊：《无间道三：终极无间》评论专题</p> <p>落幕后刚刚开始</p> <p> 2002年岁末，神话开始。2003年秋冬，走向高潮和终极。《无间道》即自承取乎佛家理念， 光明与黑暗、生存与消亡、存在与虚无纠结于混然一体，愕然分崩离析，亦是丰富兼统一的过程。有因就有果，有孽就有缘， 境与相的妙处在于言诠的限度，不可道破，又不可沉默，相互依托。心音始终在，拷问自我，拷问时空。这是最好的时代， 这是最坏的时代，几乎每个时代的人都在这么说。然而《维摩诘经·观众生品第七》中说：无住则无本。从身体的言行开始， 经过辩难言说的层面，初步达到存有自视境界，最后不过是归结为生存的态度。在我看来，刘健明、陈永仁、韩琛、黄志诚、 倪永孝、陆启昌、杨锦荣、沈澄等人其实是宿命中的镜像人物，都可以从对方身上看到自我，抗争、迸发、沉雄、挥洒， 仿佛的劫数、扭曲的生命，于是乎“无间道”。</p> <p> 顾准说从理想主义到经验主义，王小波说要警惕僭主和英雄，谁是英雄？他们从哪里来？ 他们来了又怎样？我们这个时代还要不要英雄？我在编辑这期E论坛时，有一些欣慰，从文字中可以看出大家都在思考， 毕竟我们不再是盲从的一代。在我看来，娱乐从来就不仅仅是娱乐本身，从一滴水、一朵花、一粒沙可以看到一个世界， 从一场电影中我们想到的注定更多，理解定可变奏无穷。我们每个人就构成了这个世界，无论这个世界是好是坏， 我们都有份。我们每个人都有自己的生活，都有优点都有缺点，这是我们共同进步的基础。</p> </body> </html>
Entrez http://localhost/p.htm dans la barre d'adresse du navigateur, l'effet de navigation est comme suit Comme le montre la figure 4.2. 
Figure 4.2 Paramètres des caractères d'espace
Le paragraphe a été initialement formé et les espaces ont été reflétés. Les lecteurs peuvent ajouter n'importe quel espace dans le paragraphe pour tester.
4.1.3 Définir s'il faut ou non envelopper le texte
La figure 4.1 ne semble poser aucun problème lorsque le texte atteint la limite du navigateur, il s'enroule automatiquement. Cependant, lorsque la largeur du navigateur est ajustée, la position de l'habillage du texte change également en conséquence et le format semble assez déroutant. Afin de standardiser le format, les lecteurs doivent utiliser la balise unique
pour forcer un saut de ligne là où un saut de ligne est requis lors de l'écriture du code. À l’inverse, les parties qui ne nécessitent pas de saut de ligne sont incluses dans les balises doubles. Modifiez le code p.htm comme indiqué dans le code 4.3.
Code 4.3 Contrôle des sauts de ligne : p.htm
代码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>
Entrez http://localhost/p.htm dans la barre d'adresse du navigateur et l'effet de navigation est celui indiqué dans la figure 4.3. 
Figure 4.3 Contrôle des sauts de ligne
À partir de cet exemple, la partie incluse ne s'enroulera pas automatiquement à moins qu'il n'y ait un
pour forcer un saut de ligne.
4.1.4 Définir l'alignement du texte
Le texte du paragraphe doit être aligné différemment à un moment donné. L'alignement par défaut est aligné à gauche. L'attribut d'alignement de la balise
est align. En définissant la valeur d'alignement sur gauche, droite ou centre, un alignement à gauche, à droite et au centre peut être obtenu. Modifiez le code p.htm comme indiqué dans le code 4.4.
Code 4.4 Contrôle d'alignement : 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提供了修饰段落的水平分隔线，在很多场合中可以轻松使用，不需要另外作图。水平分隔线的标签是单标签
，默认情况下占一行。
在D:\web\目录下创建网页文件，命名为hr.htm，编写代码如代码4.5所示。
代码4.5 分隔线的设置：hr.htm
<html> <head> <title>分隔线的设置</title> </head> <body> <p align="center">回顾乐坛粤语歌曲辉煌</p> <hr /> <p> 究竟哪首歌是最早的粤语歌，还存在争议。１９７３年，“筷子姊妹花” 成员仙杜拉演唱了由顾嘉辉创作的电视剧《啼笑因缘》同名主题歌，此歌也是香港歌坛第一首粤语剧集主题歌。同年， 初出茅庐的郑少秋同样在ＴＶＢ剧集《烟雨蒙蒙》中出演并主唱同名主题歌。而１９７４年由许冠杰演唱的大热电影 《鬼马双星》同名主题歌则更是乐坛的重磅炸弹，成为第一首在英国ＢＢＣ电台播放的中文歌曲，在当时名震一时， 也最受大家对粤语歌起源的认同。</p> </body> </html>
在浏览器地址栏输入http://localhost/hr.htm，浏览效果如图4.5所示。
究竟哪首歌是最早的粤语歌，还存在争议。1973年，“筷子姊妹花”成中仙杜拉演唱了上顾嘉辉创作的电视剧《啼笑因缘》同名主题歌，此歌也是香港歌坛第一首粤语剧集主题歌。同年，初了茅庐的郑少秋同样在TVB剧集《烟雨蒙蒙》中出演并主唱同名主题歌。而1974年由许冠杰演唱的大热电影《鬼马双星》同名主题歌则更是乐坛的重磅炸弹，成为第一首在英国BBC电台播放的中文歌曲，在当时名震一时，也最受大家对粤语起源的认同。
图4.5 分隔线的设置
一个简单的
标签就可以实现分隔线，轻松地修饰了段落排版，使之更美观。不过对于不同的应用场合，
默认单一的线条样式显然不能满足要求。
标签的多种属性解决了这个问题，常用的属性有width、size、align、color和title。width即宽度设置，属性值默认单位为像素，也可以用百分比来表示分隔线所占空间的比例。size可以理解为分隔线的厚度或高度，属性值默认单位同宽度。align为对齐方式，类似于
的align。color即颜色，根据需要设置分隔线的不同颜色。title属性使用不多，浏览者光标悬停在分隔线上时出现属性值的内容提示。
— 说明：
的默认对齐方式是居中。HTML的宽度和高度属性默认单位为像素，一般无须标识单位。不过style属性中必须标识单位。
还有一个属性是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网页的段落排版和换行_HTML/Xhtml_网页制作的内容，更多相关内容请关注PHP中文网（www.php.cn）！