html

時間 2019-11-10

標籤 html 欄目 HTML 简体版

原文原文鏈接

一、快捷使用tab pycharm編輯html：

tr*3 +tab鍵多行css

head+tab 鍵單行 <head></head>html

<!d +tab 簡單html格式在html文件中,會多出一個<,記得刪掉數據庫

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

在開發者工具中也能夠ctrl+f查看元素的，框中還顯示包含多少個匹配的編程

二、table表格

<html>
<head></head>
<table>
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>性別</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小馬過河</td>
        <td>男</td>
    </tr>
    <tr>
        <td>2</td>
        <td>小郭吹雪</td>
        <td>女</td>
    </tr>
</table>
</html>

將表格添加邊框 border: <table border="1">服務器

去掉表格間隙添加屬性 cellspacing <table border="1" cellspacing="0">網絡

調整表格寬度 width： <table border="1" cellspacing="0" width="400">app

還能夠調整寬度按百分比，這裏演示100%： <table border="1" cellspacing="0" width="100%">框架

淘寶全部訂單中的表格使用場景案例：表格每一個單元能夠放連接，圖片，文字等等socket

三、form表單<form action=""></form>

3.1 input 中 txt password 和submit類型

<html>
<body>
<form action=""></form>   
</body>
</html>
#右擊open in browser ->default 打開使用的是pycharm提供的服務。

單個文本框<input type="text">工具

<html>
<body>
<form action="http:localhost:8080" method="get">  #action 提交的地址  method 請求的方式 默認是get
    <input type="text">
</form>
</body>
</html>

再添加一個password框，可是不是換行顯示，中間有個空格，那是多個空格換成了一個&nbsp好像

<form action="http:localhost:8080" method="get">
    <input type="text">
    <input type="password">
</form>

加個br換行，可是發現兩行離得太緊密了：

添加input標籤，text和password類型的，用p標籤包裹它們之間就沒那麼緊密了，

<form action="http:localhost:8080" method="get">
    <p id="username">
    <input type="text"><br></p>
    <p id="passwd">
    <input type="password"></p>
</form>

添加提交按鈕，類型submit

<form action="http:localhost:8080" method="get">
    <p id="username">
    <input type="text"><br></p>
    <p id="passwd">
    <input type="password"></p>
    <p>
    <input type="submit"></p>
</form>

添加屬性value，提交按鈕值改變成登陸

    <p>
    <input type="submit" value="登陸"></p>
</form>

每次百度搜索是一個s一個？而後一個id對應一個值

咱們也提交也須要設置一個name，一個值name="name" value="" #<input type="text" name="name" value="">

<form action="07%20table.html" method="get">
    <p id="username">
    <input type="text" name="name" value=""><br></p>
    <p id="passwd">
    <input type="password" name="pwd"></p>
    <p>
    <input type="submit" value="登陸"></p>
</form>

結果是input輸入框name和第二個name是pwd的分別獲取到輸入框中提交的值。name value name value 多個輸入框內的鍵值用&來拼接。個人源文件地址是C:\mcw\test\test.html

可是這樣提交的密碼是明文的，都被顯示出來了，登陸提交這樣的應該用post請求 <form action="" method="post">

<form action="" method="post">
    <p id="username">
    <input type="text" name="name" value=""><br></p>
    <p id="passwd">
    <input type="password" name="pwd"></p>
    <p>
    <input type="submit" value="登陸"></p>
</form>

由於請求方式改成post了，地址欄也不顯示提交的數據。想看提交的數據能夠在開發者工具中看，Network->all->點擊name中的提交的，右邊Headers中的From Data中顯示我提交的數據。get會顯示在地址欄，post不會顯示在地址欄。把這些數據提交到服務器後臺，這些數據是文本傳輸，若是是圖片那就流式傳輸。

若是是圖片傳輸，除了提交方式改成post，還要添加enctype屬性，默認值是"application/x-www-form-urlencoded"，圖片傳輸改成"multipart/form-data"。若是不改，文件和圖片提交不過去

3.2 input中的radio單選框

<html>
<head>
    <meta charset="UTF-8" ></head>
<body>
<form action="" method="post" enctype="multipart/form-data">
    <p>
        <input type="radio">男
        <input type="radio">女
    </p>
</form>
</body>
</html>

可是沒有實現單選，兩個都選上了。這裏須要添加一個相同的name，由於只能提交一個相同的name，這樣就實現單選了。

<form action="" method="post" >
    <p>
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </p>
</form>

單選中添加默認選中哪一個 checked=

<form action="" method="get" >
    <p>
        <input type="radio" name="sex" checked="男">男
        <input type="radio" name="sex">女
    </p>
    <p><input type="submit" value="登陸"></p>
</form>

3.3多選框input中的checkbox

