0
点赞
收藏
分享

微信扫一扫

实验2​HTML基本标签二

三维控件研究 2022-05-23 阅读 70
html表单超链接Html/CSS前端开发









项目号、实验名称​

实验2​HTML基本标签（二）​

实​

验​

要​

求​

​

实验目标：​

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

​

实验所需软件：​​

Sublime_Text​

​

实​

验​

内​

容​

​

​实验内容：​

  1. 练习——W3C标准​

需求说明：​

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

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

    • ​

    实验2​HTML基本标签二_html​

    图1.1​W3C标准​

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

    需求说明：​

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

    2. 单击“新用户注册帮助”，将跳转到“regist.html”页面，该内页放“返回” ​

      3. 链接，点击返回到主页。​

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

举报

相关推荐

html基本标签

html前端java

HTML——基本标签

leetcodec语言算法

HTML 基本标签

经验分享面试

HTML基本标签

htmlpostman前端

HTML基本标签（三）

htmlide北大青鸟Html/CSS前端开发

HTML-基本标签

操作系统html前端

HTML|网页基本标签

html网页设计h5二级Html/CSS前端开发

基本结构标签(HTML)

html搜索虚拟化云计算

HTML基本标签（一）

html无法显示新闻资讯Html/CSS前端开发

HTML标签二

html前端html5
0 条评论