15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > HTML零基础入门教程, 零基础学习HTML网页制作(HTML基本结构)

HTML零基础入门教程, 零基础学习HTML网页制作(HTML基本结构)

时间:2023-09-25 20:48:01 | 来源:网站运营

时间:2023-09-25 20:48:01 来源:网站运营

HTML零基础入门教程, 零基础学习HTML网页制作(HTML基本结构):

HTML 基本结构:前端拼图的第一块碎片

为什么要学习 HTML 基本结构? 因为,你以后编写的每一个网页都是以HTML的基本结构为基础。因此,HTML 基本结构是 HTML 语言必学内容。 本课程通过通俗易懂的语言及小案例帮你快速掌握 HTML 基本结构,并使用网页开发神器VSCode 实现简单的网页

第一关:HTML 标签语法规范

本门文程我们学习 HTML 的基本结构。

在正式学习之前,我们需要先明确一个问题,为什么要学习 HTML 基本结构?

因为身为开发人员,你以后编写的每一个网页都是基于 HTML 的整体结构。所以说,HTML 基本结构至关重要。

在此基础上,我们将学习标签的书写规范及注意事项,完成对于 HTML 基本结构的整体认知。

最后,我将向大家介绍一个非常牛逼的工具-VSCode,其能够快速的编写 HTML 代码,提高开发效率,在实际工作中发挥重要作用。

学完本课程,你将有如下收获:

(1)掌握 HTML 标签的书写规范以及注意事项 (2)能够写出 HTML 骨架标签 (3)能够使用 VSCode 工具开发网页

1.网页文件创建

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

那么,网页文件的扩展名是什么呢?

网页文件的扩展名为:'.html' 或者是'.htm'。所以,看到以'.html'或'.htm'结尾的文件,就应该马上get到一个重要的信息:这是网页文件,可通过浏览器打开对应文件,查看具体的网页内容。 但是,需要注意的是:不能随意创建网页文件!

为什么呢?

因为一个网站包含众多网页,相对应的是也会有很多的网页文件;若随意创建,不利于后期管理。

那应该如何做?

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

接下来,我们就创建第一个网页文件:

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

注意:后续创建的网页文件,均放在此文件夹中进行管理。该文件夹的名称,也可根据自身需求命名。

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

文本文件创建完成,如下图所示:










Step3:修改文本文件的拓展名;网页文件的扩展名为:'.html'或'.htm',因此,需要将创建的文本文件拓展名改为网页文件的拓展名,即改变其类型。

最终修改后的结果如下图所示,至此,网页文件创建完成:







可以看到,修改完扩展名,文件名前面出现了一个浏览器的图标;显而易见,我们创建的文件就是一个网页文件。

双击该文件,通过浏览器就能打开该文件:







嗯~小朋友,此时你是否有很多问号????怎么空白一片,没有任何内容?







不要着急,这就是我们接下来要解决的问题啦!

不过,为了能够更好的解决问题,我们先对本小节内容做个回顾:

(1)网页文件的扩展名为:'.html' 或'.htm'

(2)创建网页文件

(3)通过文件夹来管理创建的网页文件

2.HTML 标签语法规范

本小节我们来解决前边遇到的问题:向空白的网页文件内添加内容!

Step1:选中‘index.html’文件,右击,在弹出的快捷菜单中,选择‘打开方式’--‘记事本’;

注意:若没有记事本,可点击“选择其他应用(C)”,查找记事本工具。

如下图所示:







Step2:打开 ’记事本‘,即可开始在记事本中编写 HTML 标签。

但是,此时你发现了一个问题:你好像还不会写,连最基本的规范也不知道!!!!!

不要着急,这就告诉你!

书写 HTML 标签时,有一定的规范要求:

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

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

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

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

如下图所示:







当然,HTML 中,也有单个标签的出现,这种情况称为:“单标签”;

如下图所示:







注意:单标签,也是用’斜杠‘结束,并且与标签名 br 之间用一个空格进行分隔。

当然,在 HTML 标签中,单标签非常少(在后面的课程中会重点讲解),在这里有基本的了解即可。

本小节你需要掌握:

