HTML|网页基本标签

最新推荐文章于 2024-04-05 01:17:02 发布

Alan_Lowe

最新推荐文章于 2024-04-05 01:17:02 发布

阅读量1k

点赞数 1

分类专栏： # HTML 文章标签： html 网页设计

本文链接：https://blog.csdn.net/qq_45985728/article/details/118682894

版权

HTML 专栏收录该内容

26 篇文章 5 订阅

订阅专栏

HTML|网页基本标签

1.标题标签

格式为：

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

h后面的数字就代表标题的等级

我们知道body标签会显示在网页上，那么我们把上述语句放入程序中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

</body>
</html>

点击进入网页：

在这里插入图片描述

我们可以看到这个等级和我们的MarkDown的标题是一样的，六个等级，从大到小。

2.段落标签

我们先看一下，如果我们在body标签内写一些顺序和格式混乱的内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>

<body>

Hello,World!    123
346

</body>

</html>

点开网页，发现它的排版并不是我们在代码中的样式，而是紧密的靠在一起的，也没有分行：

在这里插入图片描述

这个呢，就是我们需要去分段了，分段符的格式如下：

<p>Hello,World!    123</p>
<p>346</p>

就是p和/p，就是说每个标签之内的内容为一个段落：

在这里插入图片描述

3.换行标签

下述例子，我们是用的段落标签来实现的，我们也可以用换行标签来实现，就是在需要换行的位置，加上一个br标签：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>

<body>

Hello,World!  <br>  123<br>
346


</body>

</html>

打开网页：

在这里插入图片描述

通常呢，我们为了让它和其他的标签保持一直，也会把它“关上”，即把br改为br/：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>换行标签</title>
</head>

<body>

Hello,World!  <br/>  123<br/>
346


</body>

</html>

4.水平线标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>水平线标签</title>
</head>

<body>

水平线标签
<hr/>
水平线标签

</body>

</html>

它会生成一个分隔符：

在这里插入图片描述

5.字样样式标签

我们说一下粗体和斜体：

粗体是strong，斜体是em：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>字体样式标签</title>
</head>

<body>

粗体：<strong>粗体</strong><br/>
斜体：<em>斜体</em><br/>

</body>

</html>

如图：

在这里插入图片描述

6.特殊符号

小于符号是&gt；大于符号是&lt；空格是&nbsp；版权谁有符号是&copy：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>特殊符号</title>
</head>

<body>

空格：一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二<br/>
&gt;<br/>
&lt;<br/>
&copy;版权所有Alan_Lowe<br/>

</body>

</html>

结果如下：

在这里插入图片描述

7.总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>Hello,World!    123</p>
<p>346</p>
<!--换行标签-->
Hello,World!  <br/>  123<br/>
346
<!--水平线标签-->
水平线标签
<hr/>
水平线标签
<!--字体样式标签-->
粗体：<strong>粗体</strong><br/>
斜体：<em>斜体</em><br/>
<!--特殊符号-->
空格：一&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二<br/>
&gt;<br/>
&lt;<br/>
&copy;版权所有Alan_Lowe<br/>
</body>
</html>

网页：

在这里插入图片描述

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
4
评论
HTML|网页基本标签

HTML|网页基本标签1.标题标签格式为：<h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6>h后面的数字就代表标题的等级我们知道body标签会显示在网页上，那么我们把上述语句放入程序中：<!DOCTYPE html>&lt
复制链接

扫一扫