HTML基础练习一（文本、表格、表单）

最新推荐文章于 2022-02-20 13:16:19 发布

qq_37172182

最新推荐文章于 2022-02-20 13:16:19 发布

阅读量1k

点赞数 2

分类专栏： HTML 文章标签： text table form

本文链接：https://blog.csdn.net/qq_37172182/article/details/86522481

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、文本编辑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>1- Louis Lobo</title>
	</head>
	<body>
		<p><font style="font-style: italic;">Louis Lobo </font>出生于瑞士的一个小镇，他从孩提时代起，就立志当一名科学家， 他在<u>桑格上的大学，在苏黎世上的医学院</u>，<br />于16<sup>th</sup> May, 2005
			大学毕业，他在年幼时就对分子式H<sub>2</sub>0颇感兴趣。</p>
	</body>
</html>

2、表格格式设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table border="1" align="center" width="200" height="100">
			<caption align="up">表格测试</caption>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td rowspan="2">6</td>
			</tr>
			<tr>
				<td colspan="2">7</td>
			</tr>
		</table>
	</body>
</html>

3、表单设计

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body bgcolor=darkorange>
		<div>
		<form action="#" method="post">
			<table align="center" style="background-color:lemonchiffon">
				<tr>
					<td align="center" colspan="2" bgcolor="gold">请完成以下表格</td>
				</tr>
				<tr>
					<td ><label>姓名</label></td>
					<td><input type="text" name="username"/>
			  </tr>
			    <tr>
			    	<td><label>密码</label></td>
			    	<td><input type="password" name="password" /> </td>
			    </tr>
			    <tr>
			    	<td><label>&nbsp;</label></td>
			    	<td><font size="2">请在此处填写姓名</font></td>
			    </tr>
			    <tr>
			    	<td><label>&nbsp;</label></td>
			    	<td><font size="2" color="red"><b>字符最长为四个汉字，或八个英文字母</b></font></td></tr>
			    <tr>
					<td><label>性别</label></td>
					<td><input type="radio" name="gender"  >男
						<input type="radio" name="gender"  >女
					</td>
				</tr>
				<tr>
					<td><label>电子邮件地址</label></td>
					<td><input type="email" name="email" ></td>
					</tr>
					<tr>
					<td><label>职业</label></td>
					<td>
						<select name="edu">
							<option value="0">教育/研究</option>
							<option value="0">医学/药物</option>
							<option value="0">体育/健身</option>
						</select>
					</td>
						<tr>
					<td><label>个人爱好</label></td>
					<td>
						<input type="checkbox" name="hobby" >电脑网络
						<input type="checkbox" name="hobby" >影视娱乐
						<input type="checkbox" name="hobby" >棋游戏牌
					</td>
				</tr>
				<tr><td><label>&nbsp;</label></td>
					<td>
						<input type="checkbox" name="hobby" >读书读报
						<input type="checkbox" name="hobby" >美酒佳肴
						<input type="checkbox" name="hobby" >绘画书法
					</td></tr>
					<tr><td><label>&nbsp;</label></td>
						<td><font size="2">在此选择兴趣爱好，可选择一个以上的选项</font></td>
					</tr>
					<tr>
						<td><label>留言内容</label></td>
						<td><textarea cols="50" rows="6" ></textarea></td>
					</tr>
					<tr>
						<td colspan="2"><font size="2" ><div class="text" style="text-align: center; background-color: gold;">填写完成后，点击下面的提交按钮提交表单</div></font></td>						
					</tr>
				<tr>
				<td colspan="2"><div class="text" style="text-align: center; background-color: lemonchiffon;">
						<input type="submit" value="提交"  />
						<input type="reset" value="重置"  /></div>
				</td>
				</tr>
			</table>
		</form>	
		</div>
	</body>
</html>

qq_37172182

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML基础练习一（文本、表格、表单）

1、文本编辑&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;1- Louis Lobo&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;
复制链接

扫一扫