网页前端入门教学HTML篇

原来写网页竟是如此简单！？

这有一份Html+Css的入门教程

大家好！

UTADA终于又发教学向文章啦！

此次我们带来的是

网页前端开发超入门教程！

学会了网页开发

不仅仅可以写浏览器上的网页

也可以用来开发

其他平台的APP

一举两得

如果有小伙伴没有时间细品全文，

可以将文章拉到末尾，

选择观看视频版教程

祝大家学习愉快！??

（本文基于社团内Frank大佬的前端Workshop）

Part1

一点点背景

HTML

HTML的全称为HyperTextMarkupLanguage，超文本标记语言，是开发网页的必备语言。浏览器会通过读取HTML文件中的标记来展示内容。开发人员会在HTML中告诉浏览器要展示什么文字，图片，链接，等等。

CSS

CSS的全称为CascadingStyleSheets，层叠样式表。顾名思义，它是用来修饰网页样式的一个语言，比如说更改内容排版，颜色，或者加特技！

VisualStudioCode

本篇教程使用的文本编辑器（TextEditor）为VisualStudioCode，它是网页开发中最流行，且最实用的。各式各样的插件可以提升工作效率，整理代码，甚至让你的代码变得五彩缤纷，不再枯燥！

Part2

一点点插件

正如上文所说，

VSCode强大的其中一个原因是它

丰富的插件。

在网页开放中，一些实用的插件包括

HTMLSnippet-快速写码！

AutoCloseTag-帮你写码！

LiveServer-边写边看网页现况

也有更多插件这里就不一一列举了。

Part3

如何欣赏自己写的网页？

方法一

找到index.html所在的地方，

你的浏览器，Tada!!!

方法二（推荐）

在VSCode中下载LiveServer插件，

在index.html下方点击GoLive，

你的网页就会在你默认浏览器中被打开。

（推荐使用方法二，网页会在保存后自动更新）

*小提示：记得保存呦！

Part4

创建文件

首先，我们在电脑上任意选择或者创建一个文件夹，

然后通过VSCode打开这个文件夹

（File→OpenFolder）。

那这个文件夹就是你项目的所在地。

接下来右键WEB下的区域，创建新文件

（注意：我们需要通过添加后缀告诉VSCode这是什么类型的文件，例如.html,.css,.py）

接下来点开index.html后我们可以手动输入，

也可以通过!添加模板

本篇教程中，我们会用到以下模板：

好！讲到这里终于看到代码了！

那这区区7行代码究竟有什么用呢？

第一行：

告诉浏览器这是HTML文件。

第二行第七行：

就像一个大括号，里面是html内容，

语言为英文。

第三行第五行：

head标签内通常包含这段html文件的元数据，

也就是Metadata，

例如meta，title，是用来描述数据的数据。

第四行：

title标签内的内容是

浏览器标签栏中所展示的标题。

第六行：

body标签内的内容会被展示在网页上

当然，以上一切均可以被一张图片所概括??：

如果我们用上更多的标签来包裹住中间的文字

例如：h1,h2,…,h6

（headings，标题，副标题）

那顾名思义，文字的大小也会随之改变

1为最大，6为最小。

用p

（paragraph，段落）

会告诉浏览器这里面的内容是一段话

网页会在新的一行上展示这段话

并去除中间多余的空格

我们也可以通过不同标签改变文字的字体

例如strong为加粗，

i为斜体

用这类标签会对标签内的全部内容生效

如果整段话都需要加粗或改变样式

那利用这类标签是最快捷的方法

但假如我们想有一句又有粗体又有斜体的文字

那只需要在对应的部分添加标签

举个例子：

??

好，文字先讲到这里

我们再来看看图片

*（排版和修饰文字的方法会在CSS部分展开讲）

图片

首先，我们要将图片放进当前目录

让浏览器能找到它

我们可以

1.直接拖拽复制进VSCode

2.找到工作文件夹，把图片放进去

接着你就会在VSCode中看到所有新增图片

可以右键重命名到比较有意义的名字

（MeaningfulName！）

也可以放入其他子目录

至此，我们需要告诉浏览器

图片在哪儿？

很简单，我们会用到img标签

（此标签不需要closingtag，闭合标签）

img标签拥有两个attributes，特性

①src=”url”

在引号内输入图片相对于当前文件所处的位置

如果图片和当前文件在同一层，

直接输入文件名（别忘了后缀！）

②alt=”alternativetext”

引号内输入的内容会在图裂了，

找不到图片等情况下被展示出来

举个例子

如果我们的图片和文件在同一层

图片的名字为cat.jpg

利用下图

这行代码可以在当前位置展示图片

如果图片未能加载或者没被找到，

则显示??

（看不到图片好难受）

超链接

简单介绍完图片，

我们设想一下这个场景：

我们希望用户在点击图片或者其他内容后

转到某个网页或者某个地址

例如点击Logo回首页，

点击隐形层跳到广告（不是

那在这里我们就要用到aHyperlink，

超链接标签了！

（增加用户互动，十分炫酷。

至于为什么是a，我也不知道??）

a标签有许多特性

但我们主要会用到的是href，

标明一个目标URL：

用户鼠标落在拥有超链接的部分时

会从普通指针变为食指形状

也是我们常见的“可点击”样式

点击内容则会跳转到href中的URL

*注意！

超链接是有闭合标签的

两者中间的所有内容都会附着超链接

内容可以是但不限于图片，文字，标题等

到这里，我们已经介绍完了HTML最基本的内容

下面让我们结合以上知识点试一试：

我们可以看到这个网页

低情商：丑的不像个网页

高情商：还有进步空间

视频版教程

那么我们应该如何

让网页变得栩栩如生生动自然然后炫酷呢？

下期文章是时候祭出CSS了！

如果HTML是羊肉串，那CSS就是孜然

如果HTML是薯条，那CSS就是番茄酱

如果HTML是电吉他，那CSS就是音箱

如果HTML是茶叶，那CSS就是热水

如果HTML是罗密欧，那CSS就是朱丽叶！

（还有什么组合请留言告诉我）

--TheEnd--

文字：Jerry

排版：Yolanda

剪辑：Louise

编辑：溪流