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

合集下载

02.HTML_常用标记、使用表格实现网页布局

TR属性
Width,height Align:left,center,right Valign:bottom,middle,top
TD属性
Width,height Align valign
合并单元格
Co--->
练习
上课示例代码重新写一次用表格模拟网页布局：整个页面分为四块，最上面一块放置logo，左边放置链接，右边显示内容，最下面放置版权声明
总结
特殊字符标记图像标记 HR标记滚动字幕列表标记超链接表格标记注释
下一讲内容
表单表单控件
谢谢!
HR 标记
<hr width=“” size=“” align=“” color=“” noshade=“”/>
滚动字幕
<marquee ></marquee> 属性：
Direction :内容滚动方向，值： left,right,up,down Scrollamount:滚动速度 Behavior:滚动方式,值： scroll,alternate,slide,loop Scrolldelay:时间间隔 Bgcolor，width，height
表格<table> 标题<caption></caption> 表头<thead></thead> 表身<tbody></tbody> 表尾<tfoot></tfoot> </table>
TBODY
表身<tbody> 行<tr> 单元格<td></td> </tr> </tbody>

工作报告之html网页制作实验报告

html网页制作实验报告【篇一：html实验报告】武夷学院实验报告课程名称：电子商务网站设计与开发_ 项目名称：_基于html的网页设计姓名：林元卿专业：旅游管理班级：3班学号：20136031005实验操作成绩（百分制）__________ 实验指导教师签字：__________）实验报告成绩（百分制）__________ 实验指导教师签字：__________【篇二：html标记的综合应用网页设计实验报告】学生实验报告学院：软件与通信工程学院课程名称：网页设计基础专业班级： 08软件与通信工程学院4班姓名：陈贝贝学号： 0088225学生实验报告一、实验综述1、实验目的及要求实验目的：通过用html语言进行编辑，使学生了解网站的制作流程；了解html表单标记的应用；了解html表格标记的应用；掌握html的基本概念、文档的基本结构；掌握html文档的结构、html设计文字排版；掌握html插入多媒体；掌握html基本标记，包括标题、背景图片、图像、水平线、字体编辑、段落、超链接、文本堆砌等的使用方法。

熟练掌握html中的常用标记的名称及用途。

熟练掌握对html语言文字结构的理解；掌握各种元素的使用；熟练掌握图片、动画、声音的嵌入以及超级连接的控制和应用，结合实际，巩固课堂中所学的理论知识。

实验要求：以个人独立完成的方式，完成一个用html语言进行编辑的网页制作，实现一个具有独立主题的网页制作。

2、实验仪器、设备或软件带ie浏览器的计算机，windows的写字板、记事本。

二、实验过程（实验步骤、记录、数据、分析）step1：设计网站logo，网站的标准色彩，并且确定网站主题和网站栏目，一切设计完成后开始构建页面。

我定义的主题是个人网站，所以主要突出自己的个性特质。

logo是sky dream，寓意是我的梦游园。

色彩主页是以蓝色为主，强调梦感。

栏目分为主页，日志（我的印记），相册（美丽瞬间），个人档案（我的万花筒），心情（我的叨叨）和留言板（留言星星河）。

用HTML语言制作简单的网页

电子科技大学电子工程学院标准实验报告（实验）课程名称用HTML语言制作简单的网页电子科技大学教务处制表电子科技大学实验报告学生姓名：万羽学号：2902103035 指导教师：伍瑞钦一、实验室名称：科B457二、实验项目名称：用HTML语言制作简单的网页三、实验原理：1.网页（1）网页就是在浏览器上看到的一页，网页也称为Web页。

（2）主页通常是进入网站首先浏览的网页，具有引导用户浏览整个网站内容的作用。

（3）超链接是网页中的特殊标记。

它指向了WWW中的其他资源，如其他网页、网页的另一个段落、声音文件等。

这些资源可以位于自己的计算机上，也可以位于其他计算机上。

用作超链接的标记可以是一段文字、一幅图像，也可以是一幅图像的一部分。

在浏览网页时，单击超链接就可以跳转到超链接所指向的资源。

超链接像一根一根的线一样，将各种网页链接在一起，形成一个庞大的信息网。

2.HTML语言（1）HTML语言就是超文本标记语言，是网页制作的基础，也是基本的工具，使用其他任何工具制作的网页，最终都要以HTML方式存储在计算机里。

（2）HTML的脚本可用任何一种文本编辑器进行编写，如记事本、Microsoft Word等。

