HTML5+CSS3 ——【笔记】5、表单和表格（完结）

已于 2022-11-28 13:15:54 修改
阅读量368 收藏 1
点赞数
分类专栏： 笔记 # HTML 文章标签： css3 html5 css
于 2022-07-07 21:12:58 首次发布
heart000_1
本文链接：https://blog.csdn.net/weixin_53920044/article/details/125667191
版权
笔记 同时被 2 个专栏收录
35 篇文章 2 订阅
订阅专栏
HTML
4 篇文章 0 订阅
订阅专栏

html效果链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5、表单和表格</title>
	</head>
	<body>
		<!-- <xmp><h1></xmp>能让标签不转义的标签 -->
		
一、 表格

  (一)创建表单
	<!-- 
	语法格式:
	<table>
		<tr>
			<td>单元格内的文字</td>
		</tr>
	</table>
	
    一个表格<table>、<tr>、<td>三个标签缺一不可。其中table表示表格的开始
	与结束，tr表示表格的行数,tr标签内有几个td即表示该行有几列
	 -->
	
	eg:
	<body>
		<table>
			<tr>
				<td>名字</td>
				<td>科目</td>
				<td>分数</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>数学</td>
				<td>130</td>
				
			</tr>
			
		</table>
		
		<table border="1">
			<tr>
				<td>名字</td>
				<td>科目</td>
				<td>分数</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>数学</td>
				<td>116</td>
				
			</tr>
			
		</table>
	</body>
	
<!-- 以上两个表格,一个设置了border边框属性，一个没有设置
	默认情况下,表格边框为0,高和宽有表格内容来支撑
	td标签就像一个容器,可容纳所用标签,甚至可以嵌套table标签 -->

  (二)<table>标签的属性
	<!--   
	用于控制表格[整体]显示样式的HTML语言属性,但大多数属性可以使用CSS进行代替
	
	属性:									  常用属性值
	border:设置表格边框(默认为0) 				  像素
	cellspacing:设置单元格之间的空间			  像素(默认为2)
	cellpadding:设置内容与单元格之间的空间		  像素(默认为1)
	width:设置表格的宽度						  像素
	height:设置表格的高度						  像素
	align:设置表格在网页中的对齐方式			  left、center、right
	bgcolor:设置表格的背景颜色				  预定义的颜色值、十六进制#RGB、rgb(r,g,b)
	background:设置表格的背景图像				  url地址
	
	1.border
		控制表格外边框和双线边框，当属性值大于1时双线边框不会再增大，只会改变外边框
	-->
			 
  (三)tr标签的属性
<!-- 			 
	table控制表格整体显示样式，tr控制某一行特殊显示
	
	属性:									常用属性值
	height:设置高度							像素
	align设置一行内容的对齐方式				left、center、right
	valign:设置一行内容的垂直对齐方式			top、middle、botton
	bgcolor:设置行背景颜色					预定义的颜色值、十六进制#RGB、rgb(r,g,b)
	background:设置行背景图片					url地址
	 -->
	eg:
	<body>
		<table	border="1" width="400" height="240" align="cennter">
			<tr	height="80" align="center" valign="top" bgcolor="#00CCFF">
				<td>姓名</td>
				<td>性别</td>
				<td>科目</td>
				<td>分数</td>
			</tr>
			<tr>
				<td>郑老</td>
				<td>男</td>
				<td>java</td>
				<td>98</td>
			</tr>
			<tr>
				<td>林老</td>
				<td>男</td>
				<td>软件测试</td>
				<td>95</td>
			</tr>
			<tr>
				<td>熊老</td>
				<td>男</td>
				<td>java</td>
				<td>59</td>
			</tr>
		</table>
	</body>
	
  
  (四)td标签的属性
