html基础
表格 (table)
表格标签<table></ table>,所有表格内容都要写在其中。完整结构如下
<table border="1px" style="border-collapse: collapse;">
<thead></thead>
<tbody>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
thead:表的头部
tbody:表的主体部分
tr:(table row)行
td:(table dataceil) 单元格
th:表头,自带样式,会对内容进行加粗显示
table的一些要点
- border 边框;table创建时是没有边框,如果需要边框,要将boder添加进来并写上属性值。
- rowspan 跨行合并,属性隶属于td,属性值表示需要跨几行进行合并,合并以后需要将被合并的单元格删除,不然会任然存在。
- colspan 跨列合并,属性隶属于td,使用方法同rowspan。
- 表格的边框之间存在间隙,可以添加style="border-collapse: collapse;"消除间隙
列表(list)
-
有序列表
- 完整样式(order list)
<ol> <li></li> </ol>
- 属性: start 表示有序列表从哪一个值开始;type 有五个属性值(1、A、a、Ⅰ、ⅰ)分别表示数字,大写字母,小写字母,大写罗马数字,小写罗马数字
-
无序列表
-
完整样式(unorder list)
<ul>
<li></li>
</ul>
- type可以设置无序列表的标记符的形状,默认是原型;如果不要标记符,可以使用type="none"消除。
- 自定义列表(不常用)
- 完整样式
<dl> <dt> <dd></dd> </dt> </dl>
#### 表单
在HTML中表单承担着一个十分重要的角色,因为它能够提供一些可视化的控件快速收集整理用户输入的数据提交给后端
<!--一个简单的信息收集表单展示-->
<form action="#" id="test">
用户名:<input type="text" maxlength="16" minlength="5" placeholder="请输入您的用户名" name="userName" value="kunkun"><br>
密码:<input type="password" placeholder="请输入您的密码" name="pwd" value="123"><br>
确认密码:<input type="password" placeholder="请确认您的密码" name="repwd" value="123"><br>
<input type="submit" value="提交注册按钮">
<input type="reset">
<input type="button" value="普通按钮">
<!-- 单选框 -->
<input type="radio" name="gender" value="1" checked>男
<input type="radio" name="gender" value="0">女
<br>
<!-- 多选框 -->
<input type="checkbox" name="like" value="0" checked>唱
<input type="checkbox" name="like" value="1">跳
<input type="checkbox" name="like" value="2">rap
<input type="checkbox" name="like" value="3">篮球
<!-- 文件上传 -->
<input type="file" multiple name="ufile">
</form>```
action
在真正的项目中属性值填写的是需要提交到的地址,这里用#表示提交到本页
input的公共属性
type
属性值 | 意义 |
---|---|
text | 默认属性,表示此输入框是普通文本输入框 |
password | 密码输入框,表现为输入的内容为变成一些点 |
submit | 提交按钮 |
reset | 重置按钮 |
button | 普通按钮 |
radio | 单选框 |
checkbox | 多选框 |
file | 上传文件 |
name
form表单的输入控件都需要添加name(文本框,密码框,单选框,多选框,文件上传),否则此控件就不会提交值到后端。
value
存储用户输入的内容,在输入框状态下如果提前有写入的话,会直接显示到页面,用户不进行更改,便会当作默认值提交给后端;在选择框状态下,作为选项的值。
注意
在单选框中,必须要进行name命名,这是为了进行分组。checked只有一个属性值就是它本身,因此简写为checked,表示默认选择。
在文件上传中,multiple也是单属性值,它表示可以选择多个文件进行上传。