网页基础篇之如何制作简单的静态网页

每个人都有一个属于自己的星空

上一期介绍了sublime text3开发工具，那么接下来当然是开始了解代码。

一个静态网页大体由HTML, CSS和JavaScript组成。HTML是主体，装载DOM元素，CSS用来装饰DOM元素，JavaScript控制DOM元素。

用一扇门比喻三者间的关系是：HTML是门的门板，CSS是门上的油漆或花纹，JavaScript是门的开关。

HTML介绍

HTML是描述网页的一种超文本标记语言(标记标签)

HTML通常是成对出现由尖括号包围的关键词 (例：)

HTML定义了网页的内容

CSS介绍

CSS指层叠样式表,用于渲染html元素标签的样式。

CSS由两个主要部分组成：选择器，一条或多条声明

(例：选择器： xk-logo OR #xk-logo 声明是有属性和值构成： margin: 0 auto;)

CSS可通过三种方式添加到html中

（按优先级大小顺序排序）内联样式（优先级最高）内部样式表外部样式表

JavaScript介绍

JavaScript是脚本语言。它是连接前台（html）和后台服务器桥梁，同时也可以操纵html元素。

JavaScript实现网页的行为

实现一个简单的静态表单页面

先看下成品吧

是不是有点跃跃欲试了呢

那就继续往下看吧！

首先我们回顾下上期有提及到的网站代码的基本布局

1）开始制作网页，先命名一个项目文件夹为index，并且把引用的资源文件分类文件夹，这样方便后期维护。

2）在HTML中的引入CSS文件（在head标签里引用）,JS文件以及图片资源

这里需要注意的一点是路径的问题

“.”–代表目前所在的目录。

“..”–代表上一层目录。

“/”–代表根目录。

具体得根据html文件与引用文件的位置而定

详情可参考：

3）编写网页的主体内容（编写在body标签里）

这时在浏览器中查看会发现和成品的样子不一样以及弹框功能没有实现，别急，只需再编写CSS，JavaScript即可。

4）编写网页的CSS，JavaScript

index.CSS:

index.js:

5) 大功告成了，可以使用浏览器打开网页查看下自己的作品啦!

你看懂了吗？是不是想去做一个属于自己的网页呢？

ps：有想继续深入学习的小伙伴们可以到W3C，慕课网，菜鸟教程等网站观看教程哟！

小预告

请期待下一次的技术干货哦，我们将推出网页基础篇之简单的后台数据交互。感兴趣的朋友我们下期再见。

音乐 /致姗姗来迟的你

图片 / 加葱＆花瓣网

文字 / 加葱

编辑 / 北极熊