IT小白

这个屌丝很懒，什么也没留下！

热门标签

web前端开发基础教程一_前端开发教程

作者：IT小白 | 2024-03-01 00:44:45

踩

前端开发教程

网页：

网站是指因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。

网页是网站中的一页，通常是HTML格式的文件，他要通过浏览器来阅读。

网页是构成网站的基本元素，它通常由图片链接，文字，声音，视频等元素组成，我们所看到的网页常见，以.htm或.html后缀结尾的文件，因此俗称为HTML文件。

HTML：

HTML指的是超文本标记语言，它是用来描述网页的一种语言，HTML不是一种编程语言，而是一种标记语言。

标记语言是一套标签。

所谓超文本，有两层含义：

1：它可以加入图片，声音，动画，多媒体等内容（超越了文本限制）。

2：它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

网页的形成：

网页是由网页元素组成的，这些元素是利用html标签描述出来，再通过浏览器解析来显示给用户的。

前端人员开发代码---->浏览器显示代码（解析，渲染）----->生成最后的web页面

Web标准：

Web标准是由W3C组织和其他标准组织制定的一系列标准的集合， W3C（万维网联盟）是国际最著名的标准化组织。

web标准的作用：

浏览器不同，他们显示页面或者排版就有些许差异，比如不同人看到的同一个网页字体大小不同等。

优点：

<1>让web的发展前景更广阔

<2>内容能被广泛设备访问

<3>更容易被搜索引擎搜索。

<4>降低网站流量费用

<5>使网站更易于维护

<6>提高页面浏览速度

构成：

主要包括结构，表现，行为三个方面。

在这里插入图片描述
结构写到HTML文件，表现写到CSS文件，行为写到JavaScript文件

在这里插入图片描述

HTML标签：

HTML语法规范：

HTML标签是由尖括号包围的关键词。

例如：

<html></html>
1

HTML标签通常是成对出现的，例如：<html></html>，我们称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。

有些特殊的标签必须是单个标签（极少数情况）。

例如：

<br />
1

标签关系：

包含关系:

<head>
	<title></title>
</head>
1
2
3

在这里插入图片描述 并列关系：

<head></head>
<body></body>
1
2

在这里插入图片描述

HTML的基本结构标签：

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写，HTML页面也称为HTML文档。

在这里插入图片描述

举例：

<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		早上好呀，快起床学习啦
	</body>
</html>
1
2
3
4
5
6
7
8

打开如下所示：

在这里插入图片描述 基本结构标签总结：

在这里插入图片描述

网页开发工具：

在这里插入图片描述

VScode的使用：

第一步，双击打开VScode:

点开新建文件：

在这里插入图片描述第二步：新建文件

注意：文件的后缀必须是.html

在这里插入图片描述输入！，点击第一个：
此时编译器就会自动生成基本框架，就不需要我们手动去写了。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    键盘敲烂，薪资过万。
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

将代码书写完成后，右击，点击

在这里插入图片描述点击：

没有这个的同学，需要手动输入一下：
在这里插入图片描述右边会出现一个预览效果：

在这里插入图片描述

之所以会出现预览，是由于我下载了html扩展。

在这里插入图片描述没有下载的小伙伴可以使用如下方式：

在这里插入图片描述

找到你刚才编写好的文件，打开方式选用任意的浏览器即可。

在这里插入图片描述
展示：

vscode插件的使用：

点击左边这个：

在这里插入图片描述

将页面设置成为中文：

进入扩展商店，输入chin，选择第一个进行安装！
在这里插入图片描述预览效果的设置方法：

在这里插入图片描述

安装完成后，重启Vscode即可。

在vscode中直接打开浏览器页面：

上面我们介绍的那种方法不是很方便，下面介绍的这个插件，可以直接实现在VScode编译环境中打开我们所写的文件。

在这里插入图片描述

右击：

在这里插入图片描述通过前面的学习我们了解到html的标签都是成对出现的，那么我们如果想对某个标签进行修改，就要前后都进行修改，这样会很麻烦。

对于上述这种情况，我们可通过Auto Rename Tag方便我们进行修改。

和上面的方法相同，在扩展商店找到该插件进行安装：

在这里插入图片描述

作用展示：

前面括号在被修改的同时，后面括号也在被修改。

在这里插入图片描述
注意：这些插件在安装的过程中，电脑一定要联网，否则可能无法搜索到这些。

文档类型声明标签：

<!DOCTYPE>//文档声明类型
1

作用：告诉浏览器使用那种HTML版本来显示网页。

//当前页面采用的是HTML版本来显示页面
<!DOCTYPE html>
1
2

注意：

<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。
<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
1
2

lang语言种类：

<html lang="en">用来定义当前文档显示的语言。

en定义语言为英语

zh-CN定义语言为中文

简单的来说，en就是英文网页，zh-CN就是

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/169738