html第三天-CSDN博客

本文链接：https://blog.csdn.net/weixin_45331512/article/details/124294941

在form表单中，可以使用action属性表示提交的目标资源
当点击提交按钮是，当前表单被提交到目标资源

<input type="submit" value="提交" />
表单中的提交按钮（value内的内容可以随便填写）
type=“reset” 重置按钮，恢复初始化状态
普通按钮
type=“button” 可以触发js的代码执行
还有另一种写法
写在form表单外。使用<button>输入的文字<button>
<button>普通按钮</button>放在表单内就是提交按钮

css

css--层叠样式表，可以美化页面
代码分两部分
1.选择器
2.声明语句
格式:选择器{
属性：值
......
}

内部样式表是css的一种
总是写在head内的style标签中
<style type="text/css">

元素选择器--可以选中当前页面上所有的某种元素
常用属性
color 颜色
font-size 字体大小
    body是选中body内的所有元素，但是优先级低于具体的元素选择器
 
当多个元素选择器需要相同样式时，可以将元素选择器写在一起，以逗号分割。
    如h4,h5,h6{
        color:aqua;
    }
相同的标签，不同的颜色
    在所需要的标签内加id.然后根据id修改样式，使用的是id选择器。id值不能以数字开头
    具体格式
    #id{
        
    }
    font-weight字体的粗细
    值的取值范围:100-900
    定位：绝对定位和相对定位
    绝对定位
    position：absolute；
    left：200px;相对左边偏移200，即向右移动200px;
    同理，top顶
    相对定位
    position：relative；
    left：200px;相对与左边偏移200，即向右移动200px;
    同理，top顶
    
<div>块级元素，里面可以用来装其他元素
    作用于页面布局。
    属性
    width宽度
    height高度
    margin-left左边距
    margin-right右边距
    margin-top上边距
    margin-bottom下边距
    上下相对，左右相对，同时设置是只会有一个生效。
    <div></div>
    display隐藏div
    设置
    position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
    margin: auto;
    可以设置div居中

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<table align="left">
				<tr>
			<th align="left">用户名：</th>
			<td><input type="text" placeholder="请输入用户名" ></td>
			</tr>
			<tr>
			<th align="left">密码：</th>
			<td><input type="password" placeholder="请输入密码"></td>
			</tr>
			<tr>
			<td><input type="submit" value="登录"></td>
			<td><input type="reset" value="重置"></td>
			</tr>
			</table>
		</form>
	</body>
</html>
/*login.html 登录界面*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table  border="1" cellpadding="10" cellspacing="0">
			<tr>
				<td colspan="7">
				<input type="text" placeholder="类别id,类别名称，描述">
				<input type="submit" value="查询">
				</td>
			</tr>
			<tr bgcolor="#E0FBC4">
				<th>类别id</th>
				<th>类别名称</th>
				<th>创建时间</th>
				<th>描述</th>
				<th colspan="3">操作</th>
			</tr>
			<tr>
				<td>c001</td>
			    <td>玄幻小说</td>
				<td>2021-01-01</td>
				<td>思想内容幽深，奇伟瑰丽</td>
				<td><a href="">增加</a></td>
				<td><a href="category_toAdd.html">修改</a></td>
				<td><a href="">删除</a></td>
			</tr>
			<tr>
				<td>c002</td>
				<td>历史小说</td>
				<td>2021-01-01</td>
				<td>架空历史，再创盛世</td>
				<td><a href="">增加</a></td>
				<td><a href="category_slectByPage.html">修改</a></td>
				<td><a href="">删除</a></td>
			</tr>
			<tr>
				<td>c003</td>
				<td>仙侠小说</td>
				<td>2021-01-01</td>
				<td>超脱武功，更似武侠</td>
				<td><a href="">增加</a></td>
				<td><a href="category_slectByPage.html">修改</a></td>
				<td><a href="">删除</a></td>
			</tr>
			<tr>
				<td>c004</td>
				<td>都市小说</td>
				<td>2021-01-01</td>
				<td>出自生活，更高于生活</td>
                <td><a href="">增加</a></td>
				<td><a href="category_slectByPage.html">修改</a></td>
				<td><a href="">删除</a></td>
			</tr>
		</table>
		总记录数4条&nbsp;共1页&nbsp;
		<a href="">首页</a>&nbsp;
		<a href="">上一页</a>&nbsp;
		<a href="">下一页</a>&nbsp;
		<a href="">尾页</a>&nbsp;
		&nbsp;第1页
	</body>
</html>
/* category_selectByPage*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<table>
		    <tr>
			<td>类别id:</td>
			<td><input type="text" /></td>
			</tr>
			<tr>
			<td>类别名称:</td>
			<td><input type="text" /></td>
			</tr>
			<tr>
			<td>类别描述：</td>
			<td><textarea cols="10" rows="3"></textarea></td>
		    </tr>
		    <tr>
			<td><input type="submit" value="提交"></td>
			</table>
		</form>
	</body>
</html>
/*category_toAdd*/