python全棧開發 * 表格標籤表單標籤 css 引入方式 * 180807

時間 2019-11-10

標籤 python 開發表格標籤表單 css 引入方式欄目 Python 简体版

原文原文鏈接

html部分css

一.表格標籤<table>html

　　1.一個表格<table>由每行<tr>組成的,每行是由<td>組成的.前端

　　注意: 一個表格是由行組成的(行是由列組成的),而不是由行和列組成的.瀏覽器

　　2.<table>的屬性:安全

　　border : 邊框,像素爲單位.服務器

　　style="border-collapse : collapse ;" : 單元格的線和表格的邊框線合併網絡

　　width : 寬度. 像素爲單位.app

　　height : 高度. 像素爲單位post

　　bordercolor : 表格的邊框顏色.網站

　　align : 表格的水平對齊方式,屬性值( left ,right ,center)

注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）

　　cellpadding：單元格內容到邊的距離，像素爲單位。默認狀況下，文字是緊挨着左邊那條線的，即默認狀況下的值爲0。若是設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離

　　cellspacing：單元格和單元格之間的距離（外邊距），像素爲單位。默認狀況下的值爲0

　　bgcolor="#99cc66"：表格的背景顏色。

　　background="路徑src/..."：背景圖片 ( 背景圖片的優先級大於背景顏色。)

注意 : 表格中很細表格變現的製做:

　　border="1" style="border-collapse:clooapse;"

　　css寫法

3.<tr> 行

　　屬性:

　　dir : 公有屬性,設置這一行單元格內容的排列順序 . ltr 從左到右 (默認) ,rtl 從右到左.

　　bgcolor : 設置這一行的單元格的背景色. (背景圖片須要css實現)

　　height : 一行高度.

　　align="center" 一行的內容水平居中顯示.(left ,center, right)

　　valign="middle" 一行內容垂直居中 (top ,middle ,bottom)

4.<td> 單元格

　　屬性

　　align : align：內容的橫向對齊方式。屬性值能夠填：left right center (可用css)

　　valign : 內容的縱向對齊方式。屬性值能夠填：top middle bottom

　　width：絕對值或者相對值(%)

　　height：單元格的高度

　　bgcolor：設置這個單元格的背景色

　　background：設置這個單元格的背景圖片

5.單元格的合併:

　　若是想要將兩個單元格合併,那確定就要刪除一個單元格.

　　相關屬性:

　　colspan : 橫向合併

　　　　　　例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。

　　rowspan : 縱向合併.

　　　　　　例如rowspan="2"表示當前單元格在垂直方向上

6.<th>標籤加粗的單元格至關於 <td> + <b>

　　屬性

　　align：內容的橫向對齊方式。屬性值能夠填：left right center (可用css)

　　valign : 內容的縱向對齊方式。屬性值能夠填：top middle bottom

　　width：絕對值或者相對值(%)

　　height：單元格的高度

　　bgcolor：設置這個單元格的背景色

　　background：設置這個單元格的背景圖片

7.<caption> : 表格的標題使用時和<tr>>標籤並列

8.表格的<thead>標籤. <tbody>標籤 <tfoot>標籤

　　(1)、若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。

　　(2)、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，則必須等表格的內容所有從服務器獲取完成才能顯示出來。

示例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單</title>
</head>
<body>
    <table border="1" style="border-collapse: collapse;">
        <caption>信息登陸</caption>
        <tbody>
            <tr>
                <td>jay</td>
                <td>38</td>
                <td>男</td>
                <td rowspan="3">中國</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <td>jj</td>
                <td>35</td>
                <td>男</td>

            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>jolin</td>
                <td>37</td>
                <td>女</td>

            </tr>
        </tfoot>

    </table>

</body>
</html>

二.表單標籤<form>

　　用於與服務器的交互.表單就是收集用戶信息的,就是讓用戶填寫的,選擇的

1.屬性

　　name : 表單的名稱,用於js來操縱或控制表單時使用;

　　id : 表單的名稱,用於js來操縱或控制表單時使用;

　　action : 表單要提交到哪裏.

　　method : 表單數據的提交方式,get(默認) 不安全和 post 安全

2.get 和post 的區別:

　　get:

　　將表單數據，以"name=value"形式追加到action指定的處理程序的後面，二者間用"?"隔開，每個表單的"name=value"間用"&"號隔開。

特色:只適合提交少許信息，而且不太安全(不要提交敏感數據)、提交的數據類型只限於ASCII字符

　　post:

　　將表單數據直接發送(隱藏)到action指定的處理程序。POST發送的數據不可見。Action指定的處理程序能夠獲取到表單數據。

特色:能夠提交海量信息，相對來講安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。

3.Enctype：
表單數據的編碼方式(加密方式)，取值能夠是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

　　Application/x-www-form-urlencoded：默認加密方式，除了上傳文件以外的數據均可以

　　Multipart/form-data：上傳附件時，必須使用這種編碼方式

4.<input> 輸入標籤(文本框) (單閉合標籤)

屬性:

type="屬性值" 文本類型

　　屬性值能夠是如下內容:

　　(1) text (默認)

　　(2) password :密碼類型

　　(3) radio: 單選按鈕名字相同的按鈕做爲一組進行單選（單選按鈕，天生是不能互斥的，若是想互斥，必需要有相同的name屬性。name就是「名字」。

　　(4). checkbox :多選按鈕,名字相同的按鈕做爲一組進行選擇.

　　(5) checked: 將單選按鈕或多選按鈕默認處於選中狀態.當<input>標籤的type="radio"時，能夠用這個屬性。屬性值也是checked，能夠省略