保存时要将脚本保存成纯文本格式，扩展名必须是.htm。

（3）HTML脚本的基本结构。

HTML脚本总是以<html>标记开头，</html>标记结尾，在<html>和</html>标记之间是HTML的所有内容，一般情况下它分为两部分：头部和主体。

头部总是由<head>和</head>标记定义的，其中包含了HTML脚本的标题和说明信息；头部下面是HTML脚本的主体部分，它以<body>作为起始标记，</body>作为结束标记，其中所包含的就是在浏览器中所看到的内容，包括文字、图片、动画等。

3.FrontPageFrontPage是一种简单易学的Web管理和网页制作的软件。

使用html编制网页(实验报告)

实验三使用HTML语言编制网页
学号 201114004 姓名王渝迪专业计算机科学与技术成绩
【实验目的】
使用HTML语言编制网页。

【实验内容】
1、熟悉Dreamweaver软件的环境；
2、掌握HTML语言；
3、独立完成一个HTML网页。

【实验步骤】
1，新建一个HTML文件，插入一个的表格，按照自己的设计对表格进行合并以及尺寸的修改，如进行单元格的合并。

2，按照自己的设计，在表格的相应位置插入图片，并根据表格的大小，适当的调整图片的比例，使图片和表格比例和谐。

3，在代码段中插入文字，使之显示在网页中，并根据表格的大小，适当调整文字，并对文字进行设置，达到自己想要的效果。

4，制作链接。

给一张图片添加连接。

【实验结果】
【实验心得和体会】
本次试验用上次试验的一部分代码。

然后增加了给一个图片添加超链接的功能。

用<h1>标签来定义一个标题。

用<P>标签来定义一段文字。

html表格布局实例讲解

HTML表格布局实例讲解这篇文章主要为大家详细介绍了HTML表格布局简单实例，HTML表格布局是HTML入门学习中的基础知识，感兴趣的小伙伴们可以参考一下.HTML 文档中的元素是一个接着一个排列的，只是简单地在在块级元素的前后加上拆行，是一种流水布局。

但是，我们所见到的Web 页面按照一定的规则布局排版的（通常是多列的），所以就要借助一定的方法来实现这种布局，通常的解决方案是：使用区块元素<div> 或表格（<table>）来布局Web 页面的内容。

使用表格进行布局，是一种较老的布局解决方案。

并不推荐使用，我们应该总是使用表格来显示表格化的数据。

HTML 文档<!DOCTYPE html>2.<html lang="en">3.<head>4. <meta charset="UTF-8">5. 6. <link rel="stylesheet" href="css/mystyle.css">7. <title>Island estaurant</title>8.</head>9.<body>10. <table id="container">11. 12. <tr>13. <td id="header" colspan="2">14. <h1>点菜系统</h1>15. </td>16. </tr>17. 18. <tr>19. 20. <td id="menu">21. <b>菜品</b><br>22. <div id="dishes">23. 小鸡炖蘑菇<br>24. 家常豆腐<br>25. 酸辣土豆丝<br>26. </div>27. </td>28. 29. <td id="content">30. 小鸡炖蘑菇：<br>31. 幼鸡一只32. </td>33. </tr>34. 35. <tr>36. <td id="footer" colspan="2">世俗孤岛的餐厅</td>37. </tr>38. </table>39.</body>40.</html>41.CSS 文件1./*整个点餐系统的界面*/2.#container3.{4. width: 600px;5. margin: 100px;6. /*取消单元格边框之间的边距*/7. border-spacing: 0;8.}9./*点餐系统界面的头部*/10.#header11.{12. background-color: red;13. text-align: center;14.}15.h116.{17. margin-bottom: 0px;18.}19./*点餐系统界面的菜单*/20.#menu21.{22. background-color: #FFD700;23. height: 200px;24. width: 150px;25.}26.#dishes27.{28. padding-top: 10px;29. padding-left: 10px;30. line-height: 20px;31.}32./*点餐系统界面的菜品详情*/33.#content34.{35. background-color: gray;36. height: 200px;37. width: 450px;38.}39./*点餐系统界面的尾部*/40.#footer41.{42. background-color: blue;43. height: 25px;44. text-align: center;45.}。

HTML语言使用TABLE排版

