编程笔记 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定义了很多格式标签,可以逐一测试,以满足实际网页编写的需要。

相关文章
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
150 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
64 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
70 34
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
101 33
|
3月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
123 24
|
Web App开发 移动开发 JavaScript
九个让人难以置信的HTML5和JavaScript实验
您可能还喜欢   8个惊艳的 HTML5 和 JavaScript 特效 让人眼花缭乱的 HTML5 和 JavaScript 效果 推荐18个基于 HTML 5 Canvas 开发的图表库 29款基于 HTML5 Canvas 开发的网页游戏 五大主流浏览器 CSS3 和 HTML5 兼容性大比拼     Google的 Chrome实验室 收集了很多让人难以置信的基于 HTML5 Canvas 和 JavaScript 的实验项目,里面的例子都很独特,让人惊叹。
1029 0
|
4月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
57 1
JavaScript中的原型 保姆级文章一文搞懂