Day51--HTML--02

每日测验

"""
今日考题
1.ascii,gbk,utf-8,gbk的区别
2.请用至少两种方式实现m与n值交换m=10,n=5
3.什么是深浅拷贝
4.什么是HTTP协议
5.列举你所知道的HTML标签
"""

昨日内容回顾

  • Web的本质

    """
浏览器
服务端
文件(html文件)
"""
课程web方向
  前端 django bbs 路飞

  • HTTP协议

    """
HTTP协议的由来(sql语句由来)
  浏览器只有一个如何兼容N多个服务端
"""
# 四大特性
  1 基于请求响应
  2 基于TCP/IP作用于应用层之上的协议
  3 无状态
      无论来多少次 都待你如初见
   	如何做到保存用户状态？？？
      cookie、session、token
  4 无/短链接
      请求来我响应你 之后就没有联系了
      长链接:websocket(群聊功能、服务端主动给客户端发送消息)

# 请求数据格式
  请求首行(HTTP协议的版本，当前请求方式)
  请求头(一大堆k，v键值对)
  
  请求体(并不是所有的请求方式都有请求体,get没有post有)
  
# 响应数据格式
  响应首行(HTTP协议的版本，响应状态码)
  响应头(一大堆k，v键值对)
  
  响应体(浏览器展示给用户看的内容)
 
# URL
      统一资源定位符 类似于坐标
# 请求方式
  1.get请求
  	朝别人要数据(也是可以携带参数的，只不过参数不是放在请求体里面的,而是直接放在url的后面)
  	url?username=jason&password=123
  2.post请求
  	朝别人提交数据

# 响应状态码
"""用简短的数字来表示一大串提示性信息"""
1XX:服务端已经成功接收到了你的数据 正在处理你可以继续提交
2XX:请求成功(200 OK)
3XX:重定向(你想访问A页面但是给你调到了B页面)
4XX:请求错误(404请求资源不存在、403请求不符合条件)
5XX:服务端内部错误(500)
ps:上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息
  公司A
    	1000:
      1001:
      1002:
  公司B
    	2001:
      2002:
      2003:
      ...

  • HTML

    """
超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可)
书写网页的一套标准
  除了HTML可以书写前端页面之外
  还有XML也可以书写前端页面 
      odoo框架内部的前端页面全部是用XML书写
      公司内部管理软件 ERP
"""

# 注释  

# 文档结构

  ：都不是给用户看的 主要是给浏览器看的一些配置信息
  ：body书写的所有的内容 都是给用户看的

  • head内常用标签

    title  定义网页标题信息
style  内部支持直接书写css代码
link   引入外部css文件
script 内部可以书写js代码并且也可以引入外部js文件
meta	 定义网页源信息
  keywords
  description

  • body内基本标签

    """
h1～h6 标题标签
p段落标签
u i b s
hr
br
"""

# 特殊符号
空格   
大于	>
小于  <
&
®
©
¥

  • 常用标签

    """
div：网页初期划定区域范围
span：划定文本的
"""

# a标签
  链接标签
  
    	href
          1.可以放一个url点击自动跳转
          2.还可以放其他标签的id值 锚点功能
      
      target
          控制是否在当前页跳转
          _self（默认）
          _blank
# img标签
  图片标签
  
    	src
          1.可以放图片的路径 本地或者线上
          2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示(暂时不考虑)
      
      alt
          图片加载不出来的时候	展示的提示信息
       
     	title
          鼠标悬浮在图片上之后展示的提醒信息
      
      height、width
          单独调整某一个 另外一个会自动等比例缩放
          如果两个都调整了 可能会出现图片的失真
 
# 标签一般情况下都需要有两个重要的属性
  id值
  	唯一标示  同一个页面不能有重复	
  class值	
      类似于类的继承 可以有多个

  • 标签的分类

    """
分类1:
  双标签
      
    
  单标签
      
	
分类2:
  块儿级标签:独占一行  可以设置长宽
      div p
      注意：块儿级标签内部可以嵌套任意的行内标签和块儿级标签
          但是p标签只能嵌套行内标签
  行内标签:自身文本多大就占多大  不能设置长宽
      span a img
	
  PS：上述的规定只是HTML书写规范 如果你不遵循 不会报错
	浏览器会自动帮你解除嵌套关系
"""

  • 列表标签

    ul
  li
页面上只要是带有规则的排序文字 一般用的都是无序列表	

ol
  li
有序列表

dl
  dt
  dd
标题列表

今日内容概要

  • 表格标签(只要是展示数据 一般都可以使用表格标签)
  • 表单标签(重要:获取前端用户数据发送给后端)
  • 偷窥一下后端框架的基本使用(flask)
  • css层贴样式表(选择器)

今日内容详细

1.表格标签

jason 123 read
egon	123 dbj
tank  123 hecha
...

 
 标签

  一个tr就表示一行
              加粗文本
              正常文本
          表头(字段信息)
    	 表单(数据信息)


    
        
usernameusername

    
        

            jason
            123
            read
        

    



  加 表格外边框
  水平方向占多行  列合并
   垂直方向占多行  行合并

# 表格标签不一定都要讲thead 和 tbody 都写出来，可以只有表单 tbody
# 原生的表格标签很丑 但是后续我们一般都是使用框架封装好的 很好看

属性:

border: 表格边框.
cellpadding: 内边距  （文字距离内框线的距离）
cellspacing: 外边距  （内框线和外框线的距离）
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

2.表单标签（重要）
"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能

  在该form标签内部书写的获取用户的数据都会被form标签提交到后端
    action属性:控制数据提交的后端路径(给哪个服务端提交数据)
        1.什么都不写  默认就是朝当前页面所在的url提交数据
        2.写全路径:https://www.baidu.com  朝百度服务端提交   
        3.只写路径后缀action='/index/' 自动识别出当前服务端的ip和port拼接到前面
          eg:host:port/index/
        
# 1.label标签
    
3.验证form表单提交数据
# 接下来的flask框架代码无需掌握  看一下效果即可
pip3 install FLASK

# form表单默认提交数据的方式 是get请求  数据是直接放在url后面的
    http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
# 你可以通过method指定提交方式
    

  
# 针对用户选择的标签(radio/checkbox/select) 用户不需要输入内容 但是你需要提前给这些标签添加内容value值

gender:
    男
    女
    其他



hobby:
    篮球
    足球
    双色球



province：
    





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



"""下面的代码无需掌握 你只需要关心form表单即可"""
from flask import Flask, request

app = Flask(__name__)

# 当前url既可以支持get请求也可以支持post请求  如果不写默认只能支持get请求
@app.route('/index/',methods=['GET','POST'])   
    # route：路线的意思，第一个参数就是ip+端口，之后的路径。一般是视图名，特别注意 前后都有'/'
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 那就是默认值

disable 禁用
readonly只读


							
							
			Python全栈路飞学院							
						



						

						
相关

						

				
						
			            
            
            
                                    
           
  			
						

					

														
					
					

					
									

					
									   
标签

										

										
    
										

									

										
										

									

					

					
				



	

	
一品网 冀ICP备14022925号-6

	
	




egonDBJ