9、前端开发:CSS知识总结——表格表单

前端必知必会-CSS设置表单样式 本文介绍了CSS设置表单样式,如有问题欢迎私信和评论。 阅读详情

表格:


表格由table定义


标签


          tr:行;

          td:单元格;

         th:表头,用法和td相同,不同的是它有默认样式
        caption:表格标题,有默认样式


table内设置


cellspacing:设置单元格之间的距离
cellpadding:设置内容与边框之间的距离


表格边框合并


①border-spacing:0px;设置表格为单边框
②border-collapse:collapse;设置表格边框合并,若和border-spacing一起使用,则border-spacing


单元格设置


rowspan:设置纵向的合并单元格
colspan:设置行向的合并单元格
注意:在设置合并单元格时,注意要删除要被合并的单元格
vertical-align:top/middle/bottom;设置单元格内容的垂直排列方向
表格结构,与书写位置无关

水平方向:

text-align:left/center/right;
垂直方向:

vertical-align:top/middle/bottom
rowspan :    合并纵向单元格
colspan :     合并行向单元格


合并单元格的注意事项:合并时多余要删掉
表格结构标签会改变内容的位置;书写位置无关


            thead:代表表格前面
            tbody:代表表格主体
            tfont:代表表格底部

创建表单关键字:form 


action:表单信息提交的地址 
 method:表示表单提交的方式 


   可选值:

post将表单数据包含在表单体发送;更加安全,所以常用与敏感数据的传递 


 get;将表单数据随着action提交的路经以?相隔的形式传输,不安全 


autocomplete:设置表单内容是否可以自动填充


    可选值:
on:默认值;可以自动填充
off:取消自动填充


自动填充的条件是 input要有name属性
target:设置跳转页面在那个页面显示


可选值:
①_blank:在新页面响应
②_self:在当前页面响应
③_parent:在父框架内响应
④_top:在窗口的整个body中

 input
type:设置类型的
常用的类型:

text(文本输入框)

password(密码)
checkbox(复选中)

radio(单选中)

button(普通的按钮)

submit(提交按钮) 
reset(重置按钮)

file(文件)

 新添加类型
date:设置日期 可以通过value设置初始日期 格式1988-02-23-->

color: 颜色设置
email:邮箱设置,提交表单时可以自动验证邮箱格式是否正确 
   novalidate:设置表单不自动验证信息格式是否正确

 button:可点击按钮
可设置
   type:reset 重置
       submit 提交
       button 按钮 
    总结一下;与input设置按钮,button设置更灵活


 标签属性


1.value 设置一个默认值
2.checked 默认选项中
3. disabled:设置不可操作的内容
4.readonly:只读属性
5.placeholder 设置提示词,注意不要和value一起用
6.required;设置一个必选项
7.minlength/ maxlength设置文本长度的限制
8.multiple:设置上传文件可以是多少

单选框要有name属性 且属性相同
labe:为了提高用户的体验感效果,通过for来选择要作用的标签:for值=作用标签的ID值-->

 <input type="button">普通 
 <input type="submit">提交 
 <input type="reset">重置
下拉框:select 里面的选项是通过option来设置的-

 textarea:设置文本域;cols设置一行有多少列 row设置多少行

前端开发日志 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、前端基础代码二、实现案例1.引入库2.读入数据总结 前言 提示:这里可以添加本文要记录的大概内容: 学习前端的第三天 提示:以下是本篇文章正文内容,下面案例可供参考 一、前端基础代码 <h1>标题</h1> </br>换行 <p>段落标签</p> <strong>加粗</strong> 倾斜 &. 阅读详情

相关推荐

web前端开发CSS

css

hu0708的博客 3072

前端基础之《Bootstrap(6)—全局CSS样式_表单

6、radio怎么只能选中一个,name相同的radio是同一个radio。3、表单浅灰色占位符(placeholder属性)2、输入框的样式(.form-control)1、基本表单(.form-group)4、单选框(.checkbox)5、多选框(.radio)

csj50的专栏 905

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端

m0_64372176的博客 3640

Css-TH,TR,TD

