实验三+用HTML表格进行网页排版

淮海工学院计算机工程学院实验报告书课程名:《Web应用开发技术》题目：实验三HTML表格进行网页排版班级：学号：姓名：评语：成绩：指导教师：批阅时间：年月日实验三用HTML表格进行网页排版一实验目的掌握HTML文档的结构；掌握常用的有关文本的标记及其属性；掌握img标记及指定src属性的方法；熟悉W3CHTMLValidator进行网页合法性验证的一般方法。二实验内容和要求实验内容:1.创建名为ex3的文件夹，在该文件夹里面创建一个网页文件sales.html，网页的标题为“ACME公司2013年销售输入”，使用HTML4Transitional文档类型声明，使用合适的表格标记及属性显示ACME公司2013的5种产品4个季度的销售额。显示效果如下（单元格数据为随机值）：产品/季度一季度二季度三季度四季度Helix200005654545654334543X-Super3234534655434534534Compact2x23432478765343443543MiniXooper7867546567634433543662.使用表格对教材64页图2-26的表单使用表格进行布局，保存为profile.html。3.使用W3C在线HTML验证工具验证上述文档的合法性，修改验证结果中出现的错误。实验要求：（1）需要每个同学独立完成所有的实验步骤，（2）要求使用label标记对相关的表单元素进行说明，即：labelfor=”elementId”Label/label（3）下课之前将实验报告的电子文档提交至教学平台。三实验步骤第一题：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=:lang=enheadmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8titleACME公司2013年销售输入/title/headbodytableborder=1trth产品/季度/thth一季度/thth二季度/thth三季度/thth四季度/th/trtrbgcolor=#66FFCCthHelix/thtd20000/tdtd565454/tdtd5654/tdtd334543/td/trtrthX-Super/thtd32345/tdtd34655/tdtd4345/tdtd34534/td/trtrbgcolor=#66FFCCthCompact2x/thtd234324/tdtd7876/tdtd53434/tdtd43543/td/trtrthMiniXooper/thtd7867/tdtd5465/tdtd6763443/tdtd354366/td/tr/body/html第二题：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=:lang=enheadmetahttp-equiv=Content-Typecontent=text/html;charset=UTF-8title表单/title/headbodyh1请正确填写您的个人信息，以方便我们及时与您联系！！！！/h1formid=form1name=form1method=posttabletrtdlabelfor=username姓名：/label/tdtdinputtype=textname=usernameid=username//td/trtrtdlabelfor=pass密码：/label/tdtdinputtype=passwordname=passid=pass//td/trtrtdlabelfor=pass2确认密码：/label/tdtdinputtype=passwordname=pass2id=pass2//td/trtrtdlabelfor=sex性别：/label/tdtdinputtype=radioname=sexid=radiovalue=radio男inputtype=radioname=sexid=radio2value=radio2女/td/trtrtdlabelfor=age年龄：/label/tdtdselectname=ageid=ageoption0-17岁/optionoptionselected=selected18-35岁/optionoption36-50岁/optionoption50岁以上/option/select/td/trtrtd最喜爱的语言:/tdtdlabelinputtype=checkboxname=html-langHTML/labellabelinputtype=checkboxname=css-langCSS/labellabelinputtype=checkboxname=js-langJavascript/label/td/trtrtd最高学历：/tdtdlabelinputtype=radioname=degree[]id=radio3value=dr/博士/labellabelinputtype=radioname=degree[]id=radio4value=ms/硕士/labellabelinputtype=radioname=degree[]id=radio5value=bs/学士及以下/label/td/trtrtd您的头像:/tdtdinputtype=imagesrc=image/55.jpgname=imgaelalt=您的头像//td/trtrtdlabelfor=suggestion您的建议：/label/tdtdtextareaname=suggestionid=suggestioncols=45rows=5请留下您的宝贵意见/textarea/td/trtrtd您的上传：/tdtdinputtype=filename=documentsize=20maxlength=500//p/td/trtrtdcolspan=2inputtype=submitname=buttonid=buttonvalue=提交/inputtype=resetname=button2id=button2value=重置//td/tr/table/form/body/html四实验结果第一题：第二题：五实验分析体会通过实验，理解掌握了什么？解决了什么问题？有何体会？…通过本次实验掌握了一些创建表格使用的基本标签，table标签：定义一个表格，tr：定义了表格中的行，td：定义了普通的单元格，th：定义了表头的单元格，通常文本黑体居中出现，caption：定义了表格的标题。刚学习的时候不知道上面几个标签的功能，通过反复练习书本上P53页的例题，反复在notepad++中打源代码，最后掌握了它们的属性并且能正确地定义。通过本次实验，学会了如何在网页中制作表格和表单，就像在excel中一样。但是对于书上的部分例题还不能完全理解，继续加油！