(1)HTML 标签是由尖括号包围的关键词,例如:<html>;

(2)HTML 标签通常成对出现,例如,<html>与</html>,我们称之为双标签,标签对中的第一个标签是开始标签,第二个标签是结束标签;(3)有些特殊标签必须是单个标签(当然这种情况比较少),例如, ,称为单标签。

3.HTML 标签的关系

掌握了 HTML 标签的书写规范,本小节我们继续学习标签的关系

HTML 中,双标签的关系可以分为两类:包含关系与并列关系。

那么,如何理解包含关系呢?

如下图所示:







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

下面这张图能够帮助你理解标签的包含关系:







那么,什么是并列关系?

我们来看一个例子,如下图所示:







我们可以发现标签与标签位置并列,并不是从属关系,像这种情况,我们称之为“并列关系”

可以将这种并列关系理解为“兄弟关系”,就像“熊大与熊二”。







理解了标签的关系后,我们通过一个练习题检测一下你对本小节内容的掌握情况:

互动专区

转动你的小脑袋,说出下列 HTML 中标签、标签、标签之间的关系。

<html> <head> </head> <body> </body> </html>不要着急点击下一步,好好思考一下哦!!

答案解析:

由于<head>标签与<body>标签都是嵌套在<html>标签内部,所以说<html>标签与<head>标签、<body>标签是包含关系,而<head>标签与<body>标签的位置并列,所以是并列关系。







HTML整体结构

HTML整体结构

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

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

<html> <head> <title>我的第一个网页</title> </head> <body> 学习线上编程,就来博学谷。 </body> </html>通过上面的代码,我们可以看到<html>标签是最大的标签,它包含了其他所有的标签,所以也称为:根标签。

我们都知道,浏览器解析 HTML 可以获取网页。

那么,这些 HTML 标签分别在网页整体结构中代表了什么呢?

<head>标签是页面的头部标签,代表网页的头部区域;

如下图标记区域:







而<head>标签内部包含了一个<title>标签。

<title>标签:表示头部区域内的网页标题或文档标题(HTML 网页也可以称之为 HTML 文档),它可以赋予页面一个属于自己的网页标题。 如下图标记区域:







<body>标签:表示文档的主体,其包含了文档内所有内容,页面内容基本都置于body标签内,也就是说,页面中显示的内容都需要放在body标签内。 如下图标记区域:







下面我们通过一个示例亲自感受一下 HTML 整体结构及标签在网页中的呈现:

练习:创建我的第一个网页

步骤1:将以下代码通过记事本工具写到创建的“ index.html”文件中,并进行保存;

<html> <head> <title>我的第一个网页</title> </head> <body> 学习线上编程,就来博学谷。 </body> </html>tep2:通过浏览器打开该文件,查看浏览器解析后的效果;

效果如下图所示:







若出现了以上的效果,那么恭喜你,HTML 代码完全正确,成功创建了第一个网页!

通过该示例,我们应该更加理解本小节所学习的内容,其浓缩为一句话就是:

HTML 文档的后缀名必须是以 .html 或 .htm 结尾,浏览器的作用是读取 HTML 文档,并以网页的形式呈现其内容。

下面,我们再通过一张图,加深对 HTML 整体结构标签的理解:







注意:

(1)在<head>标签中,必须设置<title>标签;

(2)理解每个标签的作用,记住标签之间的层级关系;

当然,为了能够熟练掌握本小节的内容,必备的练习是不可缺少的,所以一定要将对应的代码敲一敲!

第三关:网页开发工具

1.常用网页开发工具

在前面,我们通过记事本工具完成了自己的第一个网页的编写。

那么,除记事本工具,是否有其他工具可用来编写网页呢?

答案是:有的。

对于开发者来说,一个好的开发工具往往能够事半功倍,下面我们介绍常见的网页开发工具。

如下图:







从左上角开始,依次为:Dreamweaver、Sublime、WebStorm、HBuilder、VSCode( Visual Studio Code );

看到这么多开发工具,是不是脑袋都要大了?

