前端学习1 html
<html> <head> 这里面写的内容，是给浏览器看的，不是给用户看的 </head> <body> 写什么浏览器就渲染什么，给用户看的 </body> </html>
<html> <head> <title>网页标签</title> <style>写css代码的</style> <link src='引入的css文件的路径'> <scrpt>src='引用的外部js文件路径’>写js文件</scrpt> <meta 主要是告诉浏览器，你要干啥，比如设置几秒后跳转XX网站，告诉浏览器以最高级渲染> <meta name='keywords',content='洗澡，洗脚，桑拿，火锅'> # 上一行表示用户只要输入了keywords后面content指定的关键字，那么搜索引擎有可能搜索出来展示给用户 <meta name='description' content='网页上的描述信息'> </head>
body中常用标签
<body> <h1> 标题标签，1到6及标题，h1到h6，从大到小 </h1> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <p> 段落标签，一个p就是一行，如果一个p很长，那就一行占满之后再下一行 </p> <br>换行 <hr>水平分割线 </body>
常用标签之 div 和 span
是在构造页面初期最长使用的，页面的布局一般先用div和span占位，然后再去调整样式，特别是div
span 普通的文本用span来顶替，之后再去装饰字体，大小等
特殊符号
<body> <p> 苍茫 天涯 一个 表示一个空格 1 > 2 > 大于号 8 < 10 < 小于号 我&你 & &符号 钻石¥8000 ¥ ￥ 版权© ©© 商标&ret; &ret;®（圆圈R） </p> </body>
<img src='图片地址'alt='图片显示不出来的时候，显示这个' title='鼠标悬浮再图片上显示' height='800px'(高) width='400px'(宽度)> 宽高只设置一个，另外一个会等比例缩放，如果2个都设置，那么图片会失真
a标签（链接标签）
<a href='这里放网址' target='_blank'/'_self'(新建页面跳转/当前页面跳转)>这里放链接名称</a> 当a标签指定的网站没有被点击过，那么显示蓝色 如果a标签点击过，那么显示紫色 这是浏览器记忆的
a标签还有一个锚点功能
就是点击一个文本标题，页面自动跳转到对应内容区域
<a herf='' id='d1'>这里是d1</a> <a herf='' id='d2'>这里是d1</a> <a herf='' id='d3'>这里是d3</a> <a href='#d1'>回到d1页</a> 这里是href里面的#d1，是上面的id值，点击就可以跳转（任何标签都可以）
标签有2个重要的属性
id值
类似于身份证号，唯一
class值
有点类似于面向对象里面的继承，一个标签可以继承多个class值
标签内部即可以有默认的书写，也可以有自定义的书写
列表标签
无序列表（用的最多）
有序列表
标题列表
无序列表 用的最多，页面布局时，只要是排版一致的，基本都是ul套li标签，比如说网站上的标题列表 <body> <ul type='可以填参数'> <li>序号1</li> <li>序号3</li> <li>序号2</li> </ul> </body> 有序列表 <ol type='' start=''> <li>1</li> <li>2</li> <li>3</li> </ol> 标题列表 <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2</dd> </dl>
<td rowspan="2">ly</td> 表示ly占2格，往右合并
<td colspan="2">18</td> 表示18站2格，往下合并
<table border="1" cellpadding="10" cellspacing="5"> <thead> <tr> <td>id</td> <td>name</td> <td>age</td> <td>gender</td> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="2">ly</td> <td colspan="2">18</td> <!-- <td>male</td>--> </tr> <tr> <td>2</td> <!-- <td>kevin</td>--> <td>19</td> <td>female</td> </tr> </tbody> </table>
form表单（重要）
可以让前端的数据提交到后端
默认是以get的方式，可以指定method=post
input后用tab补全，页面会出现一个输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我是标签页</title> </head> <body> <form action=""> <p> username <input type="text"> </p> <p> password <input type="password"> </p> <p> <input type="date"> </p> <p> <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">其他 </p> <p> <input type="checkbox" name="hobby">篮球 <input type="checkbox" name="hobby">台球 <input type="checkbox" name="hobby">足球 </p> <p> <!-- file表示可以选择文件--> <input type="file"> </p> <p> <!-- textarea 表示输入框--> <textarea name="" id="" cols="30" rows="10"></textarea> </p> <p> <input type="hidden"> <!-- 表示隐藏--> </p> <p> <input type="submit" value="登录"> <!-- 提交按钮， value控制显示按钮的名称--> <button>我是按钮</button> <!-- 也是提交按钮，放在form按钮，就没啥用处--> <input type="reset"> <!-- 充值按钮--> </p> </form> </body> </html>
下图是显示效果
action的属性
# 可以让前端输入的数据提交到后端
<form action="" method="post">
# 朝后端提交的地址
1. 什么都不写，默认提交的是当前地址
2. 全写：https://passport.baidu.com/v2/api/?login
3. 只写后缀
/index/ # 他会自动帮你拼接 ip:port/index/
修改请求方式：
method="post"
'''
请求数据格式：
1. urlencode
2. form-data
3. json
'''
form表单只能提交：
1. urlencode
2. form-data
# 不能提交json格式的数据
提交json格式的数据：
1. ajax
2. api管理工具
结合后端验证form如何提交数据（flask）（重要）
form表单提交数据时候，每一个标签都应该有一个name属性，否则，后端是接收不到的
而name的属性值相当于字典的key，用户数据的数据相当于字典的value
form上传文件：
1. 请求方式必须是post请求
2. enctype='multipart/form-data'
客户端：需要用requset 模块来接受form表单的数据
from flask import Flask,request app=Flask(__name__) # 默认只允许get请求 @app.route('/index/', methods=['GET', 'POST']) def index(): # ImmutableMultiDict([('gender', 'on'), ('hobby', 'on')]) print(request.form) # 接收post请求的数据 print(request.files) # 接收文件数据 return 'index' app.run() # 启动flask框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <p> username: <input type="text" name="username"> </p> <p> password: <input type="password" name="password"> </p> <p> <input type="date" name="date"> </p> <p> <input type="radio" name="gender" value="1"> 男 <input type="radio" name="gender" value="2"> 女 <input type="radio" name="gender" value="3"> 其他 </p> <p> <input type="checkbox" name="hobby" value="1"> 篮球 <input type="checkbox" name="hobby" value="2"> 足球 <input type="checkbox" name="hobby" value="3"> 台球 <input type="checkbox" name="hobby" value="4"> 乒乓球 </p> <p> <input type="file" name="myfile"> </p> <p> <textarea name="text" id="" cols="50" rows="20"></textarea> </p> <p> <input type="hidden" name="hidden"> </p> <p> <input type="submit" value="登录"> <button>按钮</button> <input type="reset"> </p> </form> </body> </html>
浙公网安备 33010602011771号