编程笔记 html5&css&js 007 HTML文本:段落和格式

简介: 编程笔记 html5&css&js 007 HTML文本:段落和格式


标题弄好后,文章的主体一般是段落,段落文字还要有合适的格式。

一、HTML 段落

段落是通过 <p> 标签定义的。
<p>这是一个段落 </p>
<p>这是另一个段落</p>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。

二、HTML 文本格式

标签  描述
<b> 定义粗体文本
<em>  定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong>  定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字

三、HTML计算机代码格式

HTML 计算机代码格式是指在 HTML 文档中使用代码格式来呈现和组织代码的方式。这种格式化方法通常用于提高代码的可读性和维护性。
HTML 代码格式可以包括但不限于以下几个方面:
缩进:将代码按照层级缩进,以显示代码块之间的嵌套关系。
换行:在适当的位置进行换行,以提高代码的可读性。
注释:使用注释标签(<!-- -->)在代码中添加注释,以解释代码的功能或提供开发者的说明。
空格和空行:使用空格和空行来增加代码的可读性,将相关的代码块分组并提高代码的结构化。
命名规范:使用一致的命名规范来命名 HTML 元素、属性和样式类,以方便开发者理解和维护代码。
标签的闭合:确保每个 HTML 标签都被正确地闭合,以避免代码错误和解析问题。
以上这些格式化方法通常是根据开发者的个人偏好和团队的编码规范来决定的。
标签  描述
<code>  定义计算机代码
<kbd> 定义键盘码
<samp>  定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本

四、HTML 引文, 引用, 及标签定义

标签  描述
<abbr>  定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote>  定义长的引用
<q> 定义短的引用语
<cite>  定义引用、引证
<dfn> 定义一个定义项目。

五、操作

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>编程笔记 html5&css&js 段落和文本格式化</title>
    <meta charset="utf-8">
    <style>
        /* 选择你喜欢的颜色吧 */
        body {
            color: cyan;
            background-color: teal;
        }
    </style>
</head>
<div align="center"></div>
<h1>一、第一段 段落可以有多个行</h1>
<p>第一行。<br>第二行。<br>第三行。</p>
<h1>二、第二段 文本格式化</h1>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
<h1>三、第三段 预格式文本</h1>
<pre>
        此例演示如何使用 pre 标签
    对空行和    空格
    进行控制
</pre>
<h1>四、第四段 代码格式</h1>
<code>计算机代码格式</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<p>
    <b>注释:</b>这些标签常用于显示计算机/编程代码。
</p>
<h1>五、第五段 地址</h1>
<address>
    Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    Chinae
</address>
<body>
</body>
</html>

总结

段落文字需要各种各样的格式,HTML定义了很多格式标签,可以逐一测试,以满足实际网页编写的需要。

相关文章
|
4月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
4月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
183 0
JS配合CSS3实现动画和拖动小星星小Demo
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
105 0
JS+CSS3点击粒子烟花动画js特效
|
前端开发 JavaScript
js css 悬浮动画字体
js css 悬浮动画字体