HTML进阶

乐安lan

已于 2024-07-08 08:52:51 修改

阅读量210

点赞数 3

分类专栏：前端文章标签：前端 javascript html

于 2024-07-08 08:36:48 首次发布

本文链接：https://blog.csdn.net/ahuaaaaa/article/details/140252099

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

【一】表格

1.rowspan该数据占几行
    colspan占几列 
    thead : 表头-->写th
    tbody : 表体--》td
    tr--->一行数据，有几对tr表格就有几行
    td-->每个单元格
    th-->表格标题
    border-->定义当前表格的外边框样式
    cellpadding : 调整内边框与字体之间的距离
    cellspacing : 调整外边框与外边框之间的距离

案例

<table border="1" cellpadding="5" cellspacing="5">
  # border：为表格添加外边框 
  # cellpadding： 调整字体离边框距离 
  # cellspacing ： 调整内边框离外边框的距离
  <thead>
      <th></th> # 加粗字段信息
      <td></td> # 不加粗字段信息
  </tr> # 一个 tr 表示一行
  </thead> # 表头(字段信息)

  <tbody>
  <td colspan="2">chimeng</td> # colspan ：水平占两行
      <td>369</td>
      <td rowspan="2">running </td> # rowspan ： 垂直占两行
</tbody> # 表单(数据信息)
</table>

【二】表单

1.能够利用表单，获取到用户输入的数据，传给后端，进行数据处理
2.表单组成：
1.用于接收用户输入的数据的表单域有：
    文本框（Input Text）、单选框（Radio Buttons）、复选框（Checkboxes）、下拉列表（Select）、文本区域（Textarea）等。
2.提交按钮（Submit Button）
    点击可以将数据发送到服务器进行处理
3.取消按钮（Cancel Button）
    点击清空表单内的所有内容
4.标签（Labels）
5.校验机制（Validation）

(1)表单语法

<form action=""></form>

(2)表单参数

action : 数据提交的目标地址 http://127.0.0.1:3000
        一种选择是不写 ： 在哪个网页上访问到的数据就提交到那个地址
        一种选择是写 ： 提交数据的时后提交到指定的地址上
    method :请求方式
        post 请求 提交数据的方式
        get 请求 默认的提交方式

【三】URL

1.统一资源定位符（Uniform Resource Locator，简称URL）是一种用于描述Internet上信息资源的标识方法，类似于现实世界的地址。它提供了一种方式来访问万维网上的文档和其他资源。
2.组成：
    协议：指定如何传输数据，如HTTP、HTTPS、FTP等。
    主机名：指定要访问的服务器的域名或IP地址。
    端口：如果协议支持端口号，则指定要使用的端口号。
    路径：指向要访问的资源的路径，通常以斜杠（/）分隔。
    查询字符串：可以传递给服务器的一些参数，这些参数用问号（?）分隔，每个参数名和值之间用等号（=）分隔。
    锚点：指定了页面中特定位置的ID。
3.示例
https://www.example.com/path/to/resource?param1=value1&param2=value2#section1
● https是协议
● www.example.com是主机名
● path/to/resource是路径
● param1=value1&param2=value2是查询字符串
● #section1是锚点。当浏览器解析这个URL时，它将连接到指定的服务器，向服务器发送请求，并将响应返回给用户。

【四】input标签

1.用于接受用户的输入，并将这些输入数据提交到服务器进行处理。
2.参数：
    type输入框的类型：可以选择以下参数值
        ○ text：文本输入框，用于接受单行文本。
        ○ password：密码输入框，输入的内容会被隐藏。
        ○ checkbox：复选框，用户可以选择多个选项。
        ○ radio：单选按钮，用户只能选择其中一个选项。
              加载默认选项要加checker = "checker"
        ○ file：文件上传框，用于选择上传的文件。
        ○ submit：提交按钮，用于提交表单数据。
        ○ reset：重置按钮，用于重置表单数据。
        ○ button：普通的按钮，本身没有功能，可以给他绑定js功能
  ○ 当没有指定 button 样式时，不同浏览器的样式不一样
    name: 指定输入框的名称，用于绑定输入框，到时候好找到
    value: 指定输入框的传给后端的值
    placeholder: 在输入框为空时显示的提示文本。
    required: 设置为 true 时，表示输入框必须填写内容才能提交表单
    readonly: 设置为 true 时，表示输入框只读，用户无法编辑。
    disabled: 设置为 true 时，表示输入框被禁用，用户无法编辑且不会被提交。
    size: 指定输入框的可见宽度，单位为字符数。
    maxlength: 指定输入框中可以输入的最大字符数。
    autocomplete: 控制浏览器是否自动填充输入框。常见的值有 on（开启自动填充）和 off（关闭自动填充）
