python-html基礎操作

本文轉載自查看原文 2019-01-02 17:10 6611 django

介紹：

HTML 是網頁內容的載體。包括文字，圖片，信息等用戶瀏覽的信息
CSS 樣式是改變內容外觀表現。像字體，顏色，背景，邊框等
JavaScript 是實現網頁上的特效效果。如鼠標滑過背景顏色改變，鼠標滑過有彈出信息等

html的基本格式：

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

注釋：

head

meta 是自閉合的

指定文件編碼

<meta charset='UTF=8'> 
等同於 <meta http-equiv="content-type" content="text/html;charset=utf-8">

刷新和跳轉

<meta http-equiv="Refresh" content="1"> # 1秒刷新一次頁面
<meta http-equiv="Refresh" content="5;url=http://www.baidu.com"> #5秒鍾之后跳轉到www.baidu.com

關鍵字和描述

<meta name="keywords" content="python,django,linux">
<meta name="description" content="django是基於python開發的一款web框架">

- ie搜索引擎
title 網頁頭部信息
```
<title>第一個網頁</title>
```

link

icon

<link rel="icon" sizes="192x192" href="https://docs.djangoproject.com/s/img/icon-touch.e4872c4da341.png">

stylesheet

<link rel="stylesheet" href="newcss.css">  #導入css文件
#newcss.css
.abc{
    color:red;
    font-size: 20px;
}
#后面可以在body里面引用該css文件里面的樣式：
    <div class="abc" >lalalalal</div>

style 在head里定義全局的css樣式

    <style>
        .css1{
            color: greenyellow;
            font-size: 25px;
        }
    </style>
#可以在body里面使用它
<body>
    <div class="css1">test</div>

body

符號：可參考 http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

　　 常用符號： > （>）

< （< ）

& （&）

空格 ( )

標簽分為：塊級標簽，行內標簽

舉個栗子：

<body>
    <div style="background-color: wheat">Hello div</div>  #div是塊級標簽，獨占一行
    <span style="background-color: wheat">Hello span</span>  #span標簽是行內標簽，非獨占一行
#為了效果明顯這里加上一個背景色
</body>

Hello div

Hello span

可以通過chrome瀏覽器Fn+F12 ，用剪頭指向內容判斷是塊級標簽還是行內標簽。

（這里get了一個小技能，ctrl+shift+p 然后輸入capture full size screenshoot可以截圖整個頁面的內容Hhhhh...）

塊級標簽 默認獨占一行

常用塊級標簽：dhp

div 默認沒有樣式的一行。塊級標簽。如果想加樣式需要結合css
h1-h6 等同於字體格式標題
p 段落，上下有行距
br 換行，自閉合
hr 加一條分割線

行內標簽（行級標簽） 默認不會獨占一行

常用行內標簽：span，img，a，lable，input，form

span 默認沒有樣式的一塊。行內標簽。
a 標簽

超鏈接

    <a href="home.html">home page</a>    #點擊homepage 跳轉到home.html
    <a href="https://docs.djangoproject.com">Django官網</a>   #點擊Django官網，跳轉到這個網址
    <br>    
    <a href="http://www.baidu.com" target="_blank">百度</a>   #點擊百度，在新的標簽頁打開這個網址

Django官網

百度

錨

    <a href="#m1">第一章</a>
    <br>
    <a href="#m2">第二章</a>  #點擊第二章這個超鏈接就會跳到文章下文的第二章內容
    <br>
    <br>
    <div id="m1" style="height: 2000px;background-color: beige">第一章內容</div>
    <div id="m2" style="height: 2000px;background-color: pink">第二章內容</div>

在html里面，每一個標簽都能設置id，且id不可跟其他id重復，id唯一

img標簽

<img title="love django" src="1.png">   # src 導入圖片； title 將鼠標放到圖片上會顯示這個字
# src和title是img標簽特有的屬性

select 標簽

    <select>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option selected="selected">武漢</option>
    </select>
#一般會給每個option設置一個value
# option里面selected="selected" 表示默認選中下拉框里的

View Code

    <select multiple="multiple" size="5">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
        <option selected="selected">武漢</option>
    </select>

# size屬性 下拉框里顯示幾個
# multiple屬性  一次可以選中多個

View Code

    <select>
        <optgroup label="廣東省">
            <option>深圳</option>
            <option>廣州</option>
        </optgroup>
        <optgroup label="湖北省">
            <option>武漢</option>
            <option>黃石</option>
        </optgroup>
    </select>
# optgroup不可選，將下面的option分組，再選擇option

View Code

常用標簽：

textarea 文本框 如果要將數據提交到form需要加name
```
    <textarea>默認內容哈哈哈</textarea>
```
默認內容哈哈哈

input標簽

text 文本框　　

    <div>主機名：<input type="text" value="默認值哈哈"></div>  #value設置一個默認值

主機名：

radio 單選框

<div>男：<input name="gender" type="radio"></div>
<div>女：<input name="gender" type="radio"></div>
#radio類型的，name相同的時候才會互斥，二選一
#checked 默認選中一個

男：

女：

checkbox 復選框

    <div>湖北<input type="checkbox" checked="checked"></div>
    <div>廣東<input type="checkbox"></div>
    <div>上海<input type="checkbox"></div>
#checked="checked"默認選中

湖北

廣東

上海

