body中的基本标签

原创已于 2022-07-29 00:59:31 修改 · 3.7k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #前端 #html

于 2022-07-29 00:40:58 首次发布

前端专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML中的文本标签，包括普通文本、标题、横线、段落、实体字符、加粗、倾斜、下划线、预编译、换行和中划线。还讲解了多媒体标签，如图片、音视频引用。此外，涵盖了超链接、列表、表格和div标签的使用，是HTML初学者的入门指南。

一、文本标签

1、文本标签

1.1普通文本

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

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

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

效果：

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>

效果：

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>

效果：

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

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

例如：

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

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

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

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

<hr align="center"/>
          <hr align="left"/>
          <hr align="right"/>

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

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

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

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

1.5实体字符

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

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

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

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

效果：

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

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

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

效果：

1.8换行<br />

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

1.9中划线<del></del>

<del>一箭穿心</del>

效果：

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

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

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

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

效果：

二、多媒体标签

1、图片

<img src="img/1.jpg" width="300px"
title="小黄人图片" alt="图片加载失败"/>
                  <img src="https://img0.baidu.com/it/u=1953577079,3503933013&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">

<img/>:图片标签。

src：引入图片的位置，引入图片时，需将图片方在指定的位置上。

"img/1.jpg"：引入本地资源，图片的位置。

https://img0.baidu.com/it/u=1953577079,3503933013&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500:引入网络资源，可以在网络上选择图片，右键复制图片地址。

width：设置宽度。

height：设置高度。

注意：一般高度和宽度只设置一个即可，另一个会按照比例自动使用。

title：设置图片的标签，鼠标悬浮在图片上的时候的提示于，即当鼠标放在图片任意位置时便会显示title的内容，默认情况下图片如果加载失败（即没有设置alt属性的时候），那么提示语也是title中的内容。

alt：图片加载失败后的提示语。

2、音视频引用标签

<!--音频-->
                  <embed src="music/我要你.mp3"></embed>
  <!--视频-->
  <embed src="video/周杰伦-说好的幸福呢.mp4" width="500px" height="500px"></embed>

和图片标签一样，embe标签可以引用网络资源，设置大小、主题、提示语等属性。

3、全部代码

<!DOCTYPE html>
  <html>
          <head>
                  <meta charset="UTF-8">
                  <title></title>
          </head>
          <body>
                                  <!--图片-->
                  <img src="img/1.jpg" width="300px" title="小黄人图片" alt="图片加载失败"/>
                <img src="https://img0.baidu.com/it/u=1953577079,3503933013&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
                <!--音频-->
                <embed src="music/我要你.mp3"></embed>
                <br />
                <!--视频-->
                <embed src="video/周杰伦-说好的幸福呢.mp4" width="500px" height="500px"></embed>
    </body>
</html>

效果：

三、超链接标签

1、什么是超链接

首先大家可以看百科上对于超链接的一个定义。

2、超链接标签

作用：实现页面的跳转功能。

（1）href:控制跳转的目标位置，可以跳转到指定的html页面、文字或者相应的网页。

target:设置跳转到的目标属性。

（2）_self 在自身页面打开（默认效果也是在自身页面打开） _blank 在空白页面打开。）

举例：

<a href="文本标签.html">超链接01</a><!--跳转到本地资源--> 
<a
href="">超链接02</a>
<!--跳转到自身页面--> 
<a
href="abc">超链接03</a><!--跳转的目标找不到，提示找不到资源--> 
<a
href="https://www.baidu.com" target="_self">超链接04</a><!--跳转到网络资源--> 
 <a
href="https://www.baidu.com" target="_blank">超链接05</a><!--跳转到网络资源-->

（3）在<a></a>中添加其他的元素，例如：<img src="img/1.jpg" />图片元素，单击图片也可以完成一个相应的页面跳转。

（4）代码如下：

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <a href="文本标签.html">超链接01</a><!--跳转到本地资源-->
                <a href="">超链接02</a> <!--跳转到自身页面-->
                <a href="abc">超链接03</a><!--跳转的目标找不到，提示找不到资源-->
                <a href="https://www.baidu.com" target="_self">超链接04</a><!--跳转到网络资源-->
                <a href="https://www.baidu.com" target="_blank">超链接05</a><!--跳转到网络资源-->
                <a href="https://www.baidu.com" target="_blank"><img src="img/ss.jpg" /></a>
        </body>
