当前位置：网站首页>body中基本标签

body中基本标签

2022-07-29 00:33:00 【51CTO】

一、文本标签

1、文本标签

1.1普通文本

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

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

       
       <!DOCTYPE html>
       
  <html>
       
          <head>
       
                  <meta charset="UTF-8">
       
                  <title>文本标签</title>
       
          </head>
       
          <body>
       
                  <!--文本标签-->
       
                  床前明月光，
       
                  疑是地上霜。
       
                举头望明月，
       
                低头思故乡。
       
        </body>
       
</html>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

效果：

body中基本标签_超链接

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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

效果：

body中基本标签_锚点_02

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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

效果：

body中基本标签_锚点_03

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

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

例如：

       
       <hr width="300px"/>
       
<hr width="30%"/>
      
1.
2.

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

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

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

       
       <hr align="center"/>
       
          <hr align="left"/>
       
          <hr align="right"/>
      
1.
2.
3.

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

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

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

       
       <p>党的十八大以来，习近平总书记高度重视西藏工作，心系西藏各族人民，亲自为新时代西藏工作谋篇布局，确立新时代党的治藏方略。
       
                          习近平总书记强调，“要抓好稳定、发展、生态、强边四件大事”，为西藏工作指明了前进方向。牢记总书记的嘱托，西藏各族人民在
       
                          新时代新征程上团结一心，踔厉奋发，努力建设美丽幸福西藏，共圆伟大复兴梦想。
       
                          2021年7月，在西藏和平解放70周年之际，习近平同志作为中共中央总书记、国家主席、中央军委主席来到西藏祝贺西藏和平解放70周
       
                          年，这在党和国家历史上是第一次。总书记一路走来，给各族干部群众送去党中央的关怀，殷殷之情，洒向雪域高原。</p>
      
1.
2.
3.
4.
5.

1.5实体字符

不管实在标题标签、普通文本、段落标签还是其他的标签当中，空格对网页中显示的文本没有任何效果，这里我们需要用到。

实体字符在去进行相应的空格操作，同时实体字符也包含一些其他字符。（这是我在w3school上截下来的，大家可以参考一下。）

body中基本标签_超链接_04

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

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

       
       <b>加粗</b>
       
                  <i>倾斜</i>
       
                  <u>下划线</u>
       
                  <i><b><u>加粗倾斜下划线</u></b></i>
      
1.
2.
3.
4.

效果：

body中基本标签_html_05

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

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

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







效果：

body中基本标签_html_06

1.8换行 <br />

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

1.9中划线<del></del>

1. <del>一箭穿心</del>

效果：

body中基本标签_锚点_07

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

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

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

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

效果：

body中基本标签_锚点_08

二、多媒体标签

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">
      
1.
2.
3.

<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>
      
1.
2.
3.
4.

和图片标签一样，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.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

效果：

body中基本标签_html_09

三、超链接标签

1、什么是超链接

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

body中基本标签_超链接_10

2、超链接标签<a></a>

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

（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><!--跳转到网络资源-->
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

（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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

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

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

       
       <!DOCTYPE html>
       
  <html>
       
          <head>
       
                  <meta charset="UTF-8">
       
                  <title></title>
       
          </head>
       
          <body>
       
                  <a href="设置锚点.html#1F">超链接</a>
       
          </body>
       
</html>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

四、列表标签

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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

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

效果：

body中基本标签_锚点_11

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.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

效果：

body中基本标签_超链接_12

五、表格标签

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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

效果：

body中基本标签_锚点_13

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

3、table中的一些属性：

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

boeder:设置边框及大小。

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

效果：

body中基本标签_超链接_14

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

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

body中基本标签_锚点_15

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

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

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

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

4、设置文字居中：

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

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

1. <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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

效果：

body中基本标签_超链接_16

②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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

效果：

body中基本标签_html_17

六、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>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

效果：

body中基本标签_html_18

通过css样式对div和span赋予样式，可以看出div的框占整行，而span跟着内容的变大而变大。

div属于块级元素-->换行

span属于行内元素-->没有换行效果

span:里面的内容占多大，span包裹的区域就多大。

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://blog.51cto.com/u_15734806/5524071

当前位置：网站首页>body中基本标签

body中基本标签

一、文本标签

1、文本标签

1.1普通文本

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

1.3横线标签<hr />

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

1.5实体字符

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

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

1.8换行 <br />

1.9中划线<del></del>

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

二、多媒体标签

1、图片

2、音视频引用标签

3、全部代码

三、超链接标签

1、什么是超链接

2、超链接标签<a></a>

3、设置锚点：

四、列表标签

1、无序列表标签

2、有序列表

五、表格标签

1、应用场景：

2、表格中的标签：

3、table中的一些属性：

4、设置文字居中：

5、合并单元格：

六、div标签

边栏推荐

猜你喜欢

随机推荐

当前位置：网站首页>body中基本标签

body中基本标签

一、 文本标签

1、文本标签

1.1普通文本

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

1.3横线标签<hr />

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

1.5实体字符

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

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

1.8换行 <br />

1.9中划线<del></del>​

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

二、 多媒体标签

1、图片

2、音视频引用标签

3、全部代码

三、 超链接标签

1、什么是超链接

2、超链接标签<a></a>

3、设置锚点：

四、 列表标签

1、无序列表标签

2、有序列表

五、 表格标签

1、应用场景：

2、表格中的标签 ：

3、table中的一些属性：

4、设置文字居中：

5、合并单元格：

六、div标签

边栏推荐

猜你喜欢

随机推荐

一、文本标签

1.9中划线<del></del>

二、多媒体标签

三、超链接标签

四、列表标签

五、表格标签

2、表格中的标签：