首页 > 其他分享 >html中的table标签和表单标签

html中的table标签和表单标签

时间:2023-02-20 07:22:05浏览次数:52  
标签:标签 表单 html 绝技 table 链接

资料来源于:B站尚硅谷JavaWeb教程(全新技术栈,全程实战) ,本人才疏学浅,记录其笔记以供他日回顾
table标签 视频链接
表单标签 视频链接

table标签

<html>
	<head>
		<title>表格标签的学习</title>
		<meta charset="UTF-8">
		
	</head>
	<body>
		<table border="1" width="600" cellspacing="0" cellpadding="4">
			<tr align="center">
				<th>姓名</th>
				<th>门派</th>
				<th>成名绝技</th>
				<th>内功值</th>
			</tr>
			<tr align="center">
				<td>乔峰</td>
				<td>丐帮</td>
				<td>少林长拳</td>
				<td>5000</td>
			</tr>
			<tr align="center">
				<td>虚竹</td>
				<td>灵鹫宫</td>
				<td>北冥神功</td>
				<td>15000</td>
			</tr>
			<tr align="center">
				<td>扫地僧</td>
				<td>少林寺</td>
				<td>七十二绝技</td>
				<td>未知</td>
			</tr>
		</table>
		<hr/>
		<table border="1" cellspacing="0" cellpadding="4" width="600">
			<tr>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr align="center">
				<td>苹果</td>
				<td rowspan="2">5</td>
				<td>20</td>
				<td>100</td>
				<td><img src="imgs/del.jpg" width="24" height="24"/></td>
			</tr>
			<tr align="center">
				<td>菠萝</td>
				<td>15</td>
				<td>45</td>
				<td><img src="imgs/del.jpg" width="24" height="24"/></td>
			</tr>
			<tr align="center">
				<td>西瓜</td>
				<td>6</td>
				<td>6</td>
				<td>36</td>
				<td><img src="imgs/del.jpg" width="24" height="24"/></td>
			</tr>
			<tr align="center">
				<td>总计</td>
				<td colspan="4">181</td>
			</tr>
		</table>
	</body>
</html>
<!--
17) 表格	table
	行		tr
	列		td
	表头列	th

	table中有如下属性(虽然已经淘汰,但是最好了解一下)
	- border:表格边框的粗细
	- width:表格的宽度
	- cellspacing:单元格间距
	- cellpadding:单元格填充

	tr中有一个属性: align -> center , left , right 

	rowspan : 行合并
	colspan : 列合并

-->

表单标签

<html>
	<head>
		<title>表单标签的学习</title>
		<meta charset="UTF-8">
		
	</head>
	<body>
		<form action="demo04.html" method="post">
			昵称:<input type="text" value="请输入你的昵称"/><br/>
			密码:<input type="password" name="pwd"/><br/>
			性别:<input type="radio" name="gender" value="male"/>男
	  			  <input type="radio" name="gender" value="female" checked/>女<br/>
			爱好:<input type="checkbox" name="hobby" value="basketball"/>篮球
				  <input type="checkbox" name="hobby" value="football" checked/>足球
				  <input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
			星座:<select name="star">
					<option value="1">白羊座</option>
					<option value="2" selected>金牛座</option>
					<option value="3">双子座</option>
					<option value="4">天蝎座</option>
					<option value="5">天秤座</option>
				  </select><br/>
			备注:<textarea name="remark" rows="4" cols="50"></textarea><br/>
			<input type="submit" value=" 注 册 "/>
			<input type="reset" value="重置"/>
			<input type="button" value="这是一个普通按钮"/>
		</form>
	</body>
</html>
<!--
18) 表单	form

19) input type="text" 表示文本框 , 其中 name属性必须要指定,否则这个文本框的数据将来是不会发送给服务器的
	input type="password" 表示密码框
	input type="radio" 表示单选按钮。需要注意的是,name属性值保持一致,这样才会有互斥的效果;可以通过checked属性设置默认选中的项
	input type="checkbox" 表示复选框。name属性值建议保持一致,这样将来我们服务器端获取值的时候获取的是一个数组
	select 表示下拉列表。每一个选项是option,其中value属性是发送给服务器的值 , selected表示默认选中的项
	textarea 表示多行文本框(或者称之为文本域),它的value值就是开始结束标签之间的内容
	input type="submit" 表示提交按钮
	input type="reset" 表示重置按钮
	input type="button" 表示普通按钮

-->
<html>
	<head>
		<title>表单标签的学习</title>
		<meta charset="UTF-8">
		
	</head>
	<body>
		<h1><font color='red'>注册成功</font></h1>
	</body>
</html>
<!--
18) 表单	form

19) input type="text" 表示文本框 , 其中 name属性必须要指定,否则这个文本框的数据将来是不会发送给服务器的
	input type="password" 表示密码框	

-->

标签:标签,表单,html,绝技,table,链接
From: https://www.cnblogs.com/fgcs111/p/17136092.html

相关文章

  • html基础标签
    资料来源于:B站尚硅谷JavaWeb教程(全新技术栈,全程实战),本人才疏学浅,记录其笔记以供他日回顾视频链接<html> <head> <title>这是我的第一个网页</title> <metac......
  • xss,crsf,http头部。HTTP标签a,ifame
    https://blog.csdn.net/Dax1_/article/details/1240451912.xss:XSS是代码注入问题1.xss实际场景。简单来说,任何可以输入的地方都有可能引起XSS攻击,包括URL在标签属性......
  • html基础介绍
    html基础介绍1、html结构<!DOCTYPEhtml> //声明为HTML5文档<htmllang="zh-CN"> //HTML页面的根节点 //lang=:"zh-CN"告诉浏览器,内容是中文的,无需翻译......
  • ElementUI-Table分页查询
    <!--搜索--><el-inputplaceholder="请输入商品名搜索"v-model="searchText"class="input-with-select"style="width:3......
  • NPOI给word中的表格table动态添加行,并保留表格样式 , 替换文字
    publicclassNPOIHelper{///<summary>///输出模板docx文档///</summary>///<paramname="tempFilePath">模板文件地......
  • HTML入门知识点
     一:HTML元素 <html><body><h1>我的第一个标题</h1><p>我的第一个段落。</p><ahref="http://www.w3school.com.cn">Thisisalin......
  • Chrom修改链接打开新的标签页
    背景chrom默认的搜索打开方式是在本页打开,十分不方便;我们一般更希望是一个新的tab页打开,设置方式如下解决方案旧版新版新版的搜索起始页没有这个页面变为了下......
  • element-plus实现table表格序号递增的效果
    element-plus组件排序,可以给序号行加一个type="index"就可以实现按序号排序效果,但是当页码到第二页时,又是从一开始排列了。想要实现的效果是翻页后页码接上一页的顺序......
  • HTML学习与模板套用
    HTML语法用两个空格来代替制表符(tab)–这是唯一能保证在所有环境下获得一致展现的方法。嵌套元素应当缩进一次(即两个空格)。对于属性的定义,确保全部使用双引号,绝......
  • HTML标签总结
    序号标签语义解释1div标签Division区块2span标签Span范围3ul标签OrderedList不排序列表4ol标签UnorderedList排序列表5li标签List......