【前端】html 0基础练习题

齐天大圣12138

已于 2022-03-19 16:34:31 修改

阅读量1.5k

点赞数 4

分类专栏： html 文章标签： html

于 2021-05-21 22:24:05 首次发布

本文链接：https://blog.csdn.net/weixin_52078305/article/details/117135997

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、问卷调查：下面是一个网页在浏览器上的效果，请制作一张一模一样的问卷调查网页。

要求：

（1）大标题使用h3标签；
（2）问卷调查题目使用h4标签
（3）前2个问题选项使用有序列表；
（4）最后一个问题选项使用无序列表

添加链接描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>练习题</title>
	</head>
	<body>
		<h3>问卷调查</h3>
		<h4>你喜欢吃什么？</h4>
		<ol>
			<li>苹果</li>
			<li>桃子</li>
			<li>李子</li>
		</ol>
		<h4>你喜欢什么科目？</h4>
		<ol>
			<li>语文</li>
			<li>英语</li>
			<li>数学</li>
		</ol>
		<h4>你喜欢什么运动</h4>
		<ul>
			<li>跑步</li>
			<li>跳舞</li>
			<li>爬山</li>
		</ul>
	</body>
</html>

1、使用你在这一章学习到的表单标签制作下面的一个表单：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是一个很好的网站</title>
		<style type="text/css">
			body{
				border:3px solid navajowhite;
			}
		</style>
	</head>
	<h1>信息填写</h1>
<form method="post" action="save.php">
	<label >昵称：</label>
	<input type="text" placeholder="请输入"  />
	<br />
	<label>密码：</label>
	<input type="password" placeholder="请输入" />
	<br />
	<label>邮箱：</label>
	<input type="email" />
	<form>
		<select>
		<option selected="selected">qq.com</option>
		<option>163.com</option>
		<option>183.com</option>
	</select>
	</form>
	<label>性别：</label>
	<label>男</label>
	<input type="radio" value="1" name="sex" />
	<label>女</label>
	<input type="radio" value="2" name="sex" />
	<br />
	<label>兴趣：</label>
	<label>旅游</label>
	<input type="checkbox" name="happy" />
	<label>摄影</label>
	<input type="checkbox" name="happy" />
	<label>运动</label>
	<input type="checkbox" name="happy" />
	<br />
	<label>个人介绍：</label>
	<br />
	<textarea rows="20" cols="40">在此输入</textarea>
	<br />
	<input type="submit" value="提交" name="submitBtn" />
	<br />
	<label>上传个人照片：</label>
	<br />
	<input type="file"  />
</form>
	
	</body>
</html>

原文链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>已知宽高实现盒子水平垂直居中</title>
		<style>
			.box{
			border：1px solid #00ee00;
			height:300px;
			position:relative;
		}
		.box1{
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -100px 00 -100px;
			width: 200px;
			height: 200px;
			border: 1px solid red;

		}
		</style>
		
	</head>
    <body>
	<div class="box">
		<div class="box1">i</div>
	</div>
	
    </body>
</html>