Html基础

python格式（在使用flask的情况下）
from flask import Flask
app=Flask(__name__)
@app.route('/')
def helloworld():
    return "1<span style='color:red;'>11"
if __name__ =='__main__':
    app.run()
 
通过flask调用来实现局域网的数据调用
return返回给用户客户端字符串 最后来实现数据的传输
例如return “1”在浏览器上就会显示 1
<span>是行内标签，可以在标签内实现大小色彩的更改
<h1~6></h1~6>是标题的头文件标签

如果需要在py中调用HTML文件，使用render_template在头文件上
在后面的return中调用需要使用  return render_template(HTML文件名.html)；
并且需要在根目录下创建templates 文件夹，一般render_template调用文件都是通过根目录下的templates来实现数据的调用，也可以自行更改templates调用的文件夹的名字
在templates文件夹中需要包含需要调用的HTML文件，并且需要和执行终端中的数据一致，例如templates中包含123.html，写的过程中需要调用123.html，必须保证二者一致，不能写111.html去调用123.HTML。
 

CSS标签中可以使用例如    <span style='color:颜色;'>要输入的文本   来更改数据的颜色和字体大小

<span></span>是可以同行占用，例如：
<span>123</span>
<span>111</span>
最终显示的会是 123 111
如果是<div></div>
div是代表占据一整个行，例如
<div>123</div>
<div>111</div>
则最后展示出来的效果是
123
111

span内可以更改数据的颜色和效果
例如<span style='color:red'>111</span><span>123</span>
则展示效果是 111为红色，123无颜色

超链接标签
<a href="网址">超链接标签的名字</a>
如果需要在自己的局域网内跳转，可以省略网络头文件(https://www.~~~~~)
例如在pythoncharm中运行的网页是 http://127.0.0.1:5000
如果我们需要在网页中打开子网页，例如http://127.0.0.1:5000/news
我们可以在超链接中直接写入 <a href="/news">超链接名字</a>  来实现转跳到子网站的超链接

插入图片
<img src="图片的地址"/>
图片地址可以使用除开本机地址以外的网络地址的照片，随便在互联网上找一张照片都可以
在使用flask前提下，如果需要读取本地化贴图，需要在根目录下创建static
然后引用贴图的方法
<img src="/static/贴图的名字.???>
如果需要在img上添加贴图的大小长宽比，则<img style="height: 100px">
px代表图片的像素，如果只设置（例如只设置img的宽度，则会根据图片的原先宽高比自动调节图片大小）高度则会自动调节
如果是<img style="height:100px;width:100px">则会严格按照图片的数据进行高宽比设置。
还有一种压缩长宽比的办法是<img style="height:10%">进行百分比缩放，同样跟只设置长度比一样强制进行缩放，如果是<img style="height:10%;width:10%">则会根据高宽比进行强制性缩放
并不是任何的网站贴图数据都可以进行直接访问，如果图片使用的render进行上级网站回滚查询，(即防盗链)，则无法进行直接使用，会无法显示图片的任何信息。

可以在任意标签中嵌套<a></a>超链接，例如：
<a href="????.????">
<img src="???.???">
</a>
通过嵌套img的方式  点击img来实现点击图片的跳转

如果需要在点击超链接的同时，开启一个新的web标签页，则
<a herf="??.??" target="_blank" >

标签之间可以通过嵌套来实现多种标签性质统一
例如
<div>
<a her="???.???" target=_blank>
<img src="???.jpeg">
</a>
</div>
（嵌套了div  行类标签的同时 在超链接中嵌套了一个图片）

列表标签
<ul>
<li>（中间是列表的信息）</li>
</ul>
列表可以设置很多个
例如：
<ul>
<li></li>
<li></li>
</ul>
（这个列表标签前面的号是 · ）
带序号的列表标签
<ol>
<li></li>
</ol>
（这个列表标签前面是序号  1 2 3等等）

列标签都是块级标签，占据一整行

表格标签
<table></table>
表格标签有表头<thead></thead>
表身 <tbody></tbody>
在表头中可以穿插行头，列头
<thead>
    <tr> <th>ID</th> </tr>
</thead>
在表身中可以插入行头，列头（但是列头不是th是td）
<tbody>
    <tr> <td>1</td> </tr>
</tbody>

如果需要设置表格的边框
<table border="1">
??
</table>

input系列 输入框//
<input type="text">最标准的文字输入框
<input type="password">密码框
<input type="file">上传文件
<input type="radio">选择圆框（一个点）
如果需要radio选择框只能二选一，则需要
<input type="radio"  name="n1"> //这是一个点
<input type="radio"  name="n1"> //这是第二个点
同时设置n1的目的是radio只能有一个选择
如果需要radio后面进行选择，则
<input type="radio" name="n1">男
<input type="radio" name="n1">女
则会在按钮后面显示“男”和“女”

如果需要有对号选择的框，则是
<input type="checkbox">
提交按钮
<input type="button" value="提交">
    这个button是最普通的按钮
<input type="submit" value="提交">
    submit是可以提交表单

下拉表单
<select>
    <option>???</option>
    <option>???</option>
    <option>???</option>
</select>
如果需要在下拉表单中多选，则
<select mutiple>
    <option>???</option>
    <option>???</option>
</select>
在网页中可以长摁shift键进行多选

多行文本
区分与<input type="text">这种单行，且不能移动的输入数据表
<textarea> </textarea>
这种可以在网页中自由进行拉伸，不限制行数
如果需要设置多行数据表的行数，则
<textarea row="?"></textarea>
row="?"中的?代表几行

浏览器向后端发送请求时
1.GET请求【URL方式、表单提交】
    现象：GET请求，跳转，向后台传入数据时，数据会拼接到url上。
    注意：GET请求数据会显现在URL中，例如xx.com?11=abc&22=abc    
2.post请求【表单提交】
    现象：提交数据不在URL中，而是在请求体中

传输表单数据
如果需要传输表单数据，首先需要将 需要进行提交的表单 嵌套在form里面
例如
<form>
<input type="password">
<input type="submit" value="提交">
</form>
我们提交数据需要提交到某个网页中，所以这里的form需要更改
<form action="??/??/??">
其中??为数据提交到的web网页
我们在form提交表单时，只能使用submit来提交表单，<input type="button" value="提交">这种只是一个普通按钮
在上面的get和post两种请求方式我们可以强制让表单使用某种方式，例如
<form method="get" action="??/??">
这样传输表单到??/??网页时就是强制使用Get方式传输表单

点击submit之后发现url并没有体现出传输的数据表单，因为我们没有将表单中的数据命名，因此我们无法将数据体现在url中
所以将需要传输的数据重命名，并且体现在url中
例如
<form method="get" action="123/123">
<input type="text" name="a">
<input type="password" name="b">
<input type="submit" value="提交"
</form>
假设在网页中的text中填入123
password中填入111
这个时候如果再单击submit，在传输url中就可以看到url中变成了xxx?a=123&b=111

想要提交到后台
1.将form标签包裹需要提交的数据
2.提交方式：get、method
3.action="xx/xx"
4.submit需要在form中包裹，不然无关联性
5.在input中需要重命名，不然无法提交

如果要利用form传递数据返回，我们需要利用request
首先在.py中加入前调包,request
然后要将form中action传递的网页地址和
@app.route('/123/123')
中的123123匹配
例如form中写入
<form method="get" action="/123/123">
</form>

在.py中就需要写
@app.route('/123/123')
def app():
 return "接收成功"
//只要用户点击了submit按钮，就可以返回到123/123这个页面并显示接受成功
//但是这样还不算接收到数据
所以我们需要写入print(request.args)
例如
@app.route('/123/123')
def app():
print(request.args) #接受用户通过get方式传输的数据
return "接受成功" #给用户返回一个值
 
如果需要通过post方式传输表单数据，则需要：
首先在form中更改method为post
然后在.py中更改为print(request.form)  就不会在url中显示传输的数据了。

如果需要传输的数据是checkbox这种多选框，我们不单单可以定义name来区别数据的不同，也可以通过value的不同来传输数据(必须定义value)
<input type="checkbox" name="1" value="10">a
<input type="checkbox" name="1" value="30">b
<input type="checkbox" name="1" value="20">c
三个多选框的 name 都是1 但如果只选择a 则最后传输过来的数据就只是<1,10>
（1代表name，10代表value）

如果是select这种的复选框，同样也需要定义value来区别数据之间的不同
例如
<select name="city">
<option value="zhengzhou">郑州</option>
<option value="jinan">济南</option>
</select>
当我们的数据传输回来的时候，就会显示<city,zhengzhou>或者<city,jinan>

多行文本需要传输是需要name来定义
例如
更多：
<textarea name="and" row="3">
</textarea>
最终传输过来的数据会显示
<and,????>  ??代表的是用户在多行文本框中填写的数据。

用户不需要写的数据，例如select checkbox radio这种都需要加入value，不然没办法传输数据
但是用户需要type进去的数据都只需要重新定义name。

如果需要单独接受某种用户传递的数据，例如在web中我们写了这几种input----text（user） password（pwd） select（city）
如果我们只需要接受user信息，可以单独接收
user= request.form.get("user")
然后再在py中打印出来 print(user)，这里的user指向的是等号之前的user
如果接受的信息是多种信息，例如要同时接受pwd和city
首先在Py中定义
    pwd=request.form.get("pwd")
    city=request.form.get("city")
然后紧接着在print中填入
    print(pwd,city)
便可以实现同时只接受password和city数据
如果city是可以复选，或者不是select而是checkbox
则需要
    city=request.form.getlist("city")
紧接
    print(city)
即可。