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

news2024/11/13 8:04:46

段落与排版标记

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

段落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设置水平线高度
colorrgb 函数、十六进制数,颜色英文名称设置水平线颜色
alignleft|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>

代码解释:

代码中第 3~6 行是 HTML 的头部,包含元信息、页面标题;第 7~17 行是 HTML 的主体,其中第8~16 行对文字段落进行预格式化。(第一行就是内容文字多一般就像标题。)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1686158.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

展厅设计对企业有哪些作用

1、增强品牌形象 企业展厅对于增强企业品牌形象、提升企业的知名度和市场竞争力具有显著作用和意义。展厅作为企业对外的窗口&#xff0c;是客户和访客了解企业的第一印象。通过独特的设计风格和精心的展示布局&#xff0c;企业可以将自身的核心价值和文化理念巧妙地融入到展厅…

ip地址怎么改成自己想要的地区

在数字化时代&#xff0c;IP地址不仅代表着我们在网络世界中的身份标识&#xff0c;更是与地理位置紧密相连的要素。然而&#xff0c;有时出于隐私保护、网络优化或特定访问需求&#xff0c;我们可能希望更改IP地址至心仪的地区。本文将为您详细介绍如何实现这一目标。 IP地址通…

Mac安装 Intellij IDEA,亲测有效M1、M2可用

引言 最近开始学习使用spring boot写一个简单的后端项目&#xff0c;使用Intellij IDEA软件&#xff0c;Intellij IDEA为新用户提供了30天的免费试用。 方案 1.官网下载Intellij IDEA IntelliJ IDEA – the Leading Java and Kotlin IDE 或者直接网盘连接下载&#xff1a;…

轻松驾驭文件重命名,一键批量导出位置与名称至表格,让文件管理更高效便捷!

无论是工作还是生活&#xff0c;我们都需要与各种各样的文件打交道。有时&#xff0c;为了快速查找或整理文件&#xff0c;我们可能需要记录它们的位置和名称。但面对海量的文件&#xff0c;手动记录不仅耗时耗力&#xff0c;还容易出错。那么&#xff0c;有没有一种方法能够轻…

ES6中的Map和WeakMap你能分清吗?这里教会你

Map和WeakMap都是ES6中新增的数据结构&#xff0c;用于存储键值对。他们之间有什么区别&#xff0c;本文给大家详细讲述下&#xff0c;并附上示例代码。 一、什么是Map和WeakMap&#xff1f; 在JavaScript中&#xff0c;Map和WeakMap都是用来存储键值对的数据结构。 Map是一…

vue.js对接海康威视摄像头web开发包

一、登录海康开放平台下载web开发包&#xff0c;下载需要先登录海康账号&#xff0c;没有的需先注册一个。 这里的appkey、ip、port、secret 和cameraIndexCodeasd是自己去申请的 appkey: "****", ip: "****", port: **, secret: "****", //必填…

区块链钱包如果丢失了私钥或助记词,资产还能恢复吗?

如果你丢失了区块链钱包的私钥或助记词&#xff08;通常是用于恢复钱包的短语或种子&#xff09;&#xff0c;那么你的资产在大多数情况下是无法恢复的。私钥是访问和控制你在区块链上资产的唯一凭证&#xff0c;而助记词&#xff08;如BIP39标准中的12、18、24个单词的短语&am…

科技产业园3D探秘:未来科技之城的奇幻之旅

在数字时代的浪潮中&#xff0c;科技产业园区成为了推动城市经济发展、科技创新的重要引擎。 当我们打开科技产业园的3D可视化模型&#xff0c;仿佛穿越时空&#xff0c;来到了一个充满奇幻色彩的科技世界。在这里&#xff0c;高楼大厦鳞次栉比&#xff0c;绿色植被点缀其间&am…

1673. 找出最具竞争力的子序列

题目 给定一个整数数组 nums 和一个正整数 k&#xff0c;返回长度为 k 且最具竞争力的 nums 子序列。 数组的子序列是从数组中删除一些元素&#xff08;可能不删除元素&#xff09;得到的序列。 在子序列 a 和子序列 b 第一个不相同的位置上&#xff0c;如果 a 中的数字小于…

【C语言】结构体内存对齐:热门面试话题

&#x1f525;引言 书接上文&#xff0c;我们了解关于结构体的基本知识&#xff0c;这篇将深入剖析结构体中一个重要的知识点:内存对齐 关于内存对齐是属于热门面试话题&#xff0c;对此单独放在一篇来分享 &#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记…

