html基础的form，table，index

最新推荐文章于 2024-09-16 10:00:00 发布

雷子丸丸

最新推荐文章于 2024-09-16 10:00:00 发布

阅读量898

点赞数

文章标签： html

本文链接：https://blog.csdn.net/lzww9900/article/details/109821647

版权

一序言：

本文主要介绍HTML基础的form，table以及index

二正文：

首先是form，我将以代码的形式直观的进行介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<form>
			<!--隐藏框-->
			<input type="hidden" />
			<!--文本域-->
			<input type="text" placeholder="请输入用户名" />
			<!--密码框-->
			<input type="password" placeholder="请输入密码" />
			<!--文本框-->
			<input type="file"  />
			<!--下拉列表-->
			<select>
				<option>--请选择--</option>
				<option>--河南省--</option>
				<option>--河北--</option>
				<option>--安阳--</option>
				<!--文本域-->
				<textarea>
					
				</textarea>
				
			</select>
			<!--单选框-->
			
			<input type="radio" name="sex" id="male" /><label for="male">男</label>
			<input type="radio" name="sex" id="famale" /><label for="famale">女</label>
			<!--按键-->
			<input type="button" value="登陆" />
			<input type="submit" value="提交" />
			<input type="reset" value="取消" />
			<!--多选项-->
			<input type="checkbox" name="hobby" />篮球
			<input type="checkbox" name="hobby" />足球
			<input type="checkbox" name="hobby" id="pingpang"/> <label for="pp">乒乓球</label>
		</form>
	</body>
</html>

下面是代码所生成的页面

其次是table，和上面的方式一样

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table{
				border:1px solid black;
				border-spacing:0px;
				border-collapse: collapse;
			}
		th,td{
			border: 1px solid black;
		}
	</style>
	<!--th标头(内容自动加粗)td内容-->
	
	</head>
	<body>
		<table>
			<tr>
				<th colspan="9">2013年度图书销售统计</th>
			</tr>
			<tr>
				<td rowspan="2" valign="center" align="center">图书分类</td><td colspan="2" align="center">一季度</td><td colspan="2" align="center">二季度</td><td colspan="2" align="center">三季度</td><td colspan="2" align="center">四季度</td>
			</tr>
			<tr>
				<th>销售量</th><th align="center">销售额</th><th align="center">销售量</th><th align="center">销售额</th><th align="center">销售量</th><th align="center">销售额</th><th align="center">销售量</th><th align="center">销售额</th>
			</tr>
			<tr>
				<td colspan="1" align="center">小说</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td>
			</tr>
			<tr>
				<td colspan="1" align="center">文艺</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td>
			</tr><tr>
				<td colspan="1" align="center">励志/成功</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td>
			</tr><tr>
				<td colspan="1" align="center">童书</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td><td>23521</td><td>￥559940.00</td>
			</tr>

		</table>
	</body>
</html>

其中：

“rowspan”代表把行进行合并；“colspan”代表把列进行合并；

“align”表明是将文本的位置进行怎样的调整；

“<th> </th>”会将中间的汉字进行加粗，起到标题的作用；“<tr> </tr>”则是正常显示

那么生成的网页如下：

最后是index

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>MyFirst</title>
	</head>
	<body>
		<!---行内元素：不会自动换行，长度和宽度包裹内容-->
		
		
		<b>行内元素111</b>
		<i>行内元素222</i>
		<del>行内元素333</del>
		<span>行内元素444</span>
		<!--行外元素：会自动换行，长度和宽度不包裹内容-->
		<p style="font-size: 36px;"> 行外元素111</p>
		<p>行外元素222</p>
		<div>行外元素333</div>
		<h1 style="text-align: center;">行外元素444</h1>
		<h6 style="text-align: center;">行外元素555</h6>
		<!--有序 order-->
        <ol start="2" type="I">
        	<li>语文</li>
        	<li>数学</li>
        	<li>英语</li>
        </o1>
        <!--无序 unordered list-->
        <ul type="square">
        	<li>语文</li>
        	<li>数学</li>
        	<li>英语</li>
        </ul>
			
		</style></h1>
	</body>
</html>

下面是生成的网页：