这一小节,我们说一些比较零散的知识,HTML课程中呢,其实就是一些标签,正是这些标签组成了前端网页的各种元素,所以你也可以叫他们标签元素。
像前两节我们说的,html head body title meta style 。这些都是标签。
1 段落
段落,很好理解,我们从小就看书,内容一段一段的,这些一段一段的内容,我们就可以放到段落标签里,段落标签是 p 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<p>
远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
从东头的山海关到西头的嘉峪关,有一万三千多里。
</p>
<p>
从北京出发,不过几十公里就来到长城脚下。这一段
长城修筑在八达岭上,高大坚固,是用巨大的条石和
城砖筑成的。城墙顶上铺着方砖,十分平整,像很宽
的马路,五六匹马可以并行。城墙外沿有两米多高的
成排的垛子,垛子上有方形的瞭望口和射口,供瞭望
和射击用。城墙顶上,每隔三百多米就有一座方形的
城台,是屯兵的堡垒。打仗的时候,城台之间可以
互相呼应。
</p>
</body>
</html>
2 标题
标题(Heading)是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<h1>长城 标题h1</h1>
<h2>长城 标题h2</h2>
<h3>长城 标题h3</h3>
<h4>长城 标题h4</h4>
<h5>长城 标题h5</h5>
<h6>长城 标题h6</h6>
<p>
远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
从东头的山海关到西头的嘉峪关,有一万三千多里。
</p>
</body>
</html>
可以看出,从h1标签到h6标签,是 从大到小 的标题体现过程。但标题标签不只是可以让文字变的大一些,变得粗壮一些,他更符合搜索引擎对于网页的抓取规范。这个我们后面说,我们现在还只是单纯的学习HTML标签就可以。
3 空格
你是否想过,我们打字的时候,敲一个空格键就可以了,那么网页中呢?我们来试一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<p>
远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
从东头 的山海关到西头的嘉峪关,有一万三千多里。
</p>
</body>
</html>
怎么样,你是不是看到了很多空格,我们再刷新一下浏览器,看一下效果:
这几乎就是没有起作用,对吧。那么HTML开发中,该如何开发出空格来呢?看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<p>
远看长城,像一条长龙,在崇山峻岭之间蜿蜒盘旋。
从东头 的山海关到西头的嘉峪关,有一万三千多里。
</p>
</body>
</html>
看效果:
怎么样,空格是不是挺明显的了,这里就是添加了 这样的控制。