广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >HTML body里的文本与文本格式标签怎么使用
  • 150
分享到

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

2024-04-02 19:04:59 150人浏览 八月长安
摘要

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

--结束END--

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

本文链接: https://www.lsjlt.com/news/98425.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
猜你喜欢
  • HTML body里的文本与文本格式标签怎么使用
    本篇内容介绍了“HTML body里的文本与文本格式标签怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2022-10-19
  • html中 文本格式化标签怎么用
    这篇文章主要介绍了html中 文本格式化标签怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在网页中,有时需要为文字设置粗体、斜体或...
    99+
    2022-10-19
  • HTML字符实体与文本格式化标签怎么用
    小编给大家分享一下HTML字符实体与文本格式化标签怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   HTML 字符实体...
    99+
    2022-10-19
  • HTML文本标签、列表和文本格式化的方法
    这篇文章主要介绍“HTML文本标签、列表和文本格式化的方法”,在日常操作中,相信很多人在HTML文本标签、列表和文本格式化的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2022-10-19
  • 怎么理解HTML字符实体与文本格式化标签
    本篇内容介绍了“怎么理解HTML字符实体与文本格式化标签”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!HTML 字符实体/HTML 中的预留...
    99+
    2023-06-04
  • HTML文本修饰标签怎么用
    本文小编为大家详细介绍“HTML文本修饰标签怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML文本修饰标签怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。   ...
    99+
    2022-10-19
  • 怎么用HTML格式化文本
    小编给大家分享一下怎么用HTML格式化文本,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! HTML提供了多个标签,您可以使用它...
    99+
    2022-10-19
  • HTML中文本标签、超链接标签、图片标签怎么用
    这篇文章将为大家详细讲解有关HTML中文本标签、超链接标签、图片标签怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   1、简介   在Web应用中,服务器把网...
    99+
    2022-10-19
  • HTML的文本标签有哪些及怎么用
    今天小编给大家分享一下HTML的文本标签有哪些及怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。p 段落标签顾名思义,就...
    99+
    2023-06-27
  • html中怎么用标签实现文本分段
    这篇文章主要介绍了html中怎么用标签实现文本分段的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html中怎么用标签实现文本分段文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2022-10-19
  • HTML如何使用加载脚本文件的标签
    这篇文章主要介绍HTML如何使用加载脚本文件的标签,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   HTML<link>元素   <link>标签定义了...
    99+
    2022-10-19
  • 怎么用div+pre标签的组合实现文本原格式显示与自动换行
    这篇文章主要讲解了“怎么用div+pre标签的组合实现文本原格式显示与自动换行”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用div+pre标签的组合实...
    99+
    2022-10-19
  • HTML怎么设置表格中文本的对齐方式
    这篇“HTML怎么设置表格中文本的对齐方式”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“H...
    99+
    2022-10-19
  • Html中的<textarea>表单文本区域标签元素怎么用
    小编给大家分享一下Html中的<textarea>表单文本区域标签元素怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一...
    99+
    2022-10-19
  • 怎么使用python批量修改文本文件编码格式
    今天小编给大家分享一下怎么使用python批量修改文本文件编码格式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用pyth...
    99+
    2023-07-05
  • 怎么使用HTML 5中SVG 2D文本与图像
    这篇文章主要介绍“怎么使用HTML 5中SVG 2D文本与图像”,在日常操作中,相信很多人在怎么使用HTML 5中SVG 2D文本与图像问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2022-10-19
  • HTML的span标签的作用是什么?答:对文本内容进行精细的样式化和标记。
    当谈到HTML中的标签时,它是一个非常基本且灵活的内联元素。它通常用于在文本中应用样式、添加额外的语义或将特定部分标记为一个单独的区域。标签本身并不会给其中的内容带来任何视觉上的变化,但它可以与CSS一起使用,从而允许您对其内容进行样式化。...
    99+
    2023-08-30
    html 前端
  • HTML中怎么用表格来创建文本周围的边框
    这篇文章给大家分享的是有关HTML中怎么用表格来创建文本周围的边框的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使...
    99+
    2022-10-19
  • 使用Shell怎么对包含空格的文本进行遍历
    这期内容当中小编将会给大家带来有关使用Shell怎么对包含空格的文本进行遍历,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。shell遍历文件有时候要对某个文件夹下面的所有文件做同样的处理,比如对每个文件统...
    99+
    2023-06-14
  • 怎么使用正则表达式替换JavaScript文本中的换行符
    这篇文章主要介绍“怎么使用正则表达式替换JavaScript文本中的换行符”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“怎么使用正则表达式替换JavaScript文本中的换行符”文章能帮助大家解决问...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作