一、表格标签

<table border="1" cellpadding="5"> # border表示表格边框宽度，cellpadding表示内含文本距离边框的单位  块级标签 里面其他的是行内标签

    <thead># 表头

         <tr> # tr表示一行 th、td是一个单位

            # <!--<td></td>-- th td ,th比td加粗一点，用啥都行-->

            <th>账号</th>

            <th>密码</th>

            <th>爱好</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>黄钊</td>

            <td>123</td>

            <td>xxx</td>

        </tr>

        <tr>

            <td>李肖彤</td>

            <td>123</td>

            <td>xxx</td>

        </tr>

    </tbody>

</table>

二、表单标签

功能：能够回去前端用户的数据，基于网络发送给后端

<form action=""></form>

'''

这个form标签内供用户书写的数据会被这个表单提交给action的后端

action：控制数据提交的后端路径（服务端）

	1.什么都不写，默认给当前页面的url提交数据

	2.写路径全称：https://www.baidu.com 朝百度服务端提交

	3.直接路径后缀：/index/

		会自动拼接到当前页面ip+端口后=》》》ip+port/index/

method：控制请求方式

	默认：get

		虽然能携带数据，但是数据是在url后面的，不安全且小

	post请求

		携带数据放在请求体里面（表单提交必须修改post）

enctype 控制数据的编码格式

	默认：urlencoded 只能发送普通文本，文件只能接收文件名

	修改为formdata可以接收文件

'''

1 form内最重要的就是input标签，它通过type变形

  • text：普通文本
  • passowrd：密文
  • date：有下拉框可选择的日期
  • submit：用来触发表单的提交数据，按钮
  • button：本身没有功能，可以后期添加，按钮
  • reset：重置内容，按钮
  • radio：单选
    • 相同name的input标签属于同一单选内容
    • 单选是必须选，不能取消只能选别的
    • 后面加checked = “checked” 表示默认值，当属性值和属性名相同时可以简写只写属性名
  • checkbox：多选
    • 不需要指定相同name
    • 可以取消可以不选，可以全选，默认值可以设置多个
  • file：获取文件
    • 后跟multiple表示可以多选，默认单选

      ps：在文本框后加placeholder可以给文本框添加默认值

2 select标签

默认单选，后加multiple变成多选，selected表示默认值

<select name="" id="" multiple>

    <option value="" selected>a</option>

    <option value="">b</option>

    <option value="">c</option>

</select>

3 textarea标签

大段文本框

<textarea name="" id="" cols="30" rows="10"></textarea>

# cols 宽度 rows 长度

4 重点

# 能触发form表单数据提交的按钮

	1、<input type="submit" value="注册">

	2、<button>点我</button>

# 用户输入的数据在后端获取到的是一个个kv键值对

# 所以在前端书写的时候每个用户书写的标签都要加上name 等于key  用户的数据 等于value

三、通过flask实现表单提交

服务端代码

from flask import Flask,request

app = Flask(__name__)

@app.route('/hz/',methods=['GET','POST'])

def hz():

    print(request.form)

    print(request.files)

    file_obj = request.files.get('mytupian.pug')

    file_obj.save(file_obj.name)

    return 'hznb'

app.run()

页面代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>注册页面</h1>

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

        <label for="d1">

            姓名：<input type="text" id="d1" name = "姓名">

        </label>

        <label for="d2">密码</label>

        <input type="password" id="d2" name="密码">

<!--单选 指定相同name才是一类单选-->

        <p>

            <input type="radio" name="sex" checked value="男">男

            <input type="radio" name="sex" value="女">女

        </p>

<!--多选 不用指定name -->

        <p>

            <input type="checkbox">a

            <input type="checkbox">b

            <input type="checkbox">c

        </p>

        <p>

<!--            multiple表示可以多选-->

            <input type="file" multiple name = 'file'>

            <input type="file" >

        </p>

        <p>

            <select name="" id="" multiple name="select">

                <option value="" selected value="a">a</option>

                <option value="" value="b">b</option>

                <option value="" value="c">c</option>

            </select>

        </p>

        <p>

            <textarea name="" id="" cols="30" rows="5"></textarea>

        </p>

        <p>

            <input type="date">

        </p>

        <p>

            <input type="submit">

            <input type="button" value="button">

            <input type="reset">

            <button></button>

        </p>

    </form>

</body>

</html>

四、css

1 css的三中引入方式

  • 直接在head里通过style写

    • <style>
      
	选择器{
      
		属性：值
      
	}
      
