目录
一，网上转账电子账单
1，所利用到的标签
- P 段落标签，一段是一个内容，段落之间存在间隔
- hn (1-6) 标题标签
- br 换行
- 文本修饰标签（加粗，加斜，加下划线，中划线等等效果）
- 加粗：strong / b
- 中划线：del
2，代码编写
<!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>
<table border="1" cellpadding="5" cellspacing="0" width="1000">
<tr>
<td colspan="2"><b>回单类型</b></td>
<td>网上转账汇款</td>
<td colspan="2"><b>指令序号</b></td>
<td>HQH000000000000013878172</td>
</tr>
<tr>
<td rowspan="4" width="10" ><b>收款人</b></td>
<td width="50">户名</td>
<td>老牟</td>
<td rowspan="4" width="10" ><b>付款人</b></td>
<td width="50">户名</td>
<td>老刘</td>
</tr>
<tr>
<td><b>卡号</b></td>
<td>0000000000001</td>
<td><b>卡号</b></td>
<td>000000000002</td>
</tr>
<tr>
<td>地区</td>
<td>南京</td>
<td>地区</td>
<td>杭州</td>
</tr>
<tr>
<td><b>网点</b></td>
<td>工商江苏南京业务处理中心</td>
<td><b>网点</b></td>
<td>江苏徐州业务中心</td>
</tr>
<tr>
<td colspan="2"><b>币种</b></td>
<td>人名币</td>
<td colspan="2"><b>钞汇标志</b></td>
<td>钞票</td>
</tr>
<tr>
<td colspan="2"><b>金额</b></td>
<td>1.00</td>
<td colspan="2"><b>手续费</b></td>
<td>0.57元</td>
</tr>
<tr>
<td colspan="2"><b>合计</b></td>
<td>人民币（大写）：壹元整</td>
</tr>
<tr>
<td colspan="2"><b>交易时间</b></td>
<td>2017年6月1日</td>
<td colspan="2"><b>时间截止</b></td>
<td>2017-06-01-13.00.00 00000</td>
</tr>
<table>
<p>票据打印时间：2017年-06-01 15：00：12</p>
<p><del>票据打印单位：江苏徐州业务中心</del></p>
<p>操作员：大曾</p>
</table>
</body>
</html>
3，运行结果
二，李白诗词
1，所用到的标签
图片标签：展示图片的标签， “ <img> ”标签就是图片标签。
属性：一般以键值对形式在标签的开始部分
注意：我们要想在自己的网页插入照片，首先将照片保存在本地磁盘文件里，再将其拖到vscode的编译器里
2，照片的编辑
3，代码编写
<!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>将进酒 <small>君不见黄河之水天上来</small></h1>
<table>
<tr>
<td>
<img src="./照片/jmg/李白.jpg">
</td>
<td>
<p>君不见黄河之水天上来，奔流到海不复回。</p>
<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<P>岑夫子，丹丘生，将进酒，杯莫停。</P>
<p>与君歌一曲，请君为我倾耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</td>
</tr>
</table>
</body>
</html>
4，运行结果
三，豆瓣电影
1，利用到的标签
<hr/>：水平分割线标签，用于在页面中插入一条水平分割线，起到分隔内容的作用
<img width="190" heigth="200" src="./照片/jmg/哈利波特.jpg">：图像标签<img>，用于在网页中插入图像。其中，width 和 height 属性分别指定了图像的宽度和高度，src 属性指定了图像的路径
2，程序编写
<!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>
<h2>热门电影板块</h2>
<hr/>
<title width="800"></title>
<tr>
<td><b>最近的热门电影</b></td>
<td>热门</td>
<td>最新</td>
<td>豆瓣高分</td>
<td>冷门佳片</td>
<td>华语</td>
<td>欧美</td>
<td>韩国</td>
<td>日本</td>
<td width="200"></td>
<td>更多>></td>
</tr>
</table>
<hr/>
<table>
<tr>
<td><img width="190" heigth="200" src="./照片/jmg/哈利波特.jpg"></td>
<td><img width="200" heigth="200" src="./照片/jmg/哪吒.jpg"></td>
<td><img width="190" heigth="100" src="./照片/jmg/孤注一掷.jpg"></td>
<td><img width="220" heigth="200" src="./照片/jmg/毒液.jpg"></td>
</tr>
<tr>
<td><p>哈利波特</p></td>
<td>哪吒</td>
<td>孤注一掷</td>
<td>毒液</td>
</tr>
<tr>
<td><img width="197" heigth="200" src="./照片/jmg/漫威.jpg"></td>
<td><img width="200" heigth="200" src="./照片/jmg/狮子王.jpg"></td>
<td><img width="210" heigth="200" src="./照片/jmg/环太平洋.jpg"></td>
<td><img width="196" heigth="200" src="./照片/jmg/他是龙.jpg"></td>
</tr>
<tr>
<td><p>漫威</p></td>
<td><p>狮子王</p></td>
<td><p>环太平洋</p></td>
<td><p>他是龙</p></td>
</tr>
</table>
</body>
</html>
3，运行成果
四，用户信息的登录和注册页面
1，运用到的标签
form 标签：<form name="form1" method="post" action="">用于创建一个表单，表单可以包含各种输入元素，用于收集用户输入的数据。name属性用于给表单命名，method属性指定了表单数据的提交方式为 POST，action属性指定了表单数据提交的目标 UR。
select 标签：<select name="province">用于创建一个下拉列表，name属性用于给下拉列表命名。<option value="shanxi" selected>陕西省</option>等用于创建下拉列表的选项，value属性指定了选项的值，selected属性表示该选项被默认选中
textarea 标签：<textarea name="intro" cols="25" rows="5" id="intro"></textarea>用于创建一个多行文本输入框，name属性用于给输入框命名，cols属性指定了输入框的列数，rows属性指定了输入框的行数，id属性用于给输入框赋予一个唯一的标识符。
input 标签（作为按钮）：<input type="submit" name="send" value="提交">和<input type="submit" name="send" value="重重">用于创建提交按钮，type="submit"表示输入框的类型为提交按钮，name属性用于给按钮命名，value属性指定了按钮上显示的文本。
2，程序编写
<!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>
<form name="form1" method="post" action="">
<table width="300" border="0" cellpadding="1" cellspacing="2">
<tr height="30">
<td colspan="2" align="center" bgcolor="#CCCCCC">用户注册</td>
</tr>
<tr height="30">
<td width="91" align="right" bgcolor="#E6E6E6">用户名</td>
<td width="198" bgcolor="#E6E6E6">
<input name="UserName" type="text" maxlength="20" size="15">
</td>
</tr>
<tr height="30">
<td align="right" bgcolor="#E6E6E6">性别</td>
<td bgcolor="#E6E6E6">
<input name="sex" type="radio" value="男" checked> 男
<input type="radio" name="sex" value="女"> 女
</td>
</tr>
<tr height="30">
<td align="right" bgcolor="#E6E6E6">爱好</td>
<td bgcolor="#E6E6E6">
<input name="like" type="checkbox" value="checkbox" > 写作
<input name="like" type="checkbox" value="checkbox" > 听音乐
<input name="like" type="checkbox" value="checkbox" > 体育
<input name="like" type="checkbox" value="checkbox" > 跳舞
<input name="like" type="checkbox" value="checkbox" > 打游戏
</td>
</tr>
<tr height="30">
<td align="right" bgcolor="#E6E6E6">省份</td>
<td bgcolor="#E6E6E6">
<select name="province">
<option value="shanxi" selected>陕西省</option>
<option value="shanxi" selected>山西省</option>
<option value="shanxi" selected>河北省</option>
<option value="shanxi" selected>河南省</option>
<option value="shanxi" selected>西藏省</option>
<option value="shanxi" selected>四川省</option>
</select>
</td>
</tr>
<tr height="30">
<td align="right" bgcolor="#E6E6E6">自我介绍</td>
<td bgcolor="#E6E6E6">
<textarea name="intro" cols="25" rows="5" id="intro"></textarea>
</td>
</tr>
<tr height="30">
<td colspan="2" align="center" bgcolor="#ccccc">
<input type="submit" name="send" value="提交">
<input type="submit" name="send" value="重重">
</td>
</tr>
</table>
</form>
</body>
</html>
3，运行成果
五，QQ的注册页面
1，运用到的标签
- <div class="container">：
<div>是一个通用的容器元素，用于分组和布局页面内容。在这个例子中，class="container"可能是用于应用特定的样式或布局规则，以实现页面的整体结构设计。 - <div class="agreement">：用于分组同意服务协议和隐私政策的表单元素
- <div class="container">：
<div>是一个通用的容器元素，用于分组和布局页面内容。在这个例子中，class="container"可能是用于应用特定的样式或布局规则，以实现页面的整体结构设计。
2，程序编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ注册页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="image-container">
<img width="220" heigth="200" src="./照片/jmg/QQ.jpg">
</div>
<div class="form-container">
<h1>欢迎注册QQ</h1>
<p>每一天，乐在沟通。</p >
免费靓号
<form>
<div class="form-group">
<label for="nickname">昵称</label>
<input type="text" id="nickname" placeholder="昵称">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" placeholder="密码">
</div>
<div class="form-group">
<div class="phone-code">
<select>
<option value="+86">+86</option>
</select>
<label for="phone-number">手机号码</label>
<input type="text" id="phone-number" placeholder="手机号码">
</div>
</div>
<div class="form-group">
<button type="submit">立即注册</button>
</div>
<div class="agreement">
<input type="checkbox" id="agree">
<label for="agree">我已阅读并同意相关服务协议和隐私政策</label>
</div>
</form>
</div>
</div>
</body>
</html>
3，运行成果
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
