表格标签：
表格标签基础：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
<!--
1.表格的格式
table：标志当前为一个表格
tr：行
th：表格头
td：列
2.表格常用属性：
块级元素初始所占位置宽度为整个屏幕但高度为元素内容所占位置
边框：border=1px
对齐方式：align=center/top/bootom/left/right
单元格间距：cellspacing=20px
内容到单元格的间距：cellpadding=10px
-->
</head>
<body>
<table
border="1px"
align="center"
bgcolor="yellow"
background="">
<tr bgcolor="blue">
<th>用户名</th>
<th>账号</th>
<th>密码</th>
</tr>
<tr>
<td bgcolor="pink">xiaolin</td>
<td bgcolor="red">wwwwww</td>
<td>123456</td>
</tr>
</table>
</body>
</html>
表格头体位格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格头体尾</title>
<!--
1.表格头--thead
2.表格主体--tbody
3.表格尾--tfoot
-->
</head>
<body>
<table border="10px">
<!-- 头 -->
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<!-- 体 -->
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<!-- 尾 -->
<tfoot>
<tr>
<td>尾</td>
<td>尾</td>
<td>尾</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格嵌套：
<!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>
<table border="10px" width="200px" height="200px" align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>
<table border="10px" width="20px" height="20px" align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td>2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
表格合并（重要）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的合并</title>
<!--
表格合并用于布局
1.跨行--rowspan
2.跨列--colspan
-->
</head>
<body>
<table width="800px" height="600px" align="center">
<tr>
<td bgcolor="black" colspan="3"></td>
<td></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr>
<td bgcolor="red"></td>
<td></td>
<td bgcolor="pink" colspan="2" rowspan="2" width="3px"></td>
<!-- <td></td> -->
</tr>
<tr>
<td></td>
<td bgcolor="red"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr>
<td bgcolor="blue" colspan="4"></td>
<!-- <td></td>
<td></td>
<td></td> -->
</table>
</body>
</html>
表单标签：
表单及常用属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单及常用属性</title>
<!--
1.表单的格式--form
表单主要用于收集用户的输入信息，本身没有样式，重要的是它的元素
主要研究表单的作用
提交表单时需要按钮或者输入框且类型必须尾submit
2. 表单的重要属性
action---提交位置 网络路径
method---提交方式--默认为get
3.面试题：
get和post的区别
get：
问号传值，url发生改变
post：
url不会发生改变
name：属性的主要作用就是在表单提交时将输入的数据赋值在表单name属性对应值上
-->
</head>
<body>
<!-- 使用表单 -->
<form action="https://baidu.com" method="get">
<!-- 输入框 -->
用户名：<input type="text" name="用户名"><br>
<!-- 密码框 -->
密码：<input type="password" name="密码"><br>
<!-- 登录按钮 -->
<button type="submit">登录</button>
</form>
</body>
</html>
input表单元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><input 表单元素></title>
<!--
1.input--输入框，主要用来采集信息
2.input：常见属性
type：输入框类型
name：在提交表单数据时，以name=zhangsan（key=value/键值对/json字符串）
name属性主要就是设置数据的键，而value就是输入框中输入的数据
id：表示当前html元素的唯一标识，要求大家id不能一致，css/js要使用
value：代表文本框中的默认值
placehold：当前输入框的提示信息，只做提示使用
maxlength：最大字符数
readonly：文本框只读
required：必填项
hidden：为文本框隐藏
autofocus：自动获取光标
disabled：不可选取
class：重点，，，后续学习css/js中一般用class设置样式和行为，
本身没有特殊含义，class值可以设置多个，用空格键分开
checked:默认勾选项--单选和复选
3.input：常用类型
text：普通文本框
password：密码框，隐藏输入数据
-->
</head>
<body>
<!-- input的常见元素 -->
<form action="../1.1文本标签/html.html" method="post">
<p>
输入框：<input type="text" class="" name="username" id=""
value="zhangsan" maxlength="10" readonly>
</p>
<p>
密码框：<input type="password" name="password" placeholder="请输入密码"
autofocus>
</p>
<p>单选框：<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女">女</p>
<p>复选框：<input type="checkbox" name="hobby" value="唱">唱
<input type="checkbox" name="hobby" value="跳">跳
<input type="checkbox" name="hobby" value="rap">rap</p>
<p>图片提交按钮：<input type="image" src="" name="img" id=""></p>
<p>隐藏输入框：<input type="hidden" name="hidden" value="这是保密信息"></p>
<p>文件：<input type="file" name="file" id=""></p>
<p>邮箱：<input type="email" name="email" id=""></p>
<p>颜色：<input type="color" name="color" id=""></p>
<p>日期年月日：<input type="data" name="data" id=""></p>
<p>日期自行输入：<input type="datatime" name="datatime" id=""></p>
<p>日期年月日时分：<input type="datatime-local" name="datatime-local" id=""></p>
<p>日期年月：<input type="month" name="month" id=""></p>
<p>日期周数：<input type="week" name="week" id=""></p>
<p>日期时分：<input type="time" name="time" id=""></p>
<p>滑块范围：<input type="range" name="range" id=""></p>
<p>电话：<input type="tel" name="tel" id=""></p>
<p>url：<input type="url" name="url" id=""></p>
<p>搜索框：<input type="search" name="secrah" id=""></p>
<!--
提交的几种方式
图片提交
按钮提交
输入框提交
-->
<!-- 按钮提交 -->
<p><button type="submit">登录按钮</button></p>
<!-- input提交默认为提交这两个字，更改需要加value属性 -->
<p><input type="submit" name="submit" id="" value="login"></p>
<!-- 重置 -->
<p><button type="reset">清空表格</button></p>
<p><input type="reset"></p>
</form>
</body>
</html>
lable标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lable标签</title>
<!--
语义化标签---将多选框中点击文字也能选中
-->
</head>
<body>
<!-- for必须和id一致 -->
<input type="checkbox" name="checkbox" id="test"><label for="test">java</label>
<!-- 简单方法 -->
<label><input type="checkbox" name="checkbox" id="">java</label>
</body>
</html>
下拉框和文本域：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 下拉框---select option -->
<!-- 文本域---textarea -->
</head>
<body>
<form action="../1.3块级和行内标签.html/1.3.1块级标签.html">
<!-- 下拉框 -->
<select name="books" id="">
<option value="santi">三体</option>
<option value="santi2">三体2</option>
<option value="santi3">三体3</option>
<option value="santi4">三体4</option>
</select>
<br>
<!-- 文本域 ---cols与rows是字符个数 placeholder是提示语-->
<textarea name="introduce" id="" cols="50" rows="10" placeholder="请写出对本书的理解"></textarea>
<input type="submit" value="提交">
</form>
</body>
</html>
扫一扫
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
