为什么学习网页制作？

互联网时代的今天，各种各样的网页充斥着我们的生活。只要使用浏览器，打开的每一个页面都可以称之为网页。即使使用头条这样的APP，其内容布局、展示的方法也脱胎于网页页面设计的方法与原则。可以说页面的概念已经遍布我们的信息化世界。

作为芸芸众生中的一员，学习网页制作对我们的事业、生活有怎样的帮助呢？

第一，学习网页制作有助于理解网络信息的传播运行机制，即使通过本课程不能全面了解这些核心机制，也能为大家铺垫下继续深入学习的知识基础。即使自己不必亲自制作网页，在使用第三方工具时，比如微信公众号、微信小程序或者其他自动网页或网站生成工具时也会比没有基础的人更快的掌握这些工具。

第二，学好网页制作是制作网站的基础，如果您因为事业需要或者个人爱好打算制作自己的网站或博客，无论是打算使用php还是Java还是Python去构建您的网站，精通网页制作技术是您的第一块技术基石。

第三，如果您打算学习网络爬虫来分析一些网络数据，了解网页页面构成也是必要基础，至少您要知道一个网页页面中每个标签中对应的是哪些信息，才能有的放矢拿到自己想要的信息。

第四，如果您想学习编程，但是缺少相应的基础知识，看不懂复杂的C语言教学，那么从网页制作入手尝试理解编程的语法也是一个很不错的选择。

除此之外，浏览器可以做的事情越来越多，比如webgl的出现，可以让我们通过浏览器构建3d世界，无论是虚拟现实（VR）还是增强现实（AR）都有很多开源免费的解决方案。TensorFlow的JavaScript版本的出现，让我们可以通过结合浏览器学习使用人工智能技术，且非常容易实现。

所以，新的一年里，我打算做网页制作的学习教程，让更多没有基础却对网络技术感兴趣的小伙伴能加入进来。

制作网页需要学习哪些技术？

简单来说学习网页制作需要掌握三门技术。

第一，也是最基础最核心的内容是HTML超文本标记语言。大家不必纠结HTML到底是什么，但是一定要记住它能干什么。HTML通俗来说可以比喻成容器。大家试想，网页里都有哪些内容呢？

一般网页中都会有文字、图片、声音、视频、表格等内容，这些内容就是靠HTML中的标签添加进页面的。

所以说HTML这个工具就是个容器，我们使用HTML标签语言为网页添加所有需要的信息内容。

第二，CSS层叠样式表，这是一个用来装饰页面的工具。如果说HTML是个信息容器，那么如何让这些信息条理清晰的显示出来呢？那就需要CSS来帮忙了。如下图所示，这是一个最简单的页面，只用到了HTML，里面装了一个标题和一个只有六个字的段落。

为了让这个页面看起来美观些，我们为其添加css样式表。添加后如图所示：

我们可以看出来，CSS让标题文字换了颜色，也居中显示了，背景也变成了蓝色。

第三，JavaScript，这个工具相比HTML和CSS来讲是最难学习的，学习JavaScript就是在学习编程了。它虽然只是个脚本语言，但是用到的知识和其他编程语言相差不大。

那JavaScript能干什么呢？

首先，它能为页面中添加很多交互效果。举个例子，我们常见的图片翻页、轮播很多就是基于JavaScript脚本实现的。

其次，JavaScript可以为传统页面扩展出很多新功能，例如结合three.js我们可以很容易的在页面中构建三维空间，或者实现一些3d游戏或其他三维动态演示效果。举个例子（https://renaultespace.littleworkshop.fr/），打开可能略慢。3d展示的汽车广告是不是很酷！

再次，JavaScript可以以网页为基础，实现各种各样的在线小游戏，例如Phaser.js就是目前非常火的一个开源免费网页游戏制作库。phaser官网：http://phaser.io/

JavaScript为网页的功能拓展提供了很多可能性，无论是3d显示还是游戏制作还是未来的人工智能工具，都是由JavaScript都为大家提供了将功能引入到页面的接口，这也是学习难度比较大的原因。不过只要坚持下去一定能学通的！

网站与网页的区别？

网页是指我们看到的单个页面。这些页面分为静态页面和动态页面两种。静态页面指的是不能与服务器进行数据交互的页面，顾名思义动态页面指的是可以与服务器进行数据交互的页面，这一点大家不必纠结。

简单来说，静态页面写好后什么样就是什么样，谁打开都是事先编辑好的内容，而动态页面写好后会随着不同的访问变换不同数据，动态页面更像是一个页面模板，随时套用不同信息。

大部分网站中的页面都是动态页面。

如果使用静态页面做网站会出现什么问题呢？如果您有300篇博客文章，那您就要做300个静态页面来显示，大型资讯网站信息量更加庞大，如果都用静态页面来做，占用的服务器空间也是庞大到不可想象。

网站中的动态页面就解决了这个问题，例如一个简单的网站我们只需一个主页、文章页、搜索页基本上就可以了，这些页面中没有具体内容，我们称之为模板。当您打开后，显示的内容都是在数据库中调出的。这样，一个数据库用来存储压缩过的精简信息，这些信息通过不同页面模板显示在用户面前就成为网站的基本运行模式。

例如在静态页面中显示文字字数的代码是这样

<p>300字</p>

如果使用以php编写的WordPress网站框架来动态显示文章字数就是这样

<p><?php echo zm_count_words($text); ?></p>

<?php echo zm_count_words($text); ?>这条语句可以调取数据库中文章字数的记录并显示出来。这也我们通过这一条语句就可以显示不同文章的字数了。

无论是静态页面还是动态页面，他们的核心内容都是一样的，HTML，CSS，JavaScript都是必修知识。只是静态页面在HTML中插入信息，而动态页面插入的是调取数据库信息的语句。

因此，我们这个教程看起来是在做静态页面，但是我们学习的也是制作网站的基础知识。

本教学学完能干什么？

第一，可以写出静态页面。

第二，有能力读懂他人写好的页面代码。

第三，为继续深入学习网站制作或更为炫酷的页面制作打下基础。

第四，掌握编程基础，至少是基于JavaScript的。

我是大鱼，致力于数字艺术技术分享！欢迎大家关注！祝愿大家2020年学有所成！

HTML学习目录

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作