day 45

来源:https://www.cnblogs.com/colacheng0930/archive/2019/11/13/11852906.html
-Advertisement-
Play Games

[TOC] form表單( ) 能夠獲取用戶輸入(輸入，選擇，上傳的文件) 參數 action 控制數據提交的地址 三種書寫方式 1.不寫 預設就是朝當前頁面所在的地址提交數據 2.寫全路徑(https://www.baidu.com) 3.只寫路徑尾碼( ) method 控制數據提交的方式 `f ...


目錄

form表單(**************)

能夠獲取用戶輸入(輸入，選擇，上傳的文件)

參數

action

控制數據提交的地址

三種書寫方式

1.不寫 預設就是朝當前頁面所在的地址提交數據

2.寫全路徑(https://www.baidu.com)

3.只寫路徑尾碼(/index/)

method

控制數據提交的方式

get from表單預設是get請求

post

==通常情況下input需要結合label一起使用==

綁定id值，之後點擊label標簽內任何的位置都可以自動選中input框

根據type參數的不同，展示不同的功能

text    普通文本
password    輸入的內容，會變成密文
date    日期
radis   單選圓圈
checkbox    多選 打鉤
hidden  隱藏
file    傳文件

button  普通按鈕，沒有任何意義，然而是用的最多的，可以綁定js事件
reset   重置按鈕
submit  提交按鈕，能夠自動觸發form表單提交數據的動作

select標簽 下拉框

一個個的option標簽就是一個個的選項

預設為單選

可以給select標簽加一個multipe參數，就可以將單選變成多選

textarea標簽

可獲取大段文本

input標簽可以加disable屬性，禁用該input框
input標簽可以叫value屬性，設置預設值
選擇的標簽   如何預設選中
    redio
    checkbox
        checked='checked'
        當屬性名和屬性值相同的時候，可以只寫屬性名(******)
能夠觸發form表單提交數據的動作有兩個標簽可以(******)
    input標簽 type=submit
    button標簽

所有獲取用戶輸入的標簽，都應該有name屬性(******)
    name屬性就類似於字典的key
    input框獲取到的用戶輸入都會放到input框的value屬性中

針對選擇框，傳到後端的數據，有value屬性決定

form表單如果要提交文件數據，必須修改以下參數
    enctype="multipart/form-data"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>恰豬肉喲</title>
</head>
<body>
<h1>註冊界面</h1>
<form action="https://127.0.0.1:8848/index/" method="post" enctype="multipart/form-data">
    <p>
    <label for="d1">
        用戶名:<input type="text" id="d1" value="水箱" name="username">
    </label>
</p>
<p>密碼:<input type="password"></p>
<p>生日:<input type="date"></p>
<p>性別:男:<input type="radio" name="gender" value="male">
女:<input type="radio" name="gender" value="female"></p>
<p>愛好:唱:<input type="checkbox" name="hobby" value="sing">
跳:<input type="checkbox" name="hobby" value="dump">
籃球:<input type="checkbox" name="hobby" value="basketball"></p>
<p>省份:
<select name="province" id="">
    <option value="SH">上海</option>
    <option value="BJ">北京</option>
    <option value="CQ">重慶</option>
</select></p>
<p>自我介紹
    <textarea name="info" id="" cols="200" rows="10"></textarea>
</p>
<p>
    <input type="button" value="按鈕">
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    <button>俺只是一個button標簽</button>
</p>


</form>

</body>
</html>

CSS

層疊樣式表

用來控制html標簽樣式的

註釋

/*單行註釋*/

/*
多行註釋1
多行註釋2
*/

通常在寫css的時候，都會單獨寫一個css文件，裡面只有css代碼

/*某某網址首頁的css樣式文件*/

/*通用樣式*/

/*導航條樣式*/

/*輪播圖樣式*/

css的語法結構

選擇器{屬性：屬性值}

屬性和屬性值之間用冒號（==:==）隔開，定義多個屬性時，屬性之間用英文輸入法下的分號（==;==）隔開，最後一條屬性可以不加分號

css的三種引入方式

1.通過link標簽引入外部的css文件(最正規的方法)

​

2.直接在html頁面上的head內通過style標簽直接書寫css代碼

    <style>
        h1{
            color: green;
        }
    </style>

3.行內式(直接在標簽內部通過style屬性直接書寫)，不推薦使用

    <h1 style="color: orange">我是Coach</h1>

css查找(重要)

只要學會了css的查找，之後js、jQurey的標簽查找都是一個原理

基本選擇器

元素選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就這樣吧</title>
</head>
<body>

<style>
    /*標簽選擇器，直接寫標簽名字*/
    span {
        color: darkred;
    }
</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>span</span>
    <span>span</span>
</div>

<p>p
    <span>
        <span>span</span>
    </span>
</p>

</body>
</html>

id選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就這樣吧</title>
</head>
<body>

<style>

    /*id選擇器 id必須是唯一的    #+id值*/
    #d1 {
        color: greenyellow;
    }

</style>


<span id="d1">span</span>
<span id="d2">span</span>
<span>span</span>
<span>span</span>

<div id="d3">div
    <span>span</span>
    <span>span</span>
</div>

<p>p
    <span>
        <span>span</span>
    </span>
</p>


</body>
</html>

類選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就這樣吧</title>
</head>
<body>

<style>
    /*類選擇器 .+類值*/
    .c1 {
        color: purple;
    }
</style>


<span class="c1">span</span>
<span class="c2">span</span>
<span>span</span>
<span>span</span>

<div class="c1">div
    <span>span</span>
    <span>span</span>
</div>

<p class="c3">p
    <span>
        <span>span</span>
    </span>
</p>


</body>
</html>

通用選擇器

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>就這樣吧</title>
</head>
<body>

<style>
   /*通用選擇器  *代表全部*/    
   * {
       color: orange
   }
   
   
</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
   <span>span</span>
   <span>span</span>
</div>

<p>p
   <span>
       <span>span</span>
   </span>
</p>


</body>
</html>

組合選擇器

div span(後代選擇器)

只要在div這個標簽內都屬於div的後代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就這樣吧</title>
</head>
<body>

<style>
    /*後代選擇器     空格代表後代*/
    div span {
        color: red;
    }

</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>div內的span</span>
</div>

<p>p
    <span>
        <span>p中的span</span>
    </span>
</p>


</body>
</html>

div>span(兒子選擇器)

大於號代表兒子(子代/兒砸)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就這樣吧</title>
</head>
<body>

<style>
    /*子代選擇器  '>'代表子代*/
    div>span {
        color: blue;
    }


</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>div內的span</span>
        <p>
            div內p中的span
        </p>
</div>

<p>p
    <span>
        <span>p中的span</span>
    </span>
</p>


</body>
</html>

div~span(兄弟選擇器)

~代表同級別下麵所有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就這樣吧</title>
</head>
<body>

<style>
    /*兄弟選擇器  '~'代表兄弟*/
    div~span {
        color: hotpink;
    }
    
</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>div內的span</span>
        <p>
            div內p中的span
        </p>
</div>
<span>span</span>
<span>span</span>
<span>span</span>

<p>p
    <span>
        <span>p中的span</span>
    </span>
</p>


</body>
</html>

div+span(毗鄰選擇器)

緊挨著同級別的下麵的那一個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就這樣吧</title>
</head>
<body>

<style>
    /*毗鄰選擇器*/
    div+span {
        color: yellow;
    }

</style>


<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>

<div>div
    <span>div內的span</span>
        <p>
            div內p中的span
        </p>
</div>
<span>span</span>
<span>span</span>
<span>span</span>

<p>p
    <span>
        <span>p中的span</span>
    </span>
</p>


</body>
</html>

屬性選擇器

任何的標簽都有自己預設的屬性 id class

標簽還支持自定義任何更多的屬性(也就意味著可以讓標簽幫用戶攜帶一些額外的數據)(***************)

偽類選擇器

a標簽有四種狀態

​ 1.沒有被點擊過

​ 2.滑鼠懸浮在其上面

​ 3.點擊之後不鬆手

​ 4.點擊之後，再返回

​ 將input框用滑鼠點進去之後的那個狀態叫做 input獲取焦點

滑鼠移出去之後的狀態，叫做input失去焦點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    a:link {
        color: red;
    }
    a:hover {
        color: hotpink;
    }
    a:active {
        color: yellow;
    }
    a:visited {
        color: greenyellow;
    }

    input:focus {
        background-color: darkred;
    }

    span:hover {
        background-color: aqua;
    }


</style>

<a href="https://www.sogo.com">click me</a>
<input type="text">
<span>span</span>

</body>
</html>

偽元素選擇器

（清除浮動帶來的負面影響）

可以通過css添加文本內容

選擇器優先順序

1.選擇器相同的情況下，引入方式不同

​ 遵循就近原則，誰離標簽更近，就聽誰的

2.選擇器不同的情況下

​ 行內選擇器 > id選擇器(其次) > 類選擇器(使用最頻繁) > 元素選擇器


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS尺寸樣式屬性
    尺寸樣式屬性介紹 屬性 | 值 |含義 | | height| auto：自動，瀏覽器會自動計算高度length：使用px定義高度%：基於包含它的塊級對象的百分比高度|設置元素高度 width |同上|設置元素的寬度 height屬性和width屬性 接下來讓我們進入 屬性、 屬性實踐，筆者用 屬性 ...
  • webpack資源處理
    使用上篇已談過，這篇純代碼！！~~ bable要使用必須加入如下配置： ...
  • webpack基本使用
    webpack安裝時的坑 高版本的webpack除了全局安裝webpack外，還需安裝webpack cli，在本地使用時也一樣需要這樣，不然會出錯 webpack使用是的坑 在原始啟動webpack編譯時不要忘了加 o，在原始文件和要編譯成為的文件目錄中間 要正常使用（方便使用）就要在packag ...
  • 前端之css（一）
    [TOC] 什麼是css css： 層疊樣式表 css語法結構： 選擇器 {屬性1：屬性值1} 註釋 CSS三種引入方式 通過link標簽引入外部的css文件（最正規用法） 直接在html頁面上的head內通過style標簽直接書寫css代碼 行內標簽（直接在標簽內部通過style標簽寫）（不推薦使 ...
  • html之form表單
    [TOC] form表單 表單能夠獲取用戶輸入，用於向伺服器傳輸數據，從而實現用戶與web伺服器的交互 表單屬性 action 控制數據提交的地址，有三種書寫方式： 不寫 預設就是朝當前這個頁面所在的地址i提交數據 寫全路徑 如（https://www.baidu.com） 只寫路徑尾碼（/inde ...
  • JavaWeb第二天--CSS
    CSS CSS簡述 CSS是什麼？有什麼作用？ CSS(Cascading Style Sheets)：層疊樣式表。 CSS通常稱為CSS樣式或層疊樣式表。主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬度、邊框樣式、邊距等）以及版式的佈局等外觀顯示樣式。 CSS可以使 ...
  • JavaScript BOM學習
    Mirror王宇陽 2019年11月13日 [首發] 數日沒有更新博文了，覺得不好意思了！這不是，整理了一下JavaScript的一下BOM筆記資料，今天貢獻出來！(HTML DOM也會隨後整理髮表) 筆者在接觸Js之前就聽聞Js的“牛逼”，接觸後發現只要想法夠賊，Js就能給你的賊想法復現 ~ 作者 ...
  • <深圳千鋒學習>day01
    2019.11.11 深圳千鋒H5前端學習筆記 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類