HTML上机指导.docx_咨信网zixin.com.cn

资源描述

HTML简单网页制作一、大纲 HTML语法规范 HTML标签二、实验目标：掌握HTML语法规范的基本要求，能写出格式良好的HTML文档掌握学会使用HTML表单标签、超链接标签、表格标签等元素制作简单网页三、教学案例： 1.HTML语法规范 [1]标签要正确关闭正确：<p>欢迎来到HTML的世界</p> <br /> 错误：<p>欢迎来到HTML的世界 <br> [2]属性 ①属性必须有值正确：<input disabled="disabled" type="text" /> 错误：<input disabled type="text" /> ②属性值必须使用引号括起来，单引号、双引号都可以，推荐使用双引号正确：<input disabled="disabled" type="text" /> 错误：<input disabled=disabled type="text" /> [3]嵌套正确嵌套： <table> <tr> <td>单元格</td> </tr> </table> 交叉嵌套：<tr><td>单元格</tr></td> 不允许 2. HTML注释： 3.table标签 <table border="1" align="center" width="80%" height="100"> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td rowspan="2">单元格</td> </tr> <tr> <td>单元格</td> <td colspan="2">单元格</td> </tr> </table> <table border="1" align="center" cellpadding="5" cellspacing="10"> 。。。 </table> 4.a标签 <a href="page/target.html">Go to Target Page</a> 5.表单 (1)form标签 <form action="page/target.html" method="get" enctype="multipart/form-data"> </form> action：表单提交的目标地址 method：表单的提交方式 GET方式请求：page/target.html?username=Tom POST方式请求：page/target.html enctype：如果需要上传文件则指定enctype="multipart/form-data" (2)文本框把input标签type属性设定为text定义一个文本框 <input type="text" name="username" />键值对关系：username=Tom2014在服务器端通过username能够找到Tom2014 通过value属性指定默认值 (3)密码框把input标签的type属性设定为password定义一个密码框 <input type="password" name="pwd" value="30039472" />键值对关系：pwd=123456 通常不使用value属性设定密码框的默认值，因为显示的都是黑色的圆点 (4)提交按钮把input标签的type属性设定为submit定义一个提交按钮，作用是提交表单，提交按钮不需要指定name属性，value属性可以设定按钮在页面上显示的文字内容 <input type="submit" value="在按钮上显示的内容" /> (5)重置按钮把input标签的type属性设定为reset定义一个重置按钮，作用是把可以输入值的表单控件恢复为默认值，value属性可以设定按钮在页面上显示的文字内容 <input type="reset" value="点我重置"> (6)单选按钮把input标签的type属性设定为radio定义一个单选按钮，但要想实现“单选”，必须使用name属性将多个单选按钮设定为一组，才能实现彼此之间互斥。键值对关系不是：season=夏天，这里“夏天”是提示信息，给用户看的，从程序角度来说和单选按钮没有任何关系键值对关系应该是：season=summer <input type="radio" name="season" value="spring" />春天 <input type="radio" name="season" value="summer" />夏天 <input type="radio" name="season" value="autumn" />秋天 <input type="radio" name="season" value="winter" />冬天使用checked="checked"属性设置默认选中 <input type="radio" name="season" value="summer" checked="checked" />夏天 (7)多选框把input标签的type属性设定为checkbox定义一个多选框，使用name属性将多个多选框设定为一组，键值对关系：hobby= swimming 使用checked="checked"属性设置默认选中 <input type="checkbox" name="hobby" value="reading" />读书 <input type="checkbox" name="hobby" value="swimming" checked="checked" />游泳 <input type="checkbox" name="hobby" value="shopping" />购物 <input type="checkbox" name="hobby" value="sleeping" checked="checked" />睡觉 (8)普通按钮把input标签的type属性设定为button定义一个普通按钮，没有默认行为 <input type="button" value="普通按钮" /> (9)文件上传框把input标签的type属性设定为file定义一个文件上传框，此时form标签的enctype属性需设置为：multipart/form-data <input type="file" name="uploadFile" /> (10)表单隐藏域 <input type="hidden" name="liuwa" value="hiddenVal" />在页面上没有任何显示，但是可以随表单一起提交，通常用来携带一些后台程序需要用到的值 (11)多行文本框使用textarea标签定义一个多行文本框，rows控制高度，cols控制宽度键值对关系：content=多行文本框的默认值没有value属性 <textarea rows="10" cols="50" name="content">多行文本框的默认值</textarea> (12)多选下拉列表使用select标签定义下拉列表，使用option标签定义下拉列表的列表项 myList=item03 使用selected="selected"属性设定默认选中 <select name="myList"> <option value="item01">列表项01</option> <option value="item02">列表项02</option> <option value="item03" selected="selected">列表项03</option> <option value="item04">列表项04</option> <option value="item05">列表项05</option> </select> myMulList=mulItem01&myMulList=mulItem03&myMulList=mulItem05 <select name="myMulList" multiple="multiple"> <option value="mulItem01">多选下拉列表项01</option> <option value="mulItem02">多选下拉列表项02</option> <option value="mulItem03">多选下拉列表项03</option> <option value="mulItem04">多选下拉列表项04</option> <option value="mulItem05">多选下拉列表项05</option> </select> 6.列表无序列表 <ul> <li>火影忍者</li> <li>死神</li> <li>海贼王</li> <li>妖精的尾巴</li> </ul> 有序列表 <ol> <li>漩涡鸣人</li> <li>黑崎一护</li> <li>路飞</li> <li>妖精的尾巴</li> </ol> 7.标题标签 <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> 8.段落白日依山尽 <p>叶子的离去是风的追求，还是树的不挽留呢？</p> 黄河入海流 9.插入图片<img src="img/j.jpg" alt="一副图片" /> 10.HTML颜色  <p><font color="red">叶子的离去是风的追求，还是树的不挽留呢？</font></p>  <p><font color="#000000">叶子的离去是风的追求，还是树的不挽留呢？</font></p> <p><font color="#bc3">叶子的离去是风的追求，还是树的不挽留呢？</font></p>  <p><font color="rgb(0,0,255)">叶子的离去是风的追求，还是树的不挽留呢？</font></p> 11.框架使用frameset定义框架集，在frameset标签内使用frame定义框架把浏览器窗口分成3列，第一列占30%，第二列占30%，第三列占40% <frameset cols="30%,30%,40%"> 通过src属性指定关联的HTML文件的路径 <frame src="page/leftPage.html" /> 设定name属性后，可以使用超链接target属性让目标页面在当前框架中显示，详情见PPT 45页 <frame src="page/rightPage.html" name="rightFrame" /> 在整体的第三列里面再分成上下两行，各占50% <frameset rows="50%,50%"> <frame src="page/topPage.html" name="topFrame" /> <frame src="page/bottomPage.html" /> </frameset> </frameset> 如果浏览器不支持框架，则显示noframes里面body里面的内容，注意：如果没有noframes标签，body标签和frameset标签不能共存 <noframes> <body> 抱歉，您的浏览器不支持框架! </body> </noframes> 四、实验方式：每个学员必须独立完成五、任务任务1：使用今天所学内容制作一个注册页面，要求包括所有表单元素（时间：40分钟）任务描述：可以自己设定一个情境，比如模拟一个论坛注册页面，用文本框、密码框提交用户名、密码；用单选框提交性别；用多选框提交爱好；用多行文本框提交个性签名；用下拉列表选择喜欢的版块等等。任务目的：学会使用表单标签任务要求：将整个项目打包，压缩并且上传到作业平台。难点提示：布局方面可以使用<br />进行换行任务2：使用今天所学内容制作一个表格页面（时间：20分钟）任务描述：数据可以自己设定，比如学生成绩，员工工资等任务目的：学会使用HTML表格标签任务要求：将整个项目打包，压缩并且上传到作业平台。任务3：使用今天所学内容制作一个超链接页面（时间：10分钟）任务描述：创建一个index.html页面，加入两个超链接，分别链接到任务1和任务2的页面任务目的：学会使用HTML超链接任务要求：将整个项目打包，压缩并且上传到作业平台。难点提示：布局方面可以使用<br />进行换行

展开阅读全文