<form action="" method="get" >
    <h4>請選擇你的愛好：</h4>
    <p>
        <input type="checkbox" name="a" checked="男">唱歌   #默認選中的checked
        <input type="checkbox" name="b">跳舞
        <input type="checkbox" name="c">學習
    </p>
    <p><input type="submit" value="登陸"></p>
</form>

on就是點擊登陸以後選中了的

a,b是name，有name就給它個value

<form action="" method="get" >
    <h4>請選擇你的愛好：</h4>
    <p>
        <input type="checkbox" name="a" value="唱歌">唱歌 #給它個value
        <input type="checkbox" name="b" value="跳舞">跳舞
        <input type="checkbox" name="c" value="學習">學習
    </p>
    <p><input type="submit" value="登陸"></p>
</form>

選中以後提交 name value都獲取到了：

network->all->name->頭->查詢字符串參數

網絡編程socket裏的recv就能獲取到這些字符串，而後分割正則獲取每一個元素等等。得到這個唱歌，跳舞后，若是須要寫入數據庫那就寫進去。

3.四、select 下拉菜單

<form action="" method="get" >
    <h4>下拉列表 請選擇你的愛好：</h4>
    <p>
        <select name="fav" >
            <option value="唱歌">唱歌</option>
            <option value="跳舞">跳舞</option>
            <option value="study">學習</option>
        </select>
    </p>
    <p><input type="submit" value="登陸"></p>
</form>

由下可知：選擇下拉列表點擊登陸後鍵值name fav value 跳舞已經獲取到了

默認選中：selected

<form action="" method="get" >
    <h4>下拉列表 請選擇你的愛好：</h4>
    <p>
        <select name="fav" >
            <option value="唱歌" selected>唱歌</option>
            <option value="跳舞" >跳舞</option>
            <option value="study">學習</option>
        </select>
    </p>
    <p><input type="submit" value="登陸"></p>
</form>

select實現多選添加multiple。選項多的時候滾動條出來了。

<form action="" method="get" >
    <h4>下拉列表 請選擇你的愛好：</h4>
    <p>
        <select name="fav" multiple>  <!--添加multiple實現多選-->
            <option value="唱歌" selected>唱歌</option>  #selected被選中的
            <option value="跳舞" >跳舞</option>
            <option value="study">學習</option>
            <option value="跳舞" >跳舞</option>
            <option value="跳舞" >跳舞</option>
            <option value="study">學習</option>
        </select>
    </p>
    <p><input type="submit" value="登陸"></p>
</form>

3.五、input中的datetime-local類型

<form action="" method="get" >
    <h4>時間列表：</h4>
    <p>
        <input type="datetime-local">
    </p>
    <p><input type="submit" value="登陸"></p>
</form>

3.6多行文本框textarea

<form action="" method="get" >
    <h4>多行文本框：</h4>
    <p>
        <textarea name="" id="" cols="30" rows="10"></textarea>  #pycharm默認生成的大小
    </p>
    <p><input type="submit" value="登陸"></p>
</form>

能夠拖動文本框改變大小

3.七、label標籤：

將for 名字和input的的單行文本框id相同的框關聯起來，好比這裏點擊用戶名就調到關聯label的框讓你輸入

    <form action="">
        <label for="username">用戶名：</label>
        <input type="text" id="username2">  #一次不能關聯兩個，只能關聯一個文本框
        <input type="text" id="username">
    </form>

    <form action="">
        <p><label for="username">用戶名：</label>
            <input type="text" id="username"></p>
        <p><label for="pwd">密碼：</label>
            <input type="password" id="pwd"></p>
    </form>

四、div

小米淘寶京東等網頁的總體框架：

#小米頂部 id top
小米導航# id nav #爲何叫導航呢，由於小米的logo就在這裏
小米主題內容 id content
小米的腳 id foot

4.1小米總體

<html>
<head>
    <meta charset="UTF-8" ></head>
<body>
    <div>小米的頂部</div>
    <div>小米導航</div>
    <div>小米的追內容</div>
    <div>小米的腳</div>
</body>
</html>

注意：若是那裏出問題了，把其它部位的都註釋掉，能夠只看這一部分

div是獨佔一行的標籤

4.2給div起個名字 id 用來識別div,之後就能夠取出對應的div內容

<body>
    <div id="top">小米的頂部</div>
    <div id="nav">小米導航</div>
    <div id="content">小米的追內容</div>
    <div id="footer">小米的腳</div>
</body>

4.3頂部div裏面又分了三個div邏輯區

這塊div表示頂部，頂部欄的左邊是連接，靠右是登陸，右邊是購物車。頂部劃分了邏輯區，每一個邏輯區又是一個div。每一個div起個class。並將div中的內容寫上。

<body>
    <div id="top">
        <div class="top_1">
            <a href="#">小米商城</a>|
            <a href="#">MIUI</a>|
            <a href="#">lot</a>|
            <a href="#">雲服務</a>|
            <a href="#">金融</a>|
            <a href="#">危機</a>
        </div>
        <div class="shop"></div>
        <div class="user_login"></div>
    </div>
    <div id="nav">小米導航</div>
    <div id="content">小米的追內容</div>
    <div id="footer">小米的腳</div>
