前端標簽

標簽的分類

1. 單標簽
	img br hr 
    <img />
2. 雙標簽
	a h p div <a></a>
3. 按照標簽屬性分類
	1. 塊兒標簽
    	# 自己獨自占一行
        h1-h6 p div
    2. 行內(內聯)標簽
    	# 自身文本有多大就占多大
        a span u i b s

div標簽和span標簽

這兩個標簽它是沒有任意意義的，主要用來'佈局'頁面
div一般用在占位置佈局
span一般用在占文本佈局

標簽的嵌套

標簽之間是可以互相嵌套的，標簽套標簽
塊兒級元素是可以嵌套所有的標簽的
p標簽不能夠嵌套塊兒級元素，但是它可以嵌套行內元素
行內元素只能嵌套行內元素，不能夠嵌套塊兒級元素，非寫了嵌套，也不報錯，只不過是沒有效果
"""針對於前端來說，不會輕易的報錯! 如果你寫的不對，只會沒有對應的效果"""

img標簽

展示圖片的
https://img2.baidu.com/it/u=464791776,3312333293&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1698771600&t=9777764d1fe6560f394478126fb7563b

<img src="123.png" title="你看我好看嗎" width="200px" alt="">

src：
	1. 內部的圖片地址
    2. 寫外鏈的地址
title：
	滑鼠懸浮的時候顯示的內容(是所有標簽都要的)
width: 圖片的寬度
height：圖片的高度
### 一般情況下只寫一個，等比例縮放
alt：當圖片不存在的時候，顯示的內容

a標簽

<a href="http://www.oldboyedu.com" target="_blank" >點我</a>

href屬性指定目標網頁地址。該地址可以有幾種類型：
● 絕對URL - 指向另一個站點（比如 href="http://www.jd.com）
● 相對URL - 指當前站點中確切的路徑（href="index.htm"）
● 錨URL - 指向頁面中的錨（href="#top"）

target：
● _blank表示在新標簽頁中打開目標網頁
● _self表示在當前標簽頁中打開目標網頁

標簽的兩個自帶重要屬性

id 值: 相當於是人的身份證，一個文檔中，id值不能夠重覆，必須唯一
class 值：是可以有多個的，一個標簽可以有多個class值，一個class值也可以被多個標簽擁有
<div id="d1" class='c1 c2 c3'></div>
<div id="d2" class='c2'></div>
<div id="d3" class='c3'></div>
<div id="d3" class='c1'></div>
#d1
.c1
要想使用id值，必須使用#開頭
要想使用class值，必須使用 .開頭

列表

1.無序列表
	<ul type="disc">
      <li>第一項</li>
      <li>第二項</li>
	</ul>
    type屬性：
    ● disc（實心圓點，預設值）
    ● circle（空心圓圈）
    ● square（實心方塊）
    ● none（無樣式）
    
2.有序列表
3.標題列表

表格

id     name    age   gender    salary
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000
1      kevin   20     male     2000

table標簽
<table>
  <thead>
  <tr>
    <th>序號</th>
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>jason</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

屬性:
● border: 表格邊框.
● cellpadding: 內邊距
● cellspacing: 外邊距.
● width: 像素 百分比.（最好通過css來設置長寬）
● rowspan: 單元格豎跨多少行
● colspan: 單元格橫跨多少列（即合併單元格）

form表單標簽

