img标签

<!--主要是在网页显示图片-->

标签的属性:
	1、自带属性
	2、自定义属性

<img src="preview.jpg" alt="动漫" width="200px">
src:
	<!--写图片的地址:外链地址或者相对地址-->
alt:
	<!--当图片加载失败时显示对图片的描述性信息-->
width and height
	<!--对图片这是长度和宽度,不过设置一个就行,设置一个就会等比例缩放,设置两个容易失真-->

a标签

<!--超链接标签-->
<a href="https://www.bilibili.com" title="美少女战士" target="_blank">
    <img src="preview.jpg" alt="动漫女主" width="851">
</a>

href:
	<!--填写的是跳转的url地址-->
title:
	<!--当鼠标悬停在超链接时,对这个超链接的解释信息-->
target = "_blank":
	<!--重新打开一个tab网页-->
target = "_self":
	<!--在当前页面重新打开一个网页-->

<!--超链接可以放到一段文字上面也可以放到一个图片上面-->

列表

1、无序列表
<ul type="disc">
	<li> 第一个无序列表</li>
    <li> 第二个无序列表</li>
</ul>
type属性分类;
	disc  :<!--实心圆点,默认值-->
	circle:<!--空心圆点-->
    square:<!--实心方块-->
    none  :<!--无样式-->

2、与序列表
<ol type="1" start="1">
    <li>第一个有序列表</li>
    <li>第二个有序列表</li>
</ol>
type属性分类:
	1:数字列表,默认值
	A:大写字母
	a:小写字母
	I:罗马数字
	i:小写罗马数字
start:
	<!--起始位置-->

3、标题列表
<dl>
    <dt>第一个标题列表</dt>
    <dd>第一个标题内容</dd>
    <dt>第二个标题列表</dt>
    <dd>第二个标题内容</dd>
</dl>
<!--dt:标题,dd:内容,内容自动缩进-->

表格

<table>
    <thead>
    <tr> <!--一个tr就代表一行-->
        <th>username</th> <!--加粗文本-->
        <th>password</th>
        <th>gender</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>yang</td> <!--正常文本-->
        <td>123</td>
        <td>male</td>
    </tr>
    </tbody> <!--表单数据-->
</table>

属性:
● border: 表格边框.
● cellpadding: 内边距
● cellspacing: 外边距.
● width: 像素 百分比.(最好通过css来设置长宽)
● rowspan: 垂直合并X个单元格
● colspan: 横向合并X个单元格

标签的两个重要属性

<div id = "d1"></div>

id:
	<!--一个html文档中,id只能有一个,并且不可重复,通过id可以确定一个标签-->
class:
	<!--一个文档中class可以有多个,类似于面向对象中的类的继承-->
自定义属性:
	<div id = "d1" username = "kevin" passworld = "123"></div>
	<!--username、password就是自定义属性,自定义属性一般是用来存储数据的-->

from表单

<!--from表单可以将用户输入的、选择的、上传的等等通过网络上传到后端-->
<form action=""></form>
    <!--在该form标签内部书写的获取用户的数据都会被form标签提交到后端-->
    action:
        <!--控制数据提交的后端路径(给哪个服务端提交)-->
        1、什么都不写,默认给当前页面所在的url提交数据
        2、写完路径,朝着指定路径的服务端提交
        3、只写路径后缀,action = '/index/'
            自动识别出当前服务端的ip和port拼接到前面
            host:port/index/
使用结构:
    第一种:
    <form action="">
        <label for=""> <!--for右边的值写绑定的id-->
            <input type="text">
        </label>
    </form>
    第二种:
    <label for = "d2">password:</label>
    <input type = "text" id = "d2"> 
    <!--不写在label里面也可以,只要链接即可-->

    ps:<!--input不于label关联也可以-->

    "
        label与input都是行内元素
    "