　　(6)hidden：隱藏框，在表單中包含不但願用戶看見的信息

　　(7)button：普通按鈕，結合js代碼進行使用

　　(8)submit：提交按鈕，傳送當前表單的數據給服務器或其餘程序處理。這個按鈕不須要寫value自動就會有「提交」文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標籤的action屬性中指定的那個頁面中去。

　　(9)reset：重置按鈕，清空當前表單的內容，並設置爲最初的默認值

　　(10)image：圖片按鈕，和提交按鈕的功能徹底一致，只不過圖片按鈕能夠顯示圖片。

　　(11)file：文件選擇框

　　(12)提示：若是要限制上傳文件的類型，須要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。

　　(13)value="內容"：文本框裏的默認內容

　　(14)size="50"：表示文本框內能夠顯示五十個字符。一個英文或一箇中文都算一個字符。

　　(15)readonly：文本框只讀，不能編輯。由於它的屬性值也是readonly，因此屬性值能夠不寫。

　　(16)disabled：文本框只讀，不能編輯，光標點不進去。屬性值能夠不寫。

5.<select>:下拉列表標籤

　　<select>標籤裏面的每一項用<option>表示。select就是「選擇」，option「選項」。

屬性:

　　multiple：能夠對下拉列表中的選項進行多選。沒有屬性值。

　　size="3"：若是屬性值大於1，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖。

　　<option>標籤的屬性：

　　selected：預選中。沒有屬性值

6.<textare>標籤：多行文本輸入框 text就是「文本」，area就是「區域」。

　　value：提交給服務器的值。

　　rows="4"：指定文本區域的行數。

　　cols="20"：指定文本區域的列數

　　readonly：只讀。

7.<lable>標籤

　　input元素要有一個id，而後label標籤有一個for屬性，和id相同，那麼這個label和input就有綁定關係了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單</title>
</head>
<body>
    <form action="https://www.baidu.com" method='get'>
        <lable for="user">用戶名</lable>
        <input id="user" type="text" name="username" value="" >
        <br>
        <lable for="pass">登錄密碼</lable>
        <input id="pass" type="text" name="password" value="">
        <br>
        <lable for ="gen">性別</lable>
        <input type="radio" name="gender" value="man" id="gen">男
        <input type="radio" name="gender" value="women"checked="checked">女
        <br>
         <lable for ="gen">愛好</lable>
        <input type="checkbox" name="love" value="eat">吃
        <input type="checkbox" name="love" value="sleep">睡
        <input type="checkbox" name="love" value="play">玩
        <br>
        <input type="submit"  value="登錄">
        <br>
        <button type="submit" disabled>註冊</button>
        <input type="reset"value="重置按鈕"><br>
        <input type="file"value="文件選擇框"><br>
        <select multiple="" size="3">
            <option >小學</option>
            <option selected>中學</option>
            <option >大學學</option>
            <option >研究生</option>
        </select>
        <br>
        <textarea name="textinfo" rows="4" cols="10">多行文本輸入
        </textarea>
    </form>

</body>

8.表單語義化

應用:

　　咱們在註冊一個網站的信息的時候，有一部分是必填信息，有一部分是選填信息，這個時候能夠利用表單的語義化。

 <form>

        <fieldset>
        <legend>帳號信息</legend>
        姓名：<input value="呵呵" >逗比<br>
        密碼：<input type="password" value="pwd" size="50"><br>
        </fieldset>

        <fieldset>
        <legend>其餘信息</legend>
        性別：<input type="radio" name="gender" value="male" checked="">男 
              <input type="radio" name="gender" value="female" >女<br>
        愛好：<input type="checkbox" name="love" value="eat">吃飯
              <input type="checkbox" name="love" value="sleep">睡覺
              <input type="checkbox" name="love" value="bat">打豆豆
        </fieldset>

    </form>

css部分

一.css簡介

1.如今的互聯網前端分三層:

　　html : 超文本標記語言. 從語義的角度描述頁面結構.

　　css : 層疊樣式表.從審美的角度負責頁面樣式.

　　js : JavaScript .從交互的角度描述頁面行爲.

2.CSS：

Cascading Style Sheet，層疊樣式表。CSS的做用就是給HTML頁面標籤添加各類樣式，定義網頁的顯示效果。

簡單一句話：CSS將網頁內容和顯示樣式進行分離，提升了顯示功能。

3.html的缺點:

(1).不能適應多種設備

(2).要求瀏覽器必須智能化足夠龐大.

(3).數據和顯示沒有分開.

(4).功能不夠強大

4.css優勢

　　(1).使數據和顯示分開

　　(2).下降網絡流量

　　(3).使整個網站視覺效果一致

　　(4).使開發效率提升了(耦合性下降,一我的負責html,一個負責寫css)

好比說，有一個樣式須要在一百個頁面上顯示，若是是html來實現，那要寫一百遍，如今有了css，只要寫一遍。如今，html只提供數據和一些控件，徹底交給css提供各類各樣的樣式。

二.css的三種引入方式

　　(1).行內樣式

1 <div>
2     <p style="color: green">我是一個段落</p>
3 </div>

　　(2).內接樣式

<style type="text/css">
    /*寫咱們的css代碼*/
        
    span{
    color: yellow;
    }

</style>

　　(3).外接樣式

　　　　連接是

<link rel="stylesheet" href="./index.css">

　　　　導入式

<style type="text/css">
        @import url('./index.css');
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

python全棧開發 * 表格標籤 表單標籤 css 引入方式 * 180807

python全棧開發 * 表格標籤表單標籤 css 引入方式 * 180807