<form action="">
    <p>
        <label for="inp1">
            username: <input type="text" id="inp1">
        </label>

    </p>
    <p>
        <label for="inp2">
            password: <input type="password" id="inp2">
        </label>
    </p>
     <p>
        <label for="inp3">
            password: <input type="date" id="inp3">
        </label>
    </p>
    <p>
        <input type="checkbox" name="hobby"> read
        <input type="checkbox" name="hobby"> music
        <input type="checkbox" name="hobby"> tangtou
    </p>
    <p>
        <input type="checkbox" name="hobby1"> read1
        <input type="checkbox" name="hobby1"> music1
        <input type="checkbox" name="hobby1"> tangtou1
    </p>
    <p>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender">  女
        <input type="radio" name="gender">  未知
    </p>
    <p>
        <input type="hidden" value="123">
    </p>
    <p>
        <input type="file" multiple>
    </p>
    <p>
        <select name="" id="">
            <option value="">上海</option>
            <option value="">北京</option>
            <option value="">河南</option>
        </select>
    </p>
    <textarea name="" id="" cols="30" rows="10">
        
    </textarea>
    <p>
        <input type="submit" value="登錄">
        <input type="reset" value="重置">

    </p>
</form>


屬性說明:
● name：表單提交時的“鍵”，註意和id的區別
● value：表單提交時對應項的值
  ○ type="button", "reset", "submit"時，為按鈕上顯示的文本年內容
  ○ type="text","password","hidden"時，為輸入框的初始值
  ○ type="checkbox", "radio", "file"，為輸入相關聯的值
● checked：radio和checkbox預設被選中的項
● readonly：text和password設置只讀
● disabled：所有input均適用

select屬性
屬性說明：
● multiple：布爾屬性，設置後為多選，否則預設單選
● disabled：禁用
● selected：預設選中該項
● value：定義提交時的選項值

驗證form表單朝後端提交數據

<form action="">
	action:
        """寫朝後端提交的地址"""
        這裡你寫什麼地址就朝這個地址提交數據，應該填寫後端的地址
        1. 什麼都不寫：朝當前地址提交
        2. 全寫：http://127.0.0.1:5000/index/ 朝這個地址提交
        3. 只寫尾碼
        	/index/-------->IP:PORT/index
 """form表單要想把數據提交到後端，每一個標簽都要有一個name屬性."""
name的屬性值就是提交到後端數據的key值，用戶輸入的內容就是value值

針對於覆選框、單選框標簽都應該有一個value屬性，用於區別前端用戶選擇的哪個選項

## 對於文件數據的提交需要滿足以下兩個條件：
1. 請求方式必須是post
2. 數據編碼方式：
	1. application/x-www-form-urlencoded
    2. multipart/form-data
    3. json
    
3. 編碼方式必須是multipart/form-data才能提交問價
4. urlencoded只能夠提交不是文件的數據，form-data是可以提交普通數據和文件數據
5. urlencoded形式的數據長什麼樣子：
	 username=&password=&date=&hidden=123&myfile=&city=
    
6. form-data編碼格式的數據：
	username=&password=&date=&hidden=123&myfile=&city=
    boundary=----WebKitFormBoundaryhwrBD6WMC3rBJXOy
    文件數據
    """對於form-data提交的數據，後端還是在form裡面去普通數據，而在files裡面去文件數據"""
7.  form表單不能夠提交json數據
8. 如果想提交json格式的數據：Ajax技術、第三方的api工具postman

CSS介紹

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。
"""CSS就是對HTML標簽做樣式的，讓不好看的變得更加的好看"""
CSS語法：
選擇器 {
    屬性名1:屬性值;
    屬性名2:屬性值;
    屬性名3:屬性值;
    屬性名4:屬性值;
    屬性名5:屬性值;
}

CSS註釋:
    /*這是註釋*/
HTML註釋：
	<!-- 這是註釋 -->
註釋符號的快捷鍵是：ctrl + ?

CSS的幾種引入方式:
    行內樣式:
        <p style="color: red">Hello world.</p>
        
    內部樣式：
    	<head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                p {
                    background-color: #2b99ff;
                }
            </style>
        </head>
        
     外部樣式：
    	<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS選擇器

"""如何學習CSS?"""
1. 先學習如何找到標簽
2. 找到標簽之後在進行屬性操作

選擇器種類非常之多，但是，大多數都是瞭解的，用的最多的也就幾個，對我們來說，只需要掌握這幾個就可以了
基本選擇器：
	ID選擇器
    	
    類選擇器
    元素選擇器
    通用選擇器
    
