web学习笔记-2

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的一些要点

  1. border 边框;table创建时是没有边框,如果需要边框,要将boder添加进来并写上属性值。
  2. rowspan 跨行合并,属性隶属于td,属性值表示需要跨几行进行合并,合并以后需要将被合并的单元格删除,不然会任然存在。
  3. colspan 跨列合并,属性隶属于td,使用方法同rowspan。
  4. 表格的边框之间存在间隙,可以添加style="border-collapse: collapse;"消除间隙
列表(list)
  1. 有序列表

    • 完整样式(order list)
    <ol>
       	<li></li>
    </ol>
    
    • 属性: start 表示有序列表从哪一个值开始;type 有五个属性值(1、A、a、Ⅰ、ⅰ)分别表示数字,大写字母,小写字母,大写罗马数字,小写罗马数字
  2. 无序列表

  3. 完整样式(unorder list)

	<ul>
 		<li></li>
 	</ul>
  1. type可以设置无序列表的标记符的形状,默认是原型;如果不要标记符,可以使用type="none"消除。
  2. 自定义列表(不常用)
    • 完整样式
    	<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也是单属性值,它表示可以选择多个文件进行上传。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值