项目号、实验名称 | 实验2HTML基本标签(二) | |||
实 验 要 求 | 实验目标:
实验所需软件: Sublime_Text | |||
实 验 内 容 | 实验内容:
需求说明: 编写HTML代码,实现如图1.1所示页面效果。
图1.1W3C标准 2. 练习——超链接与特殊符号。 需求说明: 编写HTML代码实现导航菜单的链接,如图1.2所示,要求实现以下功能。 链接,点击返回到主页。
图1.2 超链接与特殊符号 3.练习——人人网注册页面 需求说明: 编写HTML代码,实现如图1.3所示页面效果。 动到对应的文本框里
图1.3 人人网注册页面 4 练习——简易求职表 需求说明:
图1.4 简易求职表 | |||
实 验 过 程 及 结 果 | 练习一: 效果图
实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>img和span标签练习</title> </head> <body> <h1>促销信息</h1> <div> <dl> <dt><img src="images/computer.jpg" alt="Acer上网本,特惠拍卖" title="Acer上网本,特惠拍卖"></dt> <dd>拍卖Acer上网本<br/> 奔腾双核,1G内存,200G硬盘</dd> <dd>跳楼疯抢价<span style="color:red;font-size:70px";>1</span>元起</dd> </dl> </div> </body> </html> 练习二: 上部:
尾部:
Regist.html:
Help.html实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>锚链接</title> </head> <body> <p><img src="image/logo.jpg" width="305" height="104" alt="logo" /> <a href="regist.html">[新用户注册帮助]</a> <a href="#marker">[用户登录帮助]</a> <a href="mailto:86@qq.com">[联系我们]</a> </p> <h1>新手指南 - 登陆或注册</h1> <h2>购物流程</h2> <img src="image/help_steps.jpg" width="752" height="67" /> <h2>新用户注册</h2> <h4>Step 1 点击页面右上方的“注册”按钮注册聚美优品账号。</h4> <img src="image/login_step1.jpg" width="550" height="132" /> <h4>Step 2 注册前请仔细阅读《聚美优品用户协议》,如无异议请点击“同意以下协议并注册”。请根据相应提示在信息栏内填入您的注册信息。</h4> <img src="image/signup_step2.jpg" width="716" height="588" /> <p>注册成功后系统将自动登录您的账号,并转至聚美优品首页。</p> <h2><a name="marker">登录</a></h2> <h4>Step 1 如您已经拥有聚美账号,请点击页面右上方的“登录”按钮</h4> <img src="image/login_step1.jpg" width="550" height="132" /> <h4>Step 2 在登录页面的信息栏内填入对应信息,点击“登录”按钮进行登录,或通过选择登录框下方的合作账号进行快速登录。登录成功后,系统将自动跳转至聚美优品首页。</h4> <img src="image/login_step2.jpg" width="716" height="528" /> <p>© 2010-2018 北京创锐文化传媒有限责任公司 JUMEI.COM 保留一切权力 客服: </p> </body> </html> Regist.html代码: <!DOCTYPE html> 练习三: 效果图:
实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>人人网注册页面完善版</title> </head> <body> <img src="image/renren_titile.gif" width="500px"> <p>人人网,中国 <strong>最真实、最有效</strong>的社会平台,加入人人网,找回老朋友,结交新朋友。</p> <label><p>电子邮箱:<input name="email" type="email" size="20" maxlength="50" value="student@bdqn.cn" readonly/></p></label> <label><p>设置密码:<input type="password" size="20" maxlength="16"/></p></label> <label><p>真实姓名:<input type="name" size="20" maxlength="8"/></p></label> <p>性别:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女</p> <form action="#" method="post"> <p>生日: <select name="selectList"> <option value="">1990</option> <option value="" selected>1991</option> <option value="">1992</option> <option value="">1993</option> <option value="">1994</option> <option value="">1995</option> <option value="">1996</option> <option value="">1997</option> <option value="">1998</option> <option value="">1999</option> </select>年 <select name="selectList"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> <option value="">6</option> <option value="">7</option> <option value="">8</option> <option value="">9</option> <option value="">10</option> <option value="" selected>11</option> <option value="">12</option> </select>月 <select name="selectList"> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> <option value="">5</option> <option value="">6</option> <option value="">7</option> <option value="">8</option> <option value="">9</option> <option value="">10</option> <option value="">11</option> <option value="">12</option> <option value="">13</option> <option value="">14</option> <option value="">15</option> <option value="">16</option> <option value="">17</option> <option value="">18</option> <option value="">19</option> <option value="">20</option> <option value="">21</option> <option value="">22</option> <option value="">23</option> <option value="">24</option> <option value="">25</option> <option value="">26</option> <option value="">27</option> <option value="">28</option> <option value="">29</option> <option value="" selected>30</option> <option value="">31</option> </select>日</p> </form> <p>为什么要填写我的生日?</p> <p>我现在: <select name="selectList" disabled> <option value="0" selected>请选择身份</option> <option>医生</option> <option>老师</option> </select> (非常重要) </p> <p><img src="image/renren_code.gif"><a href="#">看不清换一张?</a></p> <label><p>验证码:<input type="text" ize="20" maxlength="5"></p></label> <a href="#"> <img src="image/renren.gif"> </a> </body> </html> 练习四: 效果图:
实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易求职表</title> </head> <body> <form action="login.js" method="post"> <fieldset style="width:300px;"> <legend>申请表</legend> <input type="hidden" name="name1" value="zhangsan"> <p>姓名: <input type="text" name="name" placeholder="请输入6位字母和数字组合的用户名"></p> <p><label>密码: <input type="password" name="pass" required></label></p> <p>照片: <br><input type="file" name="files" multiple/></p> <p>感兴趣的职位: <br><input type="radio" name="jog" >web设计<input type="radio" name="" id="jog">web开发</p> <p>向往城市 <select name="cs"> <option value="" selected>请选择</option> <option value="">包头</option> </select> </p> <p><input type="hidden" name="userid" value="zhangsan" /></p> <p>协议: <br><textarea name="textarea" cols="30" rows="5" readonly>求职信息必须真实,准确,本网站只负责向企业推荐. </textarea></p> <p><input name="agree" type="checkbox" />我认真阅读并接受以上协议</p> <p>经验: <select name="jy"> <option value="">无经验</option> <option value="">有经验</option> </select> </p> <input type="submit" name="submit" value="提交" disabled> <input type="reset" name="reset" value="重置"> </fieldset> </form> </body> </html> | |||
实 验 总 结 | 通过这次的实验练习了使用超链接实现页面间导航,使用各种表单元素实现表单页面,制作语义化的表单,使用表单的高级用法,使用了HTML5新的表单元素.掌握超链接的基本语法、超链接的三类应用场合。让我对web的使用更加的熟练与得心应手。 |