开始大风降温了,其实降到什么程度都无所谓,反正教室暖和,宿舍暖和,顶多就是路上冷点,这有什么呢
上午课程开始:
HTML是谁发明的?Tim Berners-lee,英国人,父母参与过世界上第一台计算机的制作
扩展名有htm和html,htm是为了和DOS操作系统兼容,所以最好使用htm,htm扩展名在Linux上也可以使用。
Standard Generalized Markup Language (SGML):包括html、xml都由SGML来定义
html是超强容错语言
建立一个html:first.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<title>我的第一个网页</title>
</head>
<body bgcolor="#rrggbb"> //rrggbb每一位都代表16进制的数字,比如纯红色就是#ff0000,
//6个0是纯黑色,6个f是纯白色,如果要调整成浅绿色,那么可以调整成#55dd99
<h1>我的第一个网页!</h1>
</body>
</html>
Meta元素:
分为两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)
HTTP-EQUIV定义响应报头信息(equivelent),其实是模拟响应报头的效果,因为页面一加载进来后
响应报头就被定义好了
http是面对无连接的协议,发送消息后立刻断开连接,所以请求中必须提供ip地址,text/html用于表明响应内容的格式,
Charset=gb2312是编码形式
gb2312编码是1980年制定的(说不准,老师忘了确切的时间),汉字编码是16位(65536),都收集齐了大概有6万多个汉字,
但是gb2312只是收集了常用的汉字,才3700多个;因此1994年推出了另外一个编码叫做gbk(国标的扩展编码),收集了1万多个
汉字(不包括繁体之类),gbk只是汉字编码,像少数民族的那些词语什么的不在范围之内。
Big5是台湾的繁体编码,如果把charset换为了big5的话,结果显示的是……乱码,浏览器发一个字节流请求给服务器,服务器发回来
后浏览器再显示,传过去的是用gb2312编码,但是你让服务器响应用big5来响应,会出错。浏览器可以去操作系统查看编码集,然后进行
响应的转换。
如果charset换成了iso-8859-1(这个编码是latin-1,是8位8位的来读的!)
当然,这些编码可以在查看的编码选项中设置!
ASCII码:美国标准信息交换码
出现乱码: 出现?的话,说明现有的编码映射到传过去的编码的空位中去了,好比应该是gb2312,但是响应的解码写错了,映射过去后正好
是映射到了那个编码的空位上(不含任何字体)
<Meta http-equiv="Content-Type" Content="text/html;Charset=gb2312">
Content-Language 文档语言
<Meta http-equiv="Content-Language" Content="zh-CN">
国家标准中定义中国语言是cn,com代表的是company,org代表的是组织。
goa代表政府,edu代表教育
text/html:html类型
text/plain: 文本类型
multipart/form-data:用于下载
application/msword、application/zip、application/pdf:告诉浏览器用word、zip和pdf的方式选择
对应的应用程序来将其打开。
在html中http-equiv只是模拟报头,绝对不可能设置报头,执行到这里的时候浏览器早就读入了报头,
jsp中可以设置响应报头
http-equiv="Refresh" 和 http-equiv="expires":
<Meta http-equiv="Content-Type" Content="text/html;Charset=gb2312">
<Meta http-equiv="refresh" Content="3;url=second.html"> //每3秒种刷新一次页面,并且刷新时跳转到second.html
<Meta http-equiv="expires" Content="0"> //根本不缓存!
<Meta http-equiv="refresh" Content="Wed,26 Feb 1997 08:21:57 GMT">
数字标识多长时间后失效,注意如果页面在本地的话也是不会去缓存的!
如果没有到截止日期的话,那么从internet临时文件中去找那个网页地址,如果到了截止日期的话,
那么就登陆internet用新的cookie去替换它。
像变化比较频繁的网页,不应该去设置有效期
<Meta name="Generator" content="EditPlus"> //
<Meta name="Keywords" content=""> //注意:搜索引擎的工作原理就是不停的到各个ip地址去搜索,先筛选的就是keywords里面
//的内容,并将其存入数据库中,所以新建的网站里面必须得有这个Keywords!!否则会
//被搜索引擎忽略。
<Meta name="Description" content="">
背景颜色
<body bgcolor="red">
可以直接写颜色英文名,也可以采用#rrggbb的形式,基本#号后面的RGB各色彩的深度
背景图片
<body backgroud="back-ground.gif">
给出图片文件位置,如图片小于页面时,将循环填充
背景音乐
<bgsound src=“background_sound.mid” loop=“-1”> 注意:这是一个单独标记,要放到<head>中使用
topmargin,leftmargin指定边界宽度
<font color="red" size="12" face="隶书">三秒种后跳转</font>
下划线:<u>文字</u>
代码:<code>文字</code>
删除线:<strike>文字</strike>
闪烁:<blink>文字</blink>
增强:<strong>文字</strong>
强调:<em>文字</em>
示例:<samp>文字</samp>
粗体:<b>文字</b>
斜体:<i>文字</i>
(sub与sup)
2<sup>3</sup>
<img alt="我的图片" src="" width="" height="" border="" style="border-color:red" align="center">
注意:这时候如果鼠标放到图片上面不动,会显示出“我的图片”,如果图片无法正常显示的话,那么会在图片背景上显示出“我的图片”
//注意cellspacing是边框的大小变大了,也就是单元格之间的间距变大了,cellpadding设置每个单元格之中内容和周围空白的间距
<table border="1" cellspacing="1" cellpadding="1" align="center">
<tr>
<td>fdkjlsa</td>
<td>sdjfakl</td>
</tr>
<tr>
<td colspan=2>dfa</td>
</tr>
</table>
<table border=1 align=center width="750" bgcolor=red height=600>
<tr>
<td width=100><img srt="" width=100 height=80 width=100></td>
<td>
1、新闻一
2、新闻二
</td>
</tr>
</table>
列表:
有序(OL)和无序(UL)
<OL type=a> //这样就从a、b、c开始排序
<LI>kdf
<LI>dfjskla
<LI>fsdajkl
</OL>
链接:
<a href="" target="_blank"> //默认值是_self,在自己的页面上打开,如果是_parent的话,会在整个框架上打开。
-------------------------------------------------------------------------
下午课程开始:
表单:
<form action="" method="">
用户名:<input type="text" name="username" size=19 maxlength=5
value="请输入用户名" onclike="this.value=''"><br> //鼠标单击后该文本框置空!
//maxlength属性设置了文本框中输入的最大字符的长度,比如某些特殊字符的输入,假如注册时的用户名
//长度输入的过长,超过了数据库中字段的要求,这样再插入可能就会出现无法插入或是截断字段值的问题
//应该用javaScript来动态的判断一下用户名的输入是否符合要求!
密码:<input type="submit" value="提交查询内容">
个人说明:
<textarea name="desc" cols="40" rows="10">
默认值 //文本框中文本域的默认值是要加载开始标签和结束标签之间的,而不是像text类型一样,需要用value指定。
</textarea><br>
<input type="hidenn" name="a" value="1"> <br/>
性别:
<input type=radio name=sex value="1">男
<input type=radio name=sex value="0">女<br>
爱好:
<input type="checkbox" name="hoby" value=1>读书
<input type="checkbox" name="hoby" value=2>画画
<input type="checkbox" name="hoby" value=3>游泳
<br>
学历:
<select name="degree">
<option value="1">小学</option>
<option value="2">中学</option>
<option value="3">大学</option>
</select><br>
<input type=submit value=提交>
<input type=reset value=重置> //将所有表单里面的属性恢复为默认值
<input type=button value="click me" οnclick="alert('hi,user!')"> //一般和javaScript关联起来
</form>
non-block space 非连续空格: 
action含义:提交的地址,默认提交给自己
method含义:默认是get提交,get提交是在url地址后面直接加上查询字符串。多个查询字符串之间用&来连接。
get、post、put、delete、options、trees、header等等,最常用的提交方法是get和post提交
如果是post提交,那么表单中的参数会被封装到请求的报头里面,然后传到action所指向的页面,让action去
接收
post请求报头:
POST /a.html HTTP/1.1
username=fdjkas&passowrd=euiwro
get请求报头:
GET /a.html?username=fdjkas&passowrd=euiwro HTTP/1.1
传递涉密参数或是大数量参数时都不能使用get提交!
---------------------------------------------------
框架:用于分隔窗口,
加入框架的页面不需要body元素,而是使用frameset!!
左右分:
<FRAMESET COLS="120,*" >
<FRAME SRC="a.htm" NAME="1">
<FRAME SRC="b.htm" NAME="2">
</FRAMESET>
上下分:
<FRAMESET ROWS="100,*">
<FRAME SRC="b.htm" NAME="2">
<FRAME SRC="c.htm" NAME="3">
</FRAMESET>
例子:
<frameset cols="120, *" frameborder="1" framespacing="12"> //左边一栏是120,剩下的都属于右边一栏,
//frameborder用来设置边框宽度,framespacing设置边框的宽度
<frame src="a.html">
<frameset rows="100,*"> //将右边一栏分为上下两部分,上边一部分的高度是100
<frame src="b.html">
<frame src="c.html" scrolling="no" noresize> //scrolling表明是否支持滚动条,noresize表明是否可以
// 手工拖动框架
</frameset>
</frameset>
<a href="a.html" target="这里填写_blank、_self、_parent、_top等等">dsjfak;</a>
注意:还可以分多个:cols="30,*,50"
-------------------------------------------
练习
作一个两列的表格,来表示一个注册的表单。
使用edit-plus的html编辑界面,编写的代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<form action="" method="post" name="form1">
<h1 align="center">请您输入如下的用户注册信息!</h1>
<table align="center" height="300" width="500" border="1">
<tr>
<td>姓名</td>
<td><input type="text" name="username" size=20></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" size=20></td>
</tr>
<tr>
<td>个人说明</td>
<td><textarea name="introduction" cols="30" rows="5"></textarea></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="swim">游泳
<input type="checkbox" name="hobby" value="skate">滑冰
<input type="checkbox" name="hobby" value="football">足球
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="certification">
<option value="1" selected>……</option>
<option value="primary">小学</option>
<option value="junior">中学</option>
<option value="university">大学</option>
</select>
</td>
</tr>
</table>
<p align=center>
<input type=submit value="提交">
<input type=reset value="重置">
</p>
</form>
</BODY>
</HTML>