本篇先介绍一个如何 table 进行排版。
对于没有基础的朋友来说，使用 table 排版是最为简单易行的。
Table 排版可以理解为，将整个网页放在一个大的表格内。调正没个单元格的大小，使其在
合适的位置，显示需要显示的内容。最后将表格的边框宽度设为 0（即 border = “0”，默认
为 1）。
Table 的一般格式如下：
以上为整个 table 的事例。
读者很容易猜到，在<table width="960" height="500" border="1">处，定义了 table 的长和高，以及表格边框的宽度。除了这三个属性之外，还有一个重要的属性就是定义表格背景
色，可以将其定义为一个不同于网页的颜色，可以在<table>中填写代码 <table bgcolor = “red”>（将背景色设为红色为例）。
</tr> <tr> <td></td> <td></td>
</tr> <tr> <td></td> <td></td>
</tr> </table>
<td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td><td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td>

HTML5+CSS3网页设计与制作实用教程单元3 表格应用与制作购物车页面

进行美化。
网页030101.html. 的浏览效果如图3-2 所示。
图3-2 网页030101.html. 的浏览效果
【任务3-1-1】在网页中插入与设置表格
任务实施
1．创建网页文档且保存
在站点“易购网”中创建文件夹“03 表格应用与制作购物车页面”，在该文件夹中创建文件夹“0301”，并在文件夹“0301”中创建子文件夹“CSS”和“image”，将所需要的图片文件拷贝到“image”文件夹中。在【文件】面板中，用右键单击文件夹“0301”，在弹出的快捷菜单中选择菜单命令【新建文件】，如图
3-6 所示。
图3-6
表格标题行的属性设置
【任务3-1-1】在网页中插入与设置表格
5．设置表格第2行至第9行的行高
将鼠标指针指向表格的第2 行的左边线，当鼠标指针变成一个黑色箭头形状时，按住鼠标左键
拖动鼠标到第9 行，选中第2 行至第9 行。然后在表格【属性】面板的“高”文本框中输入“25”。
6．设置表格各列的对齐方式将鼠标指针指向表格的第1 列的上边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标
图3-5 9 行4 列表格的属性设置
【任务3-1-1】在网页中插入与设置表格
4．设置表格第1行的属性（1）选择表格行
将鼠标指针指向表格的第1 行的左边线，当鼠标指针变成一个黑色箭头形状时，单击鼠标
左键即可选中该行。（2）设置表格行的属性设置表格第1 行的水平对齐方式为“居中对齐”，垂直对齐方式为“居中”，在“高”文本框中输入“30”，选中“标题”复选框，其他属性保持其默认值，第1 行对应的属性设置如图
表格便插入到网页中。（6）保存网页中所插入的表格。
图3-4

HTML——使用表格进行页面布局

HTML——使⽤表格进⾏页⾯布局<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表格布局</title></head><body bgcolor="white" leftmargin="0" topmargin="0"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td align="center"><table width="800" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0"><tbody><tr align="center"><table width="600" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td colspan="5"><img src="20140224112909_Pt8jK.jpg" width="600" height="200"/></td></tr><tr height="50"><td colspan="3">username：______ password：______</td><td colspan="2" align="right"><a href="">帮助</a></td></tr><tr height="2"><td colspan="5" background="⿊线.png"</td></tr><tr valign="top"><td width="140"><h3 align="center">你喜欢海吗</h3><ul><li>写信告诉我今天</li><li>海是什么颜⾊</li><li>夜夜陪着你的海</li><li>⼼情⼜如何</li><li>灰⾊是不想说</li><li>蓝⾊是忧郁</li><li>⽽漂泊的你</li><li>狂浪的⼼</li><li>停在哪⾥</li></ul></td><td width="1" background="⿊线.png"></td><td width="300"><h3 align="center">我爱的⼤海</h3><img src="20120804021257_W3hWC.jpg" width="300" height="300"/><h3 align="center">你在哪呢</h3><ul><li>写封信给我就当最后约定</li><li>说你在离开我的时候是如何的⼼情</li></ul></td><td width="1" background="⿊线.png"></td><td width="140"><h3 align="center">你会喜欢的</h3><ul><li>写信告诉我你想要</li><li>梦什么</li><li>梦⾥外的我是否</li><li>都让你⽆从选择</li><li>我揪着⼀颗⼼</li><li>整夜都闭不上眼睛</li><li>为何你明明动了情</li><li>却⼜不靠近</li></ul></td></tr><tr><td colspan="5"><img src="20140224112909_Pt8jK.jpg" width="600" height="100" /></td></tr><tr height="40"><td colspan="5" align="left">版权全部，翻录必究 ©1999-2014</td> </tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></body></html>。

2025年Html设计实验报告