</body>

經過圖得知，豎線有空白摺疊。若是把a標籤都放到一行，那就沒有空白摺疊了，但也不是原網站有間距的樣式。

下面顯示正確的有間距的方式;

<body>
    <div id="top">
        <div class="top_1">
            <a href="#">小米商城</a>
            <span class="sep">|</span>
            <a href="#">MIUI</a>
            <span class="sep">|</span>
            <a href="#">lot</a>
            <span class="sep">|</span>
            <a href="#">雲服務</a>
            <span class="sep">|</span>
            <a href="#">金融</a>
            <span class="sep">|</span>
            <a href="#">危機</a>
        </div>
        <div class="shop"></div>
        <div class="user_login"></div>
    </div>
    <div id="nav">小米導航</div>
    <div id="content">小米的追內容</div>
    <div id="footer">小米的腳</div>
</body>

4.4類選擇器，

有不少個seq同類名的span，要對它們作相同的顯示，用類選擇器，默認的type是text/css。text做爲主文件，css做爲子文件，text是不少文件的前身。.類名{}，只要是這個類名的都被選中了，

選擇器的做用：選中標籤

<head>
    <meta charset="UTF-8" >
    <style type="text/css">
        .sep{
            color:#8888;
        }
    </style>
</head>

<body>
。。。。。。

顏色對比都變化了

4.5標籤選擇器，對全部a標籤清除下劃線

標籤選擇器，標籤{}。

<head>
    <meta charset="UTF-8" >
    <style type="text/css">
        a{
            text-decoration: none; }
        .sep{
            color:#888;
        }
    </style>
</head>

打印td，pycharm中按tab鍵就能夠選擇text-decoration，a標籤默認是underline,改成none取消下劃線

4.6查看原網站字體顏色，大小。

修改a標籤中字體大小顏色：

<head>
    <meta charset="UTF-8" >
    <style type="text/css">
        a{
            text-decoration:none;
 color:#b0b0b0; font-size:14px;
        }
        .sep{
            color:#888;
        }
    </style>
</head>

4.7查看背景色，並添加

        #top{
            background-color: #333; }
.......
   </head>
<body>
    <div id="top">
        <div class="top_1">
                ......
        </div>
         <div class="shop"></div>
         <div class="user_login"></div>
    </div>
    <div id="nav">小米導航</div>
    <div id="content">小米的追內容</div>
    <div id="footer">小米的腳</div>
......

應該裝飾的是頂部div的。因此#id{}

4.8頂部div添加高度

查看高度：」

        #top{
            height: 40px;
            background-color: #333;
        }

個人div盒子的高度height比行高lineheight高度大。字體顯示不居中。將行高和字體高度修改成一致的40px,就居中了。

        #top{
            height: 40px;
            line-height: 40px;
            background-color: #333;
        }

若是行高大於盒子高度，字體垂直偏下的位置顯示了。

        #top{
            height: 40px;
            line-height: 60px;
            background-color: #333;
        }

4.9文字左中右顯示：

        #top{
            height: 40px;
            line-height: 60px;
            background-color: #333;
            text-align: left;
        }

        #top{
            height: 40px;
            line-height: 60px;
            background-color: #333;
            text-align: center;
        }

        #top{
            height: 40px;
            line-height: 60px;
            background-color: #333;
            text-align: right;
        }

4.10綜上：div盒子高度(height)和行高line-height高度相等，垂直居中。text-align控制水平左中右。

4.十一、html展現

<html>
<head>
    <meta charset="UTF-8" >
    <style type="text/css">
        #top{
            height: 40px;
            line-height: 40px;
            background-color: #333;
        }
        a{
            text-decoration:none;
            color:#b0b0b0;
            font-size:14px;
        }
        .sep{
            color:#888;
        }
    </style>
</head>
<body>
    <div id="top">
        <div class="top_1">
            <a href="#">小米商城</a>
            <span class="sep">|</span>
            <a href="#">MIUI</a>
            <span class="sep">|</span>
            <a href="#">lot</a>
            <span class="sep">|</span>
            <a href="#">雲服務</a>
            <span class="sep">|</span>
            <a href="#">金融</a>
            <span class="sep">|</span>
            <a href="#">危機</a>
        </div>
        <div class="shop"></div>
        <div class="user_login"></div>
    </div>
    <div id="nav">小米導航</div>
    <div id="content">小米的追內容</div>
    <div id="footer">小米的腳</div>
</body>
</html>

六、模擬百度搜索框：

https://www.baidu.com/s?wd=遮天 #=後面就是你要查的東西

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"></head>
<body>
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <input type="submit" value="百度一下">
    </form>
</body>
</html>