HTML hyper text markup language
超文本标记语言
最高版本4.02
之后是XHTML
eXtensible hyper text markup language
扩展的超文本标记语言
HTML 最终的发展方向是HTML5
html/xhtml css javaScript称为客户端技术
客户端技术是在浏览器解释执行的。
客户端技术最大的难点在于浏览器的兼容性。
主流浏览器：IE,Firefox,Chrome,Safari（苹果系统用）,Opera
3.标记tag，也称为元素(element),它就是
完成某些功能的字符串。
4.标记的分类
4.1根据是否包含子标记或内容
单标记：<tag name/>
双标记：<tag name>...</tag name>
4.2根据是否换行
内连对象：不换行
块级对象：可自然换行
5。标记的属性
<标记名 属性名=“值”，属性名称=“值”/>
<标记名 属性名=“值”，属性名称=“值”>....</标记名>
6.xhtml文档的规范
a标记名必须为英文小写字母
b标记之间必须顺序嵌套
c单标记必须以/结尾
d属性名必须为英文小写字母
e属性值必须在引号之间
7.W3C的合法性验证
http://validator.w3.org
8.xhtml文档结构
<!DOCTYPE html PUBLIC DTD>
<html zmlns="http://www.w3.org">
<head>
<title>标题</title>
</head>
<body>
正文
</body>
</html>
解释：DTD（document type defination）
文档类型声明（文档类型定义）
DTD实现的功能是定义文档结构，
如谁是根元素，根元素有哪些以及子元素？
这些元素有声明属性？
这些属性哪些是必选，哪些是可选的？
等信息。
在xhtml中DTD主要有3类
Strict,严格类型
Transitional,过度类型（常用）
Frameset 框架类型
<html xmlns="http://www.w3.org/1999/xhtml">
<!--命名空间 name space-->，解决标记名称冲突
双标记：
加粗
<b></b>
strong
倾斜
<i></i>
em
下划线
u
删除线
s
strike
上标
sup
下标
sub
span标记：<span></span>
font标记（W3C不推荐，建议用css）
<font color="颜色" size="字号（1-7）" face="字体">。。。</font>
三、段落与换行
<p align="left|center|right">...</p>
换行
<br/>
四、标题
<h1 align="left|center|right">..</h1>
...
<h6 align="left|center|right">..</h6>
五、html的实体html entity
大于号>
小于号<
单引号'（IE不支持）
或'
双引号"
&符号&
不间断空格
版权©
注册商标®
日元¥
1.
浏览器支持的图像格式
gif ,支持透明色，支持动画，仅支持256种颜色
gpg/gpeg 不支持透色，不支持动画，但支持1670万种颜色
png，支持透色，不支持动画，仅支持颜色有256，1670万和4G三种
2.图像的标记
<img src ="图像url" width="宽" height="高" alt="注释" border="边框宽度"/>
A。src和alt属性必须存在
B。alt只有IE支持
title：注释所有浏览器都支持
如果title为空，但是要写，不能没有，这样可通过合法性验证
如果省略了图像的alt属性，
则无法通过W3C的合法性验证
七、路径
1。绝对路径
2.相对路径，从当前文档开始的路径
1）若同一目录，直接书写文档全称即可
2）若当前文档和目标文件所在目录在同一目录下
则书写成 目录名/目标文件全称（src ="./images/sun.jpg" ）
3）img src ="../images/zi.jpg"
..代表上一级目录
../..上2级目录
3.根相对路径，从站点的根目录开始的路径
总是以“/”开头（JSP中常用）
找网站绝对路径方法：
例如
http://www.xxx.cn/web/library/library.html
源代码看到
img src ="../images/zi.jpg"
那么绝对路径就是
http://www.xxx.cn/web/images/zi.jpg
八、链接
1.链接标记
<a href=""目标文档的url target="窗口形式">文本/图片</a>
target：_self 在自身打开
_blank 在新窗口打开
_parent 在父窗口打开
_top 顶窗口打开
框架名称：在指定框架打开
提示：
如果为图像加链接的话，将被蓝色框线包围
想去掉框线的话，给图像添加border="0"
或者通过css样式实现
2链接的表现形式
2.1）目标文档为网页，最常见的形态
静态网页：无交互 .htm .html
动态网页：有交互 .jsp .aspx .php .shtm .shtml
.htm .html也有伪静态（为了在搜索引擎中排名靠前）
2.2）链接到下载资源
首先将下载资源使用压缩软件/命令进行压缩
然后将链接的目标文档指向该压缩包
2.3）电子邮件的链接
<a href="mailto:邮件地址">文本/图像</a>
web day01pm: 看到1小时:18分
2.4)锚点
A创建锚点
<a name="名称"></a>
B链接到锚点
<a href="#锚点名称">文本/图像</a>
<a href="#目标文档url#锚点名称">文本/图像</a>
2.5）链接到javaSript脚本
<a href="javascript:JS代码">文本/图像</a>
2.6）空链接（没有目标文档，其行为由JS控制）
返回页面的顶部
<a href="#">文本/图像</a>
保持原始位置
<a href="javascript:void(0)">文本/图像</a>
九、表格
1。表格作用
A页面的布局（当前流行用DIV+CSS来布局）
B显示规则有序的数据
2。表格
<table>
<tr>
<td|th>..</td|th>
...
</tr>
...
</table>
表格的属性
th:居中加粗显示
width:宽度
height:高度
bgcolor:背景颜色
background:背景图像
border:边框宽度
bordercolor:边框颜色
align:水平对齐方式(left|center|right)
cellpadding:内边距（内容与框线之间的距离）
cellspacing:外边距（相邻单元格之间的距离）
单元格的属性
align:水平对齐方式(left|center|right)
valign:水平对齐方式(top|middle|bottom)
bgcolor:背景颜色
background:背景图像
rowspan:行合并的数目
colspan:列合并的数目
十、有序列表和无序列表
1.无序列表
<ul type="disc|circle|square">
<li>...<li>
...
</ul>
disc实心圆
circle空心圆
square实心方形
2.有序列表
<ol type="1|a|A|i|I" start="起始序号">
<li>...</li>
</ol>
?name=zhangsan&pwd=1234
？...&....&...
<td><input type="password" maxlength="6" name="pwd"/></td>
maxlength指字符个数，不是字节
<form method="post">
method="post"密码不显示在地址栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题1111</title>
</head>
<body>
正文.........
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题1111</title>
</head>
<body>
<p>3>2</p>
<h1 align="center">标题样式</h1>
<h6 align="center">标题样式</h6>
<p><font color="blue" size="3" face="微软雅黑"><i><b>文本样式文本样式</b></i></font></p>
<p><font color="blue" size="7" face="微软雅黑">文本样式文本样式</font></p>
<p><font color="blue" size="1">文本样式文本样式</font></p>
<p><font color="blue" size="2">文本样式文本样式</font></p>
<p><font color="blue" size="3">文本样式文本样式</font></p>
<p><font color="blue" size="4">文本样式文本样式</font></p>
<p><font color="blue" size="5">文本样式文本样式</font></p>
<p><font color="blue" size="6">文本样式文本样式</font></p>
<p><font color="blue" size="7">文本样式文本样式</font></p>
<p><b>加粗</b></p>
<p><i>倾斜</i></p>
<p><u>下划线</u></p>
<p><s>删除</s></p>
<p>3<sup>3</sup>=27</p>
<p>H<sub>2</sub>O</p>
<span>sss</span><span>222</span>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题1111</title>
</head>
<body>
<img src ="./1.jpg" title="真美啊" alt="注释" border="边框宽度"/>
￥
<p>¥5000</p>
<p>></p>
<p><</p>
<p>'</p>
<p>'</p>
<p>"</p>
<p>&</p>
<p>&amp</p>
<p>大于号>用&gt;表示</p>
<p>a b</p>
<p>a b</p>
<p>copyright©分公司的发给</p>
<p>®分公司的发给</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题1111</title>
</head>
<body>
<p>阿弥陀佛</p>
<img src ="./images/sun.jpg" title="真美啊" alt="真美啊" width="200" height="120" border="3"/>
<img src ="../images/zi.jpg" alt="注释" width="200" height="120" border="边框宽度"/>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link演示</title>
</head>
<body>
<!--
如果为图像加链接的话，将被蓝色框线包围
想去掉框线的话，给图像添加border="0"
或者通过css样式实现
-->
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度2</a>
<a href="http://www.baidu.com" target="_blank"><image src="zi.jpg" /></a>
<a href="http://www.baidu.com" target="_blank"><image src="zi.jpg" border="0"/></a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link演示</title>
</head>
<body>
<!--
如果为图像加链接的话，将被蓝色框线包围
想去掉框线的话，给图像添加border="0"
或者通过css样式实现
-->
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度2</a>
<a href="http://www.baidu.com" target="_blank"><image src="zi.jpg" /></a>
<a href="http://www.baidu.com" target="_blank"><image src="zi.jpg" border="0"/></a>
<a href="download/day01.rar" target="_blank">笔记下载</a>
<a href="mailto:sample@163.com">sample@163.com</a>
</body>
</html>
锚点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link演示</title>
</head>
<body>
<p>您遇到什么难题？</p>
<p> <a href="#q1">帮助1</a></p>
<p> <a href="#q3">帮助3</a></p>
<p> <a href="#q4">帮助4</a></p>
<p>......</p>
<h2>如何注册会员</h2>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<h2>会员操作1</h2>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p><a href="#">返回页面顶部</a></p>
<h2>帮助1<a name="q1"></a></h2>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p><a href="#">返回页面顶部</a></p>
<h2>帮助3<a name="q3"></a></h2>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p>......</p>
<p><a href="#">返回页面顶部</a></p>
<h2>帮助4<a name="q4"></p></h2>
<p>......</p>
<p>......</p>
<p>......</p>
</body>
</html>
锚点2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link演示</title>
</head>
<body>
<a href="06maodian0.html#q1">请参照"帮助1"(在另一个页面)</a>
</body>
</html>
javaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link演示</title>
</head>
<body>
<a href="javascript:window.alert('对不起,您无权进行删除操作')">删除</a><br/>
<a href="javascript:window.confirm('您确认要将该邮件放入回收站吗？')">放入回收站</a><br/>
</body>
</html>
emptyLink
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link演示</title>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<a href="#">这是#号的空链接，点击能返回页面的顶部</a><br/>
<a href="javascript:void(0)">这是javascript:void(0)的空链接</a><br/>
</body>
</html>
表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link演示</title>
</head>
<body>
<table cellspacing="0" cellpadding="10" border="1" width="600" align="center">
<caption>表格标题，呵呵</caption>
<tr>
<th>序号</th>
<th>主题</th>
<th>发件人</th>
<th>发件日期</th>
</tr>
<tr>
<td>1</td>
<td>求助</td>
<td>张三</td>
<td>2014-8-2</td>
</tr>
<tr>
<td>1</td>
<td>求助</td>
<td>张三</td>
<td>2014-8-2</td>
</tr>
<tr>
<tr>
<td>1</td>
<td>求助</td>
<td>张三</td>
<td>2014-8-2</td>
</tr>
</table>
</body>
</html>
表格2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link演示</title>
</head>
<body>
<h1 align="center">列合并</h1>
<table cellspacing="0" cellpadding="10" border="1" width="600" align="center">
<tr>
<th>序号</th>
<th>主题</th>
<th>发件人</th>
<th>发件日期</th>
</tr>
<tr>
<td>1</td>
<td>求助</td>
<td>张三</td>
<td>2014-8-2</td>
</tr>
<tr>
<td>1</td>
<td>求助</td>
<td>张三</td>
<td>2014-8-2</td>
</tr>
<tr>
<tr>
<td>1</td>
<td>求助</td>
<td>张三</td>
<td>2014-8-2</td>
</tr>
<tr>
<td colspan="4" align="center"><a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a></td>
</tr>
</table>
<h1 align="center">行合并</h1>
<table cellspacing="0" cellpadding="10" border="1" width="900" align="center">
<tr>
<td rowspan="4">x</td>
<td>x1</td>
</tr>
<tr>
<td>x2</td>
</tr>
<tr>
<td>x3</td>
</tr>
<tr>
<td>x4</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>link演示</title>
</head>
<body>
<!--Logo begin-->
<table cellspacing="0" cellpadding="0" border="1" width="950" align="center">
<tr>
<td><img src="images/xinwen.png" titel="新闻视界"/></td>
</tr>
</table>
<!--Logo end-->
<!--navi begin-->
<table cellspacing="0" cellpadding="10" border="1" width="950" align="center">
<tr align="center">
<td>首页</td>
<td>新闻</td>
<td>财经</td>
<td>金融</td>
<td>体育</td>
<td>社会</td>
<td>娱乐</td>
<td>游戏</td>
</tr>
</table>
<!--navi end-->
<!--要闻 Begin-->
<table cellspacing="0" cellpadding="10" border="1" width="950" align="center">
<tr>
<td>
<h2>国内要闻</h2>
<ul>
<li><a href="#">国家取消节日办</a></li>
<li><a href="#">国家取消节日办</a></li>
<li><a href="#">国家取消节日办</a></li>
<li><a href="#">国家取消节日办</a></li>
<li><a href="#">国家取消节日办</a></li>
<li><a href="#">国家取消节日办</a></li>
<li><a href="#">国家取消节日办</a></li>
<li><a href="#">国家取消节日办</a></li>
<li><a href="#">国家取消节日办</a></li>
<li><a href="#">国家取消节日办</a></li>
</ul>
</td>
<td>
<h2>国际要闻</h2>
<ul>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
<li><a href="#">苏格兰投票完成</a></li>
</ul>
</td>
<td>
<h2>亚运会金牌排行榜</h2>
<ol>
<li><a href="#">中国</a></li>
<li><a href="#">中国</a></li>
<li><a href="#">中国</a></li>
<li><a href="#">中国</a></li>
<li><a href="#">中国</a></li>
<li><a href="#">中国</a></li>
<li><a href="#">中国</a></li>
<li><a href="#">中国</a></li>
<li><a href="#">中国</a></li>
<li><a href="#">中国</a></li>
</ol>
</td>
</tr>
</table>
<!--要闻 End-->
<p align='center'>copyright ©2012-2015 上海浦东某公司版权所有</p>
<p align='center'>网站地图|联系我们|人才招聘</p>
<!--copy Begin-->
<!--copy End-->
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题1111</title>
</head>
<body>
<ul type="square">
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
<ol type="A" start="5">
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ol>
</body>
</html>
表单form
一、表单
1.表单的作用(P19)
收集客户端的信息，然后提交给服务器。
2.表单的标记
<form name="名称" action="服务器页面URL" method="提交方式(post|get)">
....
</form>
说明:
A.action指服务器页面URL,一般为动态类型的文件(如jsp、php等)。
B.method指表单的提交方式
get,提交字符数较少;提交数据以"名/值"对形式
附加在URL地址栏。
post,提交字符数理论上无限制;提交数据将由
HTTP请求头部一起发送。
3.表单控件(表单元素)
3.1说明
A.所有表单控件必须赋予含义明确的名称
3.2单行文本框
<input type="text" name="名称" value="值" size="显示宽度" maxlength="最大长度"/>
3.3密码框
<input type="password" name="名称" value="值" size="显示宽度" maxlength="最大长度"/>
3.4单选框
<input type="radio" name="名称" value="值" checked="checked"/>
说明:
A.一组类型的单选框名称必须相同。
B.必须为单选框赋予有效提交值。
3.5复选框
<input type="checkbox" name="名称" value="值" checked="checked"/>
说明:
A.一组类型的复选框名称必须相同。
B.必须为复选框赋予有效提交值。
3.6 按钮
提交按钮
<input type="submit" value="值" name="名称"/>
取消按钮
<input type="reset" value="值" name="名称"/>
自定义按钮(其行为由JS控制)
<input type="button" value="值" name="名称"/>
3.7 列表框
<select name="名称" size="显示高度" multiple="multiple">
<optgroup label="分组名称">
<option value="值" selected="selected">...</option>
...
</optgroup>
....
</select>
说明:
A.multiple="multiple"属性可以控制是否多选。
B.必须为列表选项赋予有效提交值。
3.8 多行文本框
<textarea name="名称" rows="行数" cols="列数">值</textarea>
3.9 隐藏域
<input type="hidden" name="名称" value="值"/>
说明:隐藏域提交正确但无需用户干涉的信息。
3.10 浏览框
<input type="file" name="名称"/>
说明:
A.具有浏览框的表单，其提交方式只能为post。
B.具有浏览框的表单必须设置enctype="multipart/form-data"属性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<!--命名空间 name space-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题1111</title>
</head>
<body>
<h1>增加管理员</h1>
<form method="get">
<!--method="post"
所有表单中的空间都要有一个属性叫name
作为回发服务器时的变量名
不需要回发服务器的控件，不必定义那么属性
*所有从页面上录入的都是字符串类型*-->
<table>
<tr>
<td>姓名：</td>
<td><input name="name" maxlength="10"/></td>
<td></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" maxlength="6" name="pwd"/></td>
<td></td>
</tr>
<tr>
<td>重复密码：</td>
<td><input type="password" maxlength="6" name="pwd"/></td>
<td></td>
</tr>
<tr>
<td>性别：</td>
<td>
<!-- value属性定义控件的内容 -->
<!-- checked属性定义默认选中项
label：点字也能选中单选框
-->
<label>
<input type="radio" name="gender" value="F" checked/>女士
</label>
<!--<input id="a" type="radio" name="gender" value="F" checked/>
<label for="a">女士</label>-->
<label>
<input type="radio" name="gender" value="M"/>男士
</label>
</td>
<td>
</td>
</tr>
<tr>
<td>角色：</td>
<td>
<!--
-->
<fieldset>
<legend>请选择</legend>
<label>
<input type="checkbox" name="role" value="sa"/>超级管理员
</label>
<label>
<input type="checkbox" name="role" value="teach"/>教师管理员
</label>
<label>
<input type="checkbox" name="role" value="stud" checked/>学生管理员
</label>
</fieldset>
</td>
<td>
</td>
</tr>
<tr> <!--select元素 选择列表
option 列表中的备选项
value属性定义在各自的option中
select默认选中项：selected
-->
<!--select 跟 radio
选项少用radio
选项多用select
-->
<td>状态：</td>
<td>
<select name="status">
<option value="1">启用</option>
<option value="0" selected>停用</option>
<option value="2">删除</option>
</select>
</td>
<td>
</td>
</tr>
<tr> <!--多选列表用法同单选列表
size默认选中的行数
multiple属性：设置多选
可以按住ctrl键多选
缺点：不直观
-->
<td>所属中心：</td>
<td>
<select name="center" size="5" multiple>
<option value="nj">南京中心</option>
<option value="sz">深圳中心</option>
<option value="gz">广州中心</option>
<option value="nn">南宁中心</option>
<option value="cc">长春中心</option>
<option value="hz">杭州中心</option>
<option value="sz">苏州中心</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>头像：</td>
<td colspan="2"><input type="file"/></td><!--此处并未真上传-->
</tr>
</tr>
<tr>
<td>描述：</td>
<td colspan="2">
<!--textarea（多行文本）：录入一段话时使用
style="resize:none":禁用拖拽
cols=30已经过时
控制宽高：style="width:30px;height:80"(css语法)
-->
<textarea style="width:180px;height:50;resize:none">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<!--type属性控制控件类型
默认值type="text"
value属性控制空间内容-->
<input type="submit" />
<input type="reset"/>
</td>
<td></td>
</tr>
</table>
<!-- 不需要客户看到，但是服务端程序需要的值放在隐藏域中 -->
<input type="hidden" value="1001" name="id"/>
</form>
</body>
</html>
div
<!doctype html>
<html lang="en">
<head>
<title>中国人名 </title>
</head>
<body>
<div id="a"></div><div id="b"></div><div id="c"></div><div id="d"></div>
<div id="莲花"><img src="images/lianhua.jpg"/></div>
<div id="太阳"><img src="images/sun.jpg"/></div>
<div id="新闻"><img src="images/xinwen.png"/></div>
<div id="佛字"><img src="images/zi.jpg"/></div>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<div id="list">
<div id="first">
<a href="#莲花"><div>看莲花</div></a>
<a href="#太阳"><div>看太阳</div></a>
<a href="#新闻"><div>看新闻</div></a>
<a href="#佛字"><div>看佛字</div></a>
<a href="#"><div>回到顶部</div></a>
</div>
</div>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
