网站如何搬家,wordpress会员卡系统,苏州外贸网站建站,湖南建设网本帖介绍web开发中非常核心的标签——表格标签。
在日常我们使用到的各种需要输入用户信息的场景——如下图#xff0c;均是通过表格标签table创造出来的#xff1a; 目录
一.表格标签
二.表格属性 三.合并单元格
四.无序列表
五.有序列表
六.自定义标签
七.表单域
…本帖介绍web开发中非常核心的标签——表格标签。
在日常我们使用到的各种需要输入用户信息的场景——如下图均是通过表格标签table创造出来的 目录
一.表格标签
二.表格属性 三.合并单元格
四.无序列表
五.有序列表
六.自定义标签
七.表单域
八.Input标签
九.Label标签
十.select标签 一.表格标签 table用来定义一个表格tr表示表格的一行th表示表头可以实现着重显示的效果td表示一个单元格 总的来说table未与位于最外层用来声明一个表格table内部又嵌套了多个tr表示表格的每一行而每一个tr内部包含了一个th和多个td用来区别不同级别的单元格~
如下所示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable aligncenter border2 cellpadding30 cellspacing1 width350 hight350!-- 使用table标签来定义一个表格 --tr th姓名/th th性别/th th年龄/th /tr!-- tr表示表格的一行 --tr tdLove/td td男/td td19/td /tr!-- th表示表头可以实现着重显示的效果 --!-- 字体加粗且居中 --tr tdJSL/td td男/td td18/td /tr!-- td表示一个单元格 --tr tdHYH/td td男/td td19/td /tr/table
/body
/html 至于这里为什么居中是因为在table标签中添加了aligncenter属性其他的样式效果也是如此暂时不展开叙述~
二.表格属性 align表示对齐方式border表示边框width单元格宽度height单元格高度cellpadding表示内容与空白的距离cellspacing表示单元格之间的距离 实例代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable aligncenter border 1 width500 height400 cellpadding20cellspacing1!-- align表示对齐方式border表示边框width和height分别表示宽度和高度cellpadding表示内容与空白的距离cellspacing表示单元格之间的距离 --trth排名/th th球队/thth积分/th /tr trtd1/td td拜仁慕尼黑/td td21/td /tr trtd2/td td多特蒙德/td td18/td /tr trtd3/td td沙尔克04/td td15/td /tr trtd4/td td霍芬海姆/td td14/td /tr trtd5/td td门兴格拉德巴赫/tdtd11/td /tr trtd6/td td沃尔夫斯堡/td td9/td /tr trtd7/td td勒沃库森/td td7/td /tr /table
/body
/html 三.合并单元格
顾名思义和Excel中的功能相一致不过在Html中要靠代码实现~ 横排合并用colspan这里表示横排合并3个 trth colspan3 德甲积分榜/th /tr 竖排合并用rowspan这里表示竖排合并7个 trtd rowspan7 /td td拜仁慕尼黑/td td21/td /tr 完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable aligncenter border 1 width500 hight400 cellpadding20cellspacing0trth colspan3 德甲积分榜/th /tr !-- 横排合并用colspan这里表示横排合并3个 --trtd rowspan7 /td td拜仁慕尼黑/td td21/td /tr !-- 竖排合并用rowspan这里表示竖排合并7个 --tr td多特蒙德/td td18/td /tr tr td沙尔克04/td td15/td /tr tr td霍芬海姆/td td14/td /tr tr td门兴格拉德巴赫/tdtd11/td /tr tr td沃尔夫斯堡/td td9/td /tr tr td勒沃库森/td td7/td /tr /table
/body
/html 如图
四.无序列表 ul定义无序列表li定义列表的项 如上的格式就是一个无序列表~ ul li榴莲/lili臭豆腐/lili螺蛳粉/lili鲱鱼罐头/li/ul
五.有序列表 ol定义有序列表li定义列表的项 olli穆勒 1000/liliC罗 900/lili梅西 800/li/ol
展示一下两种列表的效果如下 六.自定义标签 这个标签基本上没什么应用场景大家了解一下语法格式即可
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydldt线下门店/dtdd小米之家/dddd服务网点/dddd授权体验店/dddt线下门店/dtdd小米之家/dddd服务网点/dddd授权体验店/dd/dl!-- 自定义标签用得相对少一些 --
/body
/html 七.表单域 HTML 表单的主要作用是接收用户的输入当用户提交表单时浏览器将用户在表单中输入的数据打包并发送给服务器从而实现用户与Web服务器的交互。 表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等用于采集用户的输入或选择的数据。 通俗地说在web项目中表单内部的数据会被传送到后台——即服务器端这部分涉及到后端开发的知识暂时不展开详细介绍~ form action19号 自定义标签.html methoddialog name表单一!-- 只有表单域内部的元素的才能提交到后台服务器。 --!-- action表示跳转目标 --/form
如上是一个表单域的格式用form来定义action属性规定了当表单内的数据被提交这一事件发生后跳转到的页面~
八.Input标签
用户录入数据的核心标签非常重要~ type属性可以规定输入表单元素的属性 typetext输入框typefile文件选择typeradio单选框typepassword密码框typecheckbox多选框typesubmit提交框typereset重置框 如下是一段代码注释了包括maxlength在内的一些其他属性请注意这些细节
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform actionE:\HTML 文件\案例14号 综合练习-招新网站项目\2级目录\14号网页框架.html methodGET br姓名input typetext /br!-- 输入框属性 --!-- type属性可以规定输入表单元素的属性 --点击上传头像 input typefile/br!-- 文件选择属性 --性别男input typeradio namesex checkedchecked 女input typeradio namesex /br!-- 单选框一定要有相同的name值否则无法实现单选。 --!-- 直接在文字后面加一个type类型即可实现一个选项。 --!-- 单选框属性 --!-- 值为checked时意味该属性为默认选中。 --专业班级input typetext /br学号input typetext maxlength10 minlength10 /br!-- 设置最大输入字符数量 --!-- 此处最大值与最小值相等强制定义输入范围 --密码input typepassword /br!-- 密码框属性 --!-- 与文本输入框的区别在于输入内容为不可见 --擅长技能PSinput typecheckbox namehobby wordinput typecheckbox namehobby pptinput typecheckbox namehobby/br!-- 多选框 --input typesubmit value登录!-- 提交框 --input typereset value再次输入!-- 重置框 --/form
/body
/html
效果如下 九.Label标签
所谓label标签顾名思义就是用标签来实现某种功能——比如我们点击CSDN网站的头像即可跳转到用户界面而不需要非得点击文本才行 label 元素不会向用户呈现任何特殊效果。不过它为鼠标用户改进了可用性。如果您在 label 元素内点击文本就会触发此控件。就是说当用户选择该标签时浏览器就会自动将焦点转到和标签相关的表单控件上。
格式如下 form性别brlabel forsex1男input typeradio namesex idsex1 /labellabel forsex2女input typeradio namesex idsex2 /label!-- 绑定表单元素使用户点击汉字“男”时即可选中元素 --!-- 使用id属性当for值为id值时可以实现表单元素的绑定 --/form
上述代码块的意义是只需要点击“男”这个字即可选中性别而并非要必须通过复选框实现~ 十.select标签
select 元素中的 option标签用于定义列表中的可用选项本质上就是下拉列表
body你的专业方向selectoption软件开发/optionoption selectedselected移动互联/optionoption大数据/optionoption信息安全/optionoption人工智能/option/select
/body
其中被selected的属性注明的选项是默认选项~
