后端恶补Html指南

导语

因为我也没有系统的学习过Html5和CSS3，这篇文章就放在随笔区好了，也就是说，如果是主修后端的同志，想自己写个简单的博客页面，可以看看我的学习方法，如果想用Html5做小游戏的或者搞复杂的特效的，画图的，可以直接退出了。

我开发个人博客用了大概二十天，但是因为赶上了考试周，其实一半多的时间是在复习或者考试，用在Html CSS上的时间大概五六天的样子。

学习之前的准备

-能看懂Html文件。你可以不知道各个标签的作用，但是你要知道这个文档的组成方式，怎么从内到外索引。(可以先学学爬虫，或者直接看XPath)

-知道浏览器的“开发者工具”在哪里，浏览器能检查元素最好。

-会用百度，找一个介绍Html和CSS元素、过滤器的网站，W3cSchool或者菜鸟教程都可以。然后顺便找点你觉得设计的好而且看上去实现比较简单的网站，用作参考。

学习

不知道为什么写到这里我觉得已经介绍完了？？？其实只要对着你想实现的内容点检查元素然后查菜鸟教程就行了，CSS的属性也是一样的，现查现用，多用几次就记住了。但是不能复制粘贴，要理解之后手打，不然第二天绝对忘了。

#重要概念

CSS盒子模型

对于CSS而言，所有Html元素都是盒子，是矩形，只有长宽四条边。需要注意的是，Html放置元素是由上到下的，如果你想让若干个元素重叠在同一个高度，你需要设置浮动。

盒子模型中有几个特殊的概念，作为内容(content)的填充，它们是外边距(margin)、边框(border)、内边距(padding)。它们可以用极少素材创建非常简洁的页面。

用的是菜鸟教程的图

CSS选择器

选择器可以选择特定位置的元素，也可以选择特定状态的元素。合理使用可以省很多Js脚本。同时，CSS伪类:before/:after也属于选择器。

#注意事项

-将CSS写到单独的文件里。这不只是一种约定俗成。你应该更多的考虑以下几个方面：

1.怎么保证CSS的重用性最高？也就是，如果你要编写一系列风格相同的页面，比如博客的主页面和博客文章的页面，如何才能让你的CSS文件更简单？你是否应该仅把头部和尾部的CSS放在一个文件内？答案自然是肯定的。

2.尽量确保页面的配色统一。这里的统一是：当你想要修改配色方案的时候，不用额外的查找-替换，让你的配色以一种相当于常量的方式存在。你可以定一个名叫“backc”的类，在里面定义background-color属性，然后给所有应用这个背景的元素添加这个类。

-Js建议单独、系统的学习。建议从根部学起，要不就从头到尾用一种方式引用。不然肯定会踩非常多的坑，这可是我这个过来人要用血和眼泪告诉你的= =。

-注意Html、JavaScript里的保留字。这个不会单独报错，只会报找不到，所以建议给你的id、Function啥的起一些长的、不容易重复的名字。

-建议保留一个模版html。就是除了页面首部和尾部，<article>标签内为空的html。在写博客页面的时候这能省事。

-如果色感不好，可以找个显示十六进制编码颜色的网站，不要相信Dreamweaver。如果你用的是带有模版语言的Web框架，建议直接运行调试。