在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
本文为零基础学习者准备了关于创建网页文件的相关学习笔记，具体内容包括网页文件创建、HTML标签语法规范、HTML标签的关系以及HTML整体结构。完成以上内容的学习，大家基本上就能学会如何创建一个有简单内容的网页文件，实现HTML快速入门。
1、网页文件创建
（1）网页文件的扩展名
在讲解标签的具体语法规范前，我们首先要创建一个网页文件。说到文件，我们知道文件有类型，也就是有扩展名。例如，记事本文件，它的扩展名为：.txt。那么，网页文件的扩展名是什么呢？网页文件的扩展名为：'.html' 或者是'.htm'。所以，看到以'.html'或'.htm'结尾的文件，就应该马上get到一个重要的信息：这是网页文件，可通过浏览器打开对应文件，查看具体的网页内容。
（2）如何创建网页文件
因为一个网站包含众多网页，相对应的是也会有很多的网页文件，所以我们不能随意创建网页文件，这样不利于后期管理。那应该如何做？在桌面、D盘或E盘(当然，你也可以选择你喜欢的一个盘)中创建一个文件夹，将创建的网页文件都放在该文件夹中统一管理；后期即使文件再多，也能及时找到并易于分类管理。
（3）创建第一个网页文件
Step1：在电脑桌面上新建 一个文件夹，命名为：MyWeb；
Step2：在该文件夹内，创建一个文本文件，即扩展名为'.txt'的文件；文件可随意命名，此处命名为：index.txt；
Step3：修改文本文件的拓展名。网页文件的扩展名为:'.html'或'.htm'，因此，需要将创建的文本文件拓展名改为网页文件的拓展名，即改变其类型。修改完扩展名，文件名前面出现了一个浏览器的图标。显而易见，我们创建的文件就是一个网页文件。
Step4：向网页文件内添加内容。选中‘index.html’文件，右击，在弹出的快捷菜单中，选择‘打开方式’--‘记事本’。打开 ’记事本‘，即可开始在记事本中编写HTML标签。
2、HTML标签语法规范
（1）所有的标签都包含在一对尖括号中，尖括号必须在英文状态下输入；
（2）标签一般情况下都是成对出现，这种情况称为“双标签”；
（3）第一个标签为：开始标签；第二个标签为：结束标签；
（4）必须要有结束标签，结束标签是一个斜杠：“/”。比如：<html></html>。
（5）当然，在HTML中，也有单个标签的出现，这种情况称为：“单标签”。比如：<br />。
3、HTML标签的关系
（1）包含关系
所谓的包含关系指：一个标签中再包含另外一个标签，可以理解为标签的嵌套。举个例子：
<head>
<title></title>
<head>
上面例子中的<title>标签嵌套在<head>标签内部，也就是<head>标签与<title>标签是包含关系，包含关系也可称为“父子关系”。
（2）并列关系
标签与标签位置并列，并不是从属关系，像这种情况，我们称之为“并列关系”。可以将这种并列关系理解为“兄弟关系”。比如：
<head></head>
<body></body>
4、HTML整体结构
每个网页的整体结构基本上一致，也就是说每个网页都会有一个基本的结构标签，也称之为骨架标签，所有的页面内容就是在这些基本标签上进行编写。我们来看一个网页的整体结构，如下所示：
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
学习线上编程，就来博学谷。
</body>
</html>
通过上面的代码，我们可以看到<html>标签是最大的标签，它包含了其他所有的标签，所以也称为：根标签。<head>标签是页面的头部标签，代表网页的头部区域；而<head>标签内部包含了一个<title>标签。<title>标签：表示头部区域内的网页标题或文档标题，它可以赋予页面一个属于自己的网页标题。<body>标签：表示文档的主体，其包含了文档内所有内容，页面内容基本都置于body标签内，也就是说，页面中显示的内容都需要放在body标签内。
关说不练假把式，大家赶紧自己动手创建一个简单的网页文件吧！当然，创建一个简单的网页文件，只是HTML快速入门的第一步。博学谷资讯前端栏目后续还会更新更多的干货知识，敬请关注吧！另外，博学谷还有海量的前端视频课程，现在注册学习账号，就能免费体验优质的学习资源~
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
学习前端的机构哪家比较好？
下一篇：
VSCode小白级安装教程
相关推荐 更多
前端与移动开发就业班费用高不高？那些人适合学习？
前端与移动开发就业班费用高不高？那些人适合学习？大家都了解目前互联网领域前端与移动开发、后台开发、大数据开发、UI设计等等都是高薪的岗位。大家可以通过参加相应培训课程快速进入相应的工作岗位，但是报名培训班的费用高不高呢？那些人适合学习前端与移动开发呢？
6793
2019-09-12 17:56:57
Flutter入门学习哪些内容？
入门需要学习Dart语言、Flutter控件体系、动画体系、触摸和交互机制、网络编程、数据存储、状态管理等内容。Flutter是Google力推的跨平台框架，可快速在iOS、Android构建高质量的原生用户界面，且完全免费与开源；
7349
2019-12-30 17:57:05
丁香医生的实时疫情前端界面分析
开年就来势汹汹的新型冠状病毒，从疫情扩散到初见好转，无时无刻不在牵动着大众的心，隔离在家的每个人每天共同关注的就是疫情发展情况。这个时候，丁香医生的出现无疑帮助了大众对于疫情的实时追踪。那么丁香医生28亿多浏览量的实时疫情界面是如何实现的呢？下面我们从前端的角度，分析一下丁香医生实时疫情界面的成功之处。
9135
2020-04-02 15:30:07
Web前端编程难学吗？好入门吗？
Web前端开发门槛比较低，前端开发学习先简单后困难。Web前端开发技术主要学习HTML、CSS和JavaScript这三种基础语言，代码简单，易上手，熟能生巧。勤于练习学起来很快。
5516
2021-01-04 17:25:51
Three.js基础知识分享 帮你入门学习JavaScript 3D 库
Three.js基础知识分享 帮你入门学习JavaScript 3D 库，学习Three.js需要先了解一下 OpenGL 和 WebGL。OpenGL 是一个跨平台的3D/2D的绘图标准，WebGL是一种3D绘图协议。WebGL允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，同时需要相对较多的数学知识对于前端开发者来说学习成本非常高。
5075
2022-04-19 16:10:42
