码迷,mamicode.com
首页 > Web开发 > 详细

前端 http协议 四大特性 web本质 -响应状态码 列表标签 表单操作 form表单 # 44 HTML

时间:2019-09-04 21:45:16      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:客户端   直接   提交   radio   form   情况下   失败   input   files   

1.前端简介

技术图片
 1 """"""
 2 """前端:"""
 3     """和python没有任何关系"""
 4 
 5 1.什么是前端?
 6     任何与用户直接打交道的操作界面都可以称之为前端
 7     比如 : 电脑界面 手机界面 平板界面
 8 
 9 2.什么是后端?
10     暂时先理解成,幕后操作者
11     不直接与用户打交道
12 
13 3.为什么要学前端?
14     因为我们是全栈开发工程师
1.前端
技术图片
1 自制力
2 
3 来老男孩学习的心路历程
4     1.信心满满 老子一定能学会  凭啥学不会
5     2.哎呦卧槽 好像有点难 可能学不会
6     3.我靠 怎么还不毕业 老子要出去挣大钱
7     4.卧槽 怎么毕业了 我啥都不会
2.学习心态
技术图片
 1 软件开发架构:
 2     c/s
 3     b/s
 4 
 5 1.web(互联网)服务的本质:
 6     浏览器中敲入网址回车发生了几件事?
 7         1.浏览器向服务端发送请求
 8         2.服务端接收请求
 9         3.服务端返回相应的响应
10         4.浏览器接收响应 根据特定的规则 渲染页面展示给用户看
11 
12 2.HTTP协议:
13     超文本传输协议
14     规定了浏览器和服务端之间消息传输的数据格式
15 
16 3.HTTP协议四大特性:
17      1.基于请求响应
18      2.基于TCP/IP之上的作用于应用层的协议
19      3.无状态(服务端无法保存用户的状态,一个人来1000次,我都记不住,还当你如初见)
20      4.无连接(请求来一次我响应一次 ,之后立马断开连接,两者之间就不在有任何关系了)
21 
22      websocket (互联网套接字) 相当于是HTTP协议的一个大的补丁,他支持长连接
23 
24 4.请求数据格式:
25     请求首行(标识HTTP协议版本,当前请求方式)
26     请求头(一大堆k,v键值对)
27     请求体(携带一些敏感信息 比如:密码,身份证号...)
28 
29 5.响应数据格式:
30     响应首行(标识HTTP协议,响应状态码)
31     响应头(一大堆k,v键值对)
32     响应体(返回给浏览器页面的数据 通常响应体都是html页面)
33 
34 6.响应状态码:
35     用一些简单的数字来表示一些复杂的状态或者提示信息
36     1XX:服务端已经成功接收了你的数据正在处理,你可以继续提交额外的数据
37     2XX:服务端成功响应 你想要的数据(请求成功200)
38     3XX:重定向(当你在访问一个需要登陆之后才能访问的页面 你会发现窗口会自动调整到登录页面 301,302)
39     4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够 403)
40     5XX:服务器内部错误(500)
41 
42 7.请求方式:
43     1.get请求:
44         朝 服务器 要 资源 (比如浏览器窗口,输入www.baidu.com)
45     2.post请求:
46         朝着 服务端 提交数据(比如用户登陆,提交用户名和密码)
47 
48     URL:统一资源定位符(大白话 就是网址)
3.前端重点概念 web服务的本质 http协议 四大特性 请求数据格式 响应数据格式 响应状态码 请求方式

 

2.HTML 标签

