html快速上手答案,HTML与CSS快速上手

前端是一个非常大的模块，所以我可能在PHP的教程中不能细讲，我只能带着你快速入门，花最少的时间掌握最基本的HTML+CSS使用。

HTML+CSS

上篇文章中我们已经介绍过了HTML，并且把HTML比作人的身体，那么CSS是什么呢？我们把它比作人的衣服，所谓“佛靠金装，人靠衣装”，好看的HTML页面是使用CSS来包装的，下面我们来看一下今天的DEMO。

页面效果

第一步：我们先新建一个Demo01.html的HTML文档，并用编辑器打开

第二步：我们来看一下今天的代码

HTML代码骨架

这部分代码大家看一下，想一下我们昨天讲的标签与标签嵌套。

这里面出现了新的标签有哪些：

(1)这个是语义化标签，没什么实际意义，就是说这个标签就是用来包裹一篇文章的。

(2)标签中出现的文字，在网页中是斜体。

(3)你也可以把它理解成段落

(4)这个标签是要放进去一张图片，你可以注意到它是单个存在的，而不像其他标签似的成对存在，它的内部有一个src="  "这里面是放的图片的路径和名称，引入图片,alt = "  "是用了解释图片的，就是你鼠标放上去之后，出现的字。

(5)细心的你可能注意到了在上面

标签中有一个style="......"它是干嘛的呢？这里面可以承载样式，比如字体颜色color="#ccc";   #ccc是灰色，background-color:#....是背景颜色。

第三步：现在来看一下几乎没有加样式的页面是什么样子的

没有加样式的页面大家可以看到，没有“穿衣服”也就是没有加样式的页面是比较丑陋的。

第四步：我们来分析一下样式

样式1

样式2

我们可以看到在

与结尾标签的中间使用标签包裹了一大串的代码，这里面就是样式。每个样式的作用我都写到上面，大家根据提示与代码的英文意思仔细看一下。

这些东西没有办法再帮你一个个梳理了，我认为这是一个大量使用与模仿的过程，你写的多了，不需要刻意去背，你也会记住。

我们挑其中一个再看一下

ul li{.......xxxxx.......}

很明显这个结构是为ul中的li标签来加样式的，如果你直接写li也行，不过这样层次关系更加明显，ul是父,li是子。

px是像素的意思，margin：表示外边距，margin-left表示左边距，就是与左边标签的距离，你可以看到我们页面效果上多个li之间是有距离的。padding与margin是相反的，一个是对外，一个是对内，不过用法是一致的。

如果有不懂的地方可以去网上查一下这个标签，立马就出来了，也可以给我留言，很乐意帮助你。