在线客服
扫描二维码
下载博学谷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快速入门的第一步。博学谷资讯前端栏目后续还会更新更多的干货知识,敬请关注吧!另外,博学谷还有海量的前端视频课程,现在注册学习账号,就能免费体验优质的学习资源~
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
快速学习Vue框架(知识点集合)
学习Vue的小伙伴速度看过来,快速学习Vue框架知识点集合贴来啦。建议收藏,尤其基础并不是很扎实的同学,本篇集合贴就是你日后工作的参考手册。
12095
2019-08-07 18:11:19
前端与移动开发培训班课程怎么样?学完能就业吗?
前端与移动开发培训班课程怎么样?学完能就业吗?其实博学谷的培训班课程都是十分有保障的,该课程内容包括目前最流行的三大框架(Vue、React、Angular),把全栈工程师必须要掌握的全部前端技术、Node.js相关后台技术、HTML5移动方向开发技术做了系统整合,真正做到了学完课程就可以就业。
4846
2019-12-16 18:49:05
JavaScript语法教程学哪些知识点?
JavaScript语法需要学计算机基础、Javascript变量、数据类型、操作符、流程控制及案例、循环及案例、数组和冒泡排序、函数及应用、作用域及预解析、 javascript对象、内置对象及案例、简单类型和复杂类型等内容。
3794
2020-03-13 14:57:03
零基础学前端应该怎么开始?
随着互联网的深入发展,用户体验可以说是企业的重中之重,而前端作为公司的门面,需求会越来越大。所以我们可以看到,近几年来前端工程师的薪资待遇一直在上涨,这也是为什么学前端开发的朋友越来越多了。那么对于零基础的初学者来讲,学前端应该怎么开始呢?本文给大家推荐一个免费的入门视频,感兴趣的朋友可以一起来看看。
3390
2020-05-28 15:18:47
网站域名后缀都是什么含义?
2019年我国网站数量已经达到518万个,每一个网站都有一个唯一的网站域名。例如百度(baidu.com)、博学谷(boxuegu.com)、淘宝(taobao.com)等等。细心的同学可能会注意到大部分域名的后缀都是.com。这些网站域名后缀都是什么含义呢?应该如何选择一个适合自己的域名呢?
5420
2020-08-03 14:05:09