JavaWeb开发：表格、框架和层
2024/4/9
表格
表格的创建
与表相关的标记
表格的标题、标头
表的对齐方式
align属性：设置元素的水平对齐方式；
valign属性：垂直对齐方式。
具体分析如下：
- align属性：用于指定元素内容在
水平方向上的对齐方式。它的值可以是left（左对齐）、center（居中对齐）或right（右对齐）。例如，在一个表格的单元格中使用align属性可以改变文本在水平方向上的对齐方式。 - valign属性：用于指定元素内容在
垂直方向上的对齐方式。它的值可以是top（顶部对齐）、middle（居中对齐）或bottom（底部对齐）。同样地，在表格的单元格中使用valign属性可以改变文本在垂直方向上的对齐方式。
总的来说，align属性控制水平对齐，而valign属性控制垂直对齐。在HTML中，这两个属性通常用于表格的
<td>标签中，以控制单元格内容的水平和垂直对齐方式。
合并单元格
跨行
跨列
单元间隔和单元填充
在HTML中，单元间隔（cellspacing）和单元填充（cellpadding）是用来控制表格外观的两个属性:
-
单元间隔（cellspacing）：这个属性定义了表格中相邻单元格之间的空间宽度。例如，如果将
cellspacing设置为10，那么每个单元格之间将有10像素的空隙。 -
单元填充（cellpadding）：而
cellpadding属性则规定了单元格内部边缘与内容之间的空间宽度。这可以看作是单元格内部的“内边距”。
框架
frame元素 rows 元素
<html>
<frameset rows="25%,50%,25%">
<!-- 定义一个框架集，将窗口垂直划分为三个相等的部分 -->
<frame>
<!-- 第一个框架 -->
</frame>
<frame>
<!-- 第二个框架 -->
</frame>
<frame>
<!-- 第三个框架 -->
</frame>
<frameset>
<!-- 嵌套的框架集，但由于没有提供具体的属性值，所以不会对页面布局产生任何影响 -->
</frameset>
</frameset>
</html>
frame的元素
在HTML5中，<frame>元素已经不被支持
相反，你可以使用<iframe>元素来替代<frame>元素的功能。
<iframe>元素用于在当前HTML文档中嵌入另一个HTML文档。它提供了一种方式，可以在不离开当前页面的情况下加载并显示其他页面或资源。
以下是一个简单的
<iframe>元素示例：
<iframe src="https://example.com" width="300" height="200"></iframe>
在这个示例中，
src属性指定了要嵌入的网页的URL，width和height属性定义了<iframe>元素的宽度和高度。
需要注意的是，
<iframe>元素也具有一些与<frame>类似的属性，例如scrolling和frameborder。这些属性可以用来控制<iframe>的外观和行为。
内嵌框架（iframe）
层
层简介
创建层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layer</title>
<style>
/* 定义一个名为box的类，设置绝对定位、宽高、边框和字体大小 */
.box {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #000000;
font-size: 25px;
}
/* 定义id为one的元素，设置背景颜色、层级和内边距 */
#one {
background-color: #10dbe5;
z-index: 1;
padding-left: 10px;
padding-top: 5px;
}
/* 定义id为two的元素，设置背景颜色、层级、位置和内边距 */
#two {
background-color: #9c1ce7;
z-index: 2;
top: 50px;
left: 50px;
padding-left: 10px;
padding-top: 7px;
}
/* 定义id为three的元素，设置背景颜色、层级、位置、弹性布局和居中对齐 */
#three {
background-color: #c92231;
z-index: 3;
top: 95px;
left: 90px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<!-- 创建一个div元素，应用box类和id为one -->
<div id="one" class="box">brave</div>
<!-- 创建一个div元素，应用box类和id为two -->
<div id="two" class="box">fearless</div>
<!-- 创建一个div元素，应用box类和id为three -->
<div id="three" class="box">power</div>
</body>
</html>
表单的设计
什么是表单
form表单的三个要点
表单输入元素属性
“input”中type属性分类
Label存取键的使用
Label存取键是一种用于快速访问用户界面元素如文本框、按钮等的快捷键
Label存取键在web开发中特别有用，它允许用户通过键盘快捷方式而不是鼠标来导航和操作界面元素。这提高了网站的可访问性，尤其是对于行动不便或视力受限的用户来说非常重要。
存取键通常实现为
<label>HTML 标签的一个属性，比如accesskey="N"，当用户在键盘上按下ALT+N时，浏览器就会自动将焦点转移到这个标签所关联的输入框或其他元素。
使用Label存取键，可以按照以下步骤进行：
确定需要设置快捷键的元素：这些通常是用户需要频繁交互的界面元素，如输入框、按钮等。
为元素添加Label标签：在HTML代码中，为对应的元素添加
<label>标签，并设置其for属性以匹配相关联的输入元素的id。设置存取键：在
<label>标签中添加accesskey属性，并赋值为期望的快捷键字符。例如，若希望用户通过按ALT+N来访问名为 “name” 的输入框，则可以设置<label accesskey="N">Name:</label>。测试存取键功能：确保在不同的浏览器和操作系统上测试存取键功能，因为不同的环境可能会有不同的行为表现。
Access key（访问键）
Access key是一种用户界面设计特性，允许用户通过键盘快捷方式直接访问应用程序或网页上特定的元素，如菜单项、按钮、链接或表单字段。
使用访问键的目的是提高软件的可访问性，帮助那些无法使用鼠标或喜欢使用键盘进行导航的用户。
举例：在Windows操作系统中，通常通过按
Alt键加上带有下划线的字母来激活访问键。例如，如果一个按钮上有文字“_Submit”，那么用户可以通过按Alt+S来选择这个按钮。
学习资料：双体课件
通过上述学习，你应该已经具备JavaWeb开发的表单、框架、层的设计制作了吧~
如果对您有所帮助，请点赞收藏，下次复习~
标签：单元格,JavaWeb,框架,元素,表单,表格,对齐,属性 From： https://blog.csdn.net/Li__Daxia/article/details/137559498