0
点赞
收藏
分享

微信扫一扫

实验2​HTML基本标签二









项目号、实验名称

实验2HTML基本标签(

实验目标:

  1. 掌握Web开发的行业规范和标准
  2. 掌握超链接的基本语法、超链接的三类应用场合
  3. 掌握使用各种表单元素实现表单页面
  4. 掌握制作语义化的表单和表单的高级用法
  5. 掌握HTML5新的表单元素

实验所需软件:

Sublime_Text

实验内容

  1. 练习——W3C标准

需求说明:

编写HTML代码,实现如图1.1所示页面效果

  • 要求使用<!DOCTYPE>标签添加文档类型声明,遵守HTML5标准。
  • 使用语义化的标签dl-dt-dd组织内容结构
  • 使用<div>分区标签作为整个页面的容器。
  • 实验2​HTML基本标签二_html

    图1.1W3C标准

    2. 练习——超链接与特殊符号。

    需求说明:

    编写HTML代码实现导航菜单的链接,如图1.2所示,要求实现以下功能。

    1. 单击“新用户注册帮助”,将跳转到“regist.html”页面,该内页放“返回”
    2. 链接,点击返回到主页。

    3. 单击“联系我们”,将自动打开本机的电子邮件程序,邮件地址自行设置。
    4. 单击“用户登录帮助”,将跳转到本页面中“登录”的位置。
    5. 在底部,实现版权信息的内容。

    实验2​HTML基本标签二_超链接_02

    图1.2 超链接与特殊符号

    3.练习——人人网注册页面

    需求说明:

    编写HTML代码,实现如图1.3所示页面效果

  • 注册邮箱、密码、姓名和验证码最多能容纳的字符数分别是50、16、8和5
  • 默认情况下,性别中的“男”处于选中状态
  • 生日下拉列表框中的1991年11月30日处于默认显示状态
  • 提交按钮使用素材中提供的图片代替
  • 邮箱文本框中默认文本为“student@bdqn.cn ” ,且文本框不可修改
  • 单击文字“电子邮箱”、“设置密码”、“真实姓名”、“验证”时鼠标的光标焦点移
  • 动到对应的文本框里

  • 单击“男”选中其对应的单选按钮,单击“女”选中其对应的单选按钮
  • 选择身份的下拉列表框被禁止使用
  • 使用html5新标签实现注册邮箱
  • 实验2​HTML基本标签二_html_03

    图1.3 人人网注册页面

    4 练习——简易求职表

    需求说明:

  • 使用语义化的标签制作简易求职表
  • 提交地址:login.jsp,提交方法:post
  • 用隐藏域提交求职者姓名“zhangsan”
  • “协议”只读,“提交”按钮禁用
  • 使用html5新属性实现“照片”多文件上传
  • “用户名”提示信息“请输入6位字母和数字组合的用户名”
  • “密码”页面加载时自动获得焦点必填项内容不能为空

实验2​HTML基本标签二_超链接_04

图1.4 简易求职表

练习一:

效果图

实验2​HTML基本标签二_html_05

实现代码:

<!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>

练习二:

上部:

实验2​HTML基本标签二_html_06

尾部:

实验2​HTML基本标签二_超链接_07

Regist.html:

实验2​HTML基本标签二_超链接_08

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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>

<body>
<a href="help.html">返回</a>
</body>
</html>

练习三:

效果图:

实验2​HTML基本标签二_超链接_09

实现代码:

<!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>

练习四:

效果图:

实验2​HTML基本标签二_html_10

实现代码:

<!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的使用更加的熟练与得心应手。

举报

相关推荐

0 条评论