uniapp宠物咖门店连锁会员制宠物寄养系统 微信小程序-

随着人们生活水平的提高&#xff0c;越来越多的人喜欢给自己或是家里的老人小孩养一只可爱的宠物&#xff0c;满足宠物的需要也就成为了许多爱宠人士每天苦恼的事情&#xff0c;去哪可以选购到健康合格的宠物食品&#xff1f;去哪能给宠物看病&#xff1f;去哪能给脏了的宠物美…

Nat Hum Behav | 人类前额叶皮层非空间注意力的因果相位依赖性控制

摘要 非空间注意力是一种基本的认知机制&#xff0c;它使个体能够将意识的焦点从无关刺激转向与行为目标相关的感觉信息上。有人提出了一种关于注意力是由前额叶皮层中缓慢兴奋性波动的持续相位所调节的假设&#xff0c;但这一假设存在争议且尚未达成共识。在这里&#xff0c;…

Rust Tarui 中的 Scrcpy 客户端,旨在提供控制安卓设备的鼠标和按键映射,类似于游戏模拟器。

Scrcpy-mask 为了实现电脑控制安卓设备&#xff0c;本人使用 Tarui Vue 3 Rust 开发了一款跨平台桌面客户端。该客户端能够提供可视化的鼠标和键盘按键映射配置。通过按键映射实现了实现类似安卓模拟器的多点触控操作&#xff0c;具有毫秒级响应速度。该工具可广泛用于电脑控…

亚信安慧AntDB数据库采集技术创新:ACC从Java到Go的转型之路

传统的指标采集方法通常使用一些命令行工具&#xff0c;如top、free等来获取系统的性能数据。然而&#xff0c;这种方法存在一些缺点。首先&#xff0c;这些命令行工具输出的数据格式通常是文本形式&#xff0c;需要进行解析和处理才能得到有用的信息&#xff0c;这增加了开发者…

【深度学习】加速采样生成图像——DDIM原理解析

文章目录 1、前言2、DDPM回顾及为何不能跳步采样2.1、回顾2.2、从DDPM的目标函数视角上看&#xff0c;为什么无法跳步采样&#xff1f;2.3、DDPM的困境 3、DDIM3.1、马尔可夫假设3.2、跳步采样构造3.3、DDIM的目标函数3.4、求解目标函数3.4.1、设定逆扩散过程3.4.2、求解KL散度…

企业级内网穿透(神卓互联)

神卓互联内网穿透采用自主研发的 WanGooe Tunnel 第九代核心引擎&#xff0c;拥有高级别用户访问权限验证&#xff0c;无授权将无法访问项目&#xff0c;地域限制&#xff0c;可灵活设置仅限某个地区可以访问 项目&#xff0c;保障数据传输安全采用&#xff0c;端到端加密&…

【cocos creator】进度条控制脚本,支持节点进度条,图片进度条,进度条组件,和进度文字展示

进度条控制脚本&#xff0c;支持节点进度条&#xff0c;图片进度条&#xff0c;进度条组件&#xff0c;和进度文字展示 const { ccclass, property, menu } cc._decorator;let text_type cc.Enum({"20%": 0,"1/5": 1,"差值": 2,"自定义…

Windows:iHasher-v0.2安装报错Windows 功能 .NET Framework 3.5

一、情景描述 我们从MSDN下载了镜像文件&#xff0c;一般要验证下载文件的HASH值是否与MSDN上发布的一致&#xff0c;确保传出过程中iso文件没有损坏。 MSDN地址&#xff1a;https://msdn.itellyou.cn/ 我从MSDN下载了Hasher工具&#xff0c;进行校验。 但是&#xff0c;安装…

js 面试题学习笔记一

1、什么是防抖和节流&#xff1f;有什么区别&#xff1f;如何实现&#xff1f; 防抖&#xff1a;触发高频事件后N秒内函数只会执行一次&#xff0c;如果N秒高频事件再次被触发&#xff0c;则重新计算时间。&#xff08;a时间触发&#xff0c;5秒内执行一次&#xff0c;但是第4…

【代码随想录】【算法训练营】【第16天】 [104]二叉树的最大深度 [111]二叉树的最小深度 [222]完全二叉树的节点个数

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 16&#xff0c;周四&#xff0c;再坚持一下吧~ 题目详情 [104] 二叉树的最大深度 题目描述 104 二叉树的最大深度 解题思路 前提&#xff1a;二叉树的最大深度&#xff0c;等价于二叉树的层…