当前位置：首页 > news >正文

超链接/表格/表单的复习（课后作业）

news 2024/11/20 23:21:24

1.作业1

提示：

标题在title中修改

百度logo是图片链接(img)

新闻，贴吧是超链接，直接上官网cv

还有文本呢输入框

完成前端HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>百度仿真页面</title>
</head><body align="center"><p><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""></p><p> <a href="https://news.baidu.com/">新闻</a><a href="https://map.baidu.com/@13047515,4707691,13z">地图</a><a href="https://tieba.baidu.com/index.html">贴吧</a><a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a><a href="https://image.baidu.com/">图片</a><a href="https://wenku.baidu.com/?fr=bdpcindex">文库</a><a href="https://pan.baidu.com/disk/main?from=1026962h&_at_=1726381996098">网盘</a><a href="https://chat.baidu.com/search?isShowHello=1&pd=csaitab&setype=csaitab&extParamsJson=%7B%22enter_type%22%3A%22home_tab%22%7D">AI助手</a><a href="https://www.baidu.com/more/">更多</a></p><input type="text" size="40px"><input type="button" value="百度一下">  <p></p><p>问题反馈请<a href="">发送邮件</a></p></body>
</html>

显示的效果如下：

2.作业2

思考如何制作上面的表格

提示：

这里看似是只有一个表格，其实呢可以由很多个表格合并获得

但是要注意设置表格的宽度为一个值，这样显示的效果就是相当于一个表格了

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第29届中国国际广告节会议注册表</title><style>th, td {border: 1px solid #3498db; /* 更改这里的颜色值 */padding: 8px;text-align: center;}</style></head><body align="center" ><h1>第29届中国国际广告节会议注册表</h1><form action=""><table align="center" border="1" width="800px"><!-- <caption>第29届中国国际广告节会议注册表</caption> --><tr><td>参赛者姓名</td><td><input type="text"></td><td>职务</td><td><input type="text"></td></tr></table><table align="center" border="1" width="800px"><tr><td>工作单位</td><td><input type="text" size="100px"></td></tr></table><table align="center" border="1" width="800px"><tr><td>电话</td><td><input type="text"></td><td>传真</td><td><input type="text"></td><td>手机</td><td><input type="text"></td></tr></table><table align="center" border="1" width="800px"><tr><td>通讯地址</td><td><input type="text"></td><td>邮箱</td><td><input type="text"></td></tr><tr><td>E-mail</td><td><input type="text"></td><td>国家</td><td><select name="" id=""><option value="">中国</option><option value="">俄罗斯</option><option value="">法国</option></select></td></tr><tr><td>省份</td><td><select name="" id=""><option value="">天津</option><option value="">北京</option><option value="">江西</option></select></td><td>城市</td><td><input type="text"></td></tr>  </table><table align="center" border="1" width="800px" height="80px"><tr><td>会议费标准(人名币)</td></tr><caption></caption></table><table align="center" border="1" width="800px"><!-- <caption>会议费标准(人名币)</caption> --><tr><td>身份/时间</td><td>2022年9月20日之前注册</td><td>2022年9月20日之后注册</td></tr><tr><td>中广协会会员</td><td><input type="radio" name="r1">1500元</td><td><input type="radio" name="r1">1800元</td></tr><tr><td>非会员</td><td><input type="radio" name="r1">1800元</td><td><input type="radio" name="r1">2000元</td></tr></table><table align="center" border="1" width="800px"><tr><td><input type="submit" style="background-color: aqua;"><input type="reset" style="background-color: aqua;"></input></td></tr></table><table align="center" border="1" width="800px"><tr><td><a href="">第29届中国国际广告节会议注册表下载</a></td></tr></table></form></body>
</html>

显示的效果为：