不要担心,我们只需要掌握一款实用性最高的工具即可!(其他工具可作为了解,若有兴趣可自行学习,基本使用方式类似,掌握一款其他的即可触类旁通!)

  1. 那,我们该选择哪一款工具呢?
    我们推荐掌握 VSCode(Visual Studio Code)工具,其在前端开发中使用比率非常高,成为广大开发者工具库中的必备神器。
    公认的优势,了解一下: (1)一款免费的开发工具,可随意下载、 分发、商用等; (2)一款轻量级的编辑器,安装包占用内存小,启动速度快,用户体验非常好; (3)拥有丰富的插件,覆盖前端、后端代码、框架的对应插件,有助于提高研发效率; (4)提供远程开发、代码跟踪、调试,实现项目的高效管理及协作开发;
    这就是 VSCode 被称为“必备神器”的原因,其更多的功能就等着你亲自去探索啦!

2.VSCode下载安装

接下来我们正式学习如何使用 VSCode 工具。

首先,我们需要下载安装 VSCode,步骤如下:

点击网址:https://code.visualstudio.com ,进入对应的 VSCode 官网;根据电脑系统情况,在该网站中选择合适的版本进行下载;如下图所示:







下载完成,进入 VSCode 安装流程(以 Windows 系统为例)

(1)找到所下载的安装程序,双击下图应用程序







(2)打开安装界面(如下图),选择安装位置

可根据自己的情况,将 VSCode 安装到磁盘的任意目录下。







(3)确定好安装位置,单击’下一步‘,按照下图进行任务勾选;







【说明】

- 勾选【创建桌面快捷方式】 勾选此项,在电脑桌面出现 VSCode 相应图标;可双击直接启动 VSCode,较为便捷;

- 勾选以下两项: 【将“通过 code 打开“操作添加到 Windows 资源管理器文件上下文菜单 】 【将“通过 code 打开”操作添加到 Windows 资源管理器目录上下文菜单 】

勾选上述两个选项: 可在文件、目录上点击鼠标右键,选择打开方式:VScode ;

另外,为了方便网页文件的管理,我们将网页文件存放在同一文件夹中;若在该文件夹上点击“右键”,在弹出的快捷菜单中,选择使用 VSCode 打开,该文件夹中所有文件均会被 VSCode 打开,可直接进行编辑,非常方便。

- 不勾选此选项:【 将 code 注册为受支持的文件类型的编辑器 】 若勾选,则默认使用 VSCode 打开诸如 txt、py 等文本类型的文件;但一般情况下打开文本文件使用专门的文本工具,例如:记事本工具等。因此,建议不勾选该项。

- 勾选【添加到 PATH(重启后生效)】 该选项默认勾选,即不用配置环境变量,可直接使用。

(4)按要求勾选选项后,可直接单击 ‘下一步’,出现如下界面,并点击“安装”按钮;







(5)开始进行安装操作,进入“正在安装”状态;







(6)安装成功,启动 VSCode;

回到电脑的桌面,然后双击 VSCode 图标就可以启动 VSCode 了。

启动界面如下:







(7)安装中文语言包

启动后,你会发现 VSCode 的界面全部显示英文;若想显示中文,需要安装中文语言包。

安装过程如下图所示:







按照上图提示的步骤顺序即可完成中文语言包的安装。

注意:第3步,点击'install'按钮后,才可进行安装。

中文语言包安装完成后,VSCode 界面的菜单则全部替换为中文,如下图所示:










到此,VSCode 就全部安装配置完成。

整个安装过程比较简单,只要你按照上述步骤操作,即可在自己的电脑中完成 VSCode 的安装。希望大家都能够实际操作,巩固本部分的知识点。

VSCode 安装完成,带领大家体验一下其强大之处!

3.使用VSCode开发网页

小节我们学习使用 VSCode 进行网页开发。

打开 VSCode,新建网页有两种方式:

(1)选择“文件”菜单---“新建文件” ;

(2)选择右侧的‘欢迎使用’窗口中的'新建文件';

如下图所示:







两种方式任选其一,均可完成网页的新建,会出现如下文件:







注意: 此时只是创建了一个文件,还没有对该文件进行保存。因此,写代码之前必须先保存该文件。

那么,如何保存新创建的文件呢?

(1)选择“文件”菜单中的“保存”命令;

