HTML网页基本标签

一方1

已于 2022-09-29 14:37:39 修改

阅读量678

点赞数 1

文章标签： html servlet java

于 2022-09-29 14:05:41 首次发布

本文链接：https://blog.csdn.net/m0_67737085/article/details/127104881

版权

本文介绍了HTML的基本标签，包括标题标签（h1-h4）、段落标签（p）、换行标签（br）和水平线标签（hr）。通过实例展示了这些标签在网页布局和文本格式化中的应用，以及字体样式标签如粗体（strong）和斜体（em）的使用。此外，还提到了特殊字符的表示方式，如空格、大于号、小于号等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.标题标签 <h1>一级标签</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
</body>
</html>

运行结果

2.段落标签 <p> </p>

如果我们直接把一部分文本放进body主题，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
冬眠假期刚刚结束
我还有点糊涂
鸟儿在头顶把森林叫醒
春天空气让我很舒服
天上太阳已红扑扑
看起来很模糊
远处山坡有几棵小树
去年冬眠前我没记住
</body>
</html>

上述是吧熊出没一部分歌词放进了body主体，我们看一下运行结果如何。

我们看到歌词没有达到我们的预期结果，而是紧挨着的，非常的不美观，这就需要我们的段落标签了。我们再次修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>冬眠假期刚刚结束</p>
<p>我还有点糊涂</p>
<p>鸟儿在头顶把森林叫醒</p>
<p>春天空气让我很舒服</p>
<p>天上太阳已红扑扑</p>
<p>看起来很模糊</p>
<p>远处山坡有几棵小树</p>
<p>去年冬眠前我没记住</p>
</body>
</html>

修改加入段落标签后发现，我们的运行结果达到了预期的结果。

3.换行标签</br>

我们可以使用段落标签让每一句歌词占一行，同时我们也可以使用换行标签来达到目的。修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>冬眠假期刚刚结束</p>
<p>我还有点糊涂</p>
<p>鸟儿在头顶把森林叫醒</p>
<p>春天空气让我很舒服</p>
<p>天上太阳已红扑扑</p>
<p>看起来很模糊</p>
<p>远处山坡有几棵小树</p>
<p>去年冬眠前我没记住</p>

<!--换行标签-->
冬眠假期刚刚结束<br/>

我还有点糊涂<br/>

鸟儿在头顶把森林叫醒<br/>

春天空气让我很舒服<br/>

天上太阳已红扑扑<br/>

看起来很模糊<br/>

远处山坡有几棵小树<br/>

去年冬眠前我没记住<br/>
</body>
</html>

我们看到在换行标签作用下也达到了目的。但是我们和段落标签比较发现。换行标签每一行都比较紧凑，而段落标签则是每一行都有一定的间距。

4.水平线标签<hr>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>冬眠假期刚刚结束</p>
<p>我还有点糊涂</p>
<p>鸟儿在头顶把森林叫醒</p>
<p>春天空气让我很舒服</p>
<p>天上太阳已红扑扑</p>
<p>看起来很模糊</p>
<p>远处山坡有几棵小树</p>
<p>去年冬眠前我没记住</p>

<!--换行标签-->
冬眠假期刚刚结束<br/>

我还有点糊涂<br/>

鸟儿在头顶把森林叫醒<br/>

春天空气让我很舒服<br/>

天上太阳已红扑扑<br/>

看起来很模糊<br/>

远处山坡有几棵小树<br/>

去年冬眠前我没记住<br/>
<body/>

</body>
<!--水平线标签-->
<hr>
</body>
</html>

我们可以看到在页面最底下便生成了水平线。

5.字体样式标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<!--段落标签-->
<p>冬眠假期刚刚结束</p>
<p>我还有点糊涂</p>
<p>鸟儿在头顶把森林叫醒</p>
<p>春天空气让我很舒服</p>
<p>天上太阳已红扑扑</p>
<p>看起来很模糊</p>
<p>远处山坡有几棵小树</p>
<p>去年冬眠前我没记住</p>

<!--换行标签-->
冬眠假期刚刚结束<br/>

我还有点糊涂<br/>

鸟儿在头顶把森林叫醒<br/>

春天空气让我很舒服<br/>

天上太阳已红扑扑<br/>

看起来很模糊<br/>

远处山坡有几棵小树<br/>

去年冬眠前我没记住<br/>
<body/>

</body>
<!--水平线标签-->
<hr>
<!--字体样式标签-->
<h1>粗体</h1>
<strong>好好学习</strong>
<h1>斜体</h1>
<em>好好学习</em>
</body>
</html>

我们看到对应生成了粗体和斜体。粗体：<strong>内容</strong>。斜体：<em>内容</em>。

6.特殊符号

空格  ：&nbsp；
大于号：&gt;
小于号：&lt;
版权号：&copy;
等等......