山东信息职业技术学院《网页设计》试验汇报（—第二学期）班级：姓名：学号：指导老师：试验一认识Dreamweaver CS3一、试验目的1、熟悉Dreamweaver CS3环境。

2、理解HTML文献构造。

二、试验环境计算机三、试验内容创立站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创立。

无论哪种方式，都要事先在当地磁盘上建立一种用来寄存站点的文献夹，这个文献夹就是当地站点的根目录。

下面简介一下这两种方式的详细操作环节。

1．使用向导建立站点使用向导建立站点的环节如下：（1）打开建立站点向导的措施有3种。

①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。

②选择“站点”菜单中的“新建站点”命令。

③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。

起始页中新建站点“管理站点”对话框（2）打开“站点定义為”对话框，在“您打算為您的站点起什么名字”文本框中输入站点名字，如travel。

若已申請域名则可以在“您的站点的HTTP地址（URL）是什么”文本框中填入申請的域名地址。

如图所示。

设置站点名和URL地址（3）单击“下一步”按钮，问询与否使用服务器技术，如图所示。

若是静态站点则选中“否，我不想使用服务器技术”单项选择按钮，若是动态站点可以深入设置使用哪一种服务器技术。

选择与否使用服务器技术（4）单击“下一步”按钮，在“您将把文献存储在计算机上的什么位置”文本框中直接输入站点根目录的途径，或者单击“浏览”按钮，选择文献夹目录。

（5）单击“下一步”按钮，在“您怎样连接到远程服务器”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。

（6）单击“下一步”按钮，将显示前几步设置的总結信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完毕”按钮。

html表格布局实例

[html]表格布局之实例版| [<<][>>]前面我们讲了html表格的基础知识，今天我们通过一个实例让大家更清晰的了解下表格的用途。

例如：我们做一个简单的网站布局，代码如下：<table align="center" width="500" height="400" border=1bordercolor="#00ff99"><tbody><tr><td colspan="3" align="center">网站名称</td></tr><tr><td width="30%" height="25">网站标题</td><td colspan="2" align="right">搜索框</td></tr><tr><td width="30%">左边</td><td width="40%">中间</td><td>右边</td></tr><tr><td colspan="3" align="center">网站底部信息</td></tr></tbody></table>产生如下的表格：这是一张整体的表格，第一行和第四行分别跨度了三列，这里用colspan="3"来限制，而第二行的“搜索框”占用了两列的位置，用colspan="2"控制；align="center"是对表格内文字的对齐限制，center表示中间，right表示靠右，left靠左。

使用表格讲义布局网页

•将鼠标光标移至表格外框线上，当鼠标光标变为形状时，单击鼠标左键。
•在表格内部任意单元格中单击鼠标左键，然后在标签选择器中单击对应的“<table>”标签。
•将插入点置于表格的任意单元格中，表格上方或下方将显示绿线标志，单击最上方或最下方标有表格宽度的绿线中的，在弹出的下拉菜单中选择“选择表格”命令。
2．合并单元格
所谓合并单元格，就是将相邻的两个或多个单元格合并成一个单元格。拖动鼠标选中要合并的连续单元格（此处为第1行中间的2个单元格），然后单击属性检查器上的 “合并所选单元格，使用跨度”按钮，则2个单元格合并为1个单元格
4.2.2 插入、删除行和列
在使用表格组织大量信息时，往往需要在创建好的表格中添加或删除行与列，以增加或减少记录。
此处表示未
明确设置单
元格宽度
列
行
此处显示了表格的宽度。如果只显示一个“▼”
单元格
符号，表示未明确设置表格宽度
4.1.1 创建表格
Dreamweaver CS4拥有非常完善的表格编辑功能，本节我们首先来看一下如何在网页文档中创建表格。
4.1.2 选择表格和单元格
1．选择表格
•将鼠标光标移至单元格边框线上，当鼠标光标变为或形状时单击鼠标左键。
精品jing
使用表格布局网页
4.1 表格基本操作
表格（Table）是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在HTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结
束），行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。

HTML网页布局与样式教程

HTML网页布局与样式教程1. 简介HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。

在创建网页时，网页布局和样式是非常重要的。

本教程将介绍HTML网页布局和样式的基础知识以及一些常见的技巧和方法。

2. HTML基础知识在开始学习HTML网页布局和样式之前，首先需要理解HTML的基本结构和语法。

- HTML文件由起始标签<html>和结束标签</html>包围，其中包含了整个网页的内容。

- 网页的主体内容通常位于<body>和</body>之间。

- HTML使用标签来定义不同的元素，如标题、段落、列表等。

