今天先是学习了基础的css样式
<html>
<head>
<title></title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style type = "text/css">
*{
padding:; /*内填充边距为0；*/
margin:; /*外边框边距为0；*/
}
div.big{
margin : 0px auto; /*设外边框的大小，auto属于填充；*/
border:1px solid red; /*设置红色的实线边框；*/
width:800px;
}
h1{
color:red; /*文本颜色；*/
text-decoration: underline; /*下划线；*/
text-align : center; /*文本居中；*/
background-color:#33ffcc; /*文本背景颜色；*/
}
p{
color:#; /*设置文本颜色为紫色；*/
text-indent: 1cm; /*缩进元素中文本的首行；*/
word-spacing: 10px; /*设置文本行间空格的距离；*/
}
.p1{
text-indent: 1cm; /*缩进元素中文本的首行*/
text-align : left; /*文本水平居左*/
}
p.p2{
color:#; /*设置文本颜色；*/
text-indent: 1cm; /*缩进元素中文本的首行；*/
word-spacing: 10px; /*设置文本行间空格的距离；*/
}
p.p3{
letter-spacing: 1em; /*规定字符间距；*/
}
p.p5{
text-align : right; /*文本居右对齐；*/
}
</style>
</head>
<body>
<h1>原标题：在厄瓜多尔媒体发表署名文章</h1> <div class = "big"> <div class = "p1">央视网消息（新闻联播）：11月16日，在对厄瓜多尔*进行国事访问前夕，国家主席在厄瓜多尔《电讯报 》发表题为《搭建中厄友好合作的新桥》的署名文章。</div> <p class = "p2">指出，厄瓜多尔是我这次拉美之行的首站。这是中厄建交以来中国国家主席首次访问厄瓜多尔。我带着中国人民的友好情谊和发展两国关系的良好愿望而来，期待搭建起连接中厄两国新的友好合作之桥。</p>
<p class = "p3">指出，中国和厄瓜多尔虽然远隔重洋，但友谊的纽带将我们紧紧相连。今年4月，厄瓜多尔遭受强烈地震灾害。中国*和人民第一时间向厄瓜多尔*和人民提供了力所能及的援助。作为厄瓜多尔的真诚朋友，我们将积极参与灾后重建，帮助灾区人民早日重建家园，早日恢复宁静美好的生活。</p> <p>习强调，中国和厄瓜多尔都是发展中国家，有着相似的历史遭遇和共同的奋斗目标。建交36年来，我们相互理解、相互支持、相 互帮助，积累了深厚的政治互信和友好情谊。中方坚定支持厄瓜多尔人民探索符合本国国情的发展道路，支持厄方为实现经济多元化发展 所作的努力，支持厄方在国际和地区事务中发挥积极作用。2015年1月，我同科雷亚总统一道宣布两国建立战略伙伴关系，两国政治互信 和战略合作由此获得了新的强劲动力。我们要做真诚互信的好伙伴，共同发展的好伙伴，世代友好的好伙伴，南南合作的好伙伴，搭建起 便于双方人民扩大友好交往的坚实桥梁，推动中厄关系向更高水平迈进。</p><br> <p class = "p5" >责任编辑：隗俊 </p> </div> </body>
</html>
效果如图：
关于CSS层叠样式，由于并没有过多的预习，所以只能参照API手册做相应的样式，参考了手册做的样式。感想就是觉得，css样式确实能更合理的，美观的进行排版。在div与span模块的安排时，遇到了些问题，不过都和同学进行了讨论与学习，更深刻的认识了下两者的差别。
关于两者的差别
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表（共同点）。
两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
详解：1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：
测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>
2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span>
========================================================================================================
下午就继续学习了下昨天的知识点：表单
<html>
<head>
<title>视频同步：表单</title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
</head>
<body>
<caption><h1 align = "center">注册界面</h1></caption>
<table border = "" width = "" align = "center" bordercolor = "#ffffff">
<form name = "form" method = "post" action = "login.php">
<tr>
<th align = "center">用户名</th>
<td><input type = "text" name = "username"></td>
</tr>
<tr>
<th align = "center">密码</th>
<td><input type = "password" name = "userpwd"></td>
</tr>
<tr align = "center">
<th>性别</th>
<td>
<input type = "radio" name = "sex" value = "男" checked = "checked"/>男 <!--默认选择-->
<input type = "radio" name = "sex" value = "女"/>女
</td>
</tr>
<tr align = "center">
<th>兴趣爱好</th>
<td>
<input type = "checkbox" name = "like" value = "游戏" checked = "checked" />游戏 <!--默认选择-->
<input type = "checkbox" name = "like" value = "射箭"/>射箭<br/>
<input type = "checkbox" name = "like" value = "滑冰"/>滑冰
<input type = "checkbox" name = "like" value = "旅行"/>旅行
</td>
</tr>
<tr align = "center">
<th>位置</th>
<td>
<select name = "city">
<option value = "北京市" selected = "selected">北京市<option><!--默认选择-->
<option value = "南京市">南京市<option>
<option value = "东京市">东京市<option>
</select>
</td>
</tr>
<tr>
<td colspan = "">
<textarea name = "intro" cols = "" height = "">自我介绍</textarea>
</td>
</tr>
<tr>
<td align = "center" colspan = "">
<input type = "file" name = "file">
</td>
</tr>
<tr>
<td align = "center" colspan = "">
<input type = "button" value = "注册">
</td>
</tr>
</form>
</table>
</body>
</html>
效果如图：
以下是我部分笔记
表单：
1、表单的概念：
表单不要用来获取客户端用户数据信息的。如：注册表单、查询表单、登录表单；
2、表单的工作原理：
浏览有表单的界面，填写一些必要的信息，然后点击某个按钮进行提交。
这些表单数据通过互联网，传递到服务器上。
服务器上有专门的程序，对表单数据进行验证。
表单的制作分为两部分：一是前端的制作，二是后台php对表单数据的处理。
往地址栏中追加数据的方式发送账号密码。
表单的属性：
1、属于块元素；
2、name；表单名字；名字主要是给javascript使用；js主要用来做客户端表单验证；
3、method:表单的提交方式：get和post。
4、action:指定表单的处理程序;一般是PHP文件；
如果action为空，表单数据提交给了当前文件，它自己来处理；
5、enctype：指定表单数据的编码方式，对表单数据的一个加密；这个属性只能用于当method属性等于post时；有两个值
a、application/x-form-urldecoded //无上传项时，默认为该值（默认的加密方式）；
b、multipart/form-data //上传文件时，该值必须是自己
get方法和post方法：
1、get提交方式；
是将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。
如： file:///D:/文档/视频同步/login.php?username=叶芸榕&userpwd=qwe
login.php 是表单处理程序；
username=叶芸榕&userpwd=qwe 为表单提交的数据，又称之为“查询字符串”。
action文件和查询文件用“&”分隔。
每两个表单元素之间使用“&“符号分隔开来。
表单名称和表单值之间使用“=”分隔。
如果某个表单数据不想往服务器提交数据，那么，则不必给它添加name属性。因为没有name属性则无法获取其值。
get方式的特点；
1、不能提交敏感数据。如：密码。
2、只能提交少量数据。因为地址栏中的长度有限制。
3、get方式不能上传附件。
2、post提交式：
post提交方式，不是将表单数据追加到地址上，而是直接传给表单处理程序。
post方式的特点：
1、post提交的数据相对安全。
2、post可以提交海量数据。
3、post方式可以上传文件。
需要注意的是，地址栏传输数据的方式默认是get方式。
表单元素：
1、单行文本域；
语法格式：<input type = "text" 属性 = "值">
属性：
name：文本框的名字，命名规则是：可以包含字母、数字、下划线，只能以字母开头；
type：表单元素的类型。
value：表单元素的值。
size：文本框的长度。以“字符”为单位。
MaxLength:最大长度。最多可以输入多少个字符。
readonly：只读属性；可以选中不能修改；readonly = "readonly"
disabled:禁用属性；不能选中，不能修改。
2、单行密码域：
语法格式：<input type = "password" 属性 = "值">
属性与单行文本域一模一样；
3、单选按钮：
语法格式：<input type = "radio" 属性 = "值">
常用属性：
name：元素的名称；
value：元素的值；
checked: 默认选择某项；chaecked = checked;
注意：一组单选按钮，只能选择一个，但name的值必须一致。如:name = "sex"
单选按钮用户不能自己输入内容，用户只能选择，因此必须为它指默认值"value"
4、复选框：
语法格式：<input type = "checkbox" 属性 = "值">
常用属性：
name：元素的名称；
value：元素的值；
checked：默认选择。checked = "checked"
注意：复选框也是一组选项，因此name的值必须一致。在PHP中，使用数组来获取多个同名的name的值。
复选框可以一次选择多个，也可以一个都不选。
5、下拉列表：
语法格式：
<select name = "city">
<option value = "北京市">北京市<option>
<option value = "南京市">南京市<option>
<option value = "东京市">东京市<option>
</select>
select 属性：只有一个name
option属性有两个：
value:元素的值；
selected：默认选择； selected = "selected"
6、文本区域
语法格式：
<textarea name = "名称" cols = "宽度" rows = "高度"></textarea>
常用属性：
name；元素名称
value；文本内容
cols；宽度（多少字符宽度）
rows；高度（是指几行高度）
注意：<textarea>和</textarea>之间是默认文本；
7、各种按钮
a、提交按钮：<input type = "submt" value = "提交表单">
b、重置按钮：<input type = "reset" value = "重新填写">
c、图片按钮：<input type = "image" value = "url">
d、普通按钮：<input type = "button" onclick = "...(相应的操作代码)" value = "name">
普通按钮本身是不具备任何功能的，一般要与js程序配合使用，实线相应的功能。
8、隐藏域
就是一看看不见的框，用以传递一些数据，而这些数据不想个客户看到，基本用于PHP后台程序，比如修改某条新闻时，要传递ID号，只需要传递，而不需要其他人看见。
9、上传文件
语法格式：<input type = "file" 属性 = “值”>
常用属性:
name：表单元素的名称；
value：表单元素的值，这个值其实就是上传的文件名。value属性是只读属性。这个value来源于手动选择上传的文件，而不能用户 指定一个路径。为了安全起见，value是只读的；
10、<caption>表格标题
语法格式<caption></caption>
提示：<caption>标记是<table>的子标记。<caption>标记放在<table>标记之后。
相对昨天而言，今天又接触了些新的表单知识，总算是学完了相关的知识点
===============================================================================
然后就学了学框架的搭建：
以下是主框架的代码：
<html>
<head>
<title>00</title>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
</head>
<frameset cols = "200,*" frameborder = "yes" border = "5">
<!--划分框架标记；cols划分框：左边200，剩下都给右边；frameborder：是否显示边框；边框粗细；-->
<frame src = "视频同步：框架_left.html" noresize = "noresize"> <!--不能调整窗口大小-->
<frame src = "视频同步：框架_right.html" name = "right">
</frameset>
</html>
左框架代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body bgcolor = "#99ffff">
<a href = "随堂练习02.html" target = "right">随堂练习：CSS样式</a><br/>
<a href = "Syllabus.html" target = "right">课程表</a><br/>
<a href = "视频同步：表单.html" target = "right">视频同步：表单</a><br/>
</body>
</html>
右框架代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body bgcolor = "#33cccc"> </body>
</html>
效果如图所示：
点击第一个链接：
第二个链接的效果
第三个点击效果
以下是我学习的笔记
一、框架的概念：
框架技术：将一个浏览器窗口划分成若干个小窗口，每个小窗口显示一个独立的小窗口。
二、框架集和框架页：
框架集<frameset>:主要用来划分窗口。
框架页<frame>:主要用来指定窗口默认显示的网页地址。
三、<farmeset>属性：
cols:划分左右型框架。
cols = "200,*" //左框架宽度为200，剩下的都是右框架；
cols = "180,*,180" //左框架和右框架的宽分别为180px；剩下的都是中间框架；
cols = "20%,*" //划分框架值可以用百分比表示；
rows：划分上下框架。
写法一样；
注意：不能同时划分上下左右；rows和cols不能同时用；每个框架只能用其中的一个；
fameborder：是否显示框架的边框线；取值1和0；
border:边框线的粗细；
bordercolor:边框颜色；
四、<frame>框架页的属性
src：该小窗口中准备显示的网页；
noresize:不能调整窗口大小；如：noresize = "noresize";
scrolling:是否显示滚动条，取值：1和0；yes或no；auto(自动)；
name:给当前的小窗起名；
五、<noframes>含义
描述：当你的浏览器不支持框架时，显示提示的信息；一般情况下IE6不支持；
语法格式:
<noframes>提示信息</noframes>
六、关于框架嵌套
以上运用的就是关于框架的学习以及嵌套；