前端开发系列（二）HTML教程（2）

雨点打透心脏的1/2处 2021-09-28 01:58 392阅读 0赞

# 一、认识标签（第一部分） #

## 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>
 1922年的春天，他搬入纽约附近一海湾居住。
 菲茨杰拉德，二十世纪美国文学巨擘之一，作家和编剧双重身份。
 </body>
 </html>

> 运行结果：  
> ![在这里插入图片描述][20190104203312430.png]

## 1.2、开始学习 p 标签，添加段落 ##

> 1、如果想在网页上显示文章，这时就需要``标签了，把文章的段落放到``标签中。 
> 2、语法：`段落文本` 
> 3、注意一段文字一个``标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个``标签中。

代码示例：

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> p标签</title>
 </head>
 <body>
 我的第一个段落
 我的第二个段落
 </body>
 </html>

> 运行结果： 
> ![在这里插入图片描述][20190104204114287.png] 
> 思考分析： 
> ``标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用 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>
 《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。 
 菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。
 </body>
 </html>

> 运行结果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]

## 1.4、加入强调语气，使用 strong 和 em 标签 ##

> 1、现在如果想在一段话中特别强调某几个文字，这时候就可以用到``或``标签。但两者在强调的语气上有区别:`` 表示强调，`` 表示更强烈的强调。并且在浏览器中`` 默认用斜体表示，`` 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用``表示强调。 
> 2、语法：``需要强调的文本`` ``需要强调的文本``

代码示例：

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>了不起的盖茨比</title>
 </head>
 <body>
 1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。
 菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。
 </body>
 </html>

> 运行结果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 1]

## 1.5、使用 span 标签为文字设置单独样式 ##

> 1、``标签是没有语义的，它的作用就是为了设置单独的样式用的。 
> 2、如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到标签了。

代码示例：

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>了不起的盖茨比</title>
 <style>
 span{
 color:blue;
 }
 </style>
 </head>
 <body>
 1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。
 菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。
 </body>
 </html>

> 运行结果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 2]

## 1.6、使用 br 标签分行显示文本 ##

> 我们想让那首诗显示得更美观些，怎么可以让每一句诗词后面加入一个折行呢？那就可以用到` `标签了，在需要加回车换行的地方加入` `，` `标签作用相当于word文档中的回车。

代码示例：

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>br标签的使用</title>
 </head>
 <body>
 <h2>《咏桂》</h2>
 暗淡轻黄体性柔， 情疏迹远只香留。 何须浅碧深红色， 自是花中第一流。
 </body>
 </html>

> 运行结果：  
> ![在这里插入图片描述][20190106214131665.png]

## 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>

> 运行结果：  
> ![在这里插入图片描述][20190106214449351.png]

## 1.8、认识 hr 标签，添加水平横线 ##

> 在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。

代码示例：

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>hr标签使用</title>
 </head>
 <body>
 	宇智波佐助
 	<hr />
 	漩涡鸣人
 </body>
 </html>

> 运行结果：  
> ![在这里插入图片描述][20190106214849787.png]

## 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>
 我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code>
 </body>
 </html>

> 运行结果：  
> ![在这里插入图片描述][20190106215634130.png]

## 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++) 
 	{ 
 		alert(message); 
 	} 
 </body>
 </html>

> 运行结果：  
> ![在这里插入图片描述][20190106215958264.png]

--------------------

**此篇博客代码下载地址：[HTML教程2代码下载][HTML_2]  
博主的所有博客目录如下：[博客文章目录汇总][Link 1]  
Java面试部分的博客目录如下：[Java笔试面试目录][Java]**

> **转载请标明出处，原文地址：[https://blog.csdn.net/weixin\_41835916][https_blog.csdn.net_weixin_41835916] 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。  
> ![这里写图片描述][70]**

[20190104203312430.png]: /images/20210923/c1c140b6eddb4756875ad2ebe750c6a9.png
[20190104204114287.png]: /images/20210923/c9fa2eaaf98a48e0bd56ad6c8706cfe0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]: /images/20210923/4786a72540364e62a48003aa8b59e13d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 1]: /images/20210923/a123ccd255354bbba04d48fc14da3566.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70 2]: /images/20210923/a4fc36cf905f4726858f9c5895f5ad43.png
[20190106214131665.png]: /images/20210923/00e3c3b1eb9641ad89e2c8fbf64099ba.png
[20190106214449351.png]: /images/20210923/031e627e10794c399ec6d1a30f9ad6ae.png
[20190106214849787.png]: /images/20210923/7420e976bc414a93afcbe50cb114bee3.png
[20190106215634130.png]: /images/20210923/b6b7893d2f5c45b4a4e182693d3e69c8.png
[20190106215958264.png]: /images/20210923/da512b77dcdf4af08d5ec7551d4ef135.png
[HTML_2]: https://github.com/longjiahao666/Web/tree/master/Code1/html/html2
[Link 1]: https://blog.csdn.net/weixin_41835916/article/details/81879208
[Java]: https://blog.csdn.net/weixin_41835916/article/details/81413498
[https_blog.csdn.net_weixin_41835916]: https://blog.csdn.net/weixin_41835916
[70]: /images/20210923/36df4874c2d946ea9bbbddd7baf14e14.png