Task1:零基础HTML编码

1.新标签

在学习html5的过程中，知道了一些新的标签，能够更清晰的表达文档的结构（原来都是用div，可能加上id或者class来划分）。

header 页面头部／标题／logo／搜索表单等等
nav 任何有导航性质的标签都可以用到，比如页面中的导航，可以有多个
aside 和主要内容不相关的内容，工具内容／广告什么的
article 表示独立的可重复的结构：论坛的帖子／博客的评论
section 表示文档中的一个区域：一般会带一个标题　相临的section之间是有相关性的，article则不相关，是独立的
footer 章节的尾部：版权信息／相关文档／一些独立内容的尾部也可以用到

2.打开新窗口：

<a href="http://www.baidu.com" target="_Blank">百度</a>
_Blank是新窗口
_Self是自身
_Parent是父窗口
_Top是顶层窗口

.空格：在html中输入空格是没有作用的，需要输入&nbsp这个代码

3.表格：

加边框<table border="1"> </table>
表格的跨行和跨列：colspan rowspan
colspan 属性规定单元格可横跨的列数。

4.表单

label标签，为input元素定义标注，改进了表单控件的可用性，当你点击到label标签时，会自动聚焦到对应控件上。
<label>请输入用户名<input type="text" id="username" name="username"></label>

5.Ife.baidu.com页面HTML结构：

<!DOCTYPE html>
<html>
<head>
  …
  <meta name=”viewport” content=””>
<meta name=”keywords” content=””>
<meta name=”description” content=””>
</head>
<body>
  <div>
<header><nav></nav></header>
<main><div></div></main>
<footer></footer>
  </div>
</body>
</html>

Task2:零基础HTML编码及CSS编码（一）

1.关于外边距的合并的问题

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
解决办法：

都用float来定位（有条件要求，适用范围较广）
为父元素添加overflow不为visiable 的属性（适用范围极广，推荐使用）
为元素添加border（一般不用）
使用绝对定位（适用范围较窄）
父元素增加padding-top属性（改变尺寸，不建议使用）

2.对于便签选择器的灵活运用

.SideBar>h1;子选择器
.Gallery img包含选择器
.pic01,.pic02,.pic03分组选择器

：>作用于元素的第一代后代，空格作用于元素的所有后代。

注意：后代选择器，后面不能跟分组选择器，只会作用第一个。

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

3.使用超链接a标签的伪类

a:link {color: #FF0000} / 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 /

4.CSS3 box-shadow

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

5.首行文本的缩进

text-indent: 2em; 首行空2个字
text-indent 属性规定文本块中首行文本的缩进。

6.Table

border-collapse 属性设置表格的边框是否被合并为一个单一的边框
separate 默认值。边框会被分开。
collapse 如果可能，边框会合并为一个单一的边框

7.表单的布局

左侧对齐：
左侧文字用,定位absolute，left：40%
右侧对齐；
右侧input用包裹，定位relative，left：40%