干货丨速度教你创建网页文件，实现HTML入门

迈不过友情╰ 2022-09-10 03:22 115阅读 0赞

![b458c53bc29428ea1710ad1d69889a25.gif][]

今天，播妞为大家准备了关于创建网页文件的学习内容，具体包括网页文件创建、HTML标签语法规范、HTML标签的关系以及HTML整体结构。

完成以上内容的学习，**零基础学习者基本上就能学会如何创建一个有简单内容的网页文件，**快一起来看吧！

** HTML入门创建网页文件 **

![cb37e9679f68ac7b62a13de12f263a3c.png][]

**网页文件创建**

**（1）网页文件的扩展名**

在讲解标签的具体语法规范前，我们首先要创建一个网页文件。说到文件，我们知道文件有类型，也就是有扩展名。

例如，记事本文件，它的扩展名为：.txt。那么，网页文件的扩展名是什么呢？网页文件的扩展名为：'.html' 或者是'.htm'。

所以，看到以'.html'或'.htm'结尾的文件，就应该马上get到一个重要的信息：这是网页文件，可通过浏览器打开对应文件，查看具体的网页内容。

**（2）如何创建网页文件**

因为一个网站包含众多网页，相对应的是也会有很多的网页文件，所以我们不能随意创建网页文件，这样不利于后期管理。那应该如何做？

在桌面、D盘或E盘(当然，你也可以选择你喜欢的一个盘)中创建一个文件夹，将创建的网页文件都放在该文件夹中统一管理；后期即使文件再多，也能及时找到并易于分类管理。

**（3）创建第一个网页文件**

Step1：在电脑桌面上新建 一个文件夹，命名为：MyWeb；

Step2：在该文件夹内，创建一个文本文件，即扩展名为'.txt'的文件；文件可随意命名，此处命名为：index.txt；

Step3：修改文本文件的拓展名。网页文件的扩展名为:'.html'或'.htm'，因此，需要将创建的文本文件拓展名改为网页文件的拓展名，即改变其类型。修改完扩展名，文件名前面出现了一个浏览器的图标。显而易见，我们创建的文件就是一个网页文件。

Step4：向网页文件内添加内容。选中‘index.html’文件，右击，在弹出的快捷菜单中，选择‘打开方式’--‘记事本’。打开 ’记事本‘，即可开始在记事本中编写HTML标签。

![8314949b2ad50d0711068f93409b8745.png][]

**HTML标签语法规范**

（1）所有的标签都包含在一对尖括号中，尖括号必须在英文状态下输入；

（2）标签一般情况下都是成对出现，这种情况称为“双标签”；

（3）第一个标签为：开始标签；第二个标签为：结束标签；

（4）必须要有结束标签，结束标签是一个斜杠：“/”。比如：<html></html>。

（5）当然，在HTML中，也有单个标签的出现，这种情况称为：“单标签”。比如： 。

![2d42c6c96c4c46663223b08e9171861e.png][]

**HTML标签的关系**

**（1）包含关系**

所谓的包含关系指：一个标签中再包含另外一个标签，可以理解为标签的嵌套。

举个例子：

上面例子中的<title>标签嵌套在<head>标签内部，也就是<head>标签与<title>标签是包含关系，包含关系也可称为“父子关系”。

**（2）并列关系**

标签与标签位置并列，并不是从属关系，像这种情况，我们称之为“并列关系”。可以将这种并列关系理解为“兄弟关系”。

比如：

![4294414c2690057fd128fd06af0c58c2.png][]

**HTML整体结构**

每个网页的整体结构基本上一致，也就是说每个网页都会有一个基本的结构标签，也称之为骨架标签，所有的页面内容就是在这些基本标签上进行编写。

我们来看一个网页的整体结构，如下所示：

<html>
      <head>
           <title>我的第一个网页</title>
      </head>
      <body>
           学习编程，就来黑马程序员。
      </body>
 </html>

通过上面的代码，我们可以看到<html>标签是最大的标签，它包含了其他所有的标签，所以也称为：根标签。

**<head>标签：**是页面的头部标签，代表网页的头部区域；而<head>标签内部包含了一个<title>标签。

**<title>标签：**表示头部区域内的网页标题或文档标题，它可以赋予页面一个属于自己的网页标题。

**<body>标签：**表示文档的主体，其包含了文档内所有内容，页面内容基本都置于body标签内，也就是说，页面中显示的内容都需要放在body标签内。

光说不练假把式，大家赶紧自己动手创建一个简单的网页文件吧！![4bb092cd8b565d7e25fc5572b40c816b.png][]

当然，创建一个简单的网页文件，只是HTML快速入门的第一步。播妞后续还会更新更多的干货知识，敬请关注哦！

另外，**黑马程序员B站** 有海量的前端视频课程，免费体验优质学习资源，大家可以在b站搜索自学！

![3a0a1ca52bf0e1ecbb444e367b9d3d7d.png][]

** 黑马程序员 **

**致力于培养高级软件工程师**