</html>

3、设置锚点：

应用场合：当一个页面太长的时候，就需要设置锚点，然后可以在同一个页面的不同位置之间进行跳转。

（1）同一个页面上设置锚点，设置同一个页面不同位置的跳转。

<a name="1F"></a>：在文本的某个位置设置锚点。

<a href="#1F">手机</a>：点击页面上的手机便会跳转到相应的设置好的锚点的位置。

这里举例的页面较短，当页面过长或者在不同位置时，设置锚点可以帮助快睡定位跳转到相应的位置。

<!DOCTYPE html>
  <html>
          <head>
                  <meta charset="UTF-8">
                  <title></title>
          </head>
          <body>
                  <a name="1F"></a>
                  <h1>手机</h1>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <a href="#1F">手机</a>
        </body>
</html>

（2）不同页面的锚点设置跳转

锚点还可以实现不用页面的跳转，即它可以跳转到另一个页面指定的锚点位置上去。

<!DOCTYPE html>
  <html>
          <head>
                  <meta charset="UTF-8">
                  <title></title>
          </head>
          <body>
                  <a href="设置锚点.html#1F">超链接</a>
          </body>
</html>

四、列表标签

1、无序列表标签

<ul></ul>当中放入列的标签<li></li>

type:可以设置列表前图标的样式。

<!DOCTYPE html>
<html>
       
<head>
                <meta charset="UTF-8">
                <title></title>
       
</head>
       
<body>
                <!--无序列表-->
                <h1>今天要做的事情</h1>
                <ul type="circle"><!--type:可以设置列表前图标的样式-->
                        <li>早起</li>
                        <li>多喝水</li>
                        <li>开心</li>
                        <li>奋斗</li>
                </ul>
                <!--有序列表-->
       
</body>
</html>

如果想要更换图标样式，需要借助css技术： style="list-style:url(img/act.jpg) ;"

效果：

2、有序列表

<ol></ol>当中放入列的标签<li></li>

type:可以设置列表的标号：1,a,A,i,I。

start:设置起始标号。

有序列表相比无序列表来说，每列前方的图标，变成了有序的序号，对于需要使用顺序来排列的列表，就推荐使用有序列表。

<!DOCTYPE html>
  <html>
          <head>
                  <meta charset="UTF-8">
                  <title></title>
          </head>
          <body>
                  <!--有序列表-->
                  <h1>今天要做的事情</h1>
                <ol type="1"><!--type:可以设置列表前标号的样式-->
                        <li>早起</li>
                        <li>洗漱</li>
                        <li>喝水</li>
                        <li>奋斗</li>
                                                          <li>洗漱</li>
                                                          <li>睡觉</li>
                </ol>
                <!--有序列表-->
        </body>
</html>

效果：

五、表格标签

1、应用场景：

在页面布局很规整的时候，可能利用的就是表格。

2、表格中的标签：

<table></table>：表格标签。

<th></th>:表头，默认效果，字体加粗，文字居中，是一种特殊的单元格。

<tr></tr>:一个tr代表一行。

<td></td>：一个td代表一个单元格。

<!DOCTYPE html>
  <html>
          <head>
                  <meta charset="UTF-8">
                  <title></title>
          </head>
          <body>
                  <!--表格页面-->
                  <table>
                       
<!--四行四列-->                      
<tr><!--一个tr标签代表一行-->
                                <td>学号</td><!--一个td代表一列-->
                                <td>姓名</td>
                                <td>年龄</td>
                                <td>成绩</td>
                       
</tr>
                
       <tr>
                                <td>1001</td>
                                <td>张三</td>
                                <td>20</td>
                                <td>89</td>
                       
</tr>
                       
<tr>
                                <td>1002</td>
                                <td>李四</td>
                                <td>19</td>
                                <td>78</td>
                       
</tr>
                       
