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

相关文章
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
24天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
前端开发
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
CSS文本单行溢出显示省略号与多行溢出显示省略号(简单易懂)
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
26 0
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
前端开发 JavaScript UED
前端开发的魔法:CSS动画与JavaScript的完美结合
本文将探讨如何利用CSS动画和JavaScript的结合,为前端页面增添生动的效果。我们将通过实例展示如何使用这两种技术为网页元素创建吸引人的动画效果,并讨论它们的优缺点和适用场景。
29 0
|
Web App开发 编解码 前端开发
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
115 0
浏览器原理 23 # 分层和合成机制:为什么CSS动画比JavaScript高效?
|
Web App开发 移动开发 前端开发
梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能。
梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
|
JavaScript 前端开发 UED
为什么 CSS 动画比 JavaScript 高效?
为什么 CSS 动画比 JavaScript 高效?
103 0
为什么 CSS 动画比 JavaScript 高效?