前端开发(入门)班已经一月有余，做完三个项目之后想对这三个项目做下小结。由于这三个项目包含了前端开发中html和css比较重要的入门知识，温故而知新，小结的同时也是希望把知识梳理一下。

P0.培养开发者思维

课程要点

1.网站开发的三种语言

html 超文本标记语言 描述内容和一个网站的结构 标记语言

css 样式表 描述一个网站的样子 标记语言

javascript 编程语言 处理交互2.如何跟上变化的潮流

网页开发中有个原则，新的浏览器不能中断对旧网页的支持，网页一旦用稳定的web标准建立起来，就能够永远正常显示和工作

html到了第5版

css到了第3版总结：没有一种技术可以永远流行，要学会如何更新自己的知识

3，问题解决策略

分而治之

求助谷歌和stackoverflow为主

求助论坛其实不只是学习udacity的课程，所有MOOC类的计算机课程或者自己将来编程中碰到真实的技术问题都可以用这个思路寻找解决方案。

P1.博客文章

课程要点

1.HTML的结构

树形结构

有父级元素，子级元素，同级元素2.HTML页面是文本文档。是网页的内容，也可以理解为房子的骨架。

3.HTML使用标签为包含在其中的内容提供结构

标签经常成对出现(有例外，比如img)

起始标签可以附带属性4.HTML一些常用标签

h1-h5 标题

p 段落

img 图片

b 粗体 i 斜体

strong 粗体(语义是加重语气)

em 斜体 (语义是强调)

现在到以后都是，课程教的不代表全部，要学会自己查文档。

项目难点，基本上照着对应的格式调整就行。

审核老师给的心得

再额外分享一个小技巧，我们如果让 HTML 文档里的结构看起来更加清晰有层次，这不仅利于自己将来回头看自己代码时易于阅读，而且，当分享代码给别人看时，别人更容易阅读，会觉得很赞呢。? Udacity 有一份完整的HTML 样式指南 供我们参考，平时养成一个好的 coding 习惯对以后是很重要的呢。嗯，现在分享一个小工具(HTML formatter)可以自动帮你整理一下 HTML 文档的格式。只需将整个 HTML 内容选中复制，然后粘贴到这里)的输入框里，然后点击“FORMAT HTML“然后稍等片刻，就会返回一份漂亮的 HTML 文档啦。去试试吧。:)

P2.动物交换卡

课程要点

1.CSS的基本概念

CSS的作用就是在网站上添加样式，要善用开发者工具

CSS标记语言，重叠样式语言。用来描述网页上各种元素(文本，图片等)的外观。2.CSS规则集

所有的CSS都是以所谓的规则集rule set开始的

例子 div ##选择器 ｛

text-align:right;

}

总之各种选择器要注意一下

项目完成过程

1.拿到项目之后首先看的是例子图和项目要求

图片.png

可以看到的是这张卡片明显分成标题，下方动物图片，再后面是一段描述性的文字。其中又包含了一些文字格式。

2.既然有了分段的小任务，那么我的想法就是先总体输入好内容，图片。然后分成一个个区块来调节CSS。

3.具体分成四大块

整体卡片格式明显要加边框

为了美观也加了点阴影

border-radius: 20px; 【为了美观加的圆角】

border: 5px; 【边框宽度】

box-shadow: 5px 5px 20px #ccc; 【为了美观加的阴影】

标题格式，按要求调节就行

图片记得要加边框

边框颜色应该协调

代码： border-style: solid;

border-color: #ddd;

下方文字这里有个问题是如何让中间动物信息列表这个无序列表靠左跟上下文字对齐

经过查文档无序列表的格式中有none，代码为list-style-type: none;

问题解决

其他地方根据要求做就好。

另外自己有个搞混的地方是：CSS中font-style并不是字体的选择，font-family才是选择字体，要注意。

最后做完结果如下

图片.png

附上审核老师给的点评：

关于不同的浏览器如何渲染字体，这有点超出课程内容呢，不过很好，你有注意到他们的差别。不是很清楚你说的具体情况，经过一番搜索，发现这个问题与你的有些类似。希望有所帮助。:)

不同的浏览器对同一款字体的渲染并不一定完全相同呢。参考阅读这个 Quora 问答。

据我所知，Chrome Devtools 似乎还没有一个自带工具可以测量某元素距离它父元素边框的距离呢，一般都是通过计算两个相关元素各自的width padding margin

等值得来的哦。不过非常推荐一个大概可以达到你的要求的叫做Page Ruler的插件。具体到这个动物卡片的问题，如果我没理解错的话，为了卡片两侧的空隙保持相同宽度，你在确定卡片#anicard

的宽度(你设置为 315px)的时候遇到了一些小麻烦。这里我们就来试着计算一下，#anicard {padding-left: 10px;}

这里 padding

10px， 加上图片内容宽度 300px，加上.pandaphoto {border-style: solid;}

或.pandainfo{border-style: solid;}

(由于你设置 border 的时候没有给定一个boorder-width

的值，所以会被设置为一个默认值 mediumn，我用 Chrome 观察到 这个默认边框宽度为 3px。) 的左右边框 3px * 2 = 6px。所以，按照这个计算的话，卡片宽度设置为 316px 会更准确一些。:)

我们强烈建议不直接将style属性添加到 HTML 代码中，记得改一改。:)

虽然后面只有两个项目，但真正的考验还在后面，老师说到后两个项目学习曲线会突然升高，所以还得多加努力，不能松懈。借用功夫熊猫中的一句话There

is a saying, yesterday is history, tomorrow is a mystery. But today is a

gift. That is why it's called the present (the gift).