历时10天网页制做学习培训

无需加好友免费技术支持

Hello,小伙伴们好，我就是AbnerMing，从文中逐渐，大家正式进入历时10天网页制做学习培训，到底该如何学习培训，和未来的发展前景，也请参考最终一篇文章零基础10天学习培训网页制做序言，文中已经相当详解，胡说八道，进到主题风格。

第一天的课程内容较为简单，基本没有艰难重点知识。文件目录如下所示：

1.简单介绍网页加工和行业前景

2.下一步怎样学习，制定目标？

3.网页是怎么制作的？

4、什么叫Html

5、什么叫Css

6.怎样开发（IDE的挑选）

掌握网页构造html，head，body

8、h1~h6标签

9、p标签

10、img标签

11.整理的汇总和作业

1.简单介绍网页加工和行业前景

这已经在近日的序言中介绍过去了。这儿再重复一遍。什么叫网页制做？说白了，便是在网络上开发网页。针对网络上的网页，我们一定比较常见。你访问的所有网址，如百度搜索、今日头条、淘宝网、京东商城、大学网站、企业官就是说，你一直在Pc终端设备或移动智能终端中浏览器APP嵌入的H5.看见的，它们是与我们的日常生活息息相关的网页。

行业前景，如北京、上海市、广州市、深圳市等一线城市，市场需求旺盛，中等水平前端开发最少12人K自然，以上水准更高一些，超出30K,40多K的人也很多，因此，只需学得很扎扎实实，整体实力雄厚，那样工资这都不在话下，可以去智联网，Boss，拉勾等招聘平台，自己搜这一行的薪水，是不是我说的，能够认证一下。

2.下一步怎样学习，制定目标？

就好比我昨天说的，学习培训，特别是通过自学，必须非常大的意志力。坚持不懈至关重要。我们应该了解，学习是为了我们自身，也不是为了他人。假如我们想要获得高薪职位，我们应该投入更多的时间；给自己设定一个目标，例如课程后我要找要多少钱，这是非常有必要的，因为他能够长期激励你前行。

3.网页是怎么制作的？

大家在网上看的百度搜索、淘宝网、JD.COM、今日今日头条等。这种网页是怎么制作的？这儿给你一个界定，不用有意记牢，由于下一门课程内容，将逐一表述，最先，需要由人开发，这里的人一般指程序猿，换句话说，对我们的界定，说高，是前端开发，根据使用IDE(开发专用工具)，编写代码，进行网页，根据上传至网络服务器，再通过网站域名剖析，是大家看到每一个网页，自然，正中间还有一些步骤。我们以后再议。毕竟大家一开始，先了解一下。

整理的代码是什么？大家不妨以百度搜索举例，开启百度官网，点一下鼠标点击，查看更多网页源代码。

查询网页源代码图

如图所示：

源代码图

自然，不仅仅是百度搜索，你开启一切网址，查询源代码，大部分以上如图所示，这也是构成网页的编码，一般被称作前面的标签。

4、什么叫Html

通过上述第三项，不难看出网页源代码含有一个个<>这儿的上下尖括号是写网页的编码，别名标签，这都是Html，它是一种叙述网页的表达，称之为动态网页编译语言，英语是：HyperText Markup Language，通称：HTML。

这里简单总结一下，HTML呢， 它并不是一种计算机语言，而是一种编译语言。所谓编译语言是通过一套标识标签所组成的，类似大家上边看见的源代码。你不需要死记硬背的这种定义性的东西，只需了解他们。

HTML到现在为止，早已经历了许多版本更新换代，每一个版本发生，都是一个自主创新。

HTML发展历程

5、什么叫Css

大家明白什么以上具体内容Html，了解网页是用的Html什么是开发？css呢？简单来说，便是设计风格。我们可以见到，许多网址全是高档、空气、高端、好看的。不过这些绝大部分都是用于的css开发装饰，换句话说，根据css，我们可以操纵界面的美观大方、文字大小、色调、每一个标签位置、动画特效等。html越来越气质高雅。用工来描述一个非常典型的例子，HTML如同赤身裸体，CSS是各种各样衣服裤子，用房屋来描述，HTML是毛胚，CSS主要是用于精装房的原材料。

6.怎样开发（IDE的挑选）

俗话说得好，假如工人想做好本职工作，她们务必最先磨利他的专用工具。我们怎样编写代码？自然，假如我们开始学，建议使用文本文档，由于文本文档并没有想到提醒，务必逐一撰写，这样可以尤其锻练我们自己的标签观念，加重我们自己的代码能力。推存这一，假如我们熟练应用标签，我们可以把它转移至别的专用工具上。