組合選擇器
	後代選擇器
    
    
 """
 我們使用親戚關係表示標簽之間的關係
     <div id="div1"> div是p的父親，p是div 的兒子
        <p class="c1"> p是a的父親，a是p的兒子，a是div的孫子
            <a href="">點我把</a>
            <a href="">點我把</a>
            <a href="">點我把</a>
        </p>
        div
        <a href="">我會不會變顏色呢</a> a是p的兄弟
    </div>

    <p> p是div的兄弟
        <a href="">哈哈哈哈</a>
    </p>
 """

效果 代碼

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
           * {
		    padding: 0;
		    margin: 0;
		   }

         .kuangjia1{
              margin: auto;
             width: 1200px;
             height: 100%;
             position: relative;
         }
        .you1{
            width: 20%;
            position: absolute;
            left: 0%;
        }
        .zhuo1{
            color: #b6f1ff;
            /*margin: auto;*/
            /*background: rgba(77,94,255,0.5);*/
            background-image: url("https://www.freeimg.cn/i/2023/10/30/653f9a3803ed8.jpg") ;
            background-repeat:no-repeat;/*圖片適應視窗大小，這裡設置的是不進行平鋪*/
            background-attachment: fixed;/*圖片相對於瀏覽器固定,這裡設置背景圖片固定，不隨內容滾動*/
            width: 70%;
            background-size: 70% 100%;/*指定圖片大小，此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小*/
             /*背景圖片的位置*/
            background-position: center;

            background-origin: border-box;/*從邊框區域顯示*/
            -webkit-filter: opacity(100%);/* 透明度*/
            position: absolute;
            left: 34%;

        }

    </style>
</head>

<body>
<div id="kuangjia "  class="kuangjia1 ">
<div id ='zhuo' class="zhuo1">
<!--    無序列表-->
    <ul type="none" >
      <li>第一項</li>
      <li>第二項</li>
	</ul>
    <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
        <p >
            <label for="name1">
                username:<input type="text" id ='name1' value="tony" name="名字">


            </label>
        </p>
        <p>
            <label for="work">
            passwork:<input type="password" id="work" value="123" name="密碼">
            </label>
        </p>
        <p>
            多選框<input type="checkbox"  name="多選框1" checked>
            多選框<input type="checkbox" name="多選框2">
            多選框<input type="checkbox" name="多選框3">
        </p>
        <p>
            <label for="sj">
                時間：<input type="datetime-local" name="時間" id="sj">
            </label>
        </p>
        <p>
            單選框<input type="radio" name="單選框" checked>
        </p>
        <p>
            文本選擇<input type="file" multiple name="文件">
        </p>
        <p>
            提交<input type="submit" name="提交" value="登入">
        </p>
        <p>
            重置<input type="reset" name="重置" value="撤回">
        </p>
        <p>
            <select name="地址"  multiple >
                <option value="上海"> 上海</option>
                <option value="杭州"> 杭州</option>
                <option value="北京" selected> 北京</option>

            </select>
        </p>
        <p>
            <textarea name="文字框" cols="50" rows="20"></textarea>
        </p>

    </form>
</div>
<div id="you" class="you1">
        <p><h3>練習</h3></p>
    <img src="91881040_p0.jpg" width="400px">
    <table border="1"  bgcolor="#fffdc7">
      <thead>
          <tr>
            <th>序號</th>
            <th>姓名</th>
            <th>愛好</th>
          </tr>
      </thead>
      <tbody>
          <tr>
            <td>1</td>
            <td>jason</td>
            <td>杠娘</td>
          </tr>
      <tr>
            <td>2</td>
            <td>Yuan</td>
            <td>日天</td>
      </tr>
      </tbody>
</table>

</div>
</div>
<form></form>
</body>
</html>

py文件



from  flask import Flask,request
app=Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
    print(request.form)

    print(request.files)

    return 'index'



app.run()