</style>

  • 通过link标签引入css文件（最正规）

    • <link rel="stylesheet" href="mycss.css">

  • 行内式（一般不用）

    • <h1 style="color: green">老板好 要上课吗?</h1>

2 css选择器

  • id选择器：对指定id的标签修改

    • id{ }

  • 类选择器：对指定类的标签修改
    • .class{ }
  • 元素/标签选择器：对指定标签修改
    • span{ }
  • 通用(全局)选择器：全局修改
    • *{}

3 组合选择器

  • 后代选择器

    • div span{ } div下所有的span标签
  • 儿子选择器
    • div>span{ } div下直系span标签（单层嵌套）
  • 毗邻选择器
    • div+span{ } div同级别的第一个span
  • 弟弟选择器
    • div~span{ } div同级别的所有span

4 属性选择器

  • 含有某个属性

    • [username] { 对所有有username属性的标签修改}
  • 含有某个属性且有对应的值
    • [username = 'hz']{ 对所有username=‘hz’的标签修改}
  • 含有某个属性且有对应的值的特定标签
    • input[username = 'hz'] { 对所有username=‘hz’的input标签修改}

day51 表格与表单的更多相关文章

  1. DOM之表格与表单基础分享

    我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...

  2. css011 表格和表单的格式化

    css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom" ...

  3. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  4. 第3天：CSS浮动、定位、表格、表单总结

    今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑 ...

  5. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  6. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

  7. Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单

    Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...

  8. 13、Semantic-UI之表格与表单

    13.1 定义基础样式表格   在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...

  9. 框架，表格，表单元素，css基础以及基本标签的结合

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

随机推荐

  1. vue axios封装

    前言: 对第三方库进行二次封装和抽离到统一模块,项目面对自己的模块进行开发.如果有一天更换库,只需要修改自己模块中的代码,无需对整个项目进行重构. 将axios网络请求库封装到network文件下的r ...

  2. Flask 四剑客

    Flask 四剑客 返回字符串,返回 html , 跳转路由,返回 json from flask import Flask, render_template, redirect, jsonify a ...

  3. Linux系统管理——Linux简介

    UNIX与Linux发展史 UNIX发展历史 1.1965年,美国麻省理工学院(MIT),通用电气公司(GE)及AT&T的贝尔实验室联合开发Multics工程计划,其目标是开发一种交互式的具有 ...

  4. 凭这份pdf让我轻松拿下了蚂蚁金服、字节跳动、小米等大厂的offer

    关于程序员,除了做项目来提高自身的技术之外,还有一种提升自己的专业技能就是:多!看!书! 小编整理出一篇Java进阶架构师之路的核心知识,同时也是面试时面试官必问的知识点,篇章也是包括了很多知识点,其 ...

  5. 使用Vim写LaTeX代码(Vim+Vimtex+Skim)

    最近在写博客的时候发现对数学公式的支持并不好,于是就想寻找一个解决方案.我本身是一个爱折腾的人,有时尽管有现成的解决方案我有事也不愿意去用.于是多方查找资料,想寻求一个自定义的解决方案,最终把自己的目 ...

  6. 【JMeter_02】JMeter目录结构与功能模块介绍

    安装包目录结构 1.backups: 存放jmeter对脚本的自动备份保存文件 2.bin:jmeter的可执行文件目录,包含启动.配置等相关文件 3.dosc:程序自带的官方文档本地存放目录 4.e ...

  7. Anaconda 安装tensorflow出现错误

    C:\ProgramData\Anaconda3\envs\python36tfgpu\lib\site-packages\tensorflow\python\framework\dtypes.py: ...

  8. 3.kubernetes的CNI网络插件-Flannel

    目录 1.1.K8S的CNI网络插件-Flannel 1.1.1.集群规划 1.1.2.下载软件.解压.软链接 1.1.3.最终目录结构 1.1.4.拷贝证书 1.1.5.创建配置 1.1.6.创建启 ...

  9. Scanner扫描器的使用

    Scanner:扫描器,可以通过Scanner类扫描用户在控制台录入的数据. 1.导包 //导包快捷键Alt+Enter 2.创建键盘录入对象 //键盘录入对象的名称为 “sc” 3.接收数据 //将 ...

  10. springboot + rabbitmq 做智能家居，我也没想到会这么简单

    本文收录在个人博客:www.chengxy-nds.top,共享技术资源,共同进步 前一段有幸参与到一个智能家居项目的开发,由于之前都没有过这方面的开发经验,所以对智能硬件的开发模式和技术栈都颇为好奇 ...