第一周的学习内容主要是：html标签语言基础,css页面布局。以及实现一个简单登陆界面以及就分别用Post及Get方法实现的采取随机数传值。
一、html
在html的学习中我们了解了基础的html的标签、属性、标题、连接、图像及背景等。
以下是一个简单登陆界面的代码
<html>
<body background="Tuzki48.jpg">
<h1 align="center"><font size="5" face="arial" color="#00BFFF">思璇科技用户登录</h1>
<style>
.main{ width:400px; height:0px;background-color:; margin:0 auto; text-align:center; padding-top:250px;}
.cha{ height:20px;}
a{ color:#DA70D6;}
</style>
<form action="00.htm"method="post">
<div class="main">
<form action="main.htm"method="get">
<divclass="div1"><input class="cha"type="text" id="userName" placeholder="用户名或邮箱" />
<input class="cha"type="password" id="password" />
<input type="submit"id="submit" value="登陆" />
</div>
<div>
<inputname="chekbox" type="checkbox" /><fontstyle="font-size:12px;">记住我</font><a href="00.htm"style="padding- left:100px;"><fontstyle="font-size:12px;">忘记密码?</font></a><astyle="padding-left:100px;" href="01.htm"><fontstyle="font-size:12px;">注册</font></a>
</div>
</form>
</div>
</body>
</html>
在上述代码中div被频繁使用那么什么是div标签呢？
<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记<div>，那么该标签的作用会变得更加有效。<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素.div是html中一个常用的标签大家应该注意到了，<div></div>总是成对残在的，这个规则在html其他的标签中同样适用。
二、CSS
在css的学习中，除了背景、文本、字体、列表等。我们主要通过框模型的学习，了解到页面布局中内外编剧及边框的概念与演示。
CSS 框模型概述
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。
在这里我们需要注意的是外边距的合并。
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的 上外边距和下外边距就合并在一起，这样各处的距离就一致了。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。以下是相关代码
<html>
<head>
<styletype="text/css">
* {
margin:0;
padding:0;
border:0;
}
#d1 {
width:100px;
height:100px;
margin-top:20px;
margin-bottom:20px;
background-color:red;
}
#d2 {
width:100px;
height:100px;
margin-top:10px;
background-color:blue;
}
</style>
</head>
<body>
<div id="d1">
</div>
<div id="d2">
</div>
<p>请注意，两个 div 之间的外边距是 20px，而不是 30px（20px+ 10px）。</p>
</body>
</html>
<html>
<head>
<styletype="text/css">
* {
margin:0;
padding:0;
border:0;
}
#outer {
width:300px;
height:300px;
background-color:red;
margin-top:20px;
}
#inner {
width:50px;
height:50px;
background-color:blue;
margin-top:10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
<p>注释：请注意，如果不设置div 的内边距和边框，那么内部 div 的上外边距将与外部div 的上外边距合并（叠加）。</p>
</body>
</html>
在Post与Get方法的学习中，我们事先了通过随机数产生于输入的方法，对Post与Get方法有比较深入的了解。
1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
建议：
1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
以下是随机数生成与猜测的代码(asp.net)
WebForm1.aspx.cs
using System;
usingSystem.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace GuessNumber2
{
public partial class WebForm1 :System.Web.UI.Page
{
public static int number;
protected void Page_Load(object sender,EventArgs e)
{
if (!IsPostBack)
{
Session["count"] = 3;
Random d = new Random();
number = d.Next(5);
}
int count =Convert.ToInt32(Session.Contents["count"].ToString());
if(Request.Form["txtGuess"] == null)
return;
else
{
Response.Write("这个是返回的信息：");
if (count > 0)
{
int key =Convert.ToInt32(Request.Form["txtGuess"]);
if (number == key)
{
Response.Write("right" + number);
return;
}
else if (count <= 0)
{
Response.Write("你的机会用完了");
Session.Abandon();
return;
}
else
{
count--;
Session["count"] = count;
Response.Write("你猜错了！,你还有" + count + "机会。" + "随机数字是：" + number);
return;
}
key =Convert.ToInt32(Request.Form["txtGuess"]);
}
}
}
}
}
在这里涉及到session的使用：
Session即会话，是指一个用户在一段时间内对某一个站点的一次访问。
Session对象在.NET中对应HttpSessionState类，表示“会话状态”，可以保存与当前用户会话相关的信息。
Session对象用于存储从一个用户开始访问某个特定的aspx的页面起，到用户离开为止，特定的用户会话所需要的信息。用户在应用程序的页面切换时， Session对象的变量不会被清除。
对于一个Web应用程序而言，所有用户访问到的Application对象的内容是完全一样的；而不同用户会话访问到的Session对象的内容则各不相同。 Session可以保存变量，该变量只能供一个用户使用，也就是说，每一个网页浏览者都有自己的Session对象变量，即Session对象具有唯一性。
（1）将新的项添加到会话状态中
语法格式为：
Session ("键名") = 值
或者
Session.Add( "键名" , 值)
（2）按名称获取会话状态中的值
语法格式为：
变量 = Session ("键名")
或者
变量 = Session.Item("键名")
（3）删除会话状态集合中的项
语法格式为：
Session.Remove("键名")
（4）清除会话状态中的所有值
语法格式为：
Session.RemoveAll()
或者
Session.Clear()
（5）取消当前会话
语法格式为：
Session.Abandon()
（6）设置会话状态的超时期限，以分钟为单位。
语法格式为：
Session.TimeOut = 数值
Global.asax 文件中有2个事件应用于Session对象
事件名称 说明
Session_Start 在会话启动时激发
Session_End 在会话结束时激发
以下是我们的指导老师纪承的php实现代码：
<?php
session_start();
?>
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Insert titlehere</title>
</head>
<body>
<formaction="./a1.php" method="post">
Guess it is :<inputname="txtInput" /> <input type="submit"
value="yeah" />
</form>
<?php
function resetSession(){
session_destroy();
echo "finish. click buttonto restart this game~";
}
if(isset($_SESSION["guess"])==false|| $_SESSION["guess"]==""){
$answer = rand(0, 5);
$_SESSION["guess"] =$answer;
$_SESSION["count"]=3;
echo "U have 3 chances toguess the num , which is between 0 and 5";
}else{
if(intval($_SESSION["count"])<0){
echo "sorry, you have losethis game.";
resetSession();
}
else{
$userInput = intval($_POST["txtInput"]);
if($userInput==intval($_SESSION["guess"])){
echo "correct! you are solucky~";
resetSession();
}else
{
$_SESSION["count"]=intval($_SESSION["count"])-1;
if($_SESSION["count"]=="0"){
echo "worng Num, you havelose this game.";
resetSession();
}else{
echo "worng Num,now youhave only ". $_SESSION["count"] .'chance(s) to guess it ';
}
}
}//*/
}
?>
</body>
</html>
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