技术图片
  1 1.HTML 标签
  2     超文本标记语言
  3     要想让你的页面能够正常被页面显示出来 ,你所写的页面 ,就必须遵循 HTML 标记语法
  4     也就意味着 所有能被浏览器显示出来的页面 内部都是HTML代码
  5 
  6     ps:浏览器只认识 html css js
  7 
  8 2.web 本质
  9     浏览器
 10     服务器
 11     文件(后缀名是 .html结尾的文件 ,也就意味着 只要看到 .html结尾文件 那么它就是一个前端页面文件)
 12     文件的后缀名 仅仅是给人看的 计算机是无所谓的 因为都是二进制数据
 13 
 14 3.HTML注释
 15     写网页的一套标准
 16 
 17     注释是代码之母
 18         <!--单行注释-->
 19         <!--
 20         多行注释
 21         多行注释
 22         -->
 23     一般情况下 html 的注释都会按照下面的方式书写
 24     <!--导航条样式开始-->
 25     <!--导航条样式结束-->
 26 
 27     HTML 文档结构
 28         <html>
 29         <head></head>:head(头)内的标签 不是用来展示给用户看的,而是定义一些配置 主要是给浏览器看的
 30 
 31         <body></body>:body(内容)内的标签 就是浏览器展示给用户看的内容
 32 
 33         </html>
 34 
 35 4.打开html页面的两种方式
 36     1.找到文件路径 选择浏览器打开
 37     2.pycharm快捷方式直接打开
 38 
 39 5.标签的分类1:
 40     1.双标签(<h1></h1> <a></a>)
 41     2.单标签(自闭合标签 <img/> <hr> <br>)
 42 
 43 6.head内常用标签
 44     title 用来显示 网页 标题
 45     style 用来控制样式的 内部支持写css代码  -- 内联式
 46     script(脚本) 内部支持写 js代码 也支持 导入外界的js文件
 47     link 专门用来引入外界的css文件  -- 外联式
 48 
 49 7.标签的分类2:
 50     1.块儿级标签(独占浏览器一行)
 51         div p(段落) h(标题)
 52         1.快儿级标签可以修改长度
 53         2.快儿级标签内部可以嵌套任意得块儿级 标签
 54             ps:
 55                 但是p 标签虽然是块儿级标签 但他不能够嵌套其他块儿级标签,包括他自身
 56                 可以嵌套行内标签
 57 
 58         总结:
 59             1.只要块儿级标签 都可以嵌套行内标签
 60             2.p 标签只能嵌套行内 ,其他块儿级可以嵌套任意的块儿级标签
 61     2.行内标签(自身文本多大就占多大)
 62         span b(加粗) s(删除) i(斜体) u(在文本下面添加下划线)
 63        div 和 span 通常都是用来构建网页布局的
 64 
 65 8.body内常用标签
 66     基本标签
 67         h标签:标题标签
 68         p段落:段落标签
 69     符号:
 70     常用标签:
 71         div
 72         span
 73         p
 74         img src 存放的是图片的路径(该路径可以是本地的,也可以是网上的)
 75             1.也可以放url(网址)(会自动请求该url获取相应数据)
 76             2.也可以直接放图片的二进制数据 会自动转换成图片
 77 
 78            alt : 当图片加载不出来的时候 显示提示信息
 79            title:当鼠标悬浮在图片上时,提示的信息
 80            height,width 当你只指定一个参数时 另一个会等比例缩放
 81 
 82         a href 后面存放url 的时候 点击跳转到该url
 83             如果该链接没有被点击过 ,那么默认是蓝色,只要点过一次 ,之后都是紫色
 84 
 85             target 默认是_self 当前页面跳转
 86                     _blank新建页面跳转
 87 
 88            锚点功能(回到顶部)
 89                 href 还可以写另一个a标签的id值 ,点击就会跳转到id值所对应的的a 标签
 90 
 91 9.每个标签都应该有的三个比较重要属性
 92     1.id值 该值就类似与人的身份证号 在用一个html文档 id 应该保证唯一不重复
 93     2.class值  该值就类似于面向对象里面的继承 可以写多个
 94     3.style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高
 95 
 96     补充 任何标签都支持自定义属性
 97 
 98 
 99 了解:
100 1.emmet插件
101 2.防呆措施
1.HTML标签
技术图片
 1 列表标签:
 2     1.表格标签
 3         <table>
 4             <thead></thead>
 5             <tbody></tbody>
 6         </table>
 7 
 8         tr 表示一行
 9         th 和 td都是文本
