HTML上机指导.docx

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