如何用html制作一个网页-第一天从零开始10天学习网页制作

大家好，我是艾布纳明。 从这篇文章开始如何用html制作一个网页，我们将开始为期10天的网页制作学习。 具体如何学习以及未来的就业前景。 另请阅读之前的文章《10天零基础》《学习制作网页》前言，这篇文章已经详细介绍了，废话不多说，进入正题。

第一天的课程比较简单，基本没有什么难点的知识点。 目录如下：

1、简单介绍网页制作及市场前景

2.接下来如何学习和设定目标

3. 如何创建网页

4.什么是HTML？

5.什么是CSS

6.如何开发（IDE选择）

7.了解网页结构html、head、body

8. h1~h6标签

9.p标签

10.img标签

11.今天的总结和作业

1、简单介绍网页制作及市场前景

这一点在昨天的序言中已经详细介绍过，这里再重复一下。 什么是网页制作？ 顾名思义，就是互联网上网页的开发。 我们当然熟悉互联网上的网页。 你浏览的任何网站，如百度、今日头条、淘宝、京东、大学网站、公司官网等，都是网页。 也就是说，你在PC或移动端的浏览器中看到的，或者是APP中嵌入的H5，都是与我们的生活息息相关的网页。

市场前景广阔如何用html制作一个网页，如北京、上海、广州、深圳等一线城市需求量很大。 中级前端工程师至少12K以上。 当然，高级的就更高了，30多岁、40多岁的人很多。 所以，只要你知识扎实，实力雄厚，那么薪资不是问题。 您可以到智联招聘、Boss、拉勾等招聘渠道搜索该行业的薪资。 是我说的吗？ 你可以验证一下。 。

2.接下来如何学习和设定目标

正如我昨天所说，学习，尤其是自学，需要很大的毅力。 坚持非常重要。 要知道学习是为了自己，不是为了别人。 如果你想拿到高薪，你就必须付出更多的努力； 为自己设定一个目标，比如完成学业后我能找到一份多少钱的工作？ 这是非常必要的，因为它可以随着时间的推移激励你前进。

3. 如何创建网页

我们在网上看到百度、淘宝、京东、今日头条等。 这些网页是如何制作的呢？ 让我先给你一个定义。 你不需要刻意去记住，因为后面的课程会一一讲解。 首先，它必须由人来开发。 这里的人一般指的是程序员卡通形象，也就是以后我们的定义，说得再高一点，就是使用IDE（开发工具）编写代码并完成每个网页，上传到的前端工程师。服务器，然后通过域名解析出来，就是我们看的网页。 当然，这中间还有一些流程，这些我们稍后再说。 毕竟才刚刚开始，我们先来了解一下。

编写什么代码来形成网页？ 我们以百度为例。 打开百度官网，右键单击，点击查看网页源代码。

我们看到了什么？ 是不是这样：

当然，不只是百度，如果你打开任何一个网站，查看源码，基本上都是上图这样的样子。 这是组成网页的代码，俗称前端的标签。

4.什么是HTML？

通过上面的第三条，我们很容易发现，网页的源代码是由“”一一组成的。 这里的左右尖括号就是编写网页的代码，俗称标签。 这些是 Html，描述网页。 有一种语言叫做超文本标记语言，英文：HyperText Markup Language，缩写为：HTML。

这是一个简短的概述。 HTML 不是一种编程语言，而是一种标记语言。 标记语言由一组标记标签组成。 它与我们上面看到的源代码类似。 对于这些概念，你不需要记住性的东西，你只需要理解它们即可。

HTML发展至今，经历了多个版本的更新和迭代。 每个版本的出现都是一种创新。

5.什么是CSS

上面我们知道了Html是什么，也知道网页是用Html开发的，那么css又是什么呢？ 简单来说，就是风格。 我们可以看到很多网站都是比较高端、宏伟、高档、非常漂亮的。 其实大部分都是用CSS来开发和修饰的。 也就是说，通过CSS，我们可以控制页面的美观。 文字的大小、颜色、各个标签的位置、动画等使HTML美观大方。 举个很简单的例子，用人来比喻，HTML就像是赤裸的身体吉祥物，CSS就是各种不同的衣服。 用房子来比喻，HTML是一片空白，CSS是精装修所用的素材。

6.如何开发（IDE选择）

俗话说，工欲善其事，必先利其器。 我们如何编写代码？ 当然，如果开始学习，最好使用记事本，因为记事本没有任何关联提示。 必须一一写代码。 写作尤其可以训练我们的标签意识，加深我们的编码能力。 我强烈推荐这个。 如果以后我们熟练了标签，我们就可以改用其他工具。

当我们熟练之后，我们可以选择更多的工具，比如Dreamweaver、WebStorm、IntelliJ、pycharm等，几乎所有开发编程语言的IDE（开发工具）都支持Web开发，所以选择哪一款主要取决于取决于个人喜好，目前市场上使用最多的是WebStorm。 在接下来的课程中，我们将主要选择这个开发工具进行开发。 如何下载安装，我们在选择开发时会一步步说明。 正如前面提到的，前两三天我们仍然使用原来的记事本进行开发。 主要目的是加深大家对标签的熟练程度，培养代码感。

7.了解网页结构html、head、body

此前，通过查看各个网页的源代码，我们发现了一个常见的问题。 你可以看看下面的图片：

今日头条源码截图：

百度源码截图：

Android干货店源码截图：

源码太多，截图不完整。 我希望你能真正查看每个源代码。 通过查看源码，我们发现了一个现象。 有这些标签吗？ 这是一个网页的组成。 结构，如下图：

互联网上有许多不同的文件。 如果能够正确声明HTML版本，浏览器就可以正确显示网页内容。 该声明有助于浏览器正确显示网页。