HTML-3月20日课堂总结
1.图片热点
2.表单制作
3.课后作业
1.图片热点
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>表单</title> 6 </head> 7 8 <body> 9 <img src="../03-19/n0.jpg" usemap="map"/> 10 <map name="Map"> 11 <area shape="circle" coords="398,481,50" href="http://www.baidu.com/"/> 12 <area shape="rect" coords="198,339,433,403" href="http://www.360.com/"/> 13 </map> 14 <br /> 15 </body> 16 </html>
2.表单制作
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <form> 10 帐号:<input type="text" value="123" /><br /> 11 密码:<input type="password"/><br /> 12 备注:<textarea cols="35" rows="5"></textarea><br /> 13 提交按钮:<input type="submit" value="提交"/><br /> 14 重置按钮:<input type="reset" value="重置"/><br /> 15 普通按钮:<input type="button" value="登录"/><br /> 16 图片按钮:<input type="image" src="../03-19/n0.jpg" width="50"/><br /> 17 单选:<input type="radio" name="sex"/>男<br /> 18 单选:<input type="radio" name="sex"/>女<br /> 19 多选:<input type="checkbox" disabled="disabled"/>可乐</br> 20 多选:<input type="checkbox" />百事</br> 21 多选:<input type="checkbox" />芬达</br> 22 选择文件:<input type="file"/><br /> 23 下拉列表:<br /> 24 <select size="1"> 25 <option value="">汉堡</option> 26 <option>鸡腿</option> 27 <option selected="selected">薯条</option> 28 </select> 29 </form> 30 </body> 31 </html>
3.课后作业——制作注册界面
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>注册页面</title> 5 </head> 6 7 <body leftmargin="100" rightmargin="100"> 8 <table align="left" width="300" height="550" border="0" cellpadding="0" cellspacing="0"/> 9 <tr align="center" valign="middle"> 10 <td align="right">登陆用户名</td><td align="left"><input type="text" size="20" maxlength="2" /></td></tr> 11 <tr align="center" valign="middle"><td align="right">显示名称</td><td align="left"><input type="text" maxlength="4" /></td></tr> 12 <tr align="center" valign="middle"><td align="right">密码</td><td align="left"><input type="password" maxlength="8" /></td></tr> 13 <tr align="center" valign="middle"><td align="right">确认密码</td><td align="left"><input type="password" maxlength="8" /></td></tr> 14 <tr align="center" valign="middle"><td align="right">E-MAIL</td><td align="left"><input type="email" /></td></tr> 15 <tr align="center"><td align="right">性别</td><td align="left"><input type="radio" name="SEX">男<input type="radio" name="SEX">女</td></tr> 16 <tr align="center"><td align="right">性取向</td><td align="left"><select size="1"><option selected="selected">同性恋</option><option>异性恋</option><option>双性恋</option></select></td></tr> 17 <tr align="center"><td align="right">爱好</td><td align="left"><select size="1"><option selected="selected">听音乐</option><option>跑步</option><option>睡觉</option></select></td></tr> 18 19 <tr><td></td><td><input type="submit" value="确定"/><br /></td></tr> 20 </body> 21 </html>
特将表单界面加上边框