<!--  
	tr标签控制表格中的一行显示样式，td标签内嵌于tr标签内能达到对某一个单元格进行控制
	
	常用属性:									 常用属性值
	width:设置单元格宽度							 像素
	height:设置单元格高度							 像素
	align:设置单元格内容的水平对齐方式				 left、center、right
	bgcolor:设置表格的背景颜色			  		 预定义的颜色值、十六进制#RGB、rgb(r,g,b)
	background:设置表格的背景图像			  		 url地址
	colspan:设置单元格横跨的列数(合并水平方向单元格) 正整数
	rowspan:设置单元格竖跨的行数(合并竖直方向单元格) 正整数
	 -->
	eg:
	<body>
		<table	border="1" width="400" height="240" align="cennter">
			<tr	height="80" align="center" valign="top" bgcolor="#00CCFF">
				<td>姓名</td>
				<td>性别</td>
				<td>电话</td>
				<td>住址</td>
			</tr>
			<tr>
				<td>小王</td>
				<td>女</td>
				<td>112233</td>
				<td rowspan="3">海淀</td>
			</tr>
			<tr>
				<td>小李</td>
				<td>男</td>
				<td>5566677</td>
			</tr>
			<tr>
				<td>小张</td>
				<td>男</td>
				<td>787798</td>
		</table>
	</body>
	
  (五)th标签及其属性
  <!-- 
	设置表格的表头，使格式更加清晰
	用th标签代替相应td标签即可
	用法与td标签相同，语义不同，th标签文本默认居中加粗
  -->
  (六)表格的结构
 <!-- 
	...很久以前用表格进行网页布局把表格分为头部、主体、页脚
	
	<thead></thead>:用于定义表格头部,必须位于<table></table>标签中
	<tfoot></tfoot>:用于定义表格页脚,位于<table></table>中,<thead></thead>标签之后
	<tbody></tbody>:用于定义表格主体,位于<table></table>中，<tfoot></tfoot>标签之后
	 -->
	eg:
	<body>
		<table width="600" border="1" cellspacing="0" align="center">
			<caption>表格的名称</caption>	<!-- caption定义表格的标题 -->
			<thead>
				<tr>
					<td colspan="3">网站logo</td>
				</tr>
				<tr>
					<th><a href="#">首页</a></th>
					<th><a href="#">关于我们</a></th>
					<th><a href="#">联系我们</a></th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td colspan="3" align="center">底部的基本企业信息&copy;【版权信息】</td>
				</tr>
			</tfoot>
			<tbody>
				<tr height="150">
					<td>主体的左栏</td>
					<td>主体的中间</td>
					<td>主体的右侧</td>
				</tr>
				<tr height="150">
					<td>主体的左栏</td>
					<td>主体的中间</td>
					<td>主体的右侧</td>
				</tr>
			</tbody>
		</table>
	</body>
  

