html表格页面的制作-优快云博客

本文链接：https://blog.youkuaiyun.com/PluMage11/article/details/149431051

顶部导航栏--flex布局

flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。

通过给父容器添加flex属性,来控制子元素的位置和排列方式。

flex布局相关的CSS样式：

属性说明取值含义
display 模式 flex 使用flex布局
flex-direction 设置主轴 row 主轴方向为x轴，水平向右。（默认）
column 主轴方向为y轴，垂直向下。
justify-content 子元素在主轴上的对齐方式 flex-start 从头开始排列
flex-end 从尾部开始排列
center 在主轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tlias智能学习辅助系统</title>
    <style>
      body {
        margin: 0;
      }

      /* 顶栏样式 */
      .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #f1f1f1;
          padding: 10px 20px;
          box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      /* 加大加粗标题 */
      .header h1 {
          margin: 0;
          font-size: 24px;
          font-weight: bold;
      }

      /* 文本链接样式 */
      .header a {
          text-decoration: none;
          color: #333;
          font-size: 16px;
      }
    </style>
</head>
<body>
    
    <div class="header">
        <h1>Tlias智能学习辅助系统</h1>
        <a href="#">退出登录</a>
    </div>

    
</body>
</html>

表单标签

整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项或表单元素。

表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。

表单标签: <form>

表单属性:

action: 规定表单提交时，向何处发送表单数据，表单提交的URL。

method: 规定用于发送表单数据的方式，常见为： GET、POST。

GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。

POST：表单数据是在请求体（消息体）中携带的，大小没有限制。

表单项标签：在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

1、<input>: 表单项 , 通过type属性控制输入形式。

type取值

描述

text

默认值，定义单行的输入字段

password

定义密码字段

radio

定义单选按钮

checkbox

定义复选框

file

定义文件上传按钮

date/time/datetime-local

定义日期/时间/日期时间

number

定义数字输入框

email

定义邮件输入框

hidden

定义隐藏域

submit / reset / button

定义提交按钮 / 重置按钮 / 可点击按钮

2、<select>: 定义下拉列表, <option> 定义列表项

3、<textarea>: 文本域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单</title>
</head>
<body>
       
        
    <form action="" method="post">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="提交">
    </form>
        
</body>
</html>
<label><input type="checkbox" name="hobby" value="java"> java </label>
label使得java也可以被点击选中

表格标签

标签描述
<table> 定义表格整体
<thead> 用于定义表格头部(可选)
<tbody> 定义表格中的主体部分(可选)
<tr> 表格的行，可以包裹多个 <td>
<td> 表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为 <th>

属性	说明	取值	含义
display	模式	flex	使用flex布局
flex-direction	设置主轴	row	主轴方向为x轴，水平向右。（默认）
flex-direction	设置主轴	column	主轴方向为y轴，垂直向下。
justify-content	子元素在主轴上的对齐方式	flex-start	从头开始排列
		flex-end	从尾部开始排列
		center	在主轴居中对齐
		space-around	平分剩余空间
		space-between	先两边贴边，再平分剩余空间

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

标签	描述
<table>	定义表格整体
<thead>	用于定义表格头部(可选)
<tbody>	定义表格中的主体部分(可选)
<tr>	表格的行，可以包裹多个 <td>
<td>	表格单元格(普通)，可以包裹内容；如果是表头单元格，可以替换为 <th>