前端2 表单标签css选择器

 

 


一 表格标签

 
<table>
  <thead>
    <tr>  一个tr就表示一行
      <th>username</th>  加粗文本
      <td>username</td>  正常文本
    </tr>
  </thead>  表头(字段信息)
  <tbody>
    <tr>
      <td>jason</td>
      <td>123</td>
      <td>read</td>
    </tr>
  </tbody>     表单(数据信息)
</table>


<table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行

原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看
 

二 表单标签

  能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器

 
<form action=""></form>  
在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径(给哪个服务端提交数据)
1.什么都不写  默认就是朝当前页面所在的url提交数据
2.写全路径:https://www.baidu.com  朝百度服务端提交
3.只写路径后缀action=‘/index/‘ 自动识别出当前服务端的ip和port拼接到前面
<label for="d1"> 第一种 直接讲input框写在label内   username:<input type="text" id="d1"> </label>
第二种 通过id链接即可 无需嵌套 <label for="d2">password:</label> <input type="text" id="d2"> ps:input不跟label关联也没有问题
 

  能够触发form表单提交数据的按钮有哪些(一定要记住)

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

<button>点我</button>

  form表单默认提交数据的方式 是get请求 数据是直接放在url后面的

    http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on

  你可以通过method指定提交方式

    <form action="http://127.0.0.1:5000/index/" method="post">

  input标签

  就类似于前端的变形金刚 通过type属性变形

 
text:普通文本
password:密文
date:日期    
submit:用来触发form表单提交数据的动作
button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的,学完js之后可以给它自定义各种功能
reset:重置内容

radio:单选默认选中要加checked=‘checked‘
<input type="radio" name="gender" checked=‘checked‘>男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女

checkbox:多选
<input type="checkbox" checked>DBJ
  
file:获取文件  也可以一次性获取多个
<input type="file" multiple>
hidden:隐藏当前input框钓鱼网站
 

  select标签

  默认是单选 可以加mutiple参数变多选 默认选中selected

<select name="" id="" multiple>
  <option value="" selected>新垣结衣</option>
  <option value="" selected>斯佳丽</option>
  <option value="">明老师</option>
</select>

  textarea标签

  获取大段文本

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

  所有获取用户输入的标签 都应该有name属性

  name就类似于字典的key,用户的数据就类似于字典的value

前端2 表单标签css选择器
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:
            <input type="radio" name="gender" value="male"><input type="radio" name="gender" checked value="female"><input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" checked name="hobby" value="football">足球
            <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province:
            <select name="province" id="">
                <option value="sh">上海</option>
                <option value="bj" selected>北京</option>
                <option value="sz">深圳</option>
            </select>
</p>

验证form表单提交数据
验证form表单提交数据

下面的代码无需掌握 你只需要关心form表单即可

  form表单提交文件需要注意
  1.method必须是post
  2.enctype="multipart/form-data",enctype类似于数据提交的编码格式默认是urlencoded 只能够提交普通的文本数据,formdata 就可以支持提交文件数据

<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
前端2 表单标签css选择器
from flask import Flask, request


app = Flask(__name__)


# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求
@app.route(‘/index/‘,methods=[‘GET‘,‘POST‘])
def index():
    print(request.form)  # 获取form表单提交过来的非文件数据
    # ImmutableMultiDict([(‘username‘, ‘jason‘), (‘password‘, ‘123132131231233‘), (‘gender‘, ‘on‘)])
    print(request.files)  # 获取文件数据
    file_obj = request.files.get(‘myfile.png‘)
    file_obj.save(file_obj.name)
    return ‘OK‘

app.run()


# 针对用户输入的标签。如果你加了value 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
disable 禁用
readonly只读

下面的代码无需掌握 你只需要关心form表单即可
下面的代码无需掌握 你只需要关心form表单即可

三 css

  层贴样式表:就是给HTML标签添加样式的,让它变的更加的好看

  注释

 
/*单行注释*/

/*
多行注释1
多行注释2
*/
 

 

  通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)

 
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
 

  css的语法结构

 
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}
 

  css的三种引入方式

 
1.style标签内部直接书写(为了教学演示方便我们用第一种)
<style>
  h1  {
    color: burlywood;
  }
</style>

2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">

3.行内式(一般不用)
<h1 style="color: green">老板好 要上课吗?</h1>
 

四 CSS选择器

  基本选择器

 
<style>
  id选择器
  #d1 {  !*找到id是d1的标签 将文本颜色变成绿黄色*!
           color: greenyellow;
       }
  类选择器
  .c1 {  !*找到class值里面包含c1的标签*!
            color: red;
        }
  元素(标签)选择器
  span {  !*找到所有的span标签*!
            color: red;
        }
  通用选择器
  * {  !*将html页面上所有的标签全部找到*!
           color: green;
    }
</style>
 

  组合选择器

  在前端 我们将标签的嵌套用亲戚关系来表述层级

 
<div>
  div
  <p>div p</p>
  <p>div p
     <span>div p span</span>
   </p>
  <span>span</span>
  <span>span</span>
</div>
div里面的p span都是div的后代
p是div的儿子
p里面的span是p的儿子 是div的孙子
div是p的父亲
 

  后代选择器

div span {
    color: red;
}

  儿子选择器

div>span {
    color: red;
}

  毗邻选择器

div+span {  !*同级别紧挨着的下面的第一个*!
  color: aqua;
}

  弟弟选择器

div~span {  /*同级别下面所有的span*/
  color: red;
}

  属性选择器

  1.含有某个属性

  2.含有某个属性并且有某个值

  3.含有某个属性并且有某个值的某个标签

 
属性选择器是以[]作为标志的

[username] {  将所有含有属性名是username的标签背景色改为红色
  background-color: red;
}

[username=‘jason‘] {  找到所有属性名是username并且属性值是jason的标签
  background-color: orange;
}

input[username=‘jason‘] {  找到所有属性名是username并且属性值是jason的input标签
  background-color: wheat;
}

前端2 表单标签css选择器

上一篇:WEB服务器和FTP服务器


下一篇:jQuery相同元素索引值是什么意思?