<tr>
                                <td>1003</td>
                                <td>小花</td>
                                <td>20</td>
                                <td>96</td>
                       
</tr>
                </table>
        </body>
</html>

效果：

由运行效果可知，表格默认是没有边框的，可以通过属性来增加边框可其他的一些属性。

3、table中的一些属性：

border="1px" cellspacing="0px"

boeder:设置边框及大小。

border="1px"：设置边框的大小为1px，但是如果只设置边框不设置其他属性的话，单元格与边框直接就会出现空隙如下图所示，这样边框就不太好看，所以我们需要加上cellspacing属性。

效果：

cellspacing="0px"：设置单元格和边框之间的空隙，"0px"即设置单元格与边框之间没有空隙。

  <table border="1px" border="1px" cellspacing="0px">

width:设置页面的高度，也可以在行和单元格标签中设置该属性。

height:设置页面高度，也可以在行和单元格标签中设置该属性。

background 设置背景图片 background="img/1.jpg"，即将图1.jpg设置为整个表格的背景图片，也可以在行和单元格标签中设置该属性。

bgcolor :设置背景颜色，也可以在行和单元格标签中设置该属性。

4、设置文字居中：

需要在单元格标签，即需要在单元格<td></td>标签中设置一个align属性，

align="center"设置居中，同时也可以设置文字居左具右如下

 <td align="center">学号</td>

5、合并单元格：

①rowspan:行合并，对于同一列不同行的合并，写入到<td></td>单元格标签中，当表格需要进行行合并时，该列中需要合并的几行中，

只需要保留需要的一个单元格即可，

rowspan="3"，即代表合并3行。

这里将第四列的2、3、4行合并，则需将后面两行中的单元格删除，只保留一个，再将属性rowspan放入单元格标签当中。

<tr><!--一个tr标签代表一行-->
                                  <td align="center">学号</td><!--一个td代表一列-->
                                  <td>姓名</td>
                                  <td>年龄</td>
                                  <td>成绩</td>
                          </tr>
                          <tr>
                                  <td>1001</td>
                                  <td>张三</td>
                                <td>20</td>
                                <td rowspan="3">89</td>
                       
</tr>
                        <tr>
                                <td>1002</td>
                                <td>李四</td>
                                <td>19</td>
                       
</tr>
                       
<tr>
                                <td>1003</td>
                                <td>小花</td>
                                <td>20</td>
                       
</tr>

效果：

②colspan：列合并，对于同一行不同列的合并，，写入到<td></td>单元格标签中，当表格需要进行列合并时，该行行中需要合并的几列中，

只需要保留需要的一个单元格即可，

colspan="4"：列合并的单元格横跨4列

这里以合并第一行的几列为例，合并几列，则需将该行这几列中的数据保留着只剩需要的一个单元格即可，同时可以加一个居中效果。

<table border="1px" border="1px" cellspacing="0px">
                          <!--四行四列-->
                          <tr><!--一个tr标签代表一行-->
                                  <td colspan="4" align="center">学生信息</td>
                          </tr>
                          <tr>
                                  <td>1001</td>
                                  <td>张三</td>
                                  <td>20</td>
                                <td>89</td>
                        </tr>
                        <tr>
                                <td>1002</td>
                                <td>李四</td>
                                <td>19</td>
                                <td>78</td>
                        </tr>
                        <tr>
                                <td>1003</td>
                                <td>小花</td>
                                <td>20</td>
.       
                        <td>96</td>

效果：

六、div标签

div 和 span标签

<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

通俗理解可以把div理解为一个“塑料袋。

而span理解为一个可以变化容量的袋子，跟着容量大小的改变而改变。

<!DOCTYPE html>
  <html>
          <head>
                  <meta charset="UTF-8">
                  <title></title>
                  <style type="text/css">
   
                          div{
                                  border: 1px red solid;                      
}
                         span{
                                border: 1px greenyellow solid;
                    
}
                </style>
        </head>
        <body>
                <div>Hello world<br />Hello world</div>
                <div>Hello world</div>
                <span>world</span>
                <span>world</span>
                <span>world</span>
        </body>
</html>

效果：