웹페이지의 모양은 레이아웃에 따라 크게 달라집니다. 페이지에 큰 단락의 텍스트가 나타날 때 일반적으로 단락 단위로 계획되며 줄 바꿈도 매우 엄격하게 구분됩니다. 이 섹션에서는 독자가 학습 후 태그를 사용하여 텍스트의 큰 단락을 자유롭게 처리할 수 있도록 단락의 세부 설정부터 시작합니다.
HTML 웹 페이지의 텍스트와 단락
이전 장의 학습을 통해 독자는 웹 페이지의 전반적인 성능을 설정하는 데 있어 탄탄한 기반을 갖게 됩니다. 그러나 독자는 웹 페이지에 텍스트를 표시하기를 원할 뿐만 아니라 웹 페이지의 텍스트 형식을 지정하고 수정하기를 원합니다. 이 장에서는 간단한 텍스트 레이아웃, 장식, 텍스트 스크롤 및 하이퍼링크에 대해 배웁니다. 하이퍼링크는 웹사이트 개발에서 어디에나 존재하며 웹페이지의 핵심입니다.
이 장을 공부할 때 D:web 디렉터리에 Chapter3이라는 디렉터리를 만들고, 이전 장의 파일들을 D:webchapter3로 이동한 후 분류를 해보세요. 이 장에서는 IIS를 사용하여 샘플 파일을 테스트할 수 있도록 D:web 디렉터리에 샘플 파일을 계속 만듭니다.
— 참고: 다음 장은 유사하게 다루어지며 반복되지 않습니다. 예를 들어 Chapter 4의 파일은 D:web Chapter4로 분류됩니다.
4.1 단락 레이아웃 및 줄바꿈
웹페이지의 모양은 레이아웃에 따라 크게 달라집니다. 페이지에 큰 단락의 텍스트가 나타날 때 일반적으로 단락 단위로 계획되며 줄 바꿈도 매우 엄격하게 구분됩니다. 이 섹션에서는 독자가 학습 후 태그를 사용하여 텍스트의 큰 단락을 자유롭게 처리할 수 있도록 단락의 세부 설정부터 시작합니다.
4.1.1 큰 텍스트 단락을 여러 단락으로 나누기
간단히
단락은
일부 웹페이지에서는 분할할 때 를 생략하는데, 이는 다음 문단 시작 부분의 태그가 이전 문단의 끝을 의미하기 때문입니다.
— 참고: 이 코드는 표준화되지 않았고 오류가 발생하기 쉽기 때문에
를 단일 태그로 사용하는 것을 권장하지 않습니다.
D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 p.htm으로 지정한 후 코드 4.1과 같이 코드를 작성합니다.
코드 4.1 세그먼트 설정: p.htm 코드 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 분할 설정
4.1.2 텍스트에 공백 추가
그림 4.1을 잘 보시면 각 문단 시작 부분에 공백이 없기 때문에 이미지 분할이 조금 어색하게 느껴집니다.
— 참고: 중국어 쓰기 습관에 따라 문단의 첫 줄은 한자 2자로 띄워야 합니다.
이전 장에서 배웠듯이 HTML 코드에서 키보드의 스페이스바를 직접 누르면 페이지에 표시되지 않습니다. HTML은 공백 문자(영어 공백 문자)를 나타내기 위해 " "를 사용합니다. 한자 하나가 영어 두 자의 너비를 차지하므로 문단 첫 줄의 시작 부분에 " " 문자 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은 문제가 없는 것 같습니다. 텍스트가 브라우저의 경계에 도달하면 자동으로 줄 바꿈됩니다. 그러나 브라우저의 너비를 조정하면 그에 따라 텍스트 줄 바꿈 위치도 변경되어 형식이 상당히 혼란스러워 보입니다. 형식을 표준화하려면 독자는 코드 작성 시 줄바꿈이 필요한 곳에 강제로 줄바꿈을 하기 위해 단일 태그
태그를 사용해야 합니다. 반대로 줄 바꿈이 필요하지 않은 부분은 이중 태그에 포함됩니다. 코드 4.3에 표시된 대로 p.htm 코드를 수정합니다.
코드 4.3 줄 바꿈 제어: 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>
브라우저 주소 표시줄에 http://localhost/p.htm을 입력하면 브라우징 효과는 그림과 같습니다. 그림 4.3에서. 
그림 4.3 줄 바꿈 제어
이 예에서 줄 바꿈을 강제하는
가 없으면 포함된 부분은 자동으로 줄바꿈되지 않습니다.
4.1.4 텍스트 정렬 설정
문단의 텍스트를 어떤 지점에서는 다르게 정렬해야 합니다. 기본 정렬은 왼쪽 정렬입니다.
태그의 정렬 속성은 align입니다. 정렬 값을 왼쪽, 오른쪽 또는 가운데로 설정하면 왼쪽, 오른쪽 및 가운데 정렬이 가능합니다. 코드 4.4에 표시된 대로 p.htm 코드를 수정합니다.
코드 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提供了修饰段落的水平分隔线，在很多场合中可以轻松使用，不需要另外作图。水平分隔线的标签是单标签
代码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 分隔线的设置
一个简单的
的align。color即颜色，根据需要设置分隔线的不同颜色。title属性使用不多，浏览者光标悬停在分隔线上时出现属性值的内容提示。
— 说明：
代码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）！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
