指尖上的技术活儿：菜鸟HTML+CSS指北

更新时间：2016-12-31整理编辑：建站学习网阅读：0

现在市面上到处都是各种指南教程，为了显示这一系列文章的不同，我特意起名为指北系列，不同在哪里?我会按一个对HTML一点概念的人的脑子来教你一步一步的学，保证你看完后有收获。

　　适合阅读的人群：没有多少闲钱送给培训机构那帮子SB教员，如果你真的想要去培训机构去学习，请先去打听一下那里的老师的工资是多少，如果没有超过六七千块，那就不要去了，你不要想了，你就算跟他学到死你的工资也不会超过六七千块的。

　　学习之前，请记住伟大的哲学家兼武术家李小龙的一句话：清空你的杯子，方能在行注满。空无以求全。

　　推荐参考书：1，O'reilly.HeadFirst.Html.With.Css.And.Xhtml

　　2，W3C shcool

　　3，CSS禅意花园

　　4，HTML 文档 CSS文档

　　我觉得如果想入门的话，上面三本书就够了，买其它的书真浪费钱，还不如好好的看看HTML DOCUMENT ,and CSS document.

　　第1集了解HTML and CSS

　　目标：通过本课，你要做到：知道HTML是做什么的，CSS的作用。

　　OK，开始上课了，借用软件工程学里的观察者模式，我假定任何看此文章的必须是往WEB方面发展，如果不是向往这方面发展看这文章我想脑子肯定进水了。OK，那首先大至的了解下WEB这个概念。

　　WEB百度的解释如下：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。

　　还要了解一下浏览器的概念：

　　浏览器：万维网(Web)服务的客户端浏览程序。可向万维网(Web)服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。

　　可以这样理解：WEB主要由客户端和服务器端组成，客户端是接收信息的终端，类似于我们发短信的时候，客户端就是收信人，服务器端是发信人。当然抽象化的省略了防火墙，DNS之类的东西，因为这些东西你不需要了解。

　　所以，你有时候也听一些书呆子说web的架构是B/S架构，如果你懂一点点英语，也就知道是(brower,and server)的简称，没什么意思。

　　当然，上面的东西全是废话，你看不懂不需要看，学习HTML 和CSS，其实要了解的东西很少很少。

　　闭上眼睛，想一想，比如你今天想上网看美女图片，你会干什么?OK,肯定要打开一个浏览器吧，不管是IE还是FIREFOX,所以，你肯定会自然而然的知道，我们必须借助于浏览器才能看到网站上的网页，用专业一点的话可以说，浏览器是负责把HTML CSS JS等传到客户的端的语言按照内置的一整套规则解析成我们人能看得懂的内容的一个工具。

　　只要你大至懂了浏览器的解析规则，等于说你基本读得懂HTML和CSS 代码了，好，现在我们来看看浏览器是如何解析的。先从一个经典的HELLOWORLD例子开始第一课。

　　推荐使用的编辑器:notepad++,editplus,dreamware(新手不推荐使用，这些IDE集成工具会毁了你的，让你一辈子也不会写出一行完整的代码),

<html>

<head>

<title>the first example</title>

</head>

<body>

<helloword

</body>

</html>

　　ok,保存一下上面的例子成一个.html,或者.htm文件，用浏览器浏览一下。

　　通过上面的例子你会了解以下知识：

　　1，标签一般是成对出现的，有没有不是成对出现的标签?当然有,比如<input type="image" />但单标签一般的在最后面要加一个斜线，意思是我已经关闭了。

　　2，HTML由二部分组成，<head><body>他们被最外面的<html>包着，HTML的世界里，有一些内容(永远要记住，HTML只负责WEB的内容方面的东西)，基本上只要是内容方面的东西，他要么是属于head,要么是属于body,如果你以后看到有的东西既可以放到 head里，又可以放在body里，我可以百分百的跟你说，那些代码不是负责内容方面的东西的，他们要么负责样式方面，要么负责一些动态东西，除此之外没有其它的东西了。

　　因为，在客户端里面，大至分为三种东西:

　　HTML:负责内容

　　CSS:负责样式

　　javascript:负责动态东西

　　举一个例子你一下子就明白了：

　　大富翁的虚拟社区最近兴起了房地产，：阿士伯想盖一个和钱夫人一样的大大的house(百度一下你就知道，house在西方专指别墅),他想盖一个五室三厅四卫的House，要有一个大的花园，一个停车库，在他的房间里面他将会买一些家电一些家具，请一些佣人。

　　这里面，虚拟社区里把停车库，花园，卧式当成了一个一个独立的东西(这些在WEB里面就被称为HTML元不经意)。所以，阿士伯花了一些金币买了这些道具，但买了之后，在自己的空空的空间里怎么放，这里肯定有一套规则吧：有可能这套规则这样写：

　　1，南边是二个主卧式

　　2，车库最后和地下室在一起

　　3，各个道具的大小如何设置

　　4，各个道具的间距如何设置

　　(这些就被称为CSS样式)