网站建设中 很快回来,网页打不开pdf文件如何设置,上海网站空间续费,银川建网站那家好表格
表格的主要作用
1.表格主要用于显示、展示数据#xff0c;因为它可以让数据显示的非常的规整#xff0c;可读性非常好。特别是后台展示数据的时候#xff0c;能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
2.表格不是用来布局页…表格
表格的主要作用
1.表格主要用于显示、展示数据因为它可以让数据显示的非常的规整可读性非常好。特别是后台展示数据的时候能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理
2.表格不是用来布局页面的,而是用来展示数据的。
3.表格的具体用法 tabletrtd单元格内的文字/td.../tr.../table
1.table /table 是用于定义表格的标签。 2.tr /tr 标签用于定义表格中的行必须嵌套在 table /table标签中。 3.td /td 用于定义表格中的单元格必须嵌套在tr/tr标签中。 4.字母 td 指表格数据table data)即数据单元格的内容。 表头单元格标签
表头标签的具体实现 tabletrth姓名/th.../tr.../table1.一般表头单元格位于表格的第一行或第一列表头单元格里面的文本内容加粗居中显示. th 标签表示 HTML 表格的表头部分(table head 的缩写) 2.一般表头单元格位于表格的第一行或第一列表头单元格里面的文本内容加粗居中显示. th 标签表示 HTML 表格的表头部分(table head 的缩写) 5.表头单元格也是单元格常用于表格第一行突出重要性表头单元格里面的文字会加粗居中
表格属性
1.表格标签这部分属性我们实际开发我们不常用后面通过 CSS 来设置.
思路
先制作表格的结构.
1.第一行里面是 th 表头单元格
2.第二行开始里面是 td 普通单元格单元格里面可以放任何元素
3.文字链接图片等都可以
后书写表格属性
1.用到宽度高度边框cellpadding 和 cellspacing
2.表格浏览器中对齐 align
表格结构标签
使用场景: 因为表格可能很长,为了更好的表示表格的语义可以将表格分割成 表格头部和表格主体两大部分. 在表格标签中分别用thead标签 表格的头部区域、tbody标签 表格的主体区域. 这样可以更好的分清表格结构。
总结: 1. thead/thead用于定义表格的头部。thead 内部必须拥有 tr 标签。 一般是位于第一行。 2. tbody/tbody用于定义表格的主体主要用于放数据本体 。 3. 以上标签都是放在 table/table 标签中。
合并单元格
特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可. 1.合并单元格方式 2.目标单元格 3.合并单元格的步骤 如下图
合并单元格方式
跨行合并rowspan合并单元格的个数
最上侧单元格为目标单元格, 写合并代码
跨列合并colspan合并单元格的个数
最左侧单元格为目标单元格, 写合并代码
合并单元格三步曲
先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 合并的单元格数量。
比如td colspan2/td。删除多余的单元格。
表格总结
表格学习整体可以分为三大部分:
表格的相关标签
table thead body tr th td
表格的相关属性
cellspacing cellpadding width height border
合并单元格
rowspan collspan
表单
现实中的表单
为什么需要表单
使用表单目的是为了收集用户信息。 在我们网页中 我们也需要跟用户进行交互收集用户资料此时就需要表单。
表单的组成
在 HTML 中一个完整的表单通常由表单域、表单控件也称为表单元素和 提示信息3个部分构成。
表单域
表单域是一个包含表单元素的区域。 在 HTML 标签中 form 标签用于定义表单域以实现用户信息的收集和传递。 form 会把它范围内的表单元素信息提交给服务器.实现代码form action“url地址” method“提交方式” name“表单域名称各种表单元素控件/form表单域的常用属性
这里只需要记住两点: 1.在我们写表单元素之前,应该有个表单域把他们进行包含. 2.表单域是 form标签.
表单控件(表单元素)
input 表单元素
在英文单词中input 是输入的意思而在表单元素中 input 标签用于收集用户信息。在 input 标签中包含一个 type 属性根据不同的 type 属性值输入字段拥有很多种形式可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
input type属性值 /
input / 标签为单标签 type 属性设置不同的属性值用来指定不同的控件类型
type 属性的属性值及其描述如下
除 type 属性外input标签还有其他很多属性其常用属性如下
label 标签
label 标签为 input 元素定义标注标签。 label 标签用于绑定一个表单元素, 当点击label 标签内的文本时浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验. 语法 label forsex男/label input typeradio namesex idsex / 核心 label 标签的 for 属性应当与相关元素的 id 属性相同。
select 表单元素
使用场景: 在页面中如果有多个选项让用户选择并且想要节约页面空间时我们可以使用select标签控件定义下拉列表。
语法 选项1 选项2 选项3 ...
textarea 表单元素 使用场景: 当用户输入内容较多的情况下我们就不能使用文本框表单了此时我们可以使用 textarea 标签。 在表单元素中textarea 标签是用于定义多行文本输入的控件。 使用多行文本输入控件可以输入更多的文字该控件常见于留言板评论。
语法
textarea rows3 cols20 文本内容 /textarea
通过 textarea 标签可以轻松地创建多行文本输入框。cols“每行中的字符数” rows“显示的行数”
我们在实际开发中不会使用都是用 CSS 来改变大小。
表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.这三组表单元素都应该包含在form表单域里面,并且有 name 属性.
具体代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodyform action!-- 文本域用作表单的长文本一般用于留言评论等区域 --textarea name id cols30 rows10北枫老师真的非常的帅/textarea/form/body
/html
textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等…
查阅文档
经常查阅文档是一个非常好的学习习惯。 推荐的网址 W3C : w3school 在线教程 推荐初学者 MDN: MDN Web Docs 推荐进阶