**96** 位专职课研技术大牛

**879** 人严选教学团队

累计培养 **30余万名** 优质IT人才

以高品质教学质量赢得好口碑

![738d71d1828ca067633f8a814a574001.png][]

**部分学科最高优惠2000元**

立即扫码抢占优惠名额

课程老师1对1服务，全程免费

????????????

<table> 
 <tbody> 
 <tr> 
 <td colspan="1">JavaEE</td> 
 <td colspan="1">HTML&amp;JS+前端</td> 
 <td colspan="1">Python+大数据开发</td> 
 </tr> 
 <tr> 
 <td colspan="1">人工智能开发</td> 
 <td colspan="1">UI/UE设计</td> 
 <td colspan="1">软件测试</td> 
 </tr> 
 <tr> 
 <td colspan="1">新媒体+短视频直播运营</td> 
 <td colspan="1">产品经理</td> 
 <td colspan="1">Linux云计算+运维开发</td> 
 </tr> 
 <tr> 
 <td colspan="1">智能机器人软件开发</td> 
 <td colspan="1">电商视觉运营设计</td> 
 <td colspan="1">/</td> 
 </tr> 
 </tbody> 
</table>

**线上课程也可扫码咨询**

**更多疑问可添加播妞微信**

![2ddac705df69737d585c1073f7f2dfc7.png][]** heiniu526 **

**- 推荐阅读 -**

[三大「非编程」高薪岗位出炉！这薪资，不输程序员！][Link 1]

[2021-08-30][Link 1]

[![f55ad9e2db3397a8d102dfe69cceecd5.png][] ][Link 1]

[一家全是女程序员的公司？网友：请务必告诉我，薪资无所谓！][Link 2]

[2021-08-27][Link 2]

[![182d9b07de2c2a73ac124cd1f23d1145.png][] ][Link 2]

[互联网人租房有多难？听完这6位的自白，瞬间破防了 ....][6_ ....]

[2021-08-23][6_ ....]

[![234d2f1305437463aa67ed4191cfa229.png][] ][6_ ....]

![4d0f5361f41cbf379ed50ca39a533a00.gif][]

[b458c53bc29428ea1710ad1d69889a25.gif]: /images/20220829/0ae81930a9454b808229c9b5a89f5e3f.png
[cb37e9679f68ac7b62a13de12f263a3c.png]: /images/20220829/9d0263cc9a0b4404b014056773eb063c.png
[8314949b2ad50d0711068f93409b8745.png]: /images/20220829/e36fed7b41794e93a5e371176fc6d2d4.png
[2d42c6c96c4c46663223b08e9171861e.png]: /images/20220829/92de6fd76cfe46149e5586c66cf0a6d6.png
[4294414c2690057fd128fd06af0c58c2.png]: /images/20220829/cdb321644e26426cba1d723c5e20a617.png
[4bb092cd8b565d7e25fc5572b40c816b.png]: /images/20220829/64bbf9f68d8c46fa8ec5a5b9c7da6ce8.png
[3a0a1ca52bf0e1ecbb444e367b9d3d7d.png]: /images/20220829/20794ad2f020411a89a5e4a22305734c.png
[738d71d1828ca067633f8a814a574001.png]: /images/20220829/30827c2f0d8d43c2b41f2a717e7a6180.png
[2ddac705df69737d585c1073f7f2dfc7.png]: /images/20220829/86e1d20d71eb48de8a6d8677a75c9184.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU0ODExNTc5MQ%3D%3D&chksm=fb47a3f8cc302aee01ab66f8e1cc17bc71a9429e256399705035ca47862846a8811df35036c0&idx=1&mid=2247559128&scene=21&sn=b32019dbd119e4348bd34887e320424e#wechat_redirect
[f55ad9e2db3397a8d102dfe69cceecd5.png]: /images/20220829/246cc90fc1534cfeb99a039b0851ae2d.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU0ODExNTc5MQ%3D%3D&chksm=fb47a20acc302b1c3d9a638a05b1a00079de302c20e20c4a1458b4cae57f31ac43a93ca45fbd&idx=1&mid=2247558698&scene=21&sn=d591c996a009c95ebe025cdfdad26454#wechat_redirect
[182d9b07de2c2a73ac124cd1f23d1145.png]: /images/20220829/814b766bd05647c69a64d37e423f3d6d.png
[6_ ....]: http://mp.weixin.qq.com/s?__biz=MzU0ODExNTc5MQ%3D%3D&chksm=fb47a6cbcc302fddd9d28463916bd496c07188394f3a263b93f9ba1d65b06286fdac366d93d6&idx=1&mid=2247557867&scene=21&sn=f8482b6579ebe49badfa751e4125ea9f#wechat_redirect
[234d2f1305437463aa67ed4191cfa229.png]: /images/20220829/6257d003a314489480a20680db85bae4.png
[4d0f5361f41cbf379ed50ca39a533a00.gif]: /images/20220829/efcc7255b10a4137832d97e264de5d0f.png