0
点赞
收藏
分享

微信扫一扫

前端知识(表格......)

陆公子521 2022-02-05 阅读 35
前端

表格的作用:

表格用来展示数据,表格可读性好,后台展示数据的时候,能够熟练运用表格,一个清爽的表格能够。

大致结构:
 

th标签在tr里,标签表示html表格的标头部分(table head的缩写)

 

 知识点:
table里设置表的属性

table里放thande、tbody

表格头部和表格主体区域 这样更好地分清表格的结构

tr (th标头/td单元格)

表的属性:

注意 属性值需要用 " "裹起来
align (left center right)

width height  border  cellspacing/cellpadding

合并单元格:

1、确定行合并还是列合并  跨行合并还是跨列合并

2、分清上左  上往下补 左往右补  <td rowspan="2" 行合并两个>

3、删除对应自动补的表格 

列表标签:

有序列表、无序列表、自定义列表

ol ul dl

li

notes:

表格是用来展示数据的,列表是用来布局界面的

列表最大的特点就是整齐、有序、它作为布局会更加自由和方便

根据使用的情景不一样,列表分为有序、无序、自定义列表。

值得注意的是:
无序列表的各个列表之间没有顺序级别之分,是并列的;

ul只能嵌套li li标签可以放其他标签 例如p标签

li标签相当于一个容器 可以容纳所有元素

一般后期使用css设定

 自定义下的dd是用来描述dt的 

自定义列表的使用:

常用于对术语或名词或进行解释和描述,定义列表的列表项前没有人格符号

所有dd都是dt的 dd用来描述dt

---------------------------------------------------------------------------------------------------------

表单标签:
现实中我们会填表,例如调查表。。。在网页里我们也会有表单的出现,主要是用来收集用户的个人信息,例如在某某交友网上,我们可以看见(年龄 性别 婚姻状况 收入等等...)

在html里我们将表单分为三个部分:

表单域 form 标签表示

表单控件 input标签 表单元素 

提示信息 提示用户输入对应的信息

例如:

总结一下:
form是表单域 input 用户输入(text (maxlength) radio checkbox (name value checked="checked"))......

接下来看一下表单标签 label标签

当点击label标里的文本时 浏览器会自动将光标转到或者选择对应的表单元素上面

基本语法:

将文字放在label里设置for 元素 与input 里的id属性设置一样即可

核心:label标签的for属性要和input的id属性一样

select表单标签

页面中,如果有多个选项让用户选择,节约空间就可以使用

select

option...

select

textarea标签 大的文本框

通过textare标签可以轻松地创建多行文本  

属性有rows  cols  控制行列大小 一般利用css调整

留言:<br>

<textarea name="" id="" cols="20" rows="10"></textarea>

案例:注册页面

页面效果:

 

 布局设计:

 接下来就是css的基础知识了,加油每一天!!!

举报

相关推荐

0 条评论