Hello，你好，我是Aberming。从本文开始，我们开始为期10天的网络制作研究。请阅读最后一篇关于如何学习和未来就业前景的文章《零基础10天学会网页制作之前言》，本文对此进行了详细介绍。别再胡说八道了。我们开门见山吧。
课程的第一天相对简单，基本上没有难学的知识点。内容如下：
1.简要介绍网页制作及市场前景
2.接下来，如何学习和设定目标
3.网页是如何制作的
4.什么是HTML
5.什么是CSS
6.如何开发（IDE的选择）
7.理解网页的主体结构，网页的头部结构
8.H1~H6标签
9.P标签
10.IMG标签
11.今天的总结和家庭作业
1.简要介绍网页制作及市场前景
这一点在昨天的前言中已经详细介绍过。再说一遍，什么是网页制作？顾名思义，就是在互联网上开发网页。我们必须熟悉互联网上的网页。你访问的任何网站，如百度、头条、淘宝、京东、大学网站、公司官网等，都是网页，也就是说，你在PC终端或移动终端的浏览器中看到的，或者嵌套在应用程序中的H5，都是一个与我们的生活密切相关的网页。
市场前景看好，如在一线城市北京、上海、广州和深圳，需求量很大。中型前端工程师至少在12K以上。当然，高级工程师的级别更高，而且有很多人拥有超过3万人和超过4万人。因此，只要他们学得扎实，实力雄厚，薪水就没什么大不了的。你可以通过招联、boss、hook等招聘渠道，自己搜索这个行业的薪酬。是我说的吗？你可以核实一下。
2.接下来，如何学习和设定目标
正如昨天所说，学习，尤其是自学，需要极大的毅力。坚持是非常重要的。我们必须知道学习是为了自己，而不是为了别人。如果我们想得到高薪，我们必须付出更多的努力；为自己设定一个目标，比如我想在完成学业后找到多少钱。这是非常必要的，因为它可以激励你很长一段时间。
3.网页是如何制作的
百度、淘宝、京东。com，今天的头条新闻等等我们在互联网上看到的。这些网页是如何制作的？首先，它必须由人来开发。这里的人通常指程序员，也就是我们后面的定义，高大尚，即前端工程师使用IDE（开发工具）编写代码，完成的网页被上传到服务器上，然后通过域名解析。当然，中间也有一些过程。我们稍后再谈。毕竟，我们才刚刚开始。我们先谈谈。
编写什么代码来形成网页？我们以百度为例，打开百度官网，点击右键，点击查看网页源代码。
查看网页源代码图
我们在下图中看到了什么
源代码图
当然，不仅仅是百度。打开任何网站并查看源代码后，基本上如上图所示。这是组成网页的代码，通常称为前端的标记。
4.什么是HTML
通过以上第三项，我们不难发现有“<；>；”在网页源代码中，左括号和右括号是用于编写网页的代码，通常称为标记。它们是HTML，一种描述网页的语言，称为超文本标记语言。英语是超文本标记语言，简称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。在接下来的课程中，我们也主要选择这个开发工具进行开发，以及如何下载和安装它。那时，当我们选择它进行开发时，我们将一点一点地讨论它。在过去的两三天里，我们仍然使用原始记事本进行开发。只有一个主要目的是加深每个人对标签的熟练程度，培养代码意识。
7.了解网页结构HTML、头、体
在前面，通过查看每个网页的源代码，我们是否发现了一个常见问题？您可以看到以下数字：
今天标题源代码的截图：
百度源代码截图：
Androiddryshop源代码截图：
源代码太多，截图不完整。我希望你能看看每一个源代码。通过查看源代码，我们发现了一种现象。他们都有这些标签吗？这是网页的组成结构，如下图所示：
网络上有许多不同的文件。如果HTML版本可以正确声明，浏览器就可以正确显示web内容。声明有助于浏览器正确显示网页。
总声明如下：
HTML5
HTML4.01
"http://www.w3.org/TR/html4/loose.dtd">；
XHTML1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">；
顾名思义，head标记是header元素。在head中，我们可以声明文档的代码、标题、作者和描述，并介绍外部CSS、JavaScript和其他资源。这是一个非常重要的因素。
中文代码，我们可以这样写在头上
身体标签是我们的主要内容。未来所有的标签代码都应该写在这里
虽然标签的书写不区分大小写，html4在0之后，但通常规定使用小写字母。我们可以访问那些主流网站，基本上使用小写字母。我们必须注意这一点。
另外需要注意的是，大多数HTML标记都是双标记，有开头和结尾。同样，它们成对出现。当然，还有单独的标签，这将在将来引入。
让我们花几分钟写下记事本上网页的主要结构。在视频中，我还将带你在标题（北票程序员老李）中写微信公众号（北漂程序员），视频，文字教程，我会同步更新，记得注意我~
8.H1~H6标签
在理解了网页的主要结构之后，我们已经知道body标记写入了网页的内容。我们经常在网上看到一些黑色标题词。我们应该如何显示这些内容？H1到H6可以满足我们的需求。让我们一起写一个新的记事本文件。我把它命名为“day_01.TXT”，如下图所示：
文件
打开文档，在文档中写入标签内容，如下图所示：
密码
单击“保存”后，将后缀更改为“.HTML”：
改变
单击鼠标右键，选择打开方式，在浏览器中打开，出现下图：
效应
以上是H1到H6中显示的效果。很简单。例如，将来如果我们在文章中定义标题，我们可以选择相应的标题来写。在头部，我们定义了一个标题标签，它实际上是网页的标题。我用红色箭头标出了它。
9.P标签
我们经常看新闻。对于一条新闻来说，除了标题，还有什么新闻内容，对吗？也就是说，每个段落的内容，我们都可以用P标签来写显示。
实例
我们仍在原始文件中写作。右键单击“打开方法”，然后选择“记事本”将其打开。
密码
写入后，单击“保存”，右键单击“打开方法”，然后使用浏览器打开。
效应
P标签也是一个非常简单的标签。让我们多练习，试着写更多的段落。
10.IMG标签
在我们掌握了H标签和P标签之后，我们基本上可以有一个没有图片的新闻列表。一些朋友会问，我想添加一张图片，如何实现它。嘿，当添加图片时，我们需要讨论IMG标签。IMG标签是单个标签。请注意，语法如下所示：
&书信电报；imgsrc="；"/>；
SRC是img的固有属性，它指向一个图片路径。此图片路径可以是Internet上的图片链接或本地图片。
例如，我们应该如何实现下图中的效果？
效应
让我们在这里进行分析。它由两部分组成。顶部是标题，底部是图片。标题可以通过使用H系列标签来实现。对于图片，我们可以使用img。这里我们使用本地图片。稍后，我们将讨论远程和本地图片，以及图片相关路径的选择。图片资源如下，您可以右键单击并选择“保存”。
来源材料
在这里，我将图片保存到同一级别的目录中，如下所示：
文件目录
接下来，我们换一天。html:
密码
效果如下图所示：
实现效果
11.今天的总结和家庭作业
毕竟，第一天的内容相对简单。首先，了解网页结构，知道网页由哪些标签组成，以及它的功能。第二，掌握H、P和img标签的使用。
今天的作业，实现一个新闻列表：
新闻列表
图片材料如下（您可以右击保存）：
源材料
课程第一天就到这里。我是Aberming，一个向北漂流的程序员。我期待着您的关注！
最新评论