3. 网页布局网页布局指的是如何组织和排列网页中的各个元素。

常见的网页布局方法包括：- 盒模型：在HTML中，每个元素都是一个矩形框，通过设置盒模型的属性（如边框、内边距、外边距）来控制元素的大小和位置。

- 浮动：使用CSS中的浮动属性可以实现元素的左右排列或者实现多栏布局。

- 定位：CSS中的定位属性可以将元素放置在网页的任何位置，并可以随意调整元素的位置。

- 响应式布局：随着移动设备的普及，响应式布局成为了一种重要的网页布局方法，通过设置不同的样式表，在不同的屏幕尺寸下显示不同的布局。

4. 网页样式网页样式是指网页的外观和风格。

通过CSS（Cascading Style Sheets）可以为网页设置各种样式，例如：- 字体样式：使用CSS可以设置文字的字体、大小、颜色等属性。

- 背景样式：可以设置网页的背景颜色、背景图片等。

- 边框样式：可以为元素设置边框的样式、宽度、颜色等。

- 链接样式：可以为网页中的链接设置不同的样式，以便用户更好地辨别链接。

- 动画效果：使用CSS的动画属性可以实现一些简单的动画效果，如渐变、旋转等。

5. 常见的布局和样式技巧- 导航栏布局：可以使用无序列表和CSS样式来创建水平或垂直的导航栏。

如何使用HTML构建网页布局

如何使用HTML构建网页布局在现代社会中，网页已经成为了人们获取信息、交流和娱乐的重要渠道。

而HTML作为网页开发的基础技术，是构建网页布局的重要工具。

本文将介绍如何使用HTML构建网页布局，并逐步深入探讨一些高级的布局技巧。

一、基本的HTML布局元素1.1 标题和段落在HTML中，我们可以使用<h1>、<h2>、<h3>等标签来定义标题，使用<p>标签来定义段落。

通过合理使用标题和段落标签可以使页面结构清晰，易于阅读。

1.2 分区HTML中的<div>标签常用来划分网页的各个区块，通过为<div>标签添加不同的class或id属性，可以方便地对不同区块进行样式设置。

1.3 链接使用<a>标签可以创建超链接，链接到其他网页或同一网页中的某一位置。

在进行网页布局时，超链接可以用来导航到其他页面或者内部的不同部分。

二、网格布局网格布局是一种灵活且强大的布局方式，可以将页面划分为行和列，通过将内容放置在特定的网格单元中，实现页面的整齐和统一。

2.1 使用<table>标签创建网格布局<table>标签可以创建一个基本的网格布局，通过定义表格的行和列来划分区域。

使用<td>标签来放置内容，使用colspan和rowspan属性可以合并或跨越多个单元格。

2.2 使用CSS的网格布局现代的HTML5和CSS3提供了更加灵活和强大的网格布局方式。

通过使用CSS的grid属性，可以实现自适应和响应式的网格布局，方便地调整页面在不同设备上的显示效果。

三、浮动布局浮动布局是一种传统但仍然常用的布局方式，通过使用CSS的float属性，可以将元素从正常的文档流中脱离出来，实现元素的左右浮动。

3.1 左右两栏布局通过将左侧的内容设置为float:left，右侧的内容设置为float:right，可以实现一个简单的左右两栏布局。

用HTML布局网页-PPT文档资料

</table>
Table
<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
<h4>带有 cellpadding：</h4>
</tr>
<table border="1"
<tr>
cellpadding="10">
4.2.3 <td>标记属性
1．设置单元格跨列
本属性用于设置表格中某一单元格跨几个列进行合并（横向合并）
基本语法：
<td colspan ="">
语法解释： colspan的值就是单元格进行横向合并时所跨的列数，例如某一个单元格和它右面两个单元格合并，colspan的值设为3。
实例： 4-8.html
4.1.1 表格标记
<table> <tr> <th> head1</th> <th> head2</th> …… </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> …… </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> …… </tr> …… </table>

使用表格排版网页.

