标签：def   网页   save   添加内容   多选   需要   通过   查找   href   

什么是前端

"""
任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面 手机界面 平板界面

什么是后端
	后端类似于幕后操作者
	不直接跟用户打交道
"""

浏览器窗口输入网址回车发生了几件事

"""
1 浏览器朝服务端发送请求
2 服务端接受请求(eg:请求百度首页)
3 服务端返回相应的响应(eg:返回一个百度首页)
4 浏览器接收响应 根据特定的规则渲染页面展示给用户看
"""

HTTP协议

"""
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式...

该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 
"""
# 四大特性
  1.基于请求响应
  2.基于TCP/IP作用于应用层之上的协议
  3.无状态
  	不保存用户的信息
    eg:一个人来了一千次 你都记不住 每次都当他如初见
    由于HTTP协议是无状态的 所以后续出现了一些专门用来记录用户状态的技术
    	cookie、session、token...
  4.无/短链接
  	请求来一次我响应一次 之后我们两个就没有任何链接和关系了
    	长链接:双方建立连接之后默认不断开 websocket(后面讲项目的时候会讲)

        
# 请求数据格式
  请求首行(标识HTTP协议版本，当前请求方式)
  请求头(一大堆k,v键值对)
  /r/n
  请求体(并不是所有的请求方式都有get没有post有 存放的是post请求提交的敏感数据)
# 响应数据格式
  响应首行(标识HTTP协议版本，响应状态码)
  响应头(一大堆k,v键值对)
  
  响应体(返回给浏览器展示给用户看的数据)
 
# 响应状态码
	用一串简单的数字来表示一些复杂的状态或者描述性信息  404:请求资源不存在
  1XX:服务端已经成功接收到了你的数据正在处理，你可以继续提交额外的数据
  2XX:服务端成功响应了你想要的数据(200 OK请求成功)
  3XX:重定向(当你在访问一个需要登陆之后才能看的页面 你会发现会自动跳转到登陆页面)
  4XX:请求错误
    	404:请求资源不存在
        403:当前请求不合法或者不符合访问资源的条件
  5XX:服务器内部错误(500)
  

# 请求方式
  1.get请求
  	朝服务端要数据
    eg:输入网址获取对应的内容
  2.post请求
  	朝服务端提交数据
    eg:用户登陆 输入用户名和密码之后 提交到服务端后端做身份校验

# url:统一资源定位符

HTML简介

超文本标记语言

如果你想要让浏览器能够渲染出你写的页面。你就必须遵循HTML语法

我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

hello big baby~
click me！give you some color to see see！

HTML就是书写网页的一套标准

# 注释:注释是代码之母


由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找

导航条所有的html代码


左侧菜单栏的HTMl代码

HTML文档结构

:head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
  :body内的标签 写什么浏览器就渲染什么 用户就能看到什么

注意:HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码

两种打开HTML文件的方式

• 找到文件所在的位置右键选择浏览器打开
• 在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器) 直接全部使用谷歌浏览器

标签的分类1

1  双标签
2  单标签(自闭和标签)

head内常用标签

在书写HTML代码的时候 你只需要写标签名 然后tab就能自动补全

  网页标题

  内部用来书写css代码
  引入外部css文件
  内部用来书写js代码,还可以引入外部js文件
  网页的描述性信息

body内常用标签

你肉眼能够在浏览器上面看到的花里胡哨的页面。内部都是HTML代码

基本标签

我是h1
  标题标签 1～6级标题
加粗
    斜体
    下划线
    删除线
    
段落
     
  换行
      
  水平分割线

标签的分类

# 1 块儿级标签:独占一行
		h1~h6	p div
  	1 块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
    2 块儿级标签内部可以嵌套任意的块儿级标签和行内标签
    	但是p标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
      	如果你套了 问题也不大 因为浏览器会自动帮你解开(浏览器是直接面向用户的 不会轻易的报错 哪怕有报错用户也基本感觉不出来)
       
    总结:
      	只要是块儿级标签都可以嵌套任意的块儿级标签和行内标签
        但是p标签只能嵌套行内标签（HTML书写规范）