二、CSS控制表格样式

  (一)CSS控制表格边框
	<!-- 
	<th>和<td>标签可以用padding对其应用内边距属性,其无外边距margin属性
	或对<table>标签应用HTML标签属性cellpadding.
	<tr>标签也无padding和margin属性
	 -->
  (二)CSS控制单元格的高和宽
	<!-- 
	CSS的width和height属性可控制单元格的宽和高;
	对同一行或同一列中单元格定义不同高度,最终的宽度或高度取其所在行或列中较大者
	 -->
	eg:
	  <head>
	  <style type="text/css">
		  .t1,.one,.two,.three{border: 1px solid #30F;}
	  	  .one{width: 10px;height: 80px;}
	  	  .two{width: 50px;height: 80px;}
	  	  .three{width:70px;height: 80px;}
	  </style>
	  </head>
	  <body>
		<table>
			<tr class="t1">
				<td class="one">A房间</td>
				<td class="two">B房间</td>
			</tr>
			<tr class="t1">
				<td class="three">C房间</td>
				<td class="two">D房间</td>
			</tr>
		</table>
	  </body>
	
  
	
三、表单
	<!-- 
	接收用户数据的平台,如注册页面、网上订货页.
	 -->
	
  (一)表单的构成
	  表单控件(文本框、按钮等)、提示信息、表单域(容纳表单控件和提示信息的容器)
  
  (二)创建表单
  
	<form></form>标签被用于定义表单域(容器)
	<!-- 
	语法格式:
	<form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>
	
	各属性
	1、action属性
	  指定接收并处理表单数据的服务器程序的url地址;提交数据时表单数据会传送到指定页面处理
	  属性值可为相对路径或绝对路径,还可以是E-mail邮箱(提交表单以邮箱形式传递出去).
	  
	2、method属性
	   设置表单提交方式 
	   属性值: get(默认,保密性差、有数据量限制)、post(保密性好、无数据量限制)
	   
	3、name属性
	 -->	
		
  
  
四、表单控件

  (一)input控件
	<!-- 
	如输入框、提交按钮等元素
	
	语法格式:
	<input type="控件类型">
	
	type为其最基本属性
	常用属性值:
	type="text"---单行文本输入			type="reset"---重置按钮
	type="password"---密码输入框			type="image"---图像形式的提交按钮
	type="radio"---单选按钮				type="hidden"---隐藏域
	type="checkbox"---复选框				type="file"---文件域
	type="button"---普通按钮				
	type="submit"---提交按钮				
	
	其他属性
	属性---属性值---描述
	name---用户定义---控件名称 
	value--用户定义---input中默认文本值
	size---正整数---input控件在页面中显示宽度
	readonly---readonly---该控件内容为只读(不能编辑修改)
	disabled---disabled---第一次加载页面时禁用该控件(显示为灰色)
	checked---checked---定义选择控件默认被选中项
	maxlength---正整数---控件允许输入的最多字符数
	 -->
	
	eg：
	<form action="#" method="POST">
		用户名:					<!-- 单行文本输入框 -->
		<input type="text" value="张三" maxlength="6"/> <br/><br>
		密码:					<!-- 密码输入框 -->
		<input type="password" size="40" />		<br/><br/>
		性别:					<!-- radio单选按钮 -->
		<input type="radio" name="sex" checked="checked" />男
		<input type="radio" name="sex"  />女			<br /><br />
		兴趣:					<!-- 复选框 -->
		<input type="checkbox" />唱歌
		<input type="checkbox" />跳舞
		<input type="checkbox" />游泳		<br/><br/>
		上传头像:
		<input type="file"/> <br><br>		<!-- 文件域 -->
		<input type="submit"/>				<!-- 提交按钮 -->
		<input type="reset"/>				<!-- 重置按钮 -->
		<input type="button" value="普通按钮">		<!-- 普通按钮 -->
		<input type="image" src="http://127.0.0.1:8848/htmlcode/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/1/static/logo.png"/>		<!-- 图像域 -->
		<input type="hidden"/>				<!-- 隐藏域 -->
	</form>
	
	
  (二)textarea控件
		<!-- 
		input控件只能创建单行文本输入框,而textarea控件能创建输入多行文本输入框,
		如留言板
		
		语法格式:
		<textarea name="" id="" cols="每行中字符数" rows="显示的行数">文本内容</textarea>
		
		其中,cols、rows为必备属性,其他为可选属性(cols、rows各浏览器显示效果有差异,常使用width、height来定义输入框的宽高)
		name(控件名称):用户自定义
		readonly(该控件为只读):readonly
		disabled(第一次加载该页面时禁用该控件):disabled
		 -->
		eg:(评论区)
		<form action="#" method="POST">
			评论:<br />
			<textarea name="" id="" cols="60" rows="5">
				评论时需要遵纪守法,语言文明
			</textarea><br/>
			<input type="submit" value="提交"/>
		</form>
		
  (三)select控件
  
	下拉菜单控件
	语法格式:
	<select name="" id="" >
		<option value="">选项1</option>
		<option value="">选项2</option>
		<option value="">选项3</option>
	</select>
	
	<!-- 
	select标签中常用属性 
		  size:下拉菜单的可见选项数(取值正整数)
		  multiple:定义multiple="multiple"时,下拉菜单具有多项选择的功能,按住【ctrl】键的同时技能同时选择多项
	 
	option标签常用属性
		  selected:定义selected="selected"时,当前项为默认选中项
		  
	*生成表单控件可通过工具快速生成,不必死记控件代码.
	 -->
	
五、HTML5新属性
  
  更高效地制作标准Web表单
  
  (一)全新的form属性
	<!-- 
	新增autocomplete和novalidate属性
	
	1、autocomplete属性
		指定表单是/否有自动完成功能;即表单控件输入的内容记录下来,再次输入时,
		会将历史输入显示在下拉列表;如浏览器搜索框的下拉历史搜索
		autocomplete不仅能用于form标签,还能用于所有输入类型input标签
		
		属性值
		on:有自动完成功能;	off:无自动完成功能
	
	2、novalidate属性
		指定在提交表单时取消对表单进行有效的检查。
		取值为其本身
		 -->
		 

  (二)全新的表单控件
	<!-- 
	datalist、keygen等元素可强化表单功能.
	datalist定义输入框选项列表
	 -->
	eg:
	<form action="#"  method="post">
		请输入用户名:<input type="text" list="namelist"/>
	<datalist id="namelist">
		<option >admin</option>
		<option >lucy</option>
		<option >lily</option>
	</datalist>
		<input type="submit" value="提交">
	</form>
		
		
  (三)全新的input控件类型
  
	丰富表单功能,更好实现表单控制和验证
	<!-- 
	1、email类型<input type="email"/>
		专门用于输入E-mail地址的文本输入框,用来验证内容是否符合邮箱地址格式.
		
	2、url类型<input type="url"/>
		用于输入url地址的文本框,若输入内容是url地址则提交到服务器,
		若不符url地址格式,则不允许提交并提升;如浏览器网址搜索栏
		
	3、tel类型<input type="tel"/>
		用于提供输入电话号码的文本框,由于电话格式的多样性,故tel类型通常会与pattern属性
		配合使用.
		
	4、search类型<input type="search"/>
		专门用于输入搜索关键词的文本框,能自动记录一些字符.
		如网站搜索内容后,右侧会有一个删除图标,单击能快速清除内容
		
	5、color类型<input type="color">
		用于提供设置颜色的文本框,用于实现一个RGB颜色输入,其默认值为#000000
		可通过value属性值更改颜色,color类型文本框单击能打开拾色板可视化选取一种颜色.
		 -->
	eg:
		<form action="#" method="get">
			请输入邮箱:<input type="email" name="formmail"> <br/>
			请输入网址:<input type="url" name="formmail"> <br/>
			请输入电话号码:<input type="tel" name="formmail"> <br/>
			请输入搜索关键词:<input type="search" name="formmail"> <br/>
			请选取一种颜色:<input type="color" name="formmail"> <br/>
			<input type="color" name="color2" value="#FF3E96">
			<input type="submit"  value="提交">
			
		</form>
		
		
		
	6、number类型<input type="number">
		<!-- 
		用于提供输入数值的文本框,提交表单时会自动检查该输入框中内容是否为数字.
		可对输入数字进行限制,其属性说明:
		value:指定输入框默认值;
		max:指定可接受最大输入值;
		min:指定可接受最小输入值;
		step:输入域合法的间隔,若不设置默认为1;
		 -->	
	eg：
		<form action="#" method="get">
		  请输入数值:<input type="number" name="number1" value="1" min="1" max="20" step="4"> <br/>
		  <input type="submit" value="提交" />
		</form>
		
	7、range类型<input type="range">
	
		提供一定范围内数值的输入范围,在网页中显示为滑动条.
		与number属性一样有min、max、step等属性
		
	8、Date pickers类型<input type="date/month/week···">
		<!-- 
		指时间日期类型性,提供多个可供选取日期时间的输入类型,用于验证输入的日期.
		
		时间日期类型----说明
		date---选取日、月、年
		month---选取月、年
		week---选取周和年
		time---选取时间(小时和分钟)
		datetime---选取时间、日、月、年(UTC时间[世界标准时间])
		datetime-local---选取时间、日、月、年(本地时间)
		 -->
		
		eg:
		<form action="#" method="get">
			<input type="date"/> &nbsp;
			<input type="month"/> &nbsp;
			<input type="week"/> &nbsp;
			<input type="time"/> &nbsp;
			<input type="datetime"/> &nbsp;
			<input type="datetime-local"/> &nbsp;
			<input type="submit" value="提交" /> &nbsp;
		</form>
	
	
		
	
		
  (四)全新的input控件属性

	指定输入类型的行为和限制,列如autofocus、min、max、pattern等.
	
	1、autofocus属性
	<!-- 
		指定页面加载后是否自动获取焦点,将标签属性值指定为true时,
		表页面加载完毕后会自动获取该焦点(或理解为跳转至该焦点).
		
		eg:
		
		<form action="#" method="get">
			请输入关键词:<input type="text" name="user_name" autocomplete="off" autofocus="true"/><br/>
			<input type="submit" value="提交"/>
		</form>
	 -->	
	2、form属性
		<!-- 
	   表单子元素可写form标签以外,但这个元素指定form属性并设置属性值为该表单id,
	   则这个元素属于表单的一部分
		 -->
	   eg:
	   <form action="#" method="get" id="user_form">
		   请输入你的姓名:<input type="text" name="first_name">
		   <input type="submit" value="提交"/>
	   </form>
	   <p>下面输入框在form元素外,但指定了form属性为表单的id,<br>
	   所以输入框内容属于表单的一部分</p>
		请输入您的昵称:<input type="text" name="last_name" form="user_form"/><br>
		
	3、list属性
		<!-- 
		datalist元素实现数据列表下拉效果,而list属性用于
		指定输入框所绑定的datalist元素,其值是某个datalist元素的id。
		 -->
	eg：
	<form action="#" method="get">
	请输入网址:<input type="url" list="url_list" name="weburl"/>
	<datalist id="url_list">
		<option label="新浪" value="http://www.sina.com.cn"></option>
		<option label="搜狐" value="http://www.sohu.com"></option>
		<option label="传智" value="http://www/itcase.cn"></option>
	</datalist>
	<input type="submit" value="提交">
	</form>

	4、multiple属性
		<!-- 
		指定输入框可以选择多个值
		如用于email属性,表可输入多个E-mail地址,用逗号隔开即可;
		用于file属性时,表可选择多个文件.
		 -->
		
	5、min、max和step属性
		<!-- 
		用于为包含数字或日期的input输入类型规定限制,即加一个数值的约束.
		max:允许输入最大值
		min:允许输入最小值
		step:规定输入框合法的数字间隔,不设置默认为1
		 -->
		
	6、pattern属性
		<!-- 
		用于验证input类型输入框中用户输入的内容是否与所定义的正则表达式相匹配(即表单验证)
		pattern适用的类型是:text、search、url、tel、email和password和<input />标签。
		
		
		常用正则表达式:
		正则表达式-----------------说明
		^[0-9]*$-----------------数字
		^\d{n}$-----------------n位的数字
		^\d{n,}$-----------------至少n位的数字
		^\d{m,n}$-----------------零和非零开头的数字
		^([1-9][0-9]*)+(.[0-9]{1,2})?$----非零开头的最多带两位小数的数字
		^(\-|\+)?\d+(\.\d+)?$-------------整数、负数、和小数
		^\d+$或^[1-9]\d*|0$---------------非负整数
		^-[1-9]\d*|0$或^((-\d+)|(0+))$----非正整数
		^[\u4e00-\u9fa5]{0,}$-------------汉字
		^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,40}$----英文和数字
		^[A-Za-z]+$--------------由26个英文字母组成的字符串
		^[A-Za-z0-9]+$-----------由数字和26个英文字母组成的字符串
		^\w+$或^\w[3,20]$--------由数字、26个英文字母或者下画线组成的字符串
		^[\u4E00-\u9FA5A-Za-z0-9_]+$---中文、英文、数字、包括下画线
		^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.])\w+)*$---email地址
		[a-zA-Z]+://[^\s]*或^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$---URL地址
		^\d{15}|\d{18}$---------身份证号(15、18位数字)
		^([0-9]){7,18}(x|X)?$或^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$---以数字、字母x结尾的短身份证号码
		^[a-zA-Z][a-zA-Z0-9_]{4,15}$---账号是否合法(以字母开头、长度在5-16字节,允许字母数字、下画线)
		^[a-zA-Z]\w{5,17}$-------------密码(以字母开头,长度在6~18之间,只能包含字母、数字和下画线)
		 -->
		
		eg:
		<form action="#" method="get">
			账号: <input type="text" name="username" pattern="[a-zA-Z][a-zA-Z0-9_]{4,15}$" />(以字母开头,长度在5~16字节,允许字母、数字、下画线)<br/>
			密码:<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" />(以字母开头,长度在6~18之间,只能包含字母、数字和下画线)<br/>
			身份证号:<input type="text" name="mycard" pattern="^\d{15}|\d{18}$" />(15位、18位数字)
			Email地址:<input type="email" name="myemail" pattern="^\w+([-+.]\w)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" />
			<input type="submit" value="提交" />
		</form>
	
	
	7、placeholder属性
		用于为input类型的输入框提供相关提示信息,如QQ登录框里的"QQ账号"提示信息
		
	8、required属性
		用于判断用户是否在表单输入框中输入内容,当表单为空时不允许提交表单.


	eg(7/8):
		<form action="#" method="get">
			请输入姓名:<input type="text" name="user_name" required="required" placeholder="设置您的名字" />
			<input type="submit" value="提交" />
		</form>
		
	
		
  