(2)使用“Ctrl+S”快捷键进行保存;

此时,出现如下界面:







在此界面中,我们需要完成三个步骤:

(1)确定文件保存的位置:将文件保存到【桌面】下【MyWeb】文件夹中;

(2)确定网页文件名称:名称建议使用小写英文字母,但不要使用汉语拼音,且起的名字最好要有意义,看到网页的名字即可了解该网页内容,也就是“见名知意” ,例如,“login.html”就是登录页面;注意扩展名为".html"或".htm";

(3)单击‘保存’按钮,完成新建文件的保存。

最最最重要的时刻就要到啦!我们终于可以正式在文件中编写代码啦!!

我们重新实现“我的第一个网页”,还记得怎么写吗?复习一下:

<html> <head> <title>我的第一个网页</title> </head> <body> 学习线上编程,就来博学谷。 </body> </html>将上述代码写到 VSCode 的 default.html 文件中,如下图:







代码已经写完,该怎样查看运行效果呢?

如下图所示:







在 VSCode 编辑器中,右击“文件名 default.html”;在弹出的快捷菜单中,选择“打开默认浏览器”,即可打开浏览器查看网页。

学习到这里,我相信你肯定会有一个疑问:使用 VSCode 与记事本开发网页有什么区别呢?

区别就是:使用 VSCode 开发网页,开发效率要高很多。

下面,咱们亲自体验一下:

再次新建一个网页文件,将其保存。

保存之后,不要着急写代码,而是在英文输入法状态下,输入一个叹号(!);输入完成之后,会弹出一个提示框;

如下图所示:







在提示框中,用鼠标单击第一个叹号,神奇的事情发生啦!!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>通过以上代码可以发现,整体的 HTML 结构骨架代码已经全部自动生成了,你不需要再一点一点的手敲了!是不是很简单?而你下面要做什么呢?

只需要在 <title> 标签中输入自己想要的网页标题,在 <body> 标签中输入具体的内容就可以了!

是不是非常的方便!!我们再接再厉,

关于在 VSCode 中自动生成 HTML 骨架,说法正确的是【】?



第四关:DOCTYPE 与字符集

之前我们了解到,通过 VSCode 能够快速生成整个 HTML 的骨架代码,如下所示:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body>而我们自己手动编写的代码是这样的:

<html> <head> <title>我的第一个网页</title> </head> <body> 学习线上编程,就来博学谷。 </body> </html>细心的同学可能会发现:自动生成的代码,与我们自己写的代码有一定的区别!

那这些多出的内容,它们的作用是什么呢?

本门课中我们先学习最重要的三点(其它内容会在后面的课程中继续讲解):

(1)标签

(2)lang 语言

(3)charset 字符集

1.<!DOCTYPE>标签

<!DOCTYPE>:表示文档类型声明标签,位于文档的最前面,用于向浏览器说明当前文档中显示网页的 HTML 版本。

从初期的网络诞生后,已经陆续发布多个版本的 HTML,如下表格所示:







目前,市场主流使用的是 HTML5 版本,我们只需记住 HTML5 版本的表示方式即可!

那么,HTML5 版本如何声明表示呢?

如下所示:

<!DOCTYPE html>编写网页时一定不要忘记将声明写在文档最前边,告诉浏览器该网页是按照 HTML5 的标准编写,是合法的。否则浏览器会按照自己的方式解析代码,最终导致页面无法正常打开。

同时书写时需要注意:DOCTYPE 标签必须全部大写,并前置一个英文半角感叹号!,不要写错了哦!

说明:

通过 VSCode 能够获取 DOCTYPE 声明语句,也就是说,VSCode 能够自动生成市场主流显示网页的 HTML 版本,是不是又get到 VSCode 又一强大之处?

  1. 2.lang 语言
如下所示:

<html lang="en">在 HTML 标签中多了一个 lang="en",代表什么呢?

lang:表示语言的意思( language )

en:表示的是英文。

整体的含义就是:定义当前文档显示的语言;此代码中指定的是英文。

那么,lang 除指定英文外,还可以指定哪些语言呢?

