一、认识标签（第一部分）
1.1、body 标签，网页上显示的内容放在这里
网页上要展示出来的页面内容一定要放在 body 标签中。代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
</head>
<body>
<h1>了不起的盖茨比</h1>
<p>1922年的春天，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，作家和编剧双重身份。</p>
</body>
</html>
运行结果：
1.2、开始学习 p 标签，添加段落
1、如果想在网页上显示文章，这时就需要
<p>标签了，把文章的段落放到<p>标签中。
2、语法：<p>段落文本</p>
3、注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。
代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
</head>
<body>
<p>我的第一个段落</p>
<p>我的第二个段落</p>
</body>
</html>
运行结果：
思考分析：
<p>标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用 css 样式来删除或改变它。
1.3、了解标签，为你的网页添加标题
标题标签一共有 6 个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减，字体大小也逐渐变小。
<h1>是最高的等级。
语法：<hx>标题文本</hx>( x 为 1 - 6 )
代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>h1-h6标题标签</title>
</head>
<body>
<h1>了不起的盖茨比</h1>
<p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。 </p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
运行结果：
1.4、加入强调语气，使用 strong 和 em 标签
1、现在如果想在一段话中特别强调某几个文字，这时候就可以用到
<em>或<strong>标签。但两者在强调的语气上有区别:<em>表示强调，<strong>表示更强烈的强调。并且在浏览器中<em>默认用斜体表示，<strong>用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
2、语法：<em>需要强调的文本</em><strong>需要强调的文本</strong>
代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
</head>
<body>
<p>1922年的春天，一个想要成名名叫<strong>尼克•卡拉威</strong>（托比•马奎尔Tobey Maguire饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
运行结果：
1.5、使用 span 标签为文字设置单独样式
1、
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
2、如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到标签了。扫描二维码关注公众号，回复： 5132990 查看本文章
代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
运行结果：
1.6、使用 br 标签分行显示文本
我们想让那首诗显示得更美观些，怎么可以让每一句诗词后面加入一个折行呢？那就可以用到
<br />标签了，在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。
代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>br标签的使用</title>
</head>
<body>
<h2>《咏桂》</h2>
<p>暗淡轻黄体性柔，<br />情疏迹远只香留。<br />何须浅碧深红色，<br />自是花中第一流。</p>
</body>
</html>
运行结果：
1.7、为你的网页中添加一些空格
我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入
。
代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>空格讲解</title>
</head>
<body>
<h1>火影忍者</h1>
来源：作文网 作者：为梦想而飞
</body>
</html>
运行结果：
1.8、认识 hr 标签，添加水平横线
在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。
代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hr标签使用</title>
</head>
<body>
<p>宇智波佐助</p>
<hr />
<p>漩涡鸣人</p>
</body>
</html>
运行结果：
1.9、想加入一行代码吗？使用 code 标签
在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用
<code>标签了，如下面例子：<code>var i=i+300;</code>
代码示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>code标签介绍</title>
</head>
<body>
<p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
</body>
</html>
运行结果：
1.10、使用 pre 标签为你的网页加入大段代码
在上节中介绍加入一行代码的标签为
<code>，但是在大多数情况下是需要加入大段代码的。这时候就可以使用<pre>标签
代码示例：
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pre标签的使用</title>
</head>
<body>
var message="欢迎";
for(var i=1;i<=10;i++)<br>
{<br>
alert(message); <br>
}<br>
</body>
</html>
运行结果：
此篇博客代码下载地址：HTML教程2代码下载
博主的所有博客目录如下：博客文章目录汇总
Java面试部分的博客目录如下：Java笔试面试目录
转载请标明出处，原文地址：https://blog.csdn.net/weixin_41835916 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。