六、CSS控制表单样式

	即为表单设置样式使其更加美观;如为表单、文本框添加背景颜色、设置文本样式等。

  
	</body>
</html>
极客编程_毕设大师兄
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5+CSS3网页设计从基础到入门——表格标签
m0_65563303的博客
05-15 336
表格标签 1.表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用就显得很重要，一个清爽简约的表格能够把繁杂的数据表现的很有条理。所以说表格不是用来页面布局的，而是...
HTML5+CSS3网页设计从基础到入门——表单标签
m0_65563303的博客
05-18 489
表单标签 使用表单标签的目的是为了收集用户信息。 表单的组成 在HTML中，一个完整的表单由表单域、表单控件（也成为表单元素）、提示信息三个部分组成。 一表单域 表单域是一个包含表单元素的区域。 在HTML中，<from></from>标签用于定义表单标签，以实现用户信息的收集和传递。 from会把它范围内的表单元素信息提交给服务器 基本的语法： ...
html5+css3学习（九）之表格
qq_34942428的博客
03-04 150
html5+css3学习（九）之表格 表格 tr表示行，td表示列，th表示表头内容，table是块元素 合并单元格：纵向：rowspan 横向:colspan <table> <tr> <th colspan="2"></th> </tr> <tr> <td colspan="2"></td> </tr> </table>
HTML5＋CSS简单表格新手练习
qq_47751331的博客
05-12 615
附上源代码：(仅供参考，并非完美答案） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border:2px solid #122aff; width: 900px; ...
web前端html5+css3学习笔记(5)——表格、表单
m0_52353966的博客
03-19 441
本篇学习表格和表单。本片学习了表格与表单，尤其是表单内标签多，属性多，不要记混了。
html+css和html5+css3的学习笔记。
06-10
学习HTML+CSS和HTML5+CSS3时，你需要理解以下关键概念： 1. **语义化HTML**：使用恰当的标签来描述内容，提高可读性和可访问性。 2. **盒模型**：理解边距（margin）、填充（padding）和边框（border）如何影响元素...
html5+css3笔记html5+css3笔记
04-03
HTML5和CSS3是现代网页开发的两大核心技术，它们极大地丰富了网页的展现形式和功能。下面我们将深入探讨这两个主题。 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它引入了许多新的元素和...
H5+CSS学习资料+笔记+项目资料
07-13
可能是HTML5和CSS3的学习笔记，包含了作者在学习过程中的总结和心得，对于理解和记忆相关知识非常有帮助。 总的来说，这个资料包是一个全面的前端学习资源，通过它你可以深入理解HTML5和CSS3的核心概念，同时通过...
HTML5+CSS3制作的颜色选取器代码.zip
最新发布
09-27
在这个“HTML5+CSS3制作的颜色选取器代码.zip”压缩包中，包含了一个使用这两种技术实现的颜色选取器示例。颜色选取器是网页设计中常见的一种交互元素，允许用户选择并设定颜色值。 HTML5引入了许多新特性，比如...
HTML5&CSS3网页制作：CSS控制表单样式.pptx
05-31
CSS控制表单样式 CSS控制表单样式 01 CSS控制表单样式 使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。 CSS控制表单样式 由于form是块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin 使用<input />标记定义各种按钮时，通常需要清除其边框 通常情况下需要对文本框和密码框设置2到3像素的内边距，以使用户输入的内容不会紧贴输入框 1 2 3 CSS控制表单样式 实战：实现如下登录表单 总结 02 了解掌握CSS控制表单样式时的注意事项 通过实战项目掌握CSS 表单样式规则 总结 THANKS
HTML5+CSS3超酷动态表单
09-21
HTML5+CSS3超酷动态表单 表单高亮时候输入框会随着变化
Html5中表格与表单&CSS基础
qq_63608418的博客
11-17 450
学web前端第3天
html5表格表单
SilentLand的博客
07-21 390
表格、框架
HTMLCSS005表格制作
penny_zeng的博客
10-03 105
表格属性，表格边框，单元格空隙；col设置表格列；algin对齐方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>前端技术表格划分标准</h3> <table border="1px" cellspacing="0" cellpad
html5和css表单代码,HTML 5和CSS3表单示例和详细教程汇总
weixin_35752645的博客
06-20 263
为Web开发人员提供了详细参考指南。以下是文章摘要：本教程演示如何使用HTML5创建既时尚又好用的邮箱注册表单。引导大家一步一步创建占位符文本、表单域、邮箱+网络+手机、日程选择器等功能。有大部分的表单为了增强功能却降低输入框的标准。虽然在旧版本的浏览器中并不完全支持HTML5特性，但在教程中会演示如何解决和正确添加新功能。 【示例】此教程属于中等难度，演示如何创建一个具有滑动效果、数字微调、日期...
使用HTML和CSS创建一个表格，方便调用
热门推荐
iO747254055的博客
07-20 1万+
虽然用bootstrap可以很方便快捷的创建一个table表格， 但是对于初学者来说，学会如何用HTML和CSS创建一个好看的表格还是很有意义的。 第一张 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;table&lt
html5基础第六篇，表格table。
前进的蜗牛的博客
09-22 713
table表格 1.基本标签 tr行。 td列。 th列,th中的内容会加粗,内容会水平居中。 &lt;table border="1px"&gt; &lt;tr&gt; &lt;td&gt;aa年号&lt;/td&gt; &lt;td&gt;斤斤斤&lt;/td&gt; &lt;/tr&gt;
HTML--3css样式表
weixin_30855761的博客
02-29 100
CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。 /*注释区域*/ 此为注释语法 一、样式表 （一）样式表的分类 1.内联样式表 　　和HTML联合显示，控制精确，但是可重用性差，冗余较多。 　　例：<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 　　作为一个独立区域内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客编程_毕设大师兄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值