点个1级技能点：从哪儿开始画网页？

我最开始接触计算机课程的动力，只是非常单纯的为了追一个理工男（后来这个男生成为了我的丈夫）。

为了能够接近对方，能有共同话题，并意淫着授课play，而不断翻阅着我从未接触过的东西。不过即便是怀着这样龌蹉的初衷，当年也还算是学到了点儿东西。

婚后就……╮(╯_╰)╭

基本除了3月份用11小时40分钟草草看完《JavaScript DOM 编程艺术（第2版）》 这本书，我在计算机方面的支线上毫无进展、坐吃山空。不过因为本来也没什么积累，倒也无所谓。

只是最近又悲哀的发现，我对网页制作方面的了解，其实少的可怜，少到用2000字就可以全卖光了……

事实上我经常处在「广泛点1级技能点」的舒服地带，不仅是计算机领域、在其他领域我也有着学到「稍微够用」就马上停止的倾向，再继续多学一点跟要我命似的。这也导致我花费的时间总量虽然也不算少，但并没有成为任何一个领域的专业人士，到哪儿都是半调子。

「只混迹在新手村打怪」的这个行为非常屁，我终于对这样的自己有些看不惯了。于是打算，不如在这一篇里，把有关静态网页的入门小白知识干脆都倒出去算了。倒空清零后，将此作为一个节点，也好轻装上阵专心看下一阶段的新内容。

(｡･∀･)ﾉ如果你对画网页全无概念，希望这篇能够引起你对这个领域的兴趣。

00.1本书+1个网站

我目前对静态网页相关知识的所有了解，都源自1本书和1个网站：

● http://www.w3school.com.cn/

●《CSS设计指南(第3版)》

01.HTML

html是什么？

● HTML 是超文本标记语言(Hyper Text Markup Language)的缩写，是用来描述网页的语言。

● 它只是一个类似地图的东西，用来告诉浏览器们，“喂~chrome君，你哪里该有标题，哪里该有段落，哪里该有图片”而已。不涉及算法，并不是编程语言。编程语言是指像是C语言、C#、Java这类的东西。

那么html君是怎样告诉浏览器们要如何显示东西呢？它们是通过「标签」来沟通的。简单的栗子↓

日记  翻译→ 在网页上显示一个标题，标题内容为：日记

今天春游，好高兴！

 翻译→在网页上显示一个段落

html君就是这样耐心的人，通过一个一个的标签，事无巨细的告诉着浏览器们正确的显示。

html的基本结构

● 在html里，会有2个部分，分别是和，通常会往里放一些类似「事先声明」的东西，比如规定title、声明当前网页所使用的样式都是啥，或者链接一个外部的css样式表，这些工作都是放在里表达清楚

● 里放的则是，我们眼睛可见的网页里面具体是什么样子的

02.CSS

css是什么？

CSS 是指层叠样式表 (Cascading Style Sheets)，样式表的作用是用来描述html里的那些东西更具体些是怎样显示的

简单的栗子↓

html君作用：网页上我要有一个标题，写着“日记”

css君作用：这个“日记”啊具体是这样显示的，首先我要求它是红色的，而且还要加粗，而且还要居中才行

浏览器君：因为你们没用人话跟我说，而是用html语言跟我说的，所以我听懂了，我会按照你们的指令来显示这个网页哒

css的实现方式

目前有3种方法来给一个html网页添加上样式：

● 内联样式：直接在标签元素的属性里写，这样做仅仅只能控制这个标签元素

● 内部样式表：在当前网页的head里写，这样做可以控制当前的网页，但是其他的网页不会听

● 外部样式表：制作css外部样式表，然后想控制A网页就给A网页链接上，想控制B网页就给B网页链接上，想控制谁就链谁

03.画网页其实是摆盒子玩儿

用田春冰河的博客网页来举例，蓝色区域是html网页代码，绿色区域是css网页样式。//在Chrome浏览器中按F12

会发现这些代码里有很多被

包裹住的玩意↓

图太小了，随便找一个网页试试看吧

div

div是一个块级元素，可以把它理解成盒子，里面装着各种东西

然后就是在网页上摆放盒子，把版头装在一个盒子里、把导航栏装在一个盒子里、把左侧列表装在一个盒子里、把文章内容装在一个盒子里……

总之，可以按照自己喜欢的分类方式把网页拆成一块一块的小盒子，然后逐块制作。

制作盒子的方法还是和之前一样，在html里写上“我在这里要建一个盒子，你整吧”，然后在css里写上“我要的这个盒子啊是1000px长，30px宽，而且还是靠左挨着摆的，最好再有点背景比如灰色”

以上说的那些只是比较理想的简化模型，真实世界中的网页会比它复杂的多。

需要照顾好这些可爱的盒子们，它们才会愿意帮助我们实现一个好看的网页。照顾的内容包括：帮它们起名字，帮它们设计尺寸，帮它们设计每块对应的样式表，调整它们的位置……很多很多。

稍不注意，盒子们就会跑的乱七八糟，所以需要在画网页前，先规划好整个页面的布局。网上有很多做原型的小工具，也可以用ps切图，或者是在纸上描描画画的打草稿。

↑2013年7月份的练习布局（那时我还比较青涩），非常打脸的是最后没做出来

截止到这里，目前所涉足的内容只有「标记语言」的html和css，这些属于静态网页的范畴，所能做的事情也十分的有限，多是用于一些展示型的网站。

「静态网页」的意思并不是指「静止不能动的网页」，它可以有动态的效果，像是gif格式的动画、flash、滚动字幕什么的。它的静态是相对于「动态网页」而言的，意思是指那些没有后台数据库、不含程序、不可交互的网页。

这篇说的非常不严谨。还是登录w3school上去看吧_(:3 」∠)_

如果想解锁更多的功能和玩儿法，就需要继续学习JS……

等我、等我用几个月在JS上获得进展后（囧），再回来更新这篇的续。

又在乱立flag……