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>

点击进入网页：

HTML|网页基本标签_网页设计

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

2.段落标签

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

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

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

<body>

Hello,World!    123
346

</body>

</html>

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

HTML|网页基本标签_html_02

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

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

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

HTML|网页基本标签_网页设计_03

3.换行标签

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

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

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

<body>

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


</body>

</html>

打开网页：

HTML|网页基本标签_html_04

通常呢，我们为了让它和其他的标签保持一直，也会把它“关上”，即把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.水平线标签

hr

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

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

<body>

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

</body>

</html>

它会生成一个分隔符：

HTML|网页基本标签_html_05

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>

如图：

HTML|网页基本标签_网页设计_06

6.特殊符号

讲一下小于符号、大于符号、空格和版权所有符号：

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

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

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

<body>

空格：一     二<br/>
><br/>
<<br/>
©版权所有Alan_Lowe<br/>

</body>

</html>

结果如下：

HTML|网页基本标签_网页设计_07

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/>
<!--特殊符号-->
空格：一     二<br/>
><br/>
<<br/>
©版权所有Alan_Lowe<br/>
</body>
</html>

网页：

HTML|网页基本标签_h5_08

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