# 2 行内标签:自身文本多大就占多大
		i u s b span
  	行内标签不能嵌套块儿级标签 可以嵌套行内标签
    

特殊符号

   空格
>   大于号
<   小于号
&  &
¥  ￥
©		?
商标®  ?

最常用标签

div  块儿级标签
span  行内标签
上述的两个标签是在构造页面初期最常使用的 页面的布局一般先用div和span占位之后再去调整样式 尤其是div使用非常的频繁
div你可以把它看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本先用span标签 

img标签

# 图片标签


src	
	1.图片的路径	可以是本地的也可以是网上的
	2.url	自动朝该url发送get请求获取数据

alt="这是我的前女友"
	当图片加载不出来的时候 给图片的描述性信息

title="新垣结衣"
	当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" 
		
width=""
	高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
    如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

a标签

# 链接标签

"""
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
如果点击过了就会是紫色（浏览器给你记忆了）
"""

href
	1.放url，用户点击就会跳转到该url页面
    2.放其他标签的id值 点击即可跳转到对应的标签位置

target
	默认a标签是在当前页面完成跳转   _self
    你也可以修改为新建页面跳转	   _blank

# a标签的锚点功能
"""eg:点击一个文本标题 页面自动跳转到标题对应的内容区域"""
顶部
hello world

中间

底部
回到中间
回到中间

标签具有的两个重要属性

1.id值
	类似于标签的身份证号 在同一个html页面上id值不能重复
2.class值
	该值有点类似于面向对象里面的继承 一个标签可以继承多个class值

标签既可以有默认的书写也可以有自定义的书写

列表标签

• 无序列表(较多)

  
  第一项
          
  第二项
          
  第二项
          
  第二项
  
  虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
  

• 有序列表(了解)

  
  111
      
  222
      
  333
  
  
  1 A I a ... 参考博客了机即可
  

• 标题列表(了解)

  
  标题1
      
  内容1
      
  标题2
      
  内容2
      
  标题3
      
  内容3
  

表单标签

"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
  在该form标签内部书写的获取用户的数据都会被form标签提交到后端

action:控制数据提交的后端路径(给哪个服务端提交数据)
  	1.什么都不写  默认就是朝当前页面所在的url提交数据
    2.写全路径:https://www.baidu.com  朝百度服务端提交
    3.只写路径后缀action=‘/index/‘  
    	自动识别出当前服务端的ip和port拼接到前面
      host:port/index/

  第一种 直接讲input框写在label内
            username:					第二种 通过id链接即可 无需嵌套
password:

ps:input不跟label关联也没有问题
  
"""
label 和 input都是行内标签
"""

input标签 就类似于前端的变形金刚  通过type属性变形
  text:普通文本
  password:密文
  date:日期	
  submit:用来触发form表单提交数据的动作
  button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
  reset:重置内容
  radio:单选
    	默认选中要加checked=‘checked‘
      男
      当标签的属性名和属性值一样的时候可以简写
      女
  checkbox:多选
  		DBJ
  
  file:获取文件  也可以一次性获取多个
    	
  hidden:隐藏当前input框
    	钓鱼网站
      	
  


select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
						新垣结衣
斯佳丽
明老师

textarea标签  获取大段文本
	  

# 能够触发form表单提交数据的按钮有哪些(一定要记住)
		1、
		2、点我
    
# 所有获取用户输入的标签 都应该有name属性
	name就类似于字典的key
  用户的数据就类似于字典的value
  
gender:
            男
            女
            其他
  

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

验证form表单提交数据

pip3 install FLASK

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

  
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
gender:
            男
            女
            其他

hobby:
            篮球
            足球
            双色球

province：
            上海
北京
深圳





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 那就是默认值
username:
disable 禁用
readonly只读

前端基础--HTML

标签：def   网页   save   添加内容   多选   需要   通过   查找   href   

原文地址：https://www.cnblogs.com/Franciszw/p/12904556.html