JavaWeb开发:表单、框架、层

最新推荐文章于 2024-05-18 16:42:38 发布

Li__Daxia

最新推荐文章于 2024-05-18 16:42:38 发布

阅读量998

点赞数 34

分类专栏： JavaWeb开发文章标签： java 前端

本文链接：https://blog.csdn.net/Li__Daxia/article/details/137559498

版权

JavaWeb开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>。

测试存取键功能：确保在不同的浏览器和操作系统上测试存取键功能，因为不同的环境可能会有不同的行为表现。