网站链接: element-ui dtcms
当前位置: 首页 > 技术博文  > 技术博文

html2(超链接、表格、表单)

2021/4/5 20:48:10 人评论

简易版百度网盘 绝对地址&#xff1a;在任何情况下都找得到的地址 相对地址&#xff1a;必须知道当前所在地址&#xff0c;才能找到对应的地址 …/ &#xff1a;表示返回上一层目录 <!--demo.html--> <!DOCTYPE html> <html><head><meta charset…

简易版百度网盘

绝对地址:在任何情况下都找得到的地址
相对地址:必须知道当前所在地址,才能找到对应的地址
…/ :表示返回上一层目录
目录

<!--demo.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="img/baidu.PNG" width="100%">
		<p>
			<a href="one/one.html">
				<img src="img/wenjianjia.jpg" width="60"/>one
			</a>
			<a href="one/two.html">
				<img src="img/wenjianjia.jpg" width="60"/>two
			</a>
			
		</p>
	</body>
</html>

<!--one.html/two.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="../img/baidu.PNG" width="100%"/>
		<p>
			<a href="../demo.html">
				<img src="../img/fanhui.jpg" height="20px"/>
			</a>
		</p>
		<p>
			<img src="../img/excel.jpg" width="50px"/>
			<img src="../img/word.jpg" width="50px"/>
			<img src="../img/ppt.jpg" width="50px"/>
		</p>
		
	</body>
</html>

表格的制作

两行五列的表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>今天又是新的一天</h3>
		<table border="1px" cellspacing="0"><!--两行五列-->
		<col align="center" width="100px"/>
			<tr>
				<td width="100px" align="center">姓名\科目</td>
				<td width="100px" align="center">数学</td>
				<td width="100px" align="center">语文</td>
				<td width="100px" align="center">英语</td>
				<td width="100px" align="center">政治</td>
			</tr>
			<tr>
				<td align="center">哈哈哈</td>
				<td align="center">89</td>
				<td align="center">98</td>
				<td align="center">90</td>
				<td align="center">79</td>
			</tr>
		</table>
	</body>
</html>
<!--总结:
	<table border="1px">:表格标签,border表示边框,cellspacing表示单元格间隙
		<col align="center" width="100px"/>:column列的缩写
			一个col标签只能限定一列的模式,width表示一列的宽度,align排列,这里表示对齐方式
		<tr width="200px" align="center">:行标签
			行标签加限定词语,则该标签下所有内容都受约束
			<td width="200px" align="center">:单元格标签
				width表示一列的宽度,align排列,这里表示对齐方式
				文字内容默认靠左对齐
			</td>
		</tr>
	</table>
	关于表头:
		若加粗居中则将<td></td>标签改为<th></th>标签
		即th=加粗并水平居中的td
	关于合并列:
		col标签改位colgroup,group表示分组,span表示合并的列的个数
		<colgroup span="6" width="100px"></colgroup>
	关于tbody:
		网页自动生成tbody
		<table>
			<thead>
				表格的页眉
			</thead>
			<tbody>
				表格的主体
			</tbody>
			<tfoot>
				表格的页脚
			</tfoot>
		</table>
	关于注释:
		<!----/>
	关于标签的嵌套:浏览器会自动分开嵌套
		超链接不能嵌套超链接
		p标签不能嵌套p标签
		标题标签h1...h6不能互相嵌套
-->

个人简历精简版

目标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0">
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="100px" />
			<col width="200px" />
			
			<tr height="40px" align="center">
				<td colspan="7">个人简历</td>
				<!--colspan代表单元格的个数,水平方向上合并单元格实际就是将多余的单元格删除,然后改变剩下单元格的宽度-->
			</tr>
			<tr height="40px" align="center">
				<td>姓名</td>
				<td></td>
				<td>性别</td>
				<td></td>
				<td>年龄</td>
				<td></td>
				<td rowspan="4">照片</td>
				<!--rowspan代表该单元格占据的行数-->
			</tr>
			<tr height="40px" align="center">
				<td>学历</td>
				<td></td>
				<td>籍贯</td>
				<td colspan="3"></td>
			</tr>
			<tr height="40px" align="center">
				<td>电话</td>
				<td></td>
				<td>政治面貌</td>
				<td colspan="3"></td>
			</tr>
			<tr height="40px" align="center">
				<td>毕业院校</td>
				<td colspan="5"></td>
			</tr>
			<tr height="40px" align="center">
				<td>求职意向</td>
				<td colspan="6"></td>
			</tr>
		</table>
	</body>
</html>
<!--总结:
列的合并:colspan
行的合并:rowspan
-->

表单

目标表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.baidu.com" method="post">
			<table width="600px" border="1px" cellspacing="0">
				<tbody>
					<tr height="40px">
						<td rowspan="4" align="center">总体信息</td>
						<td colspan="2"></td>
					</tr>
					<tr height="40px">
						<td align="right">用户名:</td>
						<td>
							<input type="text" name="loginname"/>
						</td>
					</tr>
					<tr height="40px">
						<td align="right">密码:</td>
						<td>
							<input type="password" name="pwd"/>
						</td>
					</tr>
					<tr height="40px">
						<td colspan="2" align="center">
							<input type="submit" value="提交"/>
							<input type="reset" value="重置"/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
		
	</body>
</html>
<!--总结:
	1.form必须有action属性,表示提交地址
	2.所有需要提交的数据, input必须有name属性
	3.input按钮的文字,使用value属性表示
	4.input必须放在form标签内才能提交
	
	提交数据:post--F12--\>network--\>第一个最后from data--\>可以看到(以一种隐蔽的方式将数据发送给服务器,用户不可见)
	获取数据:get--地址栏显示数据,用户可见

	get和post只是在传递数据的方式上不同,那意味着,无论获取数据还是提交数据两种方式可以混用,但不建议使用
	类似于账号数据较少可以用get请求提交数据,但是类似于照片、视频等只能使用post请求
	get请求不能提交大量数据,但post可以,因此不要混用
	
	<form action="http://www.baidu.com" method="post">:action表示表单数据提交的地址
		<input type="" value=""/>:输入标签,type表示输入标签的属性,value表示按钮显示的文字
		<input type="text" name=""/>:文本输入框,name表示自定义的名称
		<input type="password"/>:密码输入框
		<input type="button"/>:普通按钮
		<input type="submit"/>:提交按钮
		<input type="reset"/>:重置按钮
		<input  type="checkbox"/>:复选框
		<input type="radio"/>:单选框
		<input type="file"/>:文件选择框
	</form>
	
-->

相关资讯

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?