我的编程空间,编程开发者的网络收藏夹
学习永远不晚

HTML body里的文本与文本格式标签怎么使用

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

HTML body里的文本与文本格式标签怎么使用

本篇内容介绍了“HTML body里的文本与文本格式标签怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

HTML最早的用途,其实就是展示文本,所以文本标签是它当中最重要的组成成分,接下来就看看HTML的文本标签。

文本标签

1.1 普通文本

如果直接在<body></body>中添加文字,即该文字只是普通文本,文本编辑器中的任何效果:比如空格,换行 都不影响页面, 页面想要实现效果 必须通过标签来实现 。

例如下面代码中,文本当中的任何空格换行对页面均不起作用。

<!DOCTYPE html>
  <html>
          <head>
                  <meta charset="UTF-8">
                  <title>文本标签</title>
          </head>
          <body>
                  <!--文本标签-->
                  床前明月光,
                  疑是地上霜。
                举头望明月,
                低头思故乡。
        </body>
</html>

效果:

HTML body里的文本与文本格式标签怎么使用

1.2 标题标签<hn></hn>

h2-h7  字号逐渐变小,每个标题独占一行,自带换行效果,

h7之后都属于无效标签,但是浏览器也不会报错,而是以普通文本的形式进行展现。

<!DOCTYPE html>
  <html>
          <head>
                  <meta charset="UTF-8">
                  <title>文本标签</title>
          </head>
          <body>
                  <!--标题标签-->
                  <h2>床前明月光</h2>
                <h3>床前明月光</h3>
                <h4>床前明月光</h4>
                <h5>床前明月光</h5>
                <h6>床前明月光</h6>
                <h7>床前明月光</h7>
                <h7>床前明月光</h7>
                <h8>床前明月光</h8>
        </body>
</html>

效果:

HTML body里的文本与文本格式标签怎么使用

1.3 横线标签<hr />

在<body></body>中加入<hr />标签,网页中将会出现一条横线,如下图所示:

<!DOCTYPE html>
  <html>
          <head>
                  <meta charset="UTF-8">
                  <title>文本标签</title>
          </head>
          <body>
                  <!--标题标签-->
                  <h2>床前明月光</h2>
                <h3>床前明月光</h3>
                <h4>床前明月光</h4>
                <h5>床前明月光</h5>
                <h6>床前明月光</h6>
                <h7>床前明月光</h7>
                <h7>床前明月光</h7>
                <h8>床前明月光</h8>
                <hr/>
        </body>
</html>

效果:

HTML body里的文本与文本格式标签怎么使用

同时可以对横线标签设置一些属性来改变横线。

①width:设置宽度,width可以等于一个具体的数值,同时也可以等于百分比,百分比会随着页面的变化而变化。

例如:

<hr width="300px"/><hr width="30%"/>

其中width="300px"表示的是横线的固定宽度为300像素。

而width="30%"则表示宽度占页面的百分三十,会随着页面的宽度的变化而变化。

②align:设置横线的位置 left,center,right 默认不写的话就是居中效果。

<hr width="300px"/>
<hr width="30%"/>

1.4 段落标签<p></p>

当将过多的普通文本直接输入在body标签中时,文本不会进行换行,只有将文本放入段落标签当中时,文本才会自动地随着页面的缩放进行相应的换行。

段落效果:段落中文字自动换行,段落和段落之间有空行。

<p>一个漆黑的夜晚,又高又远的天空中,有一颗小小的星星正在做梦。
他梦里自已是一颗慧星,好像一道炽热的火花,瞬间划过天空......突然,他直直地往下掉落。地上的孩子们看见了,都指着他叫:“流星!”并且对着他许愿。
小星星紧紧地抓着玩具泰迪熊,他们一起掉落......掉落......掉落......直到......扑通!他们一起掉入了深深的大海。小星星仔细地看一看四周,他简直不敢相信,这里到处都是奇形怪状的鱼。有条纹的,有带斑点的,还有各种大大小小、粗细不同的生物。但是,他们都不是星星。小星星把泰迪熊抱得紧紧的,夜空似乎离他很远很远了。这时候,他发现附近有一闪一闪微弱的光芒。他心里充满了喜悦,激动地以为那是星星。
但是,当他靠近一看,发现他们不是,只是一群闪闪发亮的鱼,正好奇地看着他。
小星星坐在一块石头上,对泰迪熊说:“这里没有别的星星,我好想回家。”
“不要哭。”大石头突然说话了!原来那不是石头,是一只海龟。他说:“大海中也有很多星星啊!”
</p>