css样式中将th,tr,td 大写,可达到抓取的效果。这样在页面中th,tr,td不需要添加class属性,便会根据css样式文件获取样式。 .showtable{ font-family: 宋体; border-collapse: collapse; margin-top: 20px; margin-left: 15px; } .showtable TR{ height: 25px;

喵仔的专栏 3505

前端学习笔记74-表格样式

前端学习笔记74-表格样式宽度边框border-spacingborder-collapse颜色相间td元素 宽度 首先,table是块元素,但是它有点不同,它的宽度是被内容撑开的,剩下的为margin。 当然,这个宽度是可以设置的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con

weixin_45034895的博客 1346

8款设计师常用漂亮的HTML CSS表格样式

原来的地址: http://www.laozuo.org/2040.html 我们在布局网站的时候以前都可能直接用TABLE设计,如今都更流行使用CSS设计,这样对于网站结构更加友好和轻便。下面老左整理的8款设计师常用漂亮的HTML CSS样式是在国外网站看到的,也有用到自己的网站中,顺带分享到博客中,以便日后使用的时候直接下载,当然有需要的也方便网友朋友使用。 第一、简单的表格

大树叶 技术专栏 3万+

CSS表格表单

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!

csdnlaoban的博客 799

CSS表格表单(1),html的介绍及常用标签

资料过多,篇幅有限,需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版!自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。友,同时减轻大家的负担。**[外链图片转存中…(img-qVdHJppw-1712092679015)][外链图片转存中…(img-NfouFW2E-1712092679016)]既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

2401_84097510的博客 860

《Web前端开发技术》笔记

参考文献——《Web前端开发技术》 by 储久良 目录 第1章 Web前端开发技术综述 1.1 Web概述 1.1.1 Web的起源 1.1.2 Web的特点 1.1.3 Web工作原理 1.1.4 Web相关概念 1.3 Web前端开发技术 1.3.1 HTML(Hypertext Markkup Language) 1.3.2 CSS 1.3.3 JavaScript 1.3.4 HTML DOM 1.3.5 BOM 1.3.6 AJAX 1.3.7 jQuery 1.4

tiantianzs的博客 6761

一文搞懂HTML中的表格表单、列表

typetypenamevaluechecked=“checked”一般用于表头,也就是表格的第一行展示的表格,用于展示一般的数据2.创建一个简单的表格代码如下:效果展示:3.单元格合并在日常生活中,难免要合并单元格,而合并单元格往往要用到colspan与rowspan属性代码如下:效果展示:二、概述表单========================================================================1.创建表格使用的标签及其作用属性action=“xxx.ja

2401_84092574的博客 753

CSS表格表单(1)

资料过多,篇幅有限,需要文中全部资料可以点击这里获取前端面试资料PDF完整版!自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。的朋友,同时减轻大家的负担。**[外链图片转存中…(img-lBBKkr2n-1712444987292)][外链图片转存中…(img-w0tKXU3t-1712444987292)]既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

2401_84091628的博客 744

htmlcss基础知识点参考pink老师的ppt

1. HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为双标签。标签对中的第一个标签是 开始标签,第二个标签是结束标签。 2. 有些特殊的标签必须是单个标签(极少情况),例如 <br />,我们称为单标签。 3. HTML 文档的的后缀名必须是 .html 或 .htm 4. <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。 5. <!DOCTYPE>不是

dyk 1万+

网页设计与制作实验四:CSS样式应用——表格表单实战 实验报告

本实验通过HTMLCSS技术实现表格表单的设计与美化,重点包含以下内容: 表格技术:对比传统HTML属性与现代CSS实现方式,展示学生成绩表和唐诗精选表的创建过程,分析传统方法的局限性 CSS优化:包括边框控制、斑马纹效果、悬停反馈、响应式设计等现代CSS表格优化技术 表单应用:实现用户注册表单CSS美化,使用CSS变量定义配色方案 实验环境:使用VS Code开发工具和Chrome浏览器,配合CSS Grid Generator等辅助工具 实验强调响应式设计和现代CSS技术的应用,帮助掌握结构化数据

fengyan__的博客 481

web前端开发CSS笔录

web前端开发CSS笔录,详细介绍CSS的用法和特点,偶尔翻来复习一下,让你的前端学习更加通俗易懂

陈二狗的博客 1953

HTMLCSS 表单表格练习

HTMLCSS 表单表格练习

Aishangyuwen的博客 1038

第三章 表格布局与表单交互

定义域标题

2301_80792856的博客 1609

web前端开发-HTML-CSS(0-1)

css(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)MDN标签不区分大小写语法结构不严谨HTML基本骨架标签vscodeVsCode插件安装3.1 Chinese (Simplified) Langu …3.2 HTML CSS Support 3.3 JavaScript (ES6) code snip …3.4 Mithril Emmet3.5 Path Intellisense3.6 Vue 3 Snippets3.7 Auto Close Tag3.8 Aut

2402_84235386的博客 1075
上一篇: 7、前端开发:CSS知识总结——字体样式
下一篇: 10、前端开发:CSS知识总结——盒子模型(Box Model)(1)
越努力越好
博客等级 码龄4年 250粉丝 40原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

越努力越好

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

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

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

打赏作者

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

抵扣说明:

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

余额充值