html 段落与排版标记 Web前端开发技术、详细文章（例如）

news2024/11/24 1:00:44

段落与排版标记

网页的外观是否美观，很大程度上取决于其排版。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。本节从段落的细节设置入手，利用段落与排版标记自如地处理大段的文字。

段落p标记

在HTML文档中，合理使用段落会使文字的显示更加美观，表达更加清晰。段落p标记用来开始一个段落，它是一个块级标记，该标记中不能再包含其他的任何块级标记。

基本语法：

<p align="left|centerlrightljustify">段落正文内容</p>

p标记会自动在其前后创建一些空白。浏览器会自动添加这些空间。段落p标记的 align属性有四个属性值，分别表示左对齐、居中对齐、右对齐、两端对齐。

例如：

<!doctype html>
<html lang="en">
        <head>
                <meta charset="UTF-8">
        <title>csdn-jingyu飞鸟-html段落样式应用</title>
</head>
<body>
        <h5 align="center">csdn-jingyu飞鸟-html段落p标记对齐方式</h5><hr color="blue">
        <p align="left">网页的外观是否美观，很大程度上取决于其排版。</p>
        <p align="center">网页的外观是否美观，很大程度上取决于其排版>。</p>
        <p align="right">网页的外观是否美观，很大程度上取决于其排版。
</p>
        </body>
</html>

代码解释

代码中第 3~6 行是 HTML 的头部，包含页面标题;第 7~13 行是 HTML 的主体，包含多种段落样式，其中第10 行为左对齐，第 11 行为居中对齐，第 12 行为右对齐格式。

换行br 标记

在 HTML 文件中，插入换行标记<br>的作用和普通文档插入回车的作用一样，都表示强制性换行。

基本语法：

<br>或<br/>

在 HTML 文档中，换行 br 标记属于单标志，表示插入换行符。

水平分隔线 hr 标记

水平分隔线标记用一条线将页面区域按照功能用途进行分隔。br标记是单个标记。

基本语法：

<hr width="" size="" color="" align="" noshade>

水平分隔线 hr 标记的属性、值

属性	值	说明
width	像素(px)或百分比	设置水平线宽度
size	整数，单位 px	设置水平线高度
color	rgb 函数、十六进制数，颜色英文名称	设置水平线颜色
align	left\|centerlright	设置水平线对齐方式

例如：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>csdn-jingyu飞鸟-换行与水平分隔线标记的应用</title>
    </head>
<body>
        <h4>csdn-jingyu飞鸟-换行与水平分隔线标记的应用</h4>
        <p><em>大小为3、宽度为60号、居中</em></p>
        <hr size="3" width="60名" color="#330099" align="center">
        <strong>宽度为600px、大小为5、绿色、居右对齐</strong><br><br>
        <hr width="600px" size="5" color="#00ee99" align="right">
    </body>
</html>

代码解释：

代码中第10行插入1条“大小为3、宽度为60%、居中”的水平分隔线;第12 行插入1条“宽度为600px、大小为5、居右对齐”的水平分隔线。

拼音/音标注释ruby标记和 rt/rp 标记

ruby标记定义muby注释(中文注音或字符)。ruby标记与rt标记一同使用。ruby标记由一个或多个字符(需要一个解释/发音)和一个提供该信息的r标记组成，还包括可选的rp 标记，定义当浏览器不支持muby标记时显示的内容。

ruby标记用它将需要注释或注音标的文字内容包围住。
rt标记这里面放置音标或注释，这个标记要跟在需要注释的文本后边。

pp标记是防备那些不支持muby标记的浏览器,主要用来放置括号。对于支持这个标记的浏览器，rp 标记的 CSS 样式是{display:none;}，也就是不可见。

基本语法：

<ruby>
    鲸鱼<rp>(</rp><rt>jingyu</rt*<rp>)</rp>
    飞鸟<rp>(</rp><rt>feiniao</rt><rp>)</rp>
</ruby>

段落缩进blockquote标记

段落缩进 blockquote标记是块级标记，常称为块引用标记。该标记引用的内容能够向右缩进5个英文字符的位置，并在其内容的周围增加外边距。

基本语法：

<blockquote>引用的内容</blockquote>

例如：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
        <title>csdn-jingyu飞鸟-注释与块引用标记的应用</title>
        <style type="text/css">
                ruby{font-size:58px;font-family:黑体;text-align:center;}
        </style>
    </head>
   <body>
        <h5>注释ruby标记-标注读音</h5>
        <p align="center"><ruby>
        醒<rt><rp>(</rp>xing<rp>)</rp></rt>
        来<rt><rp>(</rp>lai<rp>)</rp></rt>
        觉<rt><rp>(</rp>jue<rp>)</rp></rt>
        的<rt><rp>(</rp>de<rp>)</rp></rt>
        甚<rt><rp>(</rp>shen<rp>)</rp></rt>
        是<rt><rp>(</rp>shi<rp>)</rp></rt>
        爱<rt><rp>(</rp>ai<rp>)</rp></rt>
        你<rt><rp>(</rp>ni<rp>)</rp></rt>
   </ruby></p>
        <h5>csdn-jingyu飞鸟-文章-段落缩进标记的应用</h5>
          <hr color="green">
          <p>这行文字没有缩进</p>
          <blockquote>这行文字行首缩进5个字符位置</blockquote>
          <blockquote><blockquote>这行文字行首缩进10个字符位置</blockquote>
          </blockquote>
   </body>
</html>

代码解释：

代码中第12~17行设置ruby标记标注汉语拼音。第20行,此行文字没有设置块引用,所以没有缩进;第21行设置块引用，所以此行文字行首缩进5个字符位置;第22行套使用2个块引用标记，此行行首向右缩进10个字符的位置。

预格式化 pre 标记

在 HTML中利用成对的<pre></pre>标记对网页中的文字段落进行预格式化,浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。

基本语法：

<pre>预格式化文本</pre >

例如：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>预格式化</title>
    </head>
    <body>
        <h1><pre>
            csdn-jingyu飞鸟 html 段落与排版标记 Web前端开发技术、详细文章
            等你，轻牵我的手。
                    醒来觉得甚是爱你。
        </pre></h1>
    </body>
</html>

代码解释：