1.5 实体字符

不管实在标题标签、普通文本、段落标签还是其他的标签当中,空格对网页中显示的文本没有任何效果,这里我们需要用到实体字符在去进行相应的空格操作,同时实体字符也包含一些其他字符。(这是我在w3school上截下来的,大家可以参考一下。)

HTML body里的文本与文本格式标签怎么使用

1.6 加粗<b></b>、<i>倾斜</i>、<u>下划线</u>

将文本放入对应的标签中,可以对文本进行相应的效果改变,同时可以多个效果一起使用,即将标签嵌套起来,如下所示

<b>加粗</b>
                  <i>倾斜</i>
                  <u>下划线</u>
                  <i><b><u>加粗倾斜下划线</u></b></i>

效果:

HTML body里的文本与文本格式标签怎么使用

1.7 预编译标签<pre></pre>

在页面上显示原样效果,在pre标签中写什么,就会原样输出什么样的效果。

1.                  <!--预编译标签:在页面上显示原样效果-->
2.                  <pre>
3.  public static void main(String[] args){
4.          System.out.println("hello ....");
5.  }
6.                  </pre>

效果:

HTML body里的文本与文本格式标签怎么使用

1.8 换行<br />

在文本的任意地方输入文本标签,网页效果中就会在相应的位置出现换行效果。

1.9 中划线<del></del>

<del>一箭穿心</del>

效果:

HTML body里的文本与文本格式标签怎么使用

1.9 字体标签<font></font>

在字体标签中可以加一些字体、颜色等相应的效果

<font color="aquamarine" size="7" face=arial>床前明月光</font>

<font color="aquamarine" size="7" face=arial>其中color是设置颜色,size设置字体大小,face设置字体格式

效果:

HTML body里的文本与文本格式标签怎么使用

“HTML body里的文本与文本格式标签怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

HTML body里的文本与文本格式标签怎么使用

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么理解HTML字符实体与文本格式化标签

本篇内容介绍了“怎么理解HTML字符实体与文本格式化标签”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!HTML 字符实体/HTML 中的预留
2023-06-04

标签的指挥棒:用 HTML 掌控文本格式

使用 HTML 标签控制文本格式是优化网站内容并吸引搜索引擎的关键。了解各种标签如何影响文本的外观和语义对于建立出色的用户体验至关重要。
标签的指挥棒:用 HTML 掌控文本格式
2024-03-04

HTML 标签的革命:文本格式的新视野

随着互联网技术的不断发展,HTML 标签作为网络世界的基石,也在不断演变,为文本格式和信息展示带来了革命性的变化。将深入探讨 HTML 标签的进化,以及它如何塑造现代网络内容的呈现方式。
HTML 标签的革命:文本格式的新视野
2024-03-04

标签的革命:用 HTML 重新定义文本格式

标签的革命:HTML 重新定义文本格式
标签的革命:用 HTML 重新定义文本格式
2024-03-04

HTML 标签之谜:掌握文本格式的艺术

掌握文本格式的艺术:探索 HTML 标签的奥秘
HTML 标签之谜:掌握文本格式的艺术
2024-03-05

标签的语言:解读 HTML 文本格式的代码

HTML 标签是定义文本格式的代码,它们使用尖括号 <> 和文本描述组成。通过理解标签语言,开发者可以控制网站的布局、样式和功能。
标签的语言:解读 HTML 文本格式的代码
2024-03-04

HTML的文本标签有哪些及怎么用

今天小编给大家分享一下HTML的文本标签有哪些及怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。p 段落标签顾名思义,就
2023-06-27

标签的竞技场:深入了解 HTML 文本格式技巧

掌握 HTML 标签的技巧至关重要,它可以提升网站的结构和内容的可访问性,从而优化搜索引擎优化 (SEO)。本文将深入探讨 HTML 文本格式化,提供实用技巧和示例代码,帮助您在标签的竞技场中脱颖而出。
标签的竞技场:深入了解 HTML 文本格式技巧
2024-03-05

标签的秘密:优化 HTML 文本格式以提升可读性

标签是 HTML 文本格式的核心,它们影响网页的可读性、内容组织和对搜索引擎的可见性。了解标签的正确使用至关重要,以增强用户体验和提升 SEO 排名。
标签的秘密:优化 HTML 文本格式以提升可读性
2024-03-05

编程热搜

目录