8HTML标题和段落标签

HTML就是由不同的标签组成的。

标题标签

h系列标签表示“标题”的语义，它们就是标题标签。h就是headline（标题）的首字母。

h1-h6分别表示一级标题到六级标题。

一级标题最重要，二级标题次之，三级到六级标题语义依次降低，是语义越来越弱的标题。

搜索引擎非常看重h系列标签，尤其是h1，因此我们应该将重点内容放到h1标签当中，比如网页的logo。

注意：一个页面上一般只放置一个h1标签对，否则会被搜索引擎视为作弊。比如百度和搜狗，都有这样的规则，如果它发现你的页面上h1标签对有多个，就不会抓取。当然你在一个页面中放多个h1也可以，但是不推荐这么做。

现在我用vscode打开之前的first.html这个网页，在body里面，把之前写的东西都删了，重新输入内容，比如我写一个h1标题：

h1上海简介/h1

然后ctrl+shift+p打开liveserver，在浏览器中看到效果如下：

接下来假如说，我要从好几个方面介绍上海，比如我从地理环境、自然资源、人口这三个方面来介绍上海，我就可以在h1下面添加3个二级标题h2。如下：

浏览器中是这样的效果：

通过上图效果，就看到3个h2标题是同级的，字号是同样大小的，比h1标题的字号要小一些。

假如说我这个网页上的内容，就是介绍上海的。那么我就可以在二级标题的下面再划分三级标题。比如地理环境，我可以再细分为位置、气候、水文3个方面；自然资源可以再细分为矿产和生物2个方面；人口可以再细分为年龄构成和性别构成2个方面；如下图：

浏览器上效果如下：

这样是不是相当于，把一篇介绍上海的文章的大纲划分出来了？当然，如果有需要，你可以继续往下划分，就是在h3标题下面可以再添加h4标题，h4下面可以添加h5，一直可以添加到h6，但是很少有页面能用到h6。

段落标签

段落标签使用p/p。p就是paragraph（段落）的首字母。

p标签对默认具备换行的作用，所有的段落都要写在p标签对中。

注意：

1即使在html文件中，你自己给文字换了行，但是在浏览器中的网页上的效果，还是不会换行，只有你把想换行的文字写到p标签当中，才会在网页上显示为换行的效果。

2p标签里面不能嵌套其他p标签和h系列标签。

比如，上海的位置，我在编辑器中这样写：

我们看到，在编辑器中，上海在中国的东部沿海地区。和上海市位于东经°52′至°12′，北纬30°40′至31°53′之间。分别是两个段落。但是我没有给它们加p标签，我们只是在编辑器中，给它们换行了，各占一行。但是在浏览器中，效果是这样的：

在浏览器中，我们看到这两句话在同一行，并没有换行。而实际上，我的目的是要把它们分成两个段落的。那么要想实现换行的效果，你就必须把它们分别放在两个p标签中。如下图：

这时，在浏览器中，效果如下：

现在我再根据上面划分的大纲，把上海市更详细一点的介绍，用p标签写成段落，如下图：

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title我的网页/title

metaname=Keywordscontent=手机，智能手机，5G手机，游戏手机，高性能手机

metaname=Descriptioncontent=钉子手机是东半球最好的手机，功能强大，充电1分钟，打游戏年

/head

body

h1上海简介/h1

h2上海的地理环境/h2

h3位置/h3

p上海在中国的东部沿海地区。/p

p上海市位于东经°52′至°12′，北纬30°40′至31°53′之间。/p

h3气候/h3

p上海属亚热带季风性气候，四季分明，日照充分，雨量充沛。上海气候温和湿润，春秋较短，冬夏较长。年，全市平均气温17.6℃，日照.9小时，降水量.4毫米。全年60%以上的雨量集中在5月至9月的汛期。/p

h3水文/h3

p上海市地处长江入海口、太湖流域东缘。境内河道（湖泊）面积约多平方公里，河面积率为9%～10%；上海市河道长度2万余公里，河网密度平均每平方公里3公里～4公里。境内江、河、湖、塘相间，水网交织，主要水域和河道有长江口，黄浦江及其支流吴淞江（苏州河）、蕰藻浜、川杨河、淀浦河、大治河、斜塘、圆泄泾、大泖港、太浦河、拦路港，以及金汇港、油墩港等。/p

h2上海的自然资源/h2

h3矿产/h3

p境内缺乏金属矿产资源，建筑石料也很稀少，陆上的能源矿产同样匮乏。70年代以来开始在近海寻找油气资源，在多口钻井中获得工业原油和天然气。据初步估算，东海大陆架油气资源储量约有60亿吨，是中国近海海域最大的含油气盆地。/p

h3生物/h3

p上海市境内天然植被残剩不多，绝大部分是人工栽培作物和林木。天然的木本植物群落，仅分布于大金山岛和佘山等局部地区，天然草本植物群落分布在沙洲、滩地和港汊。栽培的农作物共有多个种类，近万个品种。/p

h2上海的人口/h2

h3年龄/h3

p上海市统计局最新发布的统计公报显示，年末上海市常住人口总数为.27万人，相比年末减少10.41万人/p

h3性别/h3

p全市常住人口中，0-14岁的人口为人，占8.63%；15-64岁的人口为人，占81.25%；65岁及以上的人口为人，占10.12%。/p

/body

/html

在浏览器中显示效果如下：

注意：h系列标签和p标签不能互相嵌套，所以我上面的代码，没有做缩进。不能互相嵌套的代码就不要做缩进。

温馨提示：我们的代码或者文字比较多的情况下，在vscode编辑器中，一行的代码会比较长，不利于阅读。我们可以按快捷键alt+z解决这个问题。或者在编辑器中，点击“查看-切换自动换行”。