html
2013-10-26 09:55
330 查看
1.基础
<font color="red">hello</font>文字属性修改
Acid 测试兼容
IETester 继承了各个版本的ie
有WebBrowser,控件,基于IE核心,很多都是嵌入了一个webBrowser控件
ie基于Trident, 先很多基于WebKit引擎
去下载维基百科
静态页面,动态页面,
静态页面:html,可以使用Dreamweaver, Expression Web(FrontPage的改头换面)等工具,美工用.vs2010开发用
动态页面:C#,VB,PHP编写实现
选取颜色,最后一项,选择,全屏幕取色
2.HTML,XHTML,XML区别
XHTML:比较标准的html语法,开始结束都有很明显的标记
HTML: 中可以不闭合,为了遵循XHTML规范,推荐像XML一样严格关闭.<br/> <img src="1.gif"/>
XML:严格规范要求
格式标签:<p></p>创建段落;
注释: <!--注释内容-->
HTML不把" ""当空格,因为HTML中经常有缩进, 如果把缩进的空格在浏览器中以空格形式展现的话,排版会很困那
" 表示一个空格
为什么<>要用<>代替?就是因为<>有特殊含义,标签的定义
3.文字格式
<br/>只是回车,<p>是分段.<p>前后会有比较大的空白,而<br/>则没有.
<center>传智博客</center>居中显示
h标签,HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体
<b>a</b>粗体.
<font></font>字体标签 <font color="red">红色</font>
<font size="30" color="red">红色</font>
4.URL,超级链接,URL表示资源在网络中的地址,比如
http://127.0.0.1/a.htm、ftp://192.168.88.128/b.zip 还有URI的概念,比URL大
超级链接: <a href="http://www.rupeng.com">如腾网</a>
<a>中还可以嵌套图片,这样就是点击图片打开链接
<a href="http://www.rupeng.com"><imgsrc="http:www.rupeng.com/forum/templates/ogo.gif"/></a>
5.超链接深入
相对URL, /表示根目录, ../表示上一级目录, ../../上上级目录, ./或不写为当前目录,站内引用最好使用相对URL
<a>的target属性设定为""_blank"就可以在新窗口中打开超链接"
用name属性为<a>起名字:<a name="Last">这里是最后</a>,这样可以通过<a href="#Last">转到平台</a>来跳到超链接的部分..
<a href="http://www.baidu.com" target="_blank">baidu</a>
<!--国内大多习惯在新窗口中打开-->
6.图片
<image src="a.jpg"/>
src指向的文件地址 alt 属性为图片无法显示时的显示文本,鼠标方式去也会有悬浮提示"点击查看大图"
border属性指定边框,border="0",不显示边框;
with、height属性指定图片的大小,如果不指定则是图片的原始大小.
最好指定with,height,哪怕是原始尺寸大小,因果如果不指定大小,图片会不占位置,图片下载后才能调整大小,会造成页面很乱.
如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下witch,height来缩小,因为仍然会下载大图,会使得加载速度很慢.
7.列表、表格
<ul><li>灌水区</li><li>版务区</li><li>原创贴图</li></ul>. unordered list 无序
<ol></ol>有序的列表,用得很少
<table border="1">
<tr align="right"><td>姓名</td><td>性别</td></tr>
</table>
<tr>的属性:align,水平对齐,可选值left,right,center; valign,垂直对齐,可选top,middle,bottom
<td>也有align和valign.
(*)还可以使用rowspan,colspan进行单元格的合并,用vs可视化的功能来做就行
(*)表头的td可以用th代替,这样就会表头粗体,居中显示
建议表头用<thead>代替<tr>
<td>也有align和valign,<tr align="right"><td>姓名</td><td align="left">性别</td></tr>,td如果没有设置,默认继承父亲类型
8.表单
<form>标签为表单标签.如果要把数据提交到服务器,则需要
<input type="" value="" >
type 有bottun(普通按钮),text,checkbox(复选框),image(图片),submit(提交到服务器),file(选取文件),password(密码输入框),radio(单选),reset(重置按钮)
<input type="image" src="">
9.缩略图
正确的使用方法:缩略图最好用比较小的图片,原图用大的图
10.input表单详情
submit:点击submit按钮表单,中文IE下默认按钮文本为 提交查询 ,可以设置value改变
text::size(长度大小控制),maxlength(限制输入长度),readonly(只读)
checkbox::checked(是否被选上),必须有属性值,好的习惯很重要
radio::相同name属性为一组,不同radio设定不同的value值,这样通过取指定的name的值就可以知道谁被选中了
file::form的enctype必须设置multipart/for-data,method属性为POST(*)
image::使用src属性指定图片的地址,用来美化的“登录按钮”
11.<select>表现
用于创建类似于winform的ComboBox或者ListBox
如果size属性大于1就是listbox,否则就是combobox
<select size=""><!--大于1就是listbox-->
<option value="1">显示的文字</option>
</select>
实现选择是slected,不选择是需要value="-1",编程判断select
<optgroup label="不能选择"></optgroup>实现combobox中不能选择的项,很少用
1/5
12.textarea 多行文本
<textarea cols="100" rows="5">这里是帖子的默认内容</textarea>
可以设置大小,属性: cols, rows控制列,行
13.label 可以得到焦点,for属性指定要修饰的控件的ID
<label for="ma">婚否</label><input id="ma" type="checkbox"/>
14.fieldset: GroupBox效果 将一些控件框起来
<fieldset>
<legend>GroupBox类似效果控件</lengend>
<input type="text"/>
</fieldset>
1/7
15.css(层叠样式表),描述控件是什么样子
三种使用方法:
内联:style="background-color:Red;border-color:Green".可以描述各种
页面嵌入,在head,的title,后面写
<style type="text/css">
input{background-color:Red;border-color:Green;}
</style>
外部引用:
input
{
background-color:Red;
border-bottom-color:Green;
}
p
{
color:Blue;
}
<head>
<link type="text/css" rel="Stylesheet" href="css1.css" />
</head>
17.<div>
层<div>,表示一个层,可编程,把一堆东西块起来
层:<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏,整体移动等,div非常强大和常用
18.span
div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局,显示
19.常用样式
css计量单位,css中表示宽度,px(像素),30%(百分比),em(相对单位),.width:20px
background-color:Red 背景颜色
border-style:solid实现,默认无边框 边框风格 border-color 边框颜色 border-width 默认0无边框
display:元素是否显示,可选值none(不显示),block(显示为块级元素,此元素先后会带换行符),inline(显示为内联元素,元素前后没有换行符)
cursor,鼠标在元素上是显示的光标图案,可选值: cursor(默认光标), pointer(超链接上的手),text(输入),wait(漏斗,等待),help(帮助)等,cur或者ani格式
LI不显示圆点:LIST-STYLE-TYPE:none 一般设在li或者ul
20.样式选择器
样式适合哪些元素,三种,标签选择器,class选择器,id选择器
class选择器
.warning{background:Yellow;}
.heighlight{font-size:xx-large;cursor:help;}
21.样式优先级
<div class="warning" style="background-color:Blue;">
你好的,点我吧
</div>
style覆盖class,style的优先级比较高
22.标签+class选择器
class可以针对不同的标签,同样的样式名针对不同的样式
input.acc{color:Green;}
label.acc{background:blue;}
....
<input type="text" class="acc" value="sfdfdf" />
<label class="acc">3333333333333333333333</label>
23.id选择器
#username
{
font-size:xx-large;
}
<!--id选择器-->
<input id="username" type="text" value="aaaaaaaaa" />
style,class可以同时组合使用
<input id="username" class="acc" style="font-size:xx-large" type="text" value="123123123" />
24.更多选择器
关联选择器
P strong{background-color:Red;}
<strong>sdfsdfsdfdsf</strong>
<p><strong>sdfsdfdsfds</strong></p>
组合选择器
H1,H2.input{background-color:Red;border-color:Green;}
25.伪选择器 为标签的不同状态设定不同的样式
A:visited{TEXT-DECORATION: none}
A:active{TEXT-DECORATION: none}
A:link{TEXT-DECORATION: none}
A:hover{TEXT-DECORATION: underline}
26.自己的学习测试的代码
[html] view
plaincopy
<html>
<head>
<title>练习笔记测试</title>
<style type="text/css">
input{background-color:Red;border-color:Green;}
.warning{background:Yellow;}
.highlight{font-size:xx-large;cursor:help;}
input.acc{color:Green;}
label.acc{background:blue;}
#username
{
font-size:xx-large;
}
</style>
</head>
<body>
<font color="red">hello world</font> <a href="http://www.itcast.cn">itcast</a>
<br />
aa<br />
bb<br />
<br />
<a href="http://www.baidu.com" target="_blank">baidu</a>
<!--国内大多习惯在新窗口中打开-->
<p>
a</p>
<p>
bbb</p>
<!--class选择器-->
<div class="warning">
你好的,点我吧
</div>
<div class="highlight">
你好的,点我吧
</div>
<div class="highlight warning">
你好的,点我吧
</div>
<div>
<!--标签class选择器-->
<input type="text" class="acc" value="sfdfdf" />
<label class="acc">3333333333333333333333</label>
<!--id选择器-->
<input id="username" type="text" value="aaaaaaaaa" />
</div>
<table border="1">
<thead>
<tr>
<td>
姓名
</td>
<td>
年龄
</td>
</tr>
</thead>
<tr>
<td>
tom
</td>
<td>
<a href="www.baidu.com">30</a>
</td>
</tr>
</table>
<div style="border-color:Red;border-width:2px;border-style:dotted;display:block;cursor:pointer">
你好哇
</div>
<!--
<img src="2.gif" usemap="#aaa" />
<map nam="aaa">
<area>
</area>
</map>
<map nam="aaa2">
<area>
</area>
</map>
HTML中分段用<p>这个标签
北京 你好吗?
-->
<form action="Register.aspx"><!--把数据提交给谁-->
<input type="text" value="只读,限制10位" size="100" maxlength="10" readonly="readonly" />
<input type="checkbox" checked="checked" />
<input type="button" value="普通按钮" />
<input type="submit" />
<input type="file" />
<input type="image" src="123.gif" />
<br />
<table border="1">
<thead>
<td>
性别选择
</td>
</thead>
<tr>
<td>
<input type="radio" name="gender">男
</td>
</tr>
<tr>
<td>
<input type="radio" name="gender">女
</td>
</tr>
<tr>
<td>
<input type="radio" name="gender">保密
</td>
</tr>
<tr>
<td>
<select>
<option value="1">男</option>
<option value="2">女</option>
<option value="3" selected="selected">保密</option>
</select>
</td>
</tr>
<tr>
<td>
<select size="2" multiple="multiple">
<option selected="selected">男</option>
<option selected="selected">女</option>
<option>保密</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<optgroup label="性别选择">
<option value="male">男</option>
<option value="fmale">女</option>
<option value="not">保密</option>
</optgroup>
</select>
</td>
</tr>
</table>
<br />
</form>
<ul>
<li>第一帖</li>
<li>板凳</li>
<li>顶楼上</li>
</ul>
<br />
<fieldset>
<legend>GroupBox类似效果控件</legend>
<input type="text"/>
<br/>
<label for="txt1">焦点显示</label>
<input id="txt1" type="text" />
<label for="gend">婚否</label>
<input id="gend" type="checkbox"/>
</fieldset>
<fieldset>
<legend>样式表</legend>
<input type="text" value="123" style="background-color:Red;border-color:Green; "/>
<input type="text value="123" />
</fieldset>
<textarea cols="100" rows="5">这里是帖子的默认内容</textarea>
</body>
</html>
27.练习题目-登录界面
[html] view
plaincopy
<html>
<head>
<title>登录界面设计</title>
</head>
<body>
<table border="1">
<thead align="center"> <td colspan="2">登录界面</td> </thead>
<tr>
<td>
<label for="userName">用户登录:</label>
</td>
<td>
<input id="userName" type="text">
</td>
</tr>
<tr>
<td>
<label for="password">密码:</label>
</td>
<td>
<input id="password" type="password" />
</td>
</tr>
<tr>
<td>
<label for="validate">验证码:</label>
</td>
<td>
<input id="validate" type="text" />
<image src="1.gif" alt="验证码" title="输入验证"/>
</td>
</tr>
<tr>
<td>
<label for="memberPassword">记住密码</label>
</td>
<td>
<input id="memberPassword" type="checkbox" />
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="登录" />
</td>
</tr>
</table>
</body>
</html>
28.练习题目--注册表单
[html] view
plaincopy
<html>
<head>
<title>
注册页面
</title>
</head>
<body>
<table>
<thead align="center">
<td colspan="2">
注册界面
</td>
</thead>
<tr>
<td>
<label for="userName">用户名:</label>
</td>
<td>
<input id="userName" type="text" />
</td>
</tr>
<tr>
<td>
<label for="password">密码:</label>
</td>
<td>
<input id="password" type="password"/>
</td>
</tr>
<tr>
<td>
<label for="passwordAgain">重复密码:</label>
</td>
<td>
<input id="passwordAgain" type="password"/>
</td>
</tr>
<tr>
<td>
<label for="province">省份:</label>
</td>
<td>
<select id="province">
<option value="1">浙江省</value>
<option value="2">河北省</value>
<option value="3">北京</value>
<option value="4">上海</value>
<option value="5">河南省</value>
<option value="6">黑龙江省</value>
</select>
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input id="nan" name="sex" type="radio" /><label for="nan">男</label>
<input id="nv" name="sex" type="radio" /><label for="nv">女</label>
<input id="mimi" name="sex" type="radio" /><label for="mimi">保密</label>
</td>
</tr>
<tr>
<td>
职业:
</td>
<td>
<input id="xs" name="job" type="radio"/><label for="xs">学生</label>
<input id="zy" name="job" type="radio"/><label for="zy">公司职员</label>
<input id="qt" name="job" type="radio"/><label for="qt">其他</label>
</td>
</tr>
<tr>
<td>
爱好:
</td>
<td>
<fieldset>
<legend>爱好</legend>
<input id="ds" type="checkbox"/><label for="ds">登山</label>
<input id="lq" type="checkbox"/><label for="lq">篮球</label>
<input id="zq" type="checkbox"/><label for="zq">足球</label>
<input id="dsh" type="checkbox"/><label for="dsh">读书</label>
<input id="yy" type="checkbox"/><label for="yy">游泳</label>
</fieldset>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册">
</td>
</tr>
</table>
</body>
</html>
<font color="red">hello</font>文字属性修改
Acid 测试兼容
IETester 继承了各个版本的ie
有WebBrowser,控件,基于IE核心,很多都是嵌入了一个webBrowser控件
ie基于Trident, 先很多基于WebKit引擎
去下载维基百科
静态页面,动态页面,
静态页面:html,可以使用Dreamweaver, Expression Web(FrontPage的改头换面)等工具,美工用.vs2010开发用
动态页面:C#,VB,PHP编写实现
选取颜色,最后一项,选择,全屏幕取色
2.HTML,XHTML,XML区别
XHTML:比较标准的html语法,开始结束都有很明显的标记
HTML: 中可以不闭合,为了遵循XHTML规范,推荐像XML一样严格关闭.<br/> <img src="1.gif"/>
XML:严格规范要求
格式标签:<p></p>创建段落;
注释: <!--注释内容-->
HTML不把" ""当空格,因为HTML中经常有缩进, 如果把缩进的空格在浏览器中以空格形式展现的话,排版会很困那
" 表示一个空格
为什么<>要用<>代替?就是因为<>有特殊含义,标签的定义
3.文字格式
<br/>只是回车,<p>是分段.<p>前后会有比较大的空白,而<br/>则没有.
<center>传智博客</center>居中显示
h标签,HTML定义了<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体
<b>a</b>粗体.
<font></font>字体标签 <font color="red">红色</font>
<font size="30" color="red">红色</font>
4.URL,超级链接,URL表示资源在网络中的地址,比如
http://127.0.0.1/a.htm、ftp://192.168.88.128/b.zip 还有URI的概念,比URL大
超级链接: <a href="http://www.rupeng.com">如腾网</a>
<a>中还可以嵌套图片,这样就是点击图片打开链接
<a href="http://www.rupeng.com"><imgsrc="http:www.rupeng.com/forum/templates/ogo.gif"/></a>
5.超链接深入
相对URL, /表示根目录, ../表示上一级目录, ../../上上级目录, ./或不写为当前目录,站内引用最好使用相对URL
<a>的target属性设定为""_blank"就可以在新窗口中打开超链接"
用name属性为<a>起名字:<a name="Last">这里是最后</a>,这样可以通过<a href="#Last">转到平台</a>来跳到超链接的部分..
<a href="http://www.baidu.com" target="_blank">baidu</a>
<!--国内大多习惯在新窗口中打开-->
6.图片
<image src="a.jpg"/>
src指向的文件地址 alt 属性为图片无法显示时的显示文本,鼠标方式去也会有悬浮提示"点击查看大图"
border属性指定边框,border="0",不显示边框;
with、height属性指定图片的大小,如果不指定则是图片的原始大小.
最好指定with,height,哪怕是原始尺寸大小,因果如果不指定大小,图片会不占位置,图片下载后才能调整大小,会造成页面很乱.
如果网页上要显示小图(比如缩略图),不要仅仅是把大图设定一下witch,height来缩小,因为仍然会下载大图,会使得加载速度很慢.
7.列表、表格
<ul><li>灌水区</li><li>版务区</li><li>原创贴图</li></ul>. unordered list 无序
<ol></ol>有序的列表,用得很少
<table border="1">
<tr align="right"><td>姓名</td><td>性别</td></tr>
</table>
<tr>的属性:align,水平对齐,可选值left,right,center; valign,垂直对齐,可选top,middle,bottom
<td>也有align和valign.
(*)还可以使用rowspan,colspan进行单元格的合并,用vs可视化的功能来做就行
(*)表头的td可以用th代替,这样就会表头粗体,居中显示
建议表头用<thead>代替<tr>
<td>也有align和valign,<tr align="right"><td>姓名</td><td align="left">性别</td></tr>,td如果没有设置,默认继承父亲类型
8.表单
<form>标签为表单标签.如果要把数据提交到服务器,则需要
<input type="" value="" >
type 有bottun(普通按钮),text,checkbox(复选框),image(图片),submit(提交到服务器),file(选取文件),password(密码输入框),radio(单选),reset(重置按钮)
<input type="image" src="">
9.缩略图
正确的使用方法:缩略图最好用比较小的图片,原图用大的图
10.input表单详情
submit:点击submit按钮表单,中文IE下默认按钮文本为 提交查询 ,可以设置value改变
text::size(长度大小控制),maxlength(限制输入长度),readonly(只读)
checkbox::checked(是否被选上),必须有属性值,好的习惯很重要
radio::相同name属性为一组,不同radio设定不同的value值,这样通过取指定的name的值就可以知道谁被选中了
file::form的enctype必须设置multipart/for-data,method属性为POST(*)
image::使用src属性指定图片的地址,用来美化的“登录按钮”
11.<select>表现
用于创建类似于winform的ComboBox或者ListBox
如果size属性大于1就是listbox,否则就是combobox
<select size=""><!--大于1就是listbox-->
<option value="1">显示的文字</option>
</select>
实现选择是slected,不选择是需要value="-1",编程判断select
<optgroup label="不能选择"></optgroup>实现combobox中不能选择的项,很少用
1/5
12.textarea 多行文本
<textarea cols="100" rows="5">这里是帖子的默认内容</textarea>
可以设置大小,属性: cols, rows控制列,行
13.label 可以得到焦点,for属性指定要修饰的控件的ID
<label for="ma">婚否</label><input id="ma" type="checkbox"/>
14.fieldset: GroupBox效果 将一些控件框起来
<fieldset>
<legend>GroupBox类似效果控件</lengend>
<input type="text"/>
</fieldset>
1/7
15.css(层叠样式表),描述控件是什么样子
三种使用方法:
内联:style="background-color:Red;border-color:Green".可以描述各种
页面嵌入,在head,的title,后面写
<style type="text/css">
input{background-color:Red;border-color:Green;}
</style>
外部引用:
input
{
background-color:Red;
border-bottom-color:Green;
}
p
{
color:Blue;
}
<head>
<link type="text/css" rel="Stylesheet" href="css1.css" />
</head>
17.<div>
层<div>,表示一个层,可编程,把一堆东西块起来
层:<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理,比如整体隐藏,整体移动等,div非常强大和常用
18.span
div是将内容放到一个矩形的区块中,会影响布局,而span只是把一段内容定义成一个整体进行操作,但不影响布局,显示
19.常用样式
css计量单位,css中表示宽度,px(像素),30%(百分比),em(相对单位),.width:20px
background-color:Red 背景颜色
border-style:solid实现,默认无边框 边框风格 border-color 边框颜色 border-width 默认0无边框
display:元素是否显示,可选值none(不显示),block(显示为块级元素,此元素先后会带换行符),inline(显示为内联元素,元素前后没有换行符)
cursor,鼠标在元素上是显示的光标图案,可选值: cursor(默认光标), pointer(超链接上的手),text(输入),wait(漏斗,等待),help(帮助)等,cur或者ani格式
LI不显示圆点:LIST-STYLE-TYPE:none 一般设在li或者ul
20.样式选择器
样式适合哪些元素,三种,标签选择器,class选择器,id选择器
class选择器
.warning{background:Yellow;}
.heighlight{font-size:xx-large;cursor:help;}
21.样式优先级
<div class="warning" style="background-color:Blue;">
你好的,点我吧
</div>
style覆盖class,style的优先级比较高
22.标签+class选择器
class可以针对不同的标签,同样的样式名针对不同的样式
input.acc{color:Green;}
label.acc{background:blue;}
....
<input type="text" class="acc" value="sfdfdf" />
<label class="acc">3333333333333333333333</label>
23.id选择器
#username
{
font-size:xx-large;
}
<!--id选择器-->
<input id="username" type="text" value="aaaaaaaaa" />
style,class可以同时组合使用
<input id="username" class="acc" style="font-size:xx-large" type="text" value="123123123" />
24.更多选择器
关联选择器
P strong{background-color:Red;}
<strong>sdfsdfsdfdsf</strong>
<p><strong>sdfsdfdsfds</strong></p>
组合选择器
H1,H2.input{background-color:Red;border-color:Green;}
25.伪选择器 为标签的不同状态设定不同的样式
A:visited{TEXT-DECORATION: none}
A:active{TEXT-DECORATION: none}
A:link{TEXT-DECORATION: none}
A:hover{TEXT-DECORATION: underline}
26.自己的学习测试的代码
[html] view
plaincopy
<html>
<head>
<title>练习笔记测试</title>
<style type="text/css">
input{background-color:Red;border-color:Green;}
.warning{background:Yellow;}
.highlight{font-size:xx-large;cursor:help;}
input.acc{color:Green;}
label.acc{background:blue;}
#username
{
font-size:xx-large;
}
</style>
</head>
<body>
<font color="red">hello world</font> <a href="http://www.itcast.cn">itcast</a>
<br />
aa<br />
bb<br />
<br />
<a href="http://www.baidu.com" target="_blank">baidu</a>
<!--国内大多习惯在新窗口中打开-->
<p>
a</p>
<p>
bbb</p>
<!--class选择器-->
<div class="warning">
你好的,点我吧
</div>
<div class="highlight">
你好的,点我吧
</div>
<div class="highlight warning">
你好的,点我吧
</div>
<div>
<!--标签class选择器-->
<input type="text" class="acc" value="sfdfdf" />
<label class="acc">3333333333333333333333</label>
<!--id选择器-->
<input id="username" type="text" value="aaaaaaaaa" />
</div>
<table border="1">
<thead>
<tr>
<td>
姓名
</td>
<td>
年龄
</td>
</tr>
</thead>
<tr>
<td>
tom
</td>
<td>
<a href="www.baidu.com">30</a>
</td>
</tr>
</table>
<div style="border-color:Red;border-width:2px;border-style:dotted;display:block;cursor:pointer">
你好哇
</div>
<!--
<img src="2.gif" usemap="#aaa" />
<map nam="aaa">
<area>
</area>
</map>
<map nam="aaa2">
<area>
</area>
</map>
HTML中分段用<p>这个标签
北京 你好吗?
-->
<form action="Register.aspx"><!--把数据提交给谁-->
<input type="text" value="只读,限制10位" size="100" maxlength="10" readonly="readonly" />
<input type="checkbox" checked="checked" />
<input type="button" value="普通按钮" />
<input type="submit" />
<input type="file" />
<input type="image" src="123.gif" />
<br />
<table border="1">
<thead>
<td>
性别选择
</td>
</thead>
<tr>
<td>
<input type="radio" name="gender">男
</td>
</tr>
<tr>
<td>
<input type="radio" name="gender">女
</td>
</tr>
<tr>
<td>
<input type="radio" name="gender">保密
</td>
</tr>
<tr>
<td>
<select>
<option value="1">男</option>
<option value="2">女</option>
<option value="3" selected="selected">保密</option>
</select>
</td>
</tr>
<tr>
<td>
<select size="2" multiple="multiple">
<option selected="selected">男</option>
<option selected="selected">女</option>
<option>保密</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<optgroup label="性别选择">
<option value="male">男</option>
<option value="fmale">女</option>
<option value="not">保密</option>
</optgroup>
</select>
</td>
</tr>
</table>
<br />
</form>
<ul>
<li>第一帖</li>
<li>板凳</li>
<li>顶楼上</li>
</ul>
<br />
<fieldset>
<legend>GroupBox类似效果控件</legend>
<input type="text"/>
<br/>
<label for="txt1">焦点显示</label>
<input id="txt1" type="text" />
<label for="gend">婚否</label>
<input id="gend" type="checkbox"/>
</fieldset>
<fieldset>
<legend>样式表</legend>
<input type="text" value="123" style="background-color:Red;border-color:Green; "/>
<input type="text value="123" />
</fieldset>
<textarea cols="100" rows="5">这里是帖子的默认内容</textarea>
</body>
</html>
27.练习题目-登录界面
[html] view
plaincopy
<html>
<head>
<title>登录界面设计</title>
</head>
<body>
<table border="1">
<thead align="center"> <td colspan="2">登录界面</td> </thead>
<tr>
<td>
<label for="userName">用户登录:</label>
</td>
<td>
<input id="userName" type="text">
</td>
</tr>
<tr>
<td>
<label for="password">密码:</label>
</td>
<td>
<input id="password" type="password" />
</td>
</tr>
<tr>
<td>
<label for="validate">验证码:</label>
</td>
<td>
<input id="validate" type="text" />
<image src="1.gif" alt="验证码" title="输入验证"/>
</td>
</tr>
<tr>
<td>
<label for="memberPassword">记住密码</label>
</td>
<td>
<input id="memberPassword" type="checkbox" />
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="登录" />
</td>
</tr>
</table>
</body>
</html>
28.练习题目--注册表单
[html] view
plaincopy
<html>
<head>
<title>
注册页面
</title>
</head>
<body>
<table>
<thead align="center">
<td colspan="2">
注册界面
</td>
</thead>
<tr>
<td>
<label for="userName">用户名:</label>
</td>
<td>
<input id="userName" type="text" />
</td>
</tr>
<tr>
<td>
<label for="password">密码:</label>
</td>
<td>
<input id="password" type="password"/>
</td>
</tr>
<tr>
<td>
<label for="passwordAgain">重复密码:</label>
</td>
<td>
<input id="passwordAgain" type="password"/>
</td>
</tr>
<tr>
<td>
<label for="province">省份:</label>
</td>
<td>
<select id="province">
<option value="1">浙江省</value>
<option value="2">河北省</value>
<option value="3">北京</value>
<option value="4">上海</value>
<option value="5">河南省</value>
<option value="6">黑龙江省</value>
</select>
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input id="nan" name="sex" type="radio" /><label for="nan">男</label>
<input id="nv" name="sex" type="radio" /><label for="nv">女</label>
<input id="mimi" name="sex" type="radio" /><label for="mimi">保密</label>
</td>
</tr>
<tr>
<td>
职业:
</td>
<td>
<input id="xs" name="job" type="radio"/><label for="xs">学生</label>
<input id="zy" name="job" type="radio"/><label for="zy">公司职员</label>
<input id="qt" name="job" type="radio"/><label for="qt">其他</label>
</td>
</tr>
<tr>
<td>
爱好:
</td>
<td>
<fieldset>
<legend>爱好</legend>
<input id="ds" type="checkbox"/><label for="ds">登山</label>
<input id="lq" type="checkbox"/><label for="lq">篮球</label>
<input id="zq" type="checkbox"/><label for="zq">足球</label>
<input id="dsh" type="checkbox"/><label for="dsh">读书</label>
<input id="yy" type="checkbox"/><label for="yy">游泳</label>
</fieldset>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册">
</td>
</tr>
</table>
</body>
</html>
相关文章推荐
- 如何把html(form1)中的值用Submit传给serch.aspx页面,在serch.aspx又如何获取呢?(收集)
- Frame框架在Html中的应用详解
- html之marquee详解
- PHP将字符串转为HTML实体引用
- Android TextView使用HTML处理字体样式、显示图片等
- HTML字符实体 转义字符串列表
- 将数据库信息汇总为HTML表格用浏览器打开
- DedeCMS首页网址中去掉带index.html的解决方法
- 如何选择Html.RenderPartial和Html.RenderAction
- HTML中为何P标签内不可包含DIV标签? (转)
- html js jquery 前端 wap
- 全栈JavaScript之路(十八)HTML5 自己定义数据属性
- HTML页面内块级元素内折行显示
- HTML特殊字符的html、js、css写法汇总
- HTML&CSS学习二之web页面建设
- jQuery中的text(),html(),val()用法
- php语法写在html中无法被解析
- HTML img标签之 onError onLoad onAbort 事件
- ThinkPHP5 对html页面中的url传参操作
- meta是用来在HTML文档中模拟HTTP协议的响应头报文