我是一名河南某职业学院的学生，比较喜欢PHP开发 的 工作，自己也曾经自学过php，but如果没有老师教还真是难以坚持啊，在这里给大家说一下寒假在麦子的学习感受，首先说麦子每一堂课程都给了特别详细的 学习流程图（课程规划），让我们在学习之中不再迷茫。比较钟意PHP开发的工作，所以打算学习一下，看看自己适不适合这份工作，但看规划好像要先学前端开 发啊，啊啊啊....好难好难，特别是Javascript，唉，有点怀疑自己的智商了。每一节课老师都会拿出来思维导图来讲，这点特别棒，让人一看就知 道这节课能学到哪些内容，不过要是能把思维导图共享出来就好了，好吧，我比较喜欢偷懒不愿意自己总结，总之老师讲课很清楚，内容浅显易懂，不过有些地方可 能因为个人原因还是不太理解，得慢慢“撸”了，各位学友，一起加油吧！

html+css:

因为本身在学校就学过html+CSS，所以课程基本是2x加速撸一边复习，不过不得不说麦子学院这个2x播放特别好用，赞一个。html全称：超文本标记语言，大千Web世界其实对于浏览器来说都是文本。

用我们的思维去简单考虑一下浏览器的工作流程：

1.我们去访问一个网站，比如www.baidu.com，其实就是去请求他的index.html（以静态页为准）这个文件，而这个文件呢，就是一个文本文件，是我们可以轻松用记事本打开的。

2.但是为什么我们看到的百度，有图像，有颜色，有各式各样的内容呢？因为浏览器会从逐字去解析这个文件。

3.浏览器简单分析：

第一行是 ，这个是告诉浏览器以何种解析方式去解析这个文件，暂时可以略过。

第二行，哎呦 ，浏览器就会认识他，从这个标记开始的内容都是html内容。

第三行，原来你“肚子”里装的是这个啊，从以后的内容都是显示在浏览器上的内容。

第四行，麦子学院赞一个！  这一行就是纯文本信息了，浏览器不做特殊动作。

第五行，，哎呦，摸到你的肚脐眼了，嗯，“度量就这么小啊”。标明了主体内容的结束。

第六行，  浏览器读到这里，就知道html内容结束了。

麦子学院赞一个！

所以说，像html  body这些都是标签，标记了它后面的内容是什么！

而形如      <标签>这类呢就是开始标签，标记了内容的开始。

而  这类呢则是结束标签，所以在开始标签和结束标签之间的文本就是他所标记的内容了。

而还有一种标签就自闭合标签（单标签），img就是个最好的例子。

img是image的缩写，那么大家就应该知道这个标签是标记图像用的吧。

理所当然我们应该这样使用：

图片

but,这样是错误的，因为你能把图片放记事本里吗？如果你能，请联系我，直播吃翔！（字符图像不算）

我们能将图像放进记事本里的内容只有路径，比如：1.jpg

所以我们要这样使用：img标签

哎呦，src是什么鬼啊？为什么要这么写啊？

src呢其实就是属性，属性是什么？

人的耳朵数量=2

耳朵数量就是属性，用来描述人的。

so src这个属性就是描述im(a)g(e)的url的，喂喂！！url又是什么鬼？好吧，简单说，url就是网址，嗯，就是这样！

小小的总结大概就是这样了，html还是比较简单的。不过有个小小的意见想说一下：老师在讲课的时候会把标签准备好，来告诉大家如何去使用。但是标签有很多啊（虽然常用的就那么点吧），但是老师水平高不代表学生水平高啊，所以应该教我们如何查文档。

这里推荐一个网站：http://www.w3school.com.cn/

CSS总结：

CSS 指层叠样式表 (Cascading Style Sheets)解决了内容与表现分离的问题。

使用CSS样式的过程就像是我们在word中选中一行文字，选择样式->标题1

使用css的三种方式：

内联样式表：使用标签属性style=”css属性:值;”   优先级高

内部样式表：在标签中使用

外部样式表：使用标签引入外部样式表，优先级低

覆盖：不同优先级的样式定义了相同属性，优先级高的会覆盖优先级低的

合并：不同优先级的样式定义了不同属性，样式将合并

css语法：

selector{         /*选择器*/

property1:value; /*属性:值;*/

property2:value;

}

常见的选择器

标签选择器：直接使用标签名作为选择，例如p 就是选中所有的p标签

类选择器：  使用.(点)classname选择标签class属性为classname的标签

ID选择器：    使用#IDName选择标签ID属性为IDName的标签

选择器可以组合使用：

p #Test 将会选择p标签下ID为Test的标签

伪类选择器：

a:link{color:gray;}

a:visited{color:red;}

a:hover{color:green;}  //以上两个只能选择a标签，以下两个可以选择其他元素

a:active{color:orange;}

伪元素选择器：

p:first-letter 将选中p标签的第一个字符

p:first-line   将选中p标签的第一行

盒子模型：

我们可以拿实际中的例子去理解盒子模型，在中秋节我们总是要买些月饼礼盒去送给亲朋好友。

padding就是月饼距离礼盒的距离，padding越大装的月饼越少。

border则是礼盒的用料，有铁皮（老式月饼常见包装），有厚纸板的，border越大则礼盒边越厚。

margin则是礼盒与礼盒之间的距离，假设两盒月饼平放在地上，margin为0时两个盒子挨在一起，margin为10时，礼盒和礼盒之间有一些间距。

浮动

你把礼盒粘墙上不就浮动了？但是浮动后下面也会有空间可以放东西，那么俯视图来看就会覆盖一些，这时使用clear属性则可以清除浮动影响，说白了就是浮动的盒子下面被填充了空气，其他盒子不能放在那里了。