娴熟以后，大家都会选择更多专用工具，例如Dreamweaver,WebStorm,IntelliJ,pycharm这些，一切开发计算机语言得人IDE绝大多数的开发专用工具也支持web开发，但是具体挑选哪一个，主要是看个人爱好，目前市面上常用是WebStorm,下面课程内容，大家也关键选择使用开发方法进行开发，怎么下载及安装，在我们选它开发时，我们也会一点一点地说，在两三天前，我们依然应用最原始的文本文档开发，关键目的只有一个，加重对于每个人标签的掌握情况，塑造更多编码感。

掌握网页构造html，head，body

在前，根据查询每一个网页的源代码，我们是不是发现了一个共通的难题，请参阅下列图片：

今日今日头条源代码截屏：

百度搜索源代码部分截图：

Android干货知识铺源代码截屏：

源代码过多，截屏不全面。愿你能真真正正查询每一个源代码。根据查询源代码，大家发现了一个状况，是不是有这样的标签。这是一个网页的构成构造，如图所示：

如果可以恰当申明互联网上有许多不一样文件HTML在版本，电脑浏览器能够准确表明网页具体内容，这有利于电脑浏览器恰当表明网页。

一般申明如下所示：

HTML5

HTML 4.01

"">

XHTML 1.0

"">

head说白了，标签是头顶部原素head在外部，我们可以申明文本文档的编号、文章标题、创作者、叙述外部详细介绍css,JavaScript等候网络资源，这是一个至关重要的原素。

我们可以用中文编号head里去写

body标签就是我们主要内容，大家将来每一个标签编码都是会写在这儿

尽管标签的书写不区别英文字母大小，但html4.0后一般规定应用英文字母，能去看流行网址，基本上应用英文字母，一定要注意。

还有一点应注意，HTML在标签中，大部分标签全是双标签，有开始与结束，类似，换句话说，成双，自然，也有人下单标签，这同样会在详细介绍。

8、h1~h6标签

充分了解了网页的主体工程后，大家已经知道，body标签上面写着网页内容，我们通常在网上看一些黑色标题文字，那样这部分内容，我们应该怎么展现呢？h1到h6能够满足我们自己的要求，快来，我们一起写吧，新创建一份记事本文件，在这儿我名字day_01.txt下图：

文档

打开文档，在word里写标签，如图所示:

编码

单击储存后，将后缀名更改成.html”:

变更

鼠标右键，挑选打开，在浏览器输入，我们可以见到下面的图：

实际效果

上面就是h1到h6标注的实际效果非常简单。之后，比如，在文中界定文章标题，我们可以挑选对应的创作head我们界定了一个title标签，其实就是网页文章的标题，我就用红色箭头标出。

9、p标签

我们通常阅读资讯，一个新闻，除开文章标题，有没有什么，新闻摘要，是吧，其实就是每一段内容，我们可以用p标签去写表明。

案例

我们还在，原文件，鼠标右键，打开，挑选开启文本文档。

编码

点一下储存，鼠标右键，打开，用浏览器打开。

实际效果

针对p标签，也是一个特别简单的标签，大伙儿反复练习，多试试，多写几个。

10、img标签

当你早已把握了h标签和p标签时，基本上就是一个没有图片的新闻列表，我们可以保证，一些朋友要问，我觉得加上图片，如何做到，啊，加上图片论这个img标签了，img标签为单标签。大家应当注意这一点。词法如下所示：

src呢，是img固有属性偏向图片途径，能是在网上图片连接，还可以是当地图片。

比如，如何做到下面的图效果？

实际效果

接下来我们分析一下，有两大类，里面是文章标题，以下是图片，文章标题，我们可以应用h系列标签来达到，图片，我们可以应用img要实现，在这儿应用当地图片，我们将要探讨远程控制和当地图片，及其图片有关途径的挑选，图片网络资源如下所示，大家可以挑选鼠标右键储存。

素材内容

在这儿，我们将图片储存在平级目录下，如图所示：

文件名称

随后，大家更改day_01.html:

编码

如图所示：

实现效果

11.整理的汇总和作业

终究第一天，具体内容还是很简单的，一是掌握网页的构造，了解一个网页有哪些标签构成，是啥，二是把握，h,p,img应用标签。

今日工作，完成新闻列表：

新闻列表

图片素材内容如下所示(可鼠标右键储存):

素材内容