10             建议在thead 用 th
11             tbody 内用 td
12         colspan 表示水平方向
13         rowspan 表示竖直方向
14 
15     2.表单标签
16         能够接收用户输入(输入 选择 上传)并将其发送给后端
17 
18         以注册实例讲解form表单
19 
20         action 控制数据提交的目的地
21             1.不写情况下,默认提交到当前页面所在路径
22             2.写全路径(https://www.baidu.com)
23             3.路径后缀(/index/)
24 
25         input 标签就类似于前端变形金刚
26             type
27                 text:普通文本
28                 password:密文 ,不展示铭文
29                 date:日期
30                 submit:触发提前动作
31                 button:普通按钮 没有实际意义
32                         但可以通过js绑定事件实现自定义动作
33                  reset :重置表单内容
34                  radio:单选  可以通过checked控制默认选择
35                  (当属性值和属性名相同的情况下 可以简写checked) checked="checked"
36                  checkbox: 多选 同上 可以设置默认值
37                  file:获取用户上传的文件
38 
39                 select标签
40                     默认是单选 可以通过multiple变成多选
41                     如果想默认选择 用selected (selected="selected")
42 
43                 label:注册登录时点击提示内容,可以直接进入输入
44 
45 
46                 textarea标签 :获取用户输入的大段文本
47     3.form 表单:
48         默认是get请求 你要通过method参数换成post提交
49         form 表单中要想触发提交动作
50             只有两种情况可以
51                 1.input标签type指定成submit
52                 2.直接写button标签
53 
54              获取用户输入(输入 选择 上传...)的标签都必须有一个name属性
55              这个name属性就类似于字典的key ,而标签获取到的用户写入的值类似于字典的value
56 
57              <input type="text" id="d1" name="user" value="默认值"
58              name就相当于 字典的key
59              value就是字典的值
60              获取都的用户输入都会被放入value属性中
61 
62 
63         form 表单传文件的时候 需要制定enctype的参数
2.列表标签 form表单 重点
技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <form>
 9     男<input type="checkbox" value="m" disabled name="like" checked>
10     <!--利用 disabled 设定默认值 无法再作修改,即防呆措施-->
11 </form>
12 
13 </body>
14 </html>
3.防呆措施 了解.html
技术图片
 1 from flask import Flask,request
 2 
 3 app = Flask(__name__)
 4 @app.route(/index/,methods=[GET,POST])
 5 
 6 def index():
 7     print(request.form)  # 获取前端form表单提交过来的数据
 8     print(request.files)
 9     file_obj = request.files.get(avatar)
10     file_obj.save(xxx.pdf)
11     return 收到了
12 app.run()
4.flask窥视.py
技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <p>大梦谁先觉,平生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;吾自知!&yen;1000000000</p>
 9 
10 a &gt; b ©
11 b &lt; c
12 &yen;
13 &yen;
14 &amp;
15 &amp;
16 &reg;
17 &copy;
18 </body>
19 </html>
5. 符号.html
技术图片
 1 """
 2 列表
 3 1.无序列表
 4 
 5 <ul type="disc">
 6   <li>第一项</li>
 7   <li>第二项</li>
 8 </ul>
 9 type属性:
10 
11 disc(实心圆点,默认值)
12 circle(空心圆圈)
13 square(实心方块)
14 none(无样式)
15 2.有序列表
16 
17 <ol type="1" start="2">
18   <li>第一项</li>
19   <li>第二项</li>
20 </ol>
21 type属性:
22 
23 1 数字列表,默认值
24 A 大写字母
25 a 小写字母
26 Ⅰ大写罗马
27 ⅰ小写罗马
28 3.标题列表
29 
30 <dl>
31   <dt>标题1</dt>
32   <dd>内容1</dd>
33   <dt>标题2</dt>
34   <dd>内容1</dd>
35   <dd>内容2</dd>
36 </dl>
37 
38 """
6.列表标签.py
技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <a href="" id="d1">顶部</a>
 9 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
10 <a href="#d1">go tio</a>
11 </body>
12 </html>
6.锚点.html
技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <h2>注册页面</h2>
 9 <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
10     <p><label for="d1">username:<input type="text" id="d1" name="username"></label></p>
11     <p><label for="d2">username:<input type="password" id="d2" name="username"></label></p>
12     <p>
13         <label for="d3">birthday</label>
14         <input type="date" id="d3" name="birth">
15     </p>
16 
17     <p>性别:
18         <input type="radio" name="gender" checked value="male">19         <input type="radio" name="gender" checked value="female">20     </p>
21     <p>
22         <input type="checkbox" name="hobby" value="baseball">
23          <input type="checkbox" name="hobby" value="football">足球
24         <input type="checkbox" name="hobby" checked value="doublecolorball">双色球
25     </p>
26     <p>省市
27         <select name="province" id="">
28             <option value="sh">上海</option>
29             <option value="bj">北京</option>
30             <option value="sz">深圳</option>
31         </select>
32     </p>
33     <p>头像
34         <input type="file" name="avatar">
35     </p>
36     <p>个人简介
37         <!--获取用户输入的大段文本-->
38         <textarea name="info" id="" cols="30" rows="10"></textarea>
39     </p>
40     <p>
41         <input type="submit" value="注册一">
42         <input type="reset" value="注册二">
43         <input type="button" value="注册三">
44         <button>button标签</button>
45     </p>
46 </form>
47 </body>
48 </html>
7.form表单.html
技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <!--标题-->
 6     <title>HTML注释</title>
 7 </head>
 8 <body>
 9     <!--
10     <h1>1<h1>
11     <h1>2<h1>
12     <h1>3<h1>
13     -->
14 </body>
15 </html>
8.HTML 注释.html
技术图片
1 <h1>hello oldboy!</h1>
2 <meta charset="UTF-8">
3 <a href = https://www.luffycity.com>give you some color to see</a>
4 <a href = https://www.hao123.com >笑话网</a>
5 <img src = https://img3.utuku.china.com/650x0/toutiao/20190628/51a31906-1538-43fd-aecf-f2a14026a58b.jpg/>®®®®®®®®®®®®
a.text
技术图片
 1 import socket
 2 
 3 
 4 server = socket.socket()
 5 server.bind((127.0.0.1,8080))
 6 server.listen(5)
 7 
 8 while True:
 9     conn, addr = server.accept()
10     data = conn.recv(1024)
11     conn.send(bHTTP/1.1 200 OK\r\n\r\n)
12     #conn.send(b‘hello oldboy!‘)
13     #conn.send(b‘<h1>hello oldboy!</h1>‘)  # 客户端接收到的信息加大加粗
14     with open(a,rb) as f:
15         for line in f:
16             conn.send(line)
17     # conn.send(b‘HTTP/1.1 200 OK\r\n\r\n‘)
18     # with open(r‘D:\fullstack_s4\day48\01 第一个html文件.html‘,‘rb‘) as f:
19     #     for line in f:
20     #         conn.send(line)
21     conn.close()
手撸server.py

xxx.pdf

 

标签大全

技术图片
  1 <!DOCTYPE html>
  2 <!-- html:页面根标签 lang="zh"告诉浏览器页面的页面的语言>-->
  3 <html lang="en">
  4 <!-- head:头标签 - 页面编码,页面标签标题,页面样式,页面脚本-->
  5 <head>
  6     <!--页面编码-->
  7     <meta charset="UTF-8">
  8     <!--页面标签标题-->
  9     <title>Title</title>
 10     <!--页面样式-->
 11     <style></style>
 12     <!--页面脚本-->
 13     <script></script>
 14 </head>
 15 <!--body:体标签 - 页面内容,页面脚本-->
 16 <body>
 17 <!--body:用于内容显示的标签全部书写在body中-->
 18 
 19 <!--标签:h1~h6-->
 20 <!--h1:一般一个页面只出现一次,代表该页面的主内容解释-->
 21 <h1 id="top">一级标签</h1>
 22 <h2>二级标题</h2>
 23 <h3>三级标题</h3>
 24 <h4>四级标题</h4>
 25 <h5>五级标题</h5>
 26 <h6>六级标题</h6>
 27 
 28 <!--p:段落-->
 29 <p>段落</p>
 30 
 31 <!-- 文本相关内容,一般会被p标签嵌套-->
 32 <span>span标签</span>
 33 <b>加粗标签</b>
 34 <strong>以加粗方式强调的标签</strong>
 35 <i>斜体标签</i>
 36 <em>以斜体方式强调的标签</em>
 37 <sup>上角标</sup>
 38 <sub>下角标</sub>
 39 <s>删除</s>
 40 <u>下划线</u>
 41 
 42 
 43 <!--功能标签-->
 44 <!--br:换行-->
 45 <br>
 46 <!--hr:分割线-->
 47 <hr>
 48 <a href="" id="d1">go d1</a>
 49 <!--target:超链接 :_self _blank-->
 50 <a href="https://www.baidu.com " target="_self">前往百度</a>
 51 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 52 <a href="" id="d2">go d2</a>
 53 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 54 <!--锚点-->
 55 <a href="#top">go top</a>
 56 
 57 <!--图片标签:src :图片源 alt :资源加载失败的 文本提示title :鼠标悬浮的文本提示-->
 58 <img title="赏心悦目图"  height="1000" width="800" alt="哈尼" src="http://images.xuejuzi.cn/1612/1_161230185104_1.jpg">
 59 
 60 <!--组合标签-->
 61 <!--列表-->
 62 <!--ul>li{列表项}*3 :无序-->
 63 <ul>
 64     <li>列表项</li>
 65     <li>列表项</li>
 66     <li>列表项</li>
 67 </ul>
 68 <!--ol>li{第$项}*3:有序-->
 69 <ol>
 70     <li>第1项</li>
 71     <li>第2项</li>
 72     <li>第3项</li>
 73 </ol>
 74 
 75 <!--表格标签-->
 76 <!--str:行 th:标题单元格 td :内容单元格 cellpadding:单元格内部间距 cellspacing:单元格间的间距-->
 77 <!--border 边框 width 宽度 height 高-->
 78 <table  border="1" width="500" height="300" cellpadding="10" cellspacing="0">
 79     <thead>
 80         <tr style="height: 50px">
 81             <th>标题</th>
 82             <th>标题</th>
 83             <th>标题</th>
 84         </tr>
 85     </thead>
 86     <tbody>
 87         <tr>
 88             <td>单元格</td>
 89             <td>单元格</td>
 90             <td>单元格</td>
 91         </tr>
 92         <tr>
 93             <!--colspan :两个单元格合并 --横-->
 94             <td colspan="2">单元格</td>
 95             <!--<td>单元格</td>-->
 96             <!--rowspan:两竖合并 --竖-->
 97             <td rowspan="2">单元格</td>
 98         </tr>
 99     </tbody>
100     <!--tfoot:设计表尾样式-->
101     <tfoot>
102         <!--<tr>-->
103             <!--<td>单元格</td>-->
104             <!--<td>单元格</td>-->
105             <!--<td>单元格</td>-->
106         <!--</tr>-->
107     </tfoot>
108 
109 </table>
110 
111 
112 <!--表单标签:完成前后台交互的 - 将前台用户输入的内容提交到后台-->
113 <!--形式动作 form action:提交后台的接口地址 method:提交方式 get post-->
114 <!-- input :name 明确才会往后台提交 ,name是键,value是值 (可以手动规定也可以用户输入)-->
115 <form action="" method="">
116     <input type="text" name="user" placeholder="文本占位符">
117     <input type="password">
118     <input type="color">
119     <input type="number">
120 
121     <!--提交文件-->
122     <input type="file">
123     <!--单选框-->
124     <!--radio 收音机 checked 选中的-->
125     男<input type="radio" name="sex" checked>
126     女<input type="radio" name="sex">
127     一班<input type="radio" name="cless">
128     二班<input type="radio" name="cless" checked>
129     <br>
130     男<input type="checkbox" value="m" name="like" checked>
131     女<input type="checkbox" value="f" name="like" checked>
132     人妖<input type="checkbox" value="mf" name="like">
133 
134     <!--选择列表 multiple : 可以多项操作-->
135     <select name="subject" multiple>
136         <!--option 选项-->
137         <option value="chinese">语文</option>
138         <option value="math">数学</option>
139         <option value="python">python</option>
140     </select>
141 
142     <!--文本域-->
143     <textarea name="" id="" cols="30" rows="10"></textarea>
144 
145     <!--三个按钮-->
146     <button type="button">按钮</button>
147     <button type="reset">重置</button>
148     <button type="submit">提交</button>
149 
150     <!--提交-->
151     <input type="submit" value="登录">
152 </form>
153 <!--页面脚本-->
154 <script></script>
155 </body>
156 </html>
****标签.html

总结

技术图片
  1 内容总结:
  2     HTTP协议
  3         超文本传输协议
  4         四大特性:
  5             1.基于请求响应
  6             2.基于TCP/IP作用在应用层之上的协议
  7             3.无状态
  8             4.无连接
  9            websocket 长连接
 10         数据格式:
 11             请求/响应首行(HTTP协议版本,请求方式(get/post)/响应代码)
 12              请求/响应头(一大堆k,v键值对)
 13              请求/响应体(post请求携带敏感数据/返回html前端界面)
 14 
 15         响应状态码:
 16             1xx:服务器已接收你的数据,正在处理,可以继续传输
 17             2xx:服务器已接受请求,你的请求成功(200成功)
 18             3xx:服务器重定向(登录,直接跳到界面)
 19             4xx:服务器权限不足403 请求不存在404
 20             5xx:服务器内部错误(500)
 21 
 22         请求方式:
 23             1.get 获取资源
 24             2.post 提交数据
 25 
 26     HTML
 27         超文本标记语言 构建网页的基本骨架
 28         XML也可以搭建前端页面 在odoo(内部管理软件)框架中使用较多
 29 
 30         注释 <!---->
 31 
 32         标签分类1:
 33             1.双向标签
 34             2.单向标签
 35         标签分类2:
 36             1.块儿级标签 div p h
 37                 独占一行 可以设置长宽
 38                 1.块儿级标签可以嵌套任意类型的标签
 39                 2.但是p标签不能快儿级标签 只能嵌套行内标签
 40             2.行内标签 span a (href + 网址)img (src + 图片地址)
 41                 自身文本多大,就占多大 无法设置长宽
 42 
 43         h1~h6标题标签
 44         b(加粗)i(斜体) s(删除) u(下划线)
 45         br(换行) hr(分割线)
 46 
 47         &amp;        &
 48         &nbsp;       空格
 49         &yen;        ¥
 50         &gt;         >
 51         &lt;         <
 52         &reg;        ®
 53         &copy;       ©
 54 
 55         常用标签:
 56             div
 57             span
 58             这哥俩主要用来做网页骨架搭建 页面布局
 59             a标签
 60                 href
 61                     1.可以写url(网址)点击跳转
 62                     2.锚点 还可以写另一个a标签的 id值 点击跳转到对应标签所在位置(回到顶部)
 63 
 64                 target(目标) 默认是_self (自我) 当前页跳转 也可以换成_blank(空白的) 新建窗口打开
 65 
 66                 如果url是首次点的话 初始时蓝色
 67                 只要点过一次 浏览器会都会变成紫色(默认蓝色)
 68 
 69                 img标签
 70                     src
 71                         1.图片路径(本地/网上)
 72                         2.url(自动访问该url获取结果)
 73                         3.直接放图片二进制数据
 74 
 75                     alt 当图片加载不出来时,展示出来的提示信息
 76                     title鼠标悬浮上去 提示信息
 77                     height,width 两者挑一个就可以实现等比例缩放
 78 
 79                     ul>li 无序列表
 80                     ol>li 有序列表
 81                     d1>dt,dd 标题列表
 82 
 83             表格标签:
 84                 <table>
 85                     <thead>
 86                         <tr>
 87                             <th>加粗文本(标题)</th>
 88                             <td>普通文本</td>
 89                         </tr>
 90                     </thead>
 91                     <tbody></body>
 92                 </table>
 93 
 94             form表单
 95                 获取用户信息 提交给后端
 96                 input 标签
 97                     type
 98                         text:普通文本
 99                         password:密文
100                         date:日期
101                         radio:单选 checked="checked" 可以简写为checked
102                         checkbox:多选 checked="checked" 可以简写为checked
103                         file 上传文件
104 
105                         按钮组:
106                         submit 触发form表单提交动作
107                         bottom没有任何效果 只是普通按钮
108                         reset 重置按钮
109 
110                         bidden 隐藏(用户看不到 但是你打开浏览器检查 文档是有的)
111                         readonly 只读
112                 select标签 下拉框
113                     默认的是单选 一个个的选项 用的是option标签
114                     可以指定multiple 变成多选
115 
116                     默认选中selected="selected" 简写selected
117 
118                     <optgroup label="一级标题">
119                     <option></option>
120                     </optgroup>
121 
122                 textarea 大段文本
123                 button 标签 放在form表单也可以触发提交信息
124                 label   通常与input 结合使用 for后面跟input标签的id值
125 
126 
127         获取用户信息的标签都应该有name属性
128             name类似于字典的key 用来标签input框获取到的信息到底是什么
129             用户输入的信息都会被标签的value属性接收
130             你也可以直接写value值 作为标签默认值
131 
132 
133             form标签 几个比较重要的参数
134                 action 控制数据提交的地址
135                 1.不写,默认当前页面所在的地址提交
136                 2.写全路径https://www.hao.123.com
137                 3.就写路径后缀/index/
138             method 控制提交方式
139                 默认是get请求
140                     get请求携带的参数 会直接展示占地址栏
141                     get前期一般只能携带一些不重要的信息,get请求携带的数据 大小是有限制
142                     大概在4KB左右
143                 也可以指定成post请求
144             如果form表达要上传文件 那么需要修改enctype参数
145                 由原来默认的urlencoded(网址解码)变成form-data(表单数据)
146         flask框架
147             三行式
148                 from flask import Flask
149                 app = Flask(__name__)
150                 app.run()
总结

前端 http协议 四大特性 web本质 -响应状态码 列表标签 表单操作 form表单 # 44 HTML

标签:客户端   直接   提交   radio   form   情况下   失败   input   files   

原文地址:https://www.cnblogs.com/llx--20190411/p/11461245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!