2020年中南大学云麓谷研发部面试初级作业

作者:CYL(刚上路)

日期:2020-10-11

要求:初级任务:完成如下图片中的html网站构建
在这里插入图片描述
包含了基础的:

1、段落 <p>
2、有序列表  <ol>  <li>
3、表格 <tabel> <th> <td> 和 标题<caption> 
4、表单 <form>  其中还有 
外加边框<fieldset> 
边框上标题<legend> 
文本输入<input  type=“text”>  
单选<input type="radio"> 
下拉菜单<select>
多行文本 <textarea>
提交按钮<submit>
5、无序列表<ul> <li>
6、插入图片 <img>

知识点还挺综合的

<!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>
	<p>要求:</p>
	<ol>
		<li>创建如下图的表格一</li>
		<li>创建如下列申请表单</li>
		<li>创建链表菜单</li>
		<li>显示一张图片</li>
	</ol>

	<table border="1" >
		<caption>这是一个表格</caption>
		<tr>
			<th>表头1</th>
			<th>表头2</th>
			<th>表头3</th>
			<th>表头4</th>
		</tr>
		<tr>
			<td>单元格1,1</td>
			<td>单元格1,2</td>
			<td>单元格1,3</td>
			<td>单元格1,4</td>
		</tr>
		<tr>
			<td>单元格2,1</td>
			<td>单元格2,2</td>
			<td>单元格2,3</td>
			<td>单元格2,4</td>
		</tr>
		<tr>
			<td>单元格3,1</td>
			<td>单元格3,2</td>
			<td>单元格3,3</td>
			<td>单元格3,4</td>
		</tr>
		<tr>
			<td>汇总</td>
			<td>汇总单元格1</td>
			<td>汇总单元格2</td>
			<td>汇总单元格3</td>
		</tr>
	</table>

	<br>
	<br>

	<form action="form_action.asp" method="get">
		<fieldset>  <!--加外边框-->
			<legend>注册表单</legend>
			<p>姓名: <input type="text" name="fname" /></p>
			<p>性别: <input id="man" type="radio" checked="checked" name="sex"/>男<input type="radio" id="woman" name="sex">女</p>
			<p>密码: <input type="text" name="fname" /></p>
			<p>电话: <input type="text" name="fname" /></p>
			<p>邮箱: <input type="text" name="fname" /></p>
			<p>学历:
				<select>
					<option selected>初中</option>
					<option>高中</option>
					<option>本科</option>
					<option>专科</option>
					<option>研究生</option>
					<option>博士</option>
					<option>博士后</option>
				</select>
			</p>
			<p>经历:<textarea cols="30" rows="10"></textarea></p>
			<input type="submit" value="提交" /> <input type="reset" name="重置" value="重置">
		</fieldset>
	</form>

	<br>

	<ul>
		<li><a href="http://www.baidu.com">超链接1</a></li>
		<li><a href="http://www.baidu.com">超链接2</a></li>
		<li><a href="http://www.baidu.com">超链接3</a></li>
		<li><a href="http://www.baidu.com">超链接4</a></li>
	</ul>

	<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2684096087,4086209974&fm=26&gp=0.jpg" height="200" width="300">

</body>
</html>

猜你喜欢

转载自blog.csdn.net/cyl_csdn_1/article/details/109013699