file 上傳文件 (如果需要提交到后台，需要特殊的設置）

如果想要提交文件到后台，需要在其所在的form標簽添加 <form action="" enctype="multipart/form-data" method="post">
　　<input type="file" name="user">
    </form>

password 密碼框
密碼：
submit 提交數據到后台

Form表單 提交數據

提交到form表單里的可以是selected，input，textarea標簽里的數據

action參數：規定當提交表單時向何處發送表單數據。

select：

     <form action="http://127.0.0.1:8000/formapp/index/">
        <select name="city">  #這里的name相當於字典的key
                <option value="111">深圳</option>   #value是給key取名
                <option value="222">廣州</option>
                <option value="333">惠州</option>
        </select>
        <input type="submit" value="提交">
    </form>

django，views.py配置：
def index(request):
    print("POST:",request.POST)
    print("GET:",request.GET)
    return HttpResponse('ok')
#點擊提交按鈕之后，查看：
POST: <QueryDict: {}>
GET: <QueryDict: {'city': ['111', '222', '333']}>
"GET /formapp/index/?city=111&city=222&city=333  HTTP/1.1" 200 2
如果沒有設置value值：

"GET /formapp/index/?city=%E6%B7%B1%E5%9C%B3&city=%E5%B9%BF%E5%B7%9E&city=%E6%83%A0%E5%B7%9E HTTP/1.1" 20

0 2

input-text類型：

<form action="http://www.baidu.com">  #action指定提交的位置，把數據提交到百度
    <div>主機名：<input name="host" type="text" value="127.0.0.1"></div>   #value設置一個默認值 
    <div>端口：<input name="port" type="text"></div>  #必須指定name，提交數據到后台，是以字典的形式，name就是key
    <div>密碼：<input name="password" type="password"></div>
    <input type="submit" value="提交">  #提交按鈕
</form>

input-radio類型：

        <h1>性別</h1>
        <label for="boy">男：</label>#lable標簽
        <input name="gender" type="radio" id="boy" value="0"> #name="gender"是key，value是值
        <label for="girl">女：</label>
        <input name="gender" type="radio" id="girl" value="1">
        <input type="submit" value="提交">

input-checkbox類型：

    <form action="http://127.0.0.1:8000/formapp/index/" >
         <label>
            籃球<input name="favor" type="checkbox" value="1">
            足球<input name="favor" type="checkbox" value="2">
            羽毛球<input name="favor" type="checkbox" value="3">
        </label>
        <input type="submit" value="提交">
    </form>

input-file類型：（需要加上 enctype="multipart/form-data" method="post"）

    <form action="http://127.0.0.1:8000/formapp/index/" enctype="multipart/form-data" method="post">
        <input type="file" name="upload_file">
        <input type="submit" value="提交">
    </form>
測試django，views.py
def index(request):
    print("FILE:",request.FILES)
    print("POST:",request.POST)
    print("GET:",request.GET)
結果：
FILE: <MultiValueDict: {'upload_file': [<InMemoryUploadedFile: test.txt (application/octet-stream)>]}>
POST: <QueryDict: {}>
GET: <QueryDict: {}>
[03/Jan/2019 15:58:09] "POST /formapp/index/ HTTP/1.1" 200 2

lable標簽 點擊關鍵字，會自動選中對應的框

    <label>
        姓名:<input type="text">
    </label>
    <label for="hunfou">婚否：</label>   #for參數的值等於id的值
    <input id="hunfou" type="checkbox">

姓名: 婚否：

例二：

    <input id="radioA" type="radio" name="agree" value="1" checked="checked">
    <label for="radioA">我同意</label>
    <input id="radioB" type="radio" name="agree" value="0">
    <label for="radioB">我不同意</label>

我同意我不同意

Table 表格

tr 代表行 td列（必須包含在tr行里面）

    <table border="2">  # border加邊框的
        <thead>  #表頭
            <tr>    #行
                <th>姓名</th>  #頭部里的列，th
                <th>年齡</th>
                <th>性別</th>
            </tr>
        </thead>
        <tbody>    #表內容
            <tr>
                <td>張一</td>
                <td>28</td>
                <td>男</td>
            </tr>
            <tr>
                <td>張二</td>
                <td>20</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>

table表

姓名	年齡	性別
張一	28	男
張二	20	女

ul ol dl li 列表相關

    <ul>
        <li>111</li>   #li列表
        <li>222</li>
    </ul>
    <ol>
        <li>abc</li>
        <li>def</li>
    </ol>
    <dl>
        <dt>dt標題一</dt>
        <dd>內容一</dd>
        <dd>內容二</dd>
        <dt>dt標題二</dt>
        <dd>dd內容一</dd>
        <dd>內容二</dd>
    </dl>

View Code

dt標題一: 內容一; 內容二
dt標題二: dd內容一; 內容二

fieldset 就是下面這個框框

    <fieldset>   
        <legend>內容</legend>  #框框上的字
        <div>段落1：</div>
        <div>段落2：</div>
    </fieldset>

View Code

內容

段落1：

段落2：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Python-HTML基礎 python-HTML（HTML5級別） Python-HTML轉義字符 python/HTML基礎 Python HTML操作（HTMLParser） Python HTML操作（HTMLParser） python基礎之文件操作(基礎六) python之文件操作(基礎） Python openCV基礎操作 python基礎-文件操作