作为极其轻量的语言，两者的语法都很简单。
HTML语法:
<标记 属性> ....... </标记>
例子：
<title>HTML和CSS</title>有但是我不会特别关注的模块：
- 字体的样式、背景 CSS的工作
- 链接跳转和图像 了解即可，不难
- 接入javascript和css 了解即可，不难
- 文档类型、文档描述了解即可
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="generator"content="Dreamweaver 8.0en">查教程即可：HTML教程
我关注的模块：
- 布局
所需的知识点：
- 块元素和内联元素
<div>块元素 <span>内联元素
块元素会换行，内联元素不会换行。通过这些元素结合CSS来布局，不要使用<table>元素来布局，<table>元素的作用应该是建造表格。
CSS语法：
例子：
p.greentea{
Color:green
}放到HTML的<head>·里面：
<link rel="stylesheet" href="styles.css">一些概念：
继承：
就像你可能会从你的父母继承蓝眼睛，同样的元素也可以从它们的父元素继承样式。只为子元素增加样式可以覆盖。
类：
我们可以定义一类元素，并对属于该类的所有元素应用样式。
盒模型：
CSS看待元素的一种方式。CSS将每个元素看作由一个盒子表示。每个盒子由一个内容区以及可选的内边距，边框和外边框组成。记住是所有！！
浮动
浮动是如何工作的--浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。
注意此时浮动内容仍然遵循盒模型。
参考：
基本文本和字体样式developer.mozilla.org
这里是百度前端学院前六天的作业，是一个很好的把HTML和CSS的知识点串联起来的练习。我会把我的解答思路写下来，最后附上git地址，里面有成品。百度前端技术学院ife.baidu.com
第一份简历：
这里的点有：
- 我们要以什么html元素来构建？
- 姓名--张三----性别,这些字之间的空格通过什么来实现？
- 技术能力----熟练掌握...，如何换行？
- 如何加粗
用<h1>来构建简历标题，应该是没有什么争议的。
我在构建姓名张三等这些文字的时候，一开始考虑的是用<table>元素，后面发现这是不对的。<table>元素只应该用来构建表格。如果要布局的话，应该是用<div>块元素，和<span>内联元素。
加粗的话，应该是使用CSS来实现，虽然HTML也可以。用 font-weight:bold。
想要制造姓名--张三----性别的空隙的话，则是考虑margin来实现，具体用法参考：margin。
【技术能力----熟练掌握...】的换行，考虑的则是使用块元素和内联元素的区别来实现，块元素独占一行，但是因为要兼容不同的简历样式，最后面是用<span>元素和使用CSS的display:block，把<span>变为了块元素来实现的
第二份简历：
这份简历相比第一份简历的点是：
- 简历标题变成了一列，放在了左边
- 简历两个字放在了中间，离顶部有一段距离
- 简历有背景颜色，而且背景字的颜色是白色的
把标题放在左边变成一列，我一开始考虑的是用“弹性盒”来做。后面百度之后，原来只要用float:left，然后把它的height调成整个页面的高度就可以了。
text-align:center可以把字离左右两边的距离一样，离顶部的距离则可以用padding-top来调整。
背景颜色是background-color,字体颜色是color。
第三份简历：
简历标题的背景和字体颜色，和字的位置的调整，和标题放在左边第二份简历已经练习过了，所以这里的点是：
- 调整字体的大小
- 每一栏中间有一条边框线
- 技术能力--熟练掌握--综合能力--良好的沟通与前两份简历做到共用同一份html文件
用font-size来调整字体的大小，border-bottom-style: ridge展示底部的边框线，要做到共用一份HTML，我考虑的是首先用<span>其次用<br>来换行。
git地址：
https://github.com/asd88-a11y/Baidu-College/tree/master/HTMLandCSS
891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
