img、a、列表、表单、form

img标签

img标签就是在网页上显示照片的
在html中输入img然后会自动填充
<img src=" " alt=" ">

标签会有属性

1.自带属性

2.自定义属性

1. src
   src中填写图片的路径，必填

   1. 外链地址，网上开源图片地址
   2. 相对地址

2. alt
   选填，当图片地址加载失败时，显示的描述性信息

3. width= "" heigth=" "
   用于控制图片的大小，二者是等比例缩放，单位是xp

a标签

就是超链接标签
输入a按下Tab自动填充<a href=" " > </a>

1. href
   填写的是跳转的地址
   地址的属性:

   • 绝对URL - 指向另一个站点href="http://www.jd.com"
   • 相对URL - 指当前站点中确切的路径href="index.htm"
   • 锚URL - 指向页面中的锚href="#top"

2. target=" "
   跳转的时候开一个新的tab页面

3. tirle=" "
   当鼠标悬浮的时候展示的内容

列表

1.无序列表

输入ul按下tab自动填充<ul></ul>
无序列表的格式:

<ul type=" ">
	<li>文本</li>
	<li>文本</li>
</ul>

type里填写属性：

1. disc，实心原点，默认值
2. circle，空心原点
3. square，实心方块
4. none，无样式

2.有序标签

输入ol按下tab自动填充<ol></ol>
有序列表的格式:
start填写数字，数字是几就从几开始

<ol type=" " start="">
	<li>文本</li>
	<li>文本</li>
</ol>

type里填写属性：

1. 1，数字列表，默认值
2. A，大写字母
3. a，小写字母
4. Ⅰ，大写罗马数字
5. ⅰ，小写罗马数字

标签列表

就是多个无序标签下有多个内容
dt是大标题，dd是一个个内容

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

展示大概：

表格

在网页中做一个表格
格式：

 <table>
        <thead>  <!--表头-->
            <tr>    <!--表示一行-->
                <td>文本</td>
                <!--表示一列，也可以用th，一般用于表头加粗-->
                <td>文本2</td>
            </tr>

        </thead>
        <tbody>  <!--内容-->
            <tr>    
                <td>文本</td>
                <td>文本2</td>
            </tr>
        </tbody>
   </table>

在table中可以添加属性，以k="v"的形式添加，k是属性，v是属性值

属性

1. border:表格边框

2. cellpadding：内边距

3. cellspacing：外边距

4. width:像素，百分比

5. rowspan：单元格竖跨多少行

6. colspan：单元格横跨多少列（即合并单元格）

标签的重要属性

1.id

<div id=” “></div>
一个html文档中，id只能有一个，并且不能重复，通过这个id可以唯一确定一个标签

class

<div class=” “></div>
一个html文档中，class值是可以有多个的，可以重复

自定义属性

<div username='kevin' password='123'></div>
属性名可以自己来定，自定义属性一般用来存储数据

form表单

form表单可以把用户输入的、选择的、上传的等都通过网络提交到后端，都是写<form></form>里

1.文本输入

使用<imput></imput>标签来实现文本输入

将文本绑定给输入对象

实现点击文本，可以跳转到输入框中，通过id和label标签

<label for="username">用户名</label>
<input type="text" id="username">

改变属性来达到不同输入类型

1. text单行文本框
   <input type="text">，如果需要描述文本框用户：<input type="text">
   如果有默认值则<input type="text" valur="默认值">
   如果有默认值且点击后就取消<input type="text" valur=" " placeholder="默认值">

2. password密码输入框
   密码：<input type="password">

3. date日期输入框
   <input type="date">

4. checkbox多选框
   每一个多选框都有一个属性名，<input type="checkbox" name="类型"> 文本，不同的类型写不同的段落里，默认选中的话，只需要在选项中添加如``

5. radio单选框
   不同的类型写不同的段落里，不然会识别成一个，只能选择一个<input type="radio"> 文本，默认选择同上

6. submit提交按钮
   默认文本是提交，也可以改变<input type="submit" value="文本">

7. reset重置按钮
   默认文本是重置，也可以改变<input type="reset" value="刷新">

8. hidden隐藏输入框
   看不见，隐藏了<input type="hidden">

9. file文本选择框
   就是选择上传文件，<input type="file">

10. textarea多行文本框
    <input type="textarea" ></textarea>，内有属性cols="30" rows="10"用于修改大小

11. select下拉框

    <select name="city" id="city">
        <option value="1">北京</option>
        <option selected="selected" value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
      </select>
    

修改属性只需要在选项后面写入以下词：

multiple：布尔属性，设置后为多选，否则默认单选

disabled：禁用

selected：默认选中该项

value：定义提交时的选项值

提交表单时

属性说明:
● name：表单提交时的“键”，注意和id的区别
● value：表单提交时对应项的值
○ type=“button”, “reset”, "submit"时，为按钮上显示的文本年内容
○ type=“text”,“password”,"hidden"时，为输入框的初始值
○ type=“checkbox”, “radio”, “file”，为输入相关联的值
● checked：radio和checkbox默认被选中的项
● readonly：text和password设置只读
● disabled：所有input均适用

每一个单选框、复选框标签都应该有一个属性叫name

# 把前端数据提交表单到后端
# 不能够提交表单，就是一个空白的按钮，事件
登录 # 提交表单的功能，但是，必须写在form表单里

验证form表单提交数据到后端

用的是flask框架做后端语言
使用pip install flask框架

<form action="">
action:

1. 什么都不写，默认提交到当前地址
2. 全写，绝对地址：http://www.baidu.com/login/
3. 只写后缀
   /index/
   # 它会自动拼接当前计算机的ip+port
   http://127.0.0.1:5000/index/

文件的提交：

必须满足两个条件

1.请求方式必须是post
2.enctype必须是form-data

form表单提交数据的编码方式：
application/x-www-form-urlencoded

1. urlencode:普通文本框提交的都是这个格式的，只能提交普通文本数据，不能够提交文件数据
   multipart/form-data
2. form-data：提交文件使用的必须是这个方式，可以提交普通文件数据，也可以提交文件数据
3. json # form表单不能提交json格式的数据

服务器

from flask import Flask,request

app = Flask(__name__)

# 路由，网址的后缀 baidu.com/index/
@app.route('/index/',  methods=['GET', 'POST']) # 默认使用的是GET请求
def index():
    # 如何拿到前端提交过来的数据
    # 前端以post请求方式提交的
    print(request.form) # 只能拿到post请求的数据
    # print(request.args) # 拿到get请求的数据
    # 如何接收文件数据
    print(request.files)
    file_obj = request.files.get('myfile')
    print(file_obj.filename) # 965_001_dq3_3600_5400.jpg

    with open(file_obj.filename, 'wb') as f:
        for line in file_obj:
            f.write(line)
    return 'OK'

app.run()