JavaWeb学习之路(6)--了解HTML之body标签

╰+攻爆jí腚メ 2022-09-11 03:20 173阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 题外话
 *  2. 关于标签
 *  3. 学习一个重要标签\`\`
 *  4. \`\`作用
 *  5. 小结

# 1. 题外话 #

今天是一个重要的一天，新建了一个QQ学习群，将我的一部分学生拉到群里。以后可以通过QQ群更好的跟学生交流，了解本教程的问题并进行及时的改进。

另外一些自习课，我也可以抽空去答疑，希望能他们毕业的时候，能够多多成才，有一个美好的未来。

# 2. 关于标签 #

网页是HTML代码编写的，而HTML代码是由标签组成的。

标签的样式形如`<xxx></xxx>`，注意`<xxx>`是标签的开头部分，`</xxx>`是对应的结尾部分，开头和结尾中间夹着的就是标签的内容了。

所以，上节课我们讲的三个标签`<html>`、`<head>`、`<title>`分别对应的是整个网页，网页的头部，网页头部的标题。如下图，红线部分就是整个网页，蓝线部分就是网页的头部，而hello就是网页头部的标题。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
这三个标签所代表的内容是包含关系，红框包含了篮筐部分，篮筐部分又包含了标题部分。

这是因为代码也是包含关系如下：

<html>
    <head>
    	<title>hello</title>
    </head>
    </html>

# 3. 学习一个重要标签`<body>` #

在一个网页中，除了上面的标题，最重要的是网页的内容部分，如下图，蓝线部分是网页的标题，而下面主要的展示区域就是网页的内容部分了。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
网页的内容部分通过`<body>`标签进行描述，由于网页内容是属于网页的，所以`<body>`标签要在`<html>`标签内部；然后由于内容部分在头部标题的下方，所以`<body>`标签要处于`<head>`标签下面。

所以一个完整的网页代码如下：

<html>
    <head>
    	<title>hello</title>
    </head>
    <body>
        this is a web page
    </body>
    </html>

# 4. `<body>`作用 #

`<body>`标签中间包含的内容，会显示在浏览器的内容区域，所以上面代码的效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
大家可以随意修改body标签中间的部分，然后保存后，再打开网页，查看效果。

# 5. 小结 #

html表示整个页面。

head代表网页的头部，title是头部的文字部分。

body是网页的内容部分。

感觉还是比较简单的，多加练习吧！

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/7ae6b493d68d439b993f0a5ba2bb352f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/2d6238ec058e464ca2a4c5c45cd4e3f6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/c3561e6b912947a18d98fab93d1c5a67.png