课程来自慕客网：http://www.imooc.com/code/49
另外有网易coursera合作的课程：网络技巧 - 网络技术和HTML5简介
提前准备：安装Dreamweaver 6
点击安装Dreamweaver 6 亲测破解版可用，算是这两天最大的收获了。
注意：安装中自己碰到了两个问题,解决办法如下：
1-安装到一半提示需要重启电脑。
原因：之前安装不成功留下了记录
解决办法：进入注册表删除注册不成功记录
2-安装提示连接不上网络
原因：不知
解决办法：先断网，然后再运行安装。（坑爹啊，连着网的时候提示连接不上网络；断网之后，反而安装成功了）
2015-1-20 学习笔记
1-1:代码初体验
1-2：html 和 CSS的关系：内容和表达形式的关系
1-3&1-4: 标签以及标签的写法
1-5：html 语言的基本结构：
<html>
<head></head>
<body></body>
</html>
1-6：文档头：<head></head>,包含文档的基本信息，如title等，但一般不会展示给用户看。
1-7：代码注释方式：<!--注释文字-->
2-1:语义化
2-2：容纳具体网站内容的标签:<body></body>
2-3：分段标签：<p></p>
2-4：字体大小：<h1></h1>-><h6></h6>
2-5: <em>这是斜体</em>；<strong>这是加粗</strong>
2-6:用span设置文本格式：
a-先设定span的意思：比如“蓝色”
<style>
<span>color:blue;</span>
</style>
b-指定应用范围： <span>文本</span>
2-7:一句话的引用：<q></q>
2-8：长段文章引用：<blockquote></blockquote>
2-9:使用</br>标签分行显示文本
2-10:添加空格：
2-11: 加入分隔线： <hr> 或者 <hr/>, 空标签
2-12: 加入地址标签（变斜体）：<address></address>
2-13: 加入一句代码标签： <code></code>
2-14:保留原文本格式（加入大段代码）标签：
<pre></pre>
3-1:信息列表: <ul>
<li></li>
</ul>
3-2:ol 有序信息列表： <ol>
<li></li>
</ol>
3-3:<div></div> 逻辑板块分类（division)
3-4：给DIV命名<div id=xxx></div>
2015-1-21 学习笔记
3-5表格标签：
<table>
<--!以下是表头,一般表头默认为一行，由任意个表格组成-->
<th>
<td>这是表格<td>
</th>
<--!以下是表格内容，默认为一行，由任意个表格组成-->
<tr><td>内容</td></tr>
</table>
3-6 用CSS样式，为表格添加边框
<style type="style/css">
table,tr,td,th{border:1px,solid,#000;}
</style>
3-7:表格摘要及标题：
<table summary="摘要内容">
<caption>标题</caption>
4-1:认识<a>标签，链接到另外一个页面，默认为在原有浏览器打开
<a href="链接" title="鼠标滑过显示的文本">展示的文本</a>
比如：<a href="http://xxx" title="学习网站">点击这里</a>
4-2: 在新建浏览器打开页面：目标网址后+ target="_blank"
4-3：使用mailto 发送邮件，更多详细说明点击这里
<a href="mailto:xx@xx.com?cc=xx@xx.com&bcc=xx@xx.com&subject=文本内容&body=文本内容></a>
4-4:插入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
1-22 学习笔记
5-1 表单文件
<form method=“传送方式” action="服务器文件" ></form>
举例：
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" />
<label for="pass">密码:</label> <input type="password" name="pass"/></form>
5-2 文本输入框 密码输入框
<form>
<input type="text/password" name="名称” value="文本"/>
</form>
当type="text"时，输入框为文本输入框.当type="password"时，输入框为密码输入框。
5-3 文本域，支持多行文本输入
<textarea rows="行数" cols="列数">文本</textarea>
5-4 单选框，复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当type="radio"时，控件为单选框.name取值一定要一致，这样才能起到单选作用。
当type="checkbox"时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序ASP、PHP使用
4、checked：当设置checked="checked"时，该选项被默认选中
5-5 使用下拉表框进行单选，节省空间
<select>
<option value="提交值">选项</option>
</select>
selected 属性为默认选择，使用方法：selected="selected".
5-6 使用下拉表框进行多选
在<select>标签中设置 multiple="multiple"属性，就可以实现多选功能。size="2", size为显示出来的选项数。
5-7 使用提交钮，提交数据
<input type="submit" value="提交">
5-8 使用重置按钮，重置表单信息
<input type="reset" value="重置">
5-9 form表单中的label标签
<label for="空间id名称">, 标签的for属性中的值应当与相关控件的id相同。
1-23 学习日志
6-1: 认识CSS
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
6-2:CSS的优势
为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就 可以通过设置样式来设置，而且只需要编写一条css样式语句。
第一步：把这三个短语用<span></span>括起来。（见右边代码编辑器13行）
第二步：写入下列代码：span{ color:red;}
6-3:CSS语法
css 样式由选择符和声明组成，而声明又由属性和值组成。如图所示。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{color:blue;fontsize:12px;
6-4: 注释代码 /*文字内容*/
7-1内联式：
<p style="color:red">这里文字是红色。</p>
7-2嵌入式：嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。
7-3 外部式：
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、标签位置一般写在标签之内。
7-4 不同形式的优先级：就近原则。一般：内联式 > 嵌入式 > 外部式
8-1 选择器
每一条css样式声明（定义）由两部分组成：选择器{样式}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
8-2 标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。
8-3 类选择器
.类选器名称{css样式代码;
步骤：
第一步：使用合适的标签把要修饰的内容标记起来：<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：.stress{color:red;}/*类前面要加入一个英文圆点*/
8-4 ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
8-5 ID选择器和类选择器的比较
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
8-6 子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
8-7 包含(后代)选择器
.first span{color:red;}
和子选择器的差别：包含所有后代，子选择器只包含直接后代。
8-8 通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，
8-9 伪类选择符
a:hover{color:red;}
8-9 分组选择符
.first,#second span{color:green;}
9-1,9-2
各类标签符号的权值：权值越高，对指定文本的控制度越高。
p{color:red;}/*权值为1*/
p span{color:green;}/*权值为1+1=2*/
.warning{color:white;}/*权值为10*/
p span.warning{color:purple;}/*权值为1+1+10=12*/
#footer .note p{color:yellow;}/*权值为100+10+1=111*/
9-3 CSS的层叠：就近原则
9-4 重要性：
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
10-1 字体
body{font-family:"宋体";}
10-2 文字排版--字号、颜色
body{font-size:12px;color:#666}
10-3,4 文字排版--粗体,斜体,下划线,删除线
p span{font-weight:bold;}
p a{font-style:italic;}
p a{text-decoration:underline;}
.oldPrice{text-decoration:line-through;}
10-7 段落排版 缩进
p{text-indent:2em;}
10-8 段落排版--行间距（行高）
p{line-height:1.5em;}
10-9 段落排版--字间距、字母间距
如果想在网页排版中设置文字间隔或者字母间隔就可以使用letter-spacing来实现.
如果我想设置英文单词之间的间距呢？可以使用word-spacing来实现。
10-10 段落排版--对齐
想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。
text-align:center;
text-align:left;
text-align:right;
11-1 元素分类
在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img><input>
11-2 元素分类--块级元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置<display:block>就是将元素显示为块级元素。
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
11-3 内联元素
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从页使用div元素具有内联元素特点。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
11-4 元素分类--内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
11-5 盒子模型（视频）
margin, padding,border
11-6 盒子模型（边框）
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
例子：p{border:2px dotted #ccc;}
11-7 盒子模型 边框（二）
现在有一个问题，如果有想为p标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：div{border-bottom:1px solid red;}
也可以 border-right, border-left, border top.
11-8 盒模型--宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。见图。
11-9 盒模型--填充
元素内容与边框之间是可以设置距离的，称之为“填充”(padding)。填充也可分为上、右、下、左(顺时针)。如下代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
11-10 盒模型--边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：div{margin:20px 10px 15px 30px;}
12-1 css布局模型
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
12-2 流模型
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
12-2 流模型（2）
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。
12-3 浮动模型
12-5 什么是层模型？
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
12-6 绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
12-7 层模型--相对定位
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
12-8 relative 和 absolute 的搭配使用
1. 被参照定位的元素一定要是参照定位元素的父元素。
<div id="box1"><!--被参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
2、被参照定位的元素必须加入position:relative;
3、参照定位的元素必须加入 position:absolute;
13-1 盒模型代码简写
通常有下面三种缩写方法:
1、如果top、right、bottom、left的值相同，写一个。如：margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：margin:10px 20px;
3、如果left和right的值相同，如下面代码：margin:10px 20px 30px;
13-2 颜色值缩写
关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
13-3 字体缩写
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
可以简写为：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
W3school 练习
1-不带下划线的链接
<a href="地址" style="textdecoration:none">这是一个链接！</a>
2-外部样式表
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
3-内部样式表
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>
4-插入图像作为超链接：
您也可以使用图像来作链接：
<p>
<a href="链接">
<img src="">
</a>
</p>
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 标签的方式：
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
5-设置图像在文本中对齐
<img src="链接" align="bottom">, 还可以用 middle, top.
6-图片浮动
<img src="链接" align="left">, 还可以用 right
7-改变图片大小
<img src="链接" width=100px height=100px>
8-无法显示图片时（比如由于浏览器不兼容），可以显示替换文本
<img src="链接" alt="向左转">