– 定界符； – 换行符：选择打开导出文件的操作系统。
布局Байду номын сангаас图
• 插入栏/布局/布局： • 绘制表格和单元格：
– 表格与表格或表格与窗口间距离小于8个像素，会发生吸附，按alt可暂时取消吸附。单元格同。
• 调整：
– 选择；调整大小；移动； – 方向键每次1个像素；加shift每次10个像素；
• 设置属性：
• • • • • •
合并、拆分：水平、垂直对齐：单元格内容。宽高：不换行：标题：背景；背景颜色；边框；
调整表格结构
• 插入行或列：
– 选择位置，右键-表格/插入…
• 删除行或列： • 单元格的复制、粘贴：
– 在单元格内粘贴，则粘贴内容，覆盖； – 在表格外粘贴，则粘贴为新表格。
• 嵌套表格：
使用表格排版网页
• 插入并编辑表格
– – – – 插入表格设置表格属性设置单元格属性调整表格结构
• • • •
表格的格式化表格数据的导入导出使用表格排版网页、使用表格的其他视图
– 在布局视图下绘制 – 在布局视图下调整 – 设置属性
• 在HTML代码中插入表格
– 表格：
• 自动伸展：表格最右侧的列将自动延伸。 • 选择占位符图像：
– 创建、使用现存图像、不使用图像。
– 单元格：
• 自动伸展：
表格结构
• 为了在源代码中清楚地区分表格结构，HTML语言中规定了 <THEAD>,<TBODY><TFOOT>3个标记，分别对应于表格的表首、表主体和表尾。 • <table> • <thead>
– <tr><td></td></tr>

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

二实验内容和要求
实验内容:
1.创建名为ex3的文件夹，在该文件夹里面创建一个网页文件sales.html，网页的标题为“ACME公司2013年销售输入”，使用HTML 4 Transitional文档类型声明，使用合适的表格标记及属性显示ACME公司2013的5种产品4个季度的销售额。显示效果如下（单元格数据为随机值）：
<html xmlns="/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表单</title>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>ACME公司2013年销售输入</title>
</head>
<body>
<table border="1">
<tr>
<th>产品/季度</th>
三实验步骤
第一题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" xml:lang="en">
</tr>
<tr>
<td><label for="suggestion">您的建议：</label></td>
<td><textarea name="suggestion" id="suggestion"cols="45" rows="5">请留下您的宝贵意见</textarea></td>
</tr>
<body>
<h1>请正确填写您的个人信息，以方便我们及时与您联系！！！！</h1>
<form id="form1" name="form1" method="post">
<table>
<tr>
<td><label for="username">姓名：</label></td>
<td><input type="text" name="username" id="username"/></td>
<td><input type="password" name="pass2" id="pass2"/></td>
</tr>
<tr>
<td><label for="sex">性别：</label></td>
<td><input type="radio" name="sex" id="radio" value="radio">男
<tr>
<th>X-Super</th>
<td>32345</td>
<td>34655</td>
<td>4345</td>
<td>34534</td>
</tr>
<tr bgcolor="#66FFCC">
<th>Compact2x</th>
<td>234324</td>
<td>7876</td>
<td>53434</td>
产品/季度
一季度
二季度
三季度
四季度
Helix
20000
565454
5654
334543
X-Super
32345
34655
4345
34534
Compact2x
234324
7876
53434
43543
MiniXooper
7867
5465
6763443
354366
2.使用表格对教材64页图2-26的表单使用表格进行布局，保存为profile.html。
3.使用W3C在线HTML验证工具验证上述文档的合法性，修改验证结果中出现的错误。
实验要求：
（1）需要每个同学独立完所有的实验步骤，
（2）要求使用label标记对相关的表单元素进行说明，即：<label for=”elementId”>Label</label>
（3）下课之前将实验报告的电子文档提交至教学平台。
<label><input type="radio" name="degree[]" id="radio5" value="bs"/>学士及以下</label>
</td>
</tr>
<tr>
<td>您的头像:</td>
<td><input type="image" src="image/55.jpg"name="imgael"alt="您的头像"/></td>
<option selected="selected">18-35岁</option>
<option>36-50岁</option>
<option>50岁以上</option>
</select>
</td>
</tr>
<tr>
<td>最喜爱的语言:</td>
<td>
<label><input type="checkbox" name="html-lang">HTML</label>
</tr>
<tr>
<td><label for="pass">密码：</label></td>
<td><input type="password" name="pass"id="pass"/></td>
</tr>
<tr>
<td><label for="pass2">确认密码：</label></td>
<label><input type="checkbox" name="css-lang">CSS</label>
<label><input type="checkbox" name="js-lang">Javascript</label>
</td>
</tr>
<tr>
<td>最高学历：</td>
<td>
<tr>
<td>您的上传：</td>
<td>
<input type="file" name="document" size="20" maxlength="500"/></p>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="button" id="button" value="提交"/>
<td>43543</td>
</tr>
<tr>
<th>MiniXooper</th>
<td>7867</td>