解析HTML body里的文本与文本格式标签

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

HTML最早的用途实际上是展示文本,所以文本标签是它最重要的组成部分。让我们看看HTML文本标签。

文本标签

1.1 普通文本

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

例如,在下面的代码中,文本中的任何空间对页面都不起作用。

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

效果:

9c74a1f3a1c21b8b8207c298933ace3.jpg

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

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

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

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

效果:

f8de6b27c4e02a37bbf5a50fa5c3239.jpg

1.3 横线标签<hr />

在<body></body>中加入<hr />如下图所示,标签将出现在网页上:

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

效果:

7aedd9c2ff117ea76c61b9b18685506.jpg

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

①width:设置宽度,width它可以等于一个特定的值,也可以等于百分比,百分比会随着页面的变化而变化。

例如:

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

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

而width="30%"这意味着宽度占页面的30%,会随着页面宽度的变化而变化。

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

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

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

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

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

<p>黑暗的夜晚,又高又远的天空,有一颗小星星在做梦。 他梦中自己就是一颗慧星,像一道炽热的火花,瞬间穿过天空...突然,他直直地掉了下来。地上的孩子们看见了,都指着他说:流星!并向他许愿。 小星星紧紧抓住玩具泰迪熊,他们一起摔倒了...掉落...掉落...直到...扑通!他们一起掉进了深海。小星星仔细看了看周围,他简直不敢相信,到处都是奇形怪状的鱼。有条纹,有斑点,有不同大小和厚度的生物。但他们都不是星星。小星星紧紧地抱着泰迪熊,夜空似乎离他很远。这时,他发现附近有一闪一闪的微弱光芒。他心里充满了喜悦,兴奋地以为是星星。 然而,当他走近时,他发现他们不是,只是一群闪闪发光的鱼,只是好奇地看着他。 小星星坐在石头上,对泰迪熊说:这里没有其他星星,我真想回家。” “不要哭。大石头突然说话了!原来不是石头,是海龟。他说:海里有很多星星!” </p>

1.5 实体字符

无论是标题标签、普通文本、段落标签还是其他标签,空格对网页上显示的文本都没有影响。在这里,我们需要使用物理字符来进行相应的空格操作,物理字符也包含了一些其他字符。(这是我w3school截下来的,大家可以参考一下。

5138b64356deb43fd1c0cde055c5f69.jpg

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

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

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

效果:

9aa4c34ca84e8ef7b38c2ed9d420325.jpg

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

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

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

效果:

cc37c00cd59b1fee88deb8061deaff8.jpg

1.8 换行<br />

在文本的任何地方输入文本标签,网页效果都会在相应的位置出现交换效果。

1.9 中划线<del></del>

<del>一箭穿心</del>

效果:

dc88bd8676810be7f39f71ee240f564.jpg

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

字体、颜色等相应的效果可以添加到字体标签中

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

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

效果:

9337fbdf049ee874f5e48210607d758.jpg

以上是分析HTML body请更多关注文本和文本格式标签的详细信息php中文网其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2022-08-06 03:00:27

猜你喜欢

最新文章