一、古诗词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>古诗词</title>
</head>
<body>
<b style="font-size: 20px;">将进酒</b>
<b>君不见黄河之水天上来</b><br>
<img src="./image/奥特曼.jpg" width="250px" height="500px" align="left" usemap="#map">
<map name="map">
<area shape="rect" coords="0,0,250,250" href="https://v.qq.com/">
<area shape="rect" coords="250,250,0,500" href="https:www.baidu.com">
</map>
<p>君不见黄河之水天上来，奔流到海不复回。</p>
<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p> 岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我倾耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
<p>古来圣贤皆寂寞惟有饮者留其名。</p>
<p>陈王昔时延平乐，斗酒十千恣欢谑。</p>
<p> 主人何为言少钱，仅须沽取对君酌。</p>
<p>五花马，千金裘。</p>
<p>呼儿将出换美酒，与尔同销万古愁。</p>
</body>
</html>
以上代码中，除了将古诗词放置照片右侧外，还利用图片超链（a）接实现了两个跳转，
将图片分为上下两个部分，点击上部分会跳转之腾讯视频，下面的部分则跳转至百度
二、用户注册页面：以下代码较多的使用了input属性，实现了页面大多内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<table border="1px" >
<tr bgcolor="darkgray">
<td colspan="2" align="center">用户注册</td>
<!-- <td></td> -->
</tr>
<tr bgcolor="lightgray">
<td>用户名</td>
<td><input type="text"></td>
</tr>
<tr bgcolor="lightgray">
<td>密码</td>
<td><input type="text"></td>
</tr>
<tr bgcolor="lightgray">
<td>邮箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr bgcolor="lightgray">
<td>电话</td>
<td><input type="tel" name="tel"></td>
</tr>
<tr bgcolor="lightgray">
<td>日期</td>
<td><input type="date" name="date"></td>
</tr>
<tr bgcolor="lightgray">
<td>性别</td>
<td><input type="radio" name="gendar" value="男" checked>男
<input type="radio" name="gendar" value="女" >女</td>
</tr>
<tr bgcolor="lightgray">
<td>爱好</td>
<td><input type="checkbox" name="hobby" value="写作">写作
<input type="checkbox" name="hobby" value="听音乐">听音乐
<input type="checkbox" name="hobby" value="体育">体育
</td>
</tr>
<tr bgcolor="lightgray">
<td>省份</td>
<td>
<select name="province" >
<option value="">省份</option>
<option value="province1" selected>陕西省</option>
<option value="province2" >江西省</option>
<option value="province3" >河北省</option>
<option value="province4" >河南省</option>
<option value="province5" >浙江省</option>
<option value="province6" >四川省</option>
<option value="province7" >吉林省</option>
<option value="province8" >江苏省</option>
<option value="province9" >云南省</option>
</select>
</td>
</tr>
<tr bgcolor="lightgray">
<td>自我介绍</td>
<td>
<textarea name="" id="" cols="30" rows="10"></textarea>
</td>
</tr>
<tr bgcolor="darkgray" align="center">
<td colspan="2"><input type="button" name="提交" value="提交">
<input type="button" name="重置" value="重置"></td>
<!-- <td>用户注册</td> -->
</tr>
</table>
</body>
</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>
<h1>工商银行电子汇款单</h1>
<!-- colspan="2"列合并
rowspan="2"行合并-->
</body>
<table border="1px">
<tr>
<th colspan="2">回单类型</th>
<!-- <th></th> -->
<td>网上转账汇款</td>
<th colspan="2">指令序号</th>
<!-- <td></td> -->
<td>HQH0000000000000013878172</td>
</tr>
<tr>
<th rowspan="4">收款人</th>
<td>户名</td>
<td>老牟</td>
<th rowspan="4">付款人</th>
<td>户名</td>
<td>老刘</td>
</tr>
<tr>
<!-- <th></th> -->
<th>卡号</th>
<td>000000000001</td>
<!-- <th></th> -->
<th>卡号</th>
<td>000000000002</td>
</tr>
<tr>
<!-- <th></th> -->
<td>地区</td>
<td>南京</td>
<!-- <th></th> -->
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<!-- <th></th> -->
<th>网点</th>
<td>工商江苏南京业务处理中心</td>
<!-- <th></th> -->
<th>网点</th>
<td>江苏徐州业务处理中心</td>
</tr>
<tr>
<th colspan="2">币种</th>
<!-- <td></td> -->
<td>人民币</td>
<th colspan="2">钞汇标志</th>
<!-- <th></th> -->
<td>钞票</td>
</tr>
<tr>
<th colspan="2">金额</th>
<!-- <th></th> -->
<td>1.00元</td>
<th colspan="2">手续费</th>
<!-- <th></th> -->
<td>0.57元</td>
</tr>
<tr>
<th colspan="2">合计</th>
<!-- <th></th> -->
<td colspan="4">人民币（大写）：壹元整</td>
<!-- <th></th> -->
<!-- <th></th> -->
<!-- <th></th> -->
</tr>
<tr>
<th colspan="2">交易时间</th>
<!-- <th></th> -->
<td>2017年6月1日</td>
<th colspan="2">时间戳</th>
<!-- <th></th> -->
<td>2017-06-01-13.00.00.00000</td>
</tr>
</table>
<p>票据打印时间:2017-06-01 15:00:12</p>
<p><s>票据打印单位:江苏徐州业务中心</s></p>
<p>操作员:大曾</p>
</body>
</html>
四、电影模块
以下代码出了实现了页面显示的内容之外，我还对照片进行了跳转，点击照片，会跳转至腾讯视频
不足的是：照片下面的文字注释，为了达到与图片相对应，使用了太多的特殊符号，暂时未找到好的解决办法 2024.03.15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电影</title>
</head>
<body>
<h2>热门电影板块</h2>
<hr>
<b>最近热门电影 </b>
<h7> 热门 </h7>
<h8> 最新 </h8>
<h9> 豆瓣最高 </h9>
<h10> 冷门佳片 </h10>
<h11> 华语 </h11>
<h12> 欧美 </h12>
<h13> 韩国 </h13>
<h14> 日本 </h14>
<h7> </h7>
<h7> </h7>
<h7> </h7>
<h7> </h7>
更多››
<hr>
<a href="https://v.qq.com/"><img src="./image/检察风云.jpg" width="350px" height="450px" title="检察风云">
<img src="./image/流浪地球.jpg" width="350px" height="450px" title="流浪地球">
<img src="./image/海王.jpeg" width="350px" height="450px" title="海王">
<img src="./image/热辣滚烫.jpeg" width="350px" height="450px" title="热辣滚烫"></a><br>
<p><b style="font-size: 20px;">检察风云
流浪地球
海王
热辣滚烫</b></p>
<br>
<a href="https://v.qq.com/"><img src="./image/猩球崛起.jpg" width="350px" height="450px" title="星球崛起">
<img src="./image/第二十条.jpeg" width="350px" height="450px" title="第二十条">
<img src="./image/阿凡达.jpg" width="350px" height="450px" title="阿凡达">
<img src="./image/黑豹.jpg" width="350px" height="450px" title="黑豹"></a><br>
<p><b style="font-size: 20px;">猩球崛起
第二十条
阿凡达
黑豹</b></p>
</body>
</html>
扫一扫
877
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