3.input标签通常要与一个行内标签连用<p>,<table>
    原因：由于一般input前都要有说明，那么这个说明要与input连用
    eg:<label for="d1">用户名:</label>
<input type="text" id="d1">

【五】select标签

(1)单选，下拉的只能选一个

<p>
      <select name="" id="">
          <option value="">上海</option>
          <option value="">北京</option>
          <option value="">深圳</option>
      </select>
</p>

(2)多选，选择框 - 多选框 multiple

<p>
        <select name="" id="" multiple>
            <option value="">斋藤飞鸟</option>
            <option value="">明老师</option>
            <option value="">波多野结衣</option>
        </select>
</p>

(3)默认选项 selected--》添加 selected参数

<p>
        <select name="" id="" multiple>
            <option value="" selected>斋藤飞鸟</option>
            <option value="">明老师</option>
            <option value="">波多野结衣</option>
        </select>
</p>

(4)二级选项 optgroup类似二级标题

<p>市区：
  <select name="" id="">
      <optgroup label="上海">
          <option value="">浦东</option>
          <option value="">黄埔</option>
          <option value="">青浦</option>
      </optgroup>
  </select>
</p>

(5)能够触发form表单提交数据功能的按钮有哪些

<!-- submit：提交数据，刷新页面-->
<input type="submit" value="提交">
<!--  提交数据，刷新页面  -->
<button>点我提交数据</button>

(6)所有获取用户输入的标签，都应该具有name属性，同一个name除了多选只能选一个

<p>性别:
    <input type="radio" name="gender" checked> 男
    <input type="radio" name="gender"> 女
    <input type="radio" name="gender"> 其它
</p>

【六】textarea标签

● cols行
● rows列
● maxlength 
  ○ 限制最多字数
  <p>
        <textarea name="" id="" cols="30" rows="10" maxlength=""></textarea>
</p>

【七】网络请求方式

(1)GET

用于从服务器获取数据。

(2)POST

用于向服务器提交数据

(3)PUT

用于更新服务器上的现有资源。

(4)DELETE

用于删除服务器上的资源

(5)HEAD

与GET类似，但是只返回响应头，而不返回响应体

(6)OPTIONS

用于获取服务器对某个URI的支持的选项

【八】验证form表单提交数据

(1)form表单的默认请求方式

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

(2)注意事项

方法method必须是【七】网络请求方式中的
传输的也必须是二进制数据

(3)前端表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--要有name值和value值flask才能收到并且解包-->
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<!--下拉选择-->
    <p>
      <select name="下拉选择" id="1">
          <option value="上海">上海</option>
          <option value="北京">北京</option>
          <option value="深圳">深圳</option>
      </select>
</p>
<!--    多选-->
    <p>
        <select name="多选" id="2" multiple>
            <option value="斋藤飞鸟">斋藤飞鸟</option>
            <option value="明老师">明老师</option>
            <option value="波多野结衣">波多野结衣</option>
        </select>
</p>
<!--    设置默认选项-->
    <p>
        <select name="设置默认选项" id="3" multiple>
            <option value="斋藤飞鸟" selected>斋藤飞鸟</option>
            <option value="明老师">明老师</option>
            <option value="波多野结衣">波多野结衣</option>
        </select>
</p>
<!--  二级选项 optgroup 意思就是你选中上海市以后你要选择的区 -->
    <p>市区：
  <select name="optgroup" id="4">
      <optgroup label="上海">
          <option value="浦东">浦东</option>
          <option value="黄埔">黄埔</option>
          <option value="青浦">青浦</option>
      </optgroup>
  </select>
</p>

<!--    获取大段文本内容-->
    <p><textarea name="desc"></textarea>  </p>

<p>性别:
    <input type="radio" name="gender" checked> 男
    <input type="radio" name="gender"> 女
    <input type="radio" name="gender"> 其它
</p>
    <p><input type="submit" value="提交"></p>
    <!--  提交数据，刷新页面  -->
<p><button>点我提交数据</button></p>
</form>
</body>
</html>

(4)后端flask

from flask import Flask, request

app = Flask(__name__)


@app.route('/index/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        # 从 form 表单获取数据
        print(request.form)

        # 获取单选框的值
        single_select = request.form.get('single_select')
        print(f'Single select: {single_select}')

        # 获取多选框的值（这将是一个列表）
        multi_select = request.form.getlist('multi_select')
        print(f'Multi select: {multi_select}')

        # 保存传过来的二进制数据
        file_data = request.files.get("file_input")
        if file_data:
            print(file_data.filename)  # 注意这里应该是 filename 而不是 name
            file_data.save(file_data.filename)

    return 'OK'


app.run()