lang="zh-CN" :表示定义的语言为中文。当然,其可以指定多种语言,目前来说,我们记住中文与英文即可。

如果 lang="en" 可以简单的理解为当前网页为英文网页,lang="zh-CN" 则表示当前网页为中文网页。

其实对于网页文档来说,定义为en的文档也可以显示中文,定义为 zh-CN 的文档也可以显示英文。

那么,lang 属性有什么作用呢?

对浏览器的作用:提示与警示的作用。

示例:将 lang 的值修改为:fr;fr 表示法文,也就是当前网页为法文网页,但是当前网页中并没有法文的内容。

具体代码如下所示:

<!DOCTYPE html> <html lang="fr"> <!--这里将lang的值修改成了fr--> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>博学谷</title> </head> <body>线上学习,就来博学谷</body> </html>现在,用浏览器打开该网页,查看具体的显示效果。效果如下图所示:







通过上图可以看到,在浏览器的右上角给出一个提示框,单击‘选项’按钮给出一个提示,询问是否‘翻译成法语’。因为我们指定的 lang=fr,而当前的网页中没有法语,所以会给出这样的提示。

现在你可以自己尝试一下,将 lang 的值修改成 fr,在浏览器中打开网页,看一下是否会有如上的提示?

【注意】

我们目前所做网站均为中文网站,因此,建议将 lang 的值定义为:zh-CN。

3.charset字符集

我们还有一个新发现,如下所示:

<meta charset="UTF-8" />

它代表什么意思呢?

charset:表示字符集。

UTF-8:表示字符集中的一种

那么,什么是字符集呢?

字符集是多个字符的集合,以便计算机能够识别和存储各种文字。 网页中有多种类型的字符,而我们需要将多种字符存储到计算机中,就需要按照一定的方式来存储这些字符。

charset的取值除了有 UTF-8 以外,还有很多的取值,例如:GB2312 (表示简体中文),BIG5(表示繁体中文),GBK(包含简体中文与繁体中文)等。

目前,使用最多的是 UTF-8,被称之为‘万国码’,基本上包含了全世界所有国家需要用到的字符。

UTF-8 带来的好处:从国外访问国内网站时,不会出现乱码。

注意:

<meta charset="UTF-8" />

这行代码是必须要写的代码,若不写,网页有可能会出现乱码的情况。同时要注意写法,统一写为:UTF-8,不要写为:utf8 或 UTF8 等形式。

下面对本小节进行总结,帮助你巩固巩固:

<!DOCTYPE html>:表示文档类型声明标签,告诉浏览器这个网页使用的是HTML5版本来显示网页。

<html lang="en">:告诉浏览器这是一个英文的网站,本页面采取英文来显示。

<meta charset="UTF-8" />:本行代码必须要写,采用UTF-8来保存文字,若不写可能会出现乱码。

作业题

作业:

使用 VSCode 编辑器创建页面

问题描述:

使用 VSCode 编辑器,创建网页框架代码结构,在此基础上完成网页内容的填充,并通过浏览器预览网页效果。

过程分析:

通过 VSCode 可以快速创建网页框架代码,具体过程是:通过 VSCode 创建一个 HTML 网页文件,然后在英语输入法状态下,输入一个叹号(!);输入完成后,会出现一个提示框;在提示框中,用鼠标右键第一个叹号,即可创建好一个网页的骨架代码。最后,可根据个人意图修改<title>标签与<body>标签的内容,并通过浏览器查看实现效果。

实现框架:







恭喜!你已经完成了【 HTML 基本结构】课程的学习,我们对本门课做一个简单的总结,如下图所示:







通过本课程的学习,我们掌握了 HTML 整体结构,网页开发的标签语法规范,使用网页开发工具 VSCode 完成案例开发,并掌握了网页开发的实用性技巧,其都属于网页开发的基本功能方面。

很多人可能会对基础知识嗤之以鼻,但是,相信我扎实的基础知识能够让你走的更快更远,让你少走弯路!!

我相信大家肯定都有了一定的收获,好的开始是成功的一半,希望本门课程能够为你后续的学习树立信心。奋进吧,后浪!!

关键词:基础,结构,基本,学习,入门,教程

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