-
1 HTML实验
-
2 实验解析
1. 实践目的
能够使用HTML常用标签快速构建网页内容；
能够使用图片、表格、列表等基本标记对网页进行设计和布局；
能够使用表单元素以及属性，设计满足特定需求的用户交互及信息收集页面；
能够使用HTML框架进行网页设计和布局。
2. 实践内容
完成“全国两会介绍网站”设计与实现。
完成“Bing搜索”页面仿写 。
完成“百度图库搜素”页面仿写 。
实验所需图像素材：见课程资料-实验模板-实验素材。
3. 实践要求
【要求1】设计网站顶部内容
具体要求如下：
设置网页背景为红色；
添加两会的logo并在右侧输入“2023年全国两会”；
按照图示修改字体大小、字体样式、图像和字体排版（选做）。
【要求2】设计网站左侧菜单栏
具体要求如下：
在网页中添加6个超链接，链接目标分别是要求3、要求6~10所设计的页面；
设置超链接打开方式target="content"，content为框架集中右侧框架名称，详细说明见要求5；
按照图示修改超链接字体及大小（选做）。
【要求3】设计两会介绍页面
具体要求如下：
使用一级标题h1显示“会议介绍”和“会议时间”；
使用三级标题h3显示“会议时间”下的“人大会议”和“政协会议” ；
使用段落标记p显示具体内容，并使用右对齐段落显示编写人和编写时间。
使用预排版标记pre显示“符号画”；
使用水平分隔符hr分隔网页内容。
【要求4】设计网站底部页面
具体要求如下：
使用div标记显示底部内容；
底部内容居中，且内容包括版权信息和年份；
按照图示修改字体大小、字体颜色（选做 ）。
【要求5】设计网站布局
具体要求如下：
使用框架集frameset分割网页，顶部20%，中部75%，底部5%；
使用框架集frameset 继续分割中部，左侧25%，右侧75%；
将顶部框架命名为top，左侧框架命名为left， 右侧框架命名为content， 底部框架命名为foot；
分别将要求1~4页面链接到顶部、左侧、右侧、底部框架页面中。
【要求6】设计会议议程页面
具体要求如下：
使用一级标题h1显示“会议议程”；
在“会议议程”下使用无序列表ul显示“人大会议”和“政协会议” ；
在“人大会议”中使用定义列表dl显示详细内容，其中“十四届全国人大一次会议议程”使用dt显示，“（2023年3月4日十四届全国人大一次会议预备会议通过）”及后续详细议程使用dd显示；
在后续详细议程dd中采用有序列表ol进行显示；
“政协会议”议程显示与“人大会议”类似。
【要求7】设计议案提案页面
具体要求如下：
使用一级标题h1显示“2023年全国两会人大代表议案”和“2023年全国两会政协委员提案”（代表及委员前面的标题）；
使用三级标题h3显示“2023年全国两会人大代表议案”和“2023年全国两会政协委员提案”（详细提案议案前面的标题）；
使用无序列表显示两会代表（至少5位） 和委员（至少5位）；
使用书签链接关联两会代表/委员和他们的议案提案，即点击人名能够跳转到具体议案提案内容；
在议案提案内容的人名后面添加书签链接，点击链接能够回到顶部。
【要求8】设计制作者页面
具体要求如下：
使用表单显示制作人信息，使用表格table进行页面布局；
使用caption 为表格添加标题，标题为“制作人信息”；
按照图示合并行列，并在第2~4行的最后一列中插入照片（图像）；
按照图示在表单中设计文本框、密码框、单选框、多选框、滚动列表、下拉列表、多行文本、文件域、普通按钮、提交按钮、重置按钮、图像按钮等。
【要求9】设计Bing搜索页面
具体要求如下：
使用img添加Bing搜索logo；
使用表单制作搜索框及搜索按钮；
设置搜索框默认搜索内容为“2023年全国两会”；
点击“Bing搜索”能够搜索“2023年全国两会”相关网页；
按照图示修改搜索框大小及搜索按钮样式（选做）。
提示：如果要使用Bing搜索，则表单中文本框的name属性值要设置为"q" ，表单的action属性要设置为"https://cn.bing.com/search"。
【要求10】设计Baidu图库搜索页面
具体要求如下：
使用img添加Baidu图库搜索logo；
使用表单制作搜索框及搜索按钮；
设置搜索框默认搜索内容为“2023年全国两会”；
点击“百度一下”能够搜索“2023年全国两会”相关图片；
按照图示修改搜索框大小及搜索按钮样式（选做）。
提示：如果要使用Baidu图库搜索，则表单中文本框的name属性值要设置为"word"，表单中需要增加隐藏域传递默认参数（参数名为"tn"，参数值为"baiduimage"） ，表单的action属性要设置为"https://image.baidu.com/search/index"。
