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

简介: 本文目录1. 题外话2. 关于标签3. 学习一个重要标签``4. ``作用5. 小结

1. 题外话

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


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


2. 关于标签

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


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


所以,上节课我们讲的三个标签<html>、<head>、<title>分别对应的是整个网页,网页的头部,网页头部的标题。如下图,红线部分就是整个网页,蓝线部分就是网页的头部,而hello就是网页头部的标题。


这三个标签所代表的内容是包含关系,红框包含了篮筐部分,篮筐部分又包含了标题部分。


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


<html>

<head>

<title>hello</title>

</head>

</html>

1

2

3

4

5

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

在一个网页中,除了上面的标题,最重要的是网页的内容部分,如下图,蓝线部分是网页的标题,而下面主要的展示区域就是网页的内容部分了。


网页的内容部分通过<body>标签进行描述,由于网页内容是属于网页的,所以<body>标签要在<html>标签内部;然后由于内容部分在头部标题的下方,所以<body>标签要处于<head>标签下面。


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


<html>

<head>

<title>hello</title>

</head>

<body>

   this is a web page

</body>

</html>

1

2

3

4

5

6

7

8

4. <body>作用

<body>标签中间包含的内容,会显示在浏览器的内容区域,所以上面代码的效果如下:


大家可以随意修改body标签中间的部分,然后保存后,再打开网页,查看效果。


5. 小结

html表示整个页面。


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


body是网页的内容部分。


感觉还是比较简单的,多加练习吧!

相关文章
|
1月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
96 49
|
1月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
45 5
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2月前
|
人工智能
|
1月前
|
存储 移动开发 前端开发
|
2月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
141 0
|
2月前
html基础知识学习
html基础知识学习
39 0
|
1天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
64 24