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

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

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

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

01.网页文件创建

(1)网页文件的扩展名

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

例如,记事本文件,它的扩展名为:.txt。那么,网页文件的扩展名是什么呢?网页文件的扩展名为:’.html’ 或者是’.htm’。

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

(2)如何创建网页文件

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

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

(3)创建第一个网页文件

Step1:在电脑桌面上新建 一个文件夹,命名为:MyWeb;

Step2:在该文件夹内,创建一个文本文件,即扩展名为’.txt’的文件;文件可随意命名,此处命名为:index.txt;

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

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

02.HTML标签语法规范

(1)所有的标签都包含在一对尖括号中,尖括号必须在英文状态下输入;

(2)标签一般情况下都是成对出现,这种情况称为“双标签”;

(3)第一个标签为:开始标签;第二个标签为:结束标签;

(4)必须要有结束标签,结束标签是一个斜杠:“/”。比如:。

(5)当然,在HTML中,也有单个标签的出现,这种情况称为:“单标签”。比如:

03.HTML标签的关系

(1)包含关系

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

举个例子:
在这里插入图片描述
上面例子中的标签嵌套在标签内部,也就是标签与<title>标签是包含关系,包含关系也可称为“父子关系”。

(2)并列关系

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

比如:
在这里插入图片描述

04.HTML整体结构

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

我们来看一个网页的整体结构,如下所示:
在这里插入图片描述
通过上面的代码,我们可以看到标签是最大的标签,它包含了其他所有的标签,所以也称为:根标签。

标签:是页面的头部标签,代表网页的头部区域;而标签内部包含了一个 标签。 标签:表示头部区域内的网页标题或文档标题,它可以赋予页面一个属于自己的网页标题。 标签:表示文档的主体,其包含了文档内所有内容,页面内容基本都置于body标签内,也就是说,页面中显示的内容都需要放在body标签内。

光说不练假把式,大家赶紧自己动手创建一个简单的网页文件吧!图片

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

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值