input标签介绍:<!--前端的变形金刚,通过type变形-->
	1、text:普通文本
	2、password:密文
	3、date:日期
	4、submit:用来触发表单提交数据的动作
	5、button:一个普普通通的按钮,没有任何功能,可以通过JS给它定义任意功能
	6、reset:重置功能
	7、radio:单选
		默认选中需要加checked = "checked"
		<!--标签名和值相等时可以使用简写-->
		male:<input type="radio" name="gender" checked>
		name :将其进行分组
	8、checkbox:多选
	 <input type="checkbox">读书
	9、file:获取文件,可以一次性获取多个
	<input type="file" multiple>
	10、hidden:隐藏当前input框
    	钓鱼网站
	
    11、select标签默认是单选,想要多选可以添加mutiple的参数,默认选中使用selected参数
    <select name="" id="" multiple>
        <option value="">北京</option>
        <option value="" selected>上海</option>
        <option value="" selected>广州</option>
        <option value="">深圳</option>
        <option value="">香港</option>
    </select>
	12、textarea标签,获取大段文本
	<textarea name="" id="" cols="30" rows="3"></textarea>
	13、能够触发form表单提交数据的按钮有哪些(一定要记住)
		1、<input type="submit" value="注册">
		2、<button>点我</button>
	14、所有获取用户输入的标签 都应该有name属性
        name就类似于字典的key
        用户的数据就类似于字典的value
        <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
        </p>

CSS

html: 超文本标记语言
css:层叠样式表
# 就是给html增加样式的,让其变得更加的好看

css的学习步骤:
	1. 先学习选择器,作用就是如何找到标签
    2. 找到标签之后,给标签增加样式
    
    
选择器的语法结构
选择器 {
    属性名1:属性值1
    属性名2:属性值2
    属性名3:属性值3
    属性名4:属性值4
}

# CSS的注释语法
/* 内容 */  # 快捷键:ctrl + ?

# css的引入方式
1. 在html文档中直接写在style标签中
2. 单独写一个CSS文件,然后通过link标签引入外部的css文件
3. 直接写在标签上,行内式

基本选择器

    <style>
        #username{
            color: aqua;
        }
        .hobby{
            color: red;
            font-size: 10px;
        }
        p{
            color: blue;
            font-size: 15px;
        }
        *{
            color: blueviolet;
        }
    </style>
<p id="p1" class="c1" style="color: orange;font-size: 26px">锄禾日当午,汗滴禾下土</p> <!--这样也可以-->

组合选择器

<div>div
    <p>div p</p>
    <p>div p
    <span>div p span</span>
    </p>
    <span>span</span>
    <span>span</span>
</div>
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲	
*****************************************************************
    	/*后代选择器*/
        div span {
            color: red;
        }
        
        /*儿子选择器*/
        div>span {
            color: red;
        }
        
        /*毗邻选择器*/
        div+span {  /*同级别紧挨着的下面的第一个*/
            color: aqua;
        }
        
        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }

属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

[username] {  /*将所有含有属性名是username的标签背景色改为红色*/
            background-color: red;
        }

        [username='jason'] {  /*找到所有属性名是username并且属性值是jason的标签*/
            background-color: orange;
        }

        input[username='jason'] {  /*找到所有属性名是username并且属性值是jason的input标签*/
            background-color: wheat;
        }

验证form表单的提交数据

# 接下来的框架代码无需掌握  看一下效果即可
pip3 install FLASK

form表单默认提交数据的方式 是get请求  数据是直接放在url后面的
	http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
你可以通过method指定提交方式
	<form action="http://127.0.0.1:5000/index/" method="post">
  
针对用户选择的标签 用户不需要输入内容 但是你需要提前给这些标签添加内容value值
<p>gender:
            <input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" checked value="female">女
            <input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" checked name="hobby" value="football">足球
            <input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province:
            <select name="province" id="">
                <option value="sh">上海</option>
                <option value="bj" selected>北京</option>
                <option value="sz">深圳</option>
            </select>
</p>



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


"""下面的代码无需掌握 你只需要关心form表单即可"""
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 那就是默认值
<label for="d1">username:<input type="text" id="d1" name="username" value="默认值"></label>
disable 禁用
readonly只读
posted on 2024-01-02 11:50  Way*yy  阅读(5)  评论(0编辑  收藏  举报