HTML详解-2 基础元素
Posted 萌杰尔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML详解-2 基础元素相关的知识，希望对你有一定的参考价值。
网站开发基础之html详解-2 基础元素
欢迎来到第二节，打开这篇文章，相比你已经通过第一节的学习了解了什么是HTML并且知道HTML源码的基本结构了，那我们看看今天的内容吧。
什么是快乐星球 —*嘿嘿嘿，开个玩笑
今天我们来讲一些基础的标签，这些标签都应当放到body标签中，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Base Element</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
这个h1标签放在了body标签中，就会显示在网页可见区域了
h1
h1标签，用于显示一个一级标题（注意：改标题是文本标题而不是标签页那个页面标题）
<h1>我是一级标题</h1>
显示结果如下
h2
h2标签，用于显示一个二级标题
<h2>我是二级标题</h2>
显示结果如下
由此可见h1的字比h2的大，那么剩下的就不用写了，文本标题一共六个级别
一级标题 h1
二级标题 h2
三级标题 h3
四级标题 h4
五级标题 h5
六级标题 h6
br
br标签，用于换行
<br>
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello<br>World
</body>
</html>
显示结果如下
可以看到World单词显示在了第二行，这就是br标签的用途了
注意：这是一个真实项目中不太会用到的标签，了解就好了
p
p标签，用于显示段落
<p>
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。</p>
<p>那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路!”</p>
</body>
</html>
显示结果如下
由此可见，p标签把文章分成段，并且段与段之间有间隔
strong
strong标签，用于加粗文本
<strong></strong>
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello<strong>World</strong>
</body>
</html>
显示结果如下
由此可见，被strong标签包起来的World单词变成粗体，这就是strong标签的功能
em
em标签，用于将文本变成斜体
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello<em>World</em>
</body>
</html>
图中World单词被em标签包起来，因此变成了斜体
a
很奇怪怎么会有名字那么简单的标签，嘿嘿嘿
这就是你在网上见到的超链接的本体了
a标签，用于实现一个超链接
<a href=""></a>
注意，该标签存在一个href属性，该属性用于为超链接指定一个链接，该超链接显示的文本应该包在该标签中
举个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.csdn.net">CSDN</a>
</body>
</html>
该标签的执行结果出现了一个蓝色/紫色的带有下划线的文本，这就是超链接，当你点击的时候，会跳转到CSDN的官网
这些就是HTML的最基本的标签了，祝大家学习快乐，下节我将讲解一些比较有意思的内容哦
欢迎大家加入我的微信群
以上是关于HTML详解-2 基础元素的主要内容，如果未能解决你的问题，请参考以下文章