1. 程式人生 > >html操作

html操作

lang script input tps host main multi gen textarea

HTML(hyper text markup language):

超文本標記語言,標準通用標記語言下的一個應用。

超文本就是指頁面內可以包含圖片、連接、音樂、程序等非文字元素。

超文本標記語言的結構包括“頭”部分(head)和“主體”部分。其中“頭”部提供關羽網頁的信息,“主體”部分提供網頁的具體內容。

1、定義:

超級文本標記語言是標準通用標記語言下的一個應用,也是一種規範,一種標準。超文本標記語言通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件,通過在文本中添加標記符,可以告訴瀏覽器如何顯示其中的內容(如文字如何處理,畫面如何安排,圖片如何顯示等)。瀏覽器按順序閱讀網頁文件,然後根據標記符解釋和顯示標記的內容,對書寫出錯的標記將不指出其錯誤,且不停止其解釋執行過程,編織者只能通過顯示效果來分析出錯原因和出錯部位。但需要註意的是,對於不同的瀏覽器,對同一標記符可能會有不完全相同的解釋,因為可能會有不同的顯示效果。

2、基本組成:

技術分享
<!DOCTYPE html>  <!--文檔類型;後面參數意義是瀏覽器按什麽標準來解釋網頁。-->
 
<html lang="en">
<head>
    <!-- html編碼類型-->
    <meta charset="UTF-8">
    <!--刷新與跳轉-->
    <!--<meta http-equiv="Refresh" content="2">-->
    <!--<meta http-equiv="Refresh" content="3; Url=http://www.163.com">
--> <!--關鍵字與描述--> <meta name="keywords" content="fuck"> <meta name="description" content="fuck you everyday"> <!--標頭的圖標--> <!--<link rel="shortcut icon" href="1.png"/>--> <link rel="stylesheet" type="text/css" href="1.png"> <title
>標頭</title> </head> <!-- 下面部分是瀏覽器呈現的內容--> <body> </body>
基本信息


3、標簽、樣式、等:

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--刷新與跳轉-->
    <!--<meta http-equiv="Refresh" content="2">-->
    <!--<meta http-equiv="Refresh" content="3; Url=http://www.163.com">-->
    <!--關鍵字與描述-->
    <meta name="keywords" content="fuck">
    <meta name="description" content="fuck you everyday">
    <!--標頭的圖標-->
    <!--<link rel="shortcut icon" href="1.png"/>-->
    <link rel="stylesheet" type="text/css" href="1.png">
    <title>標頭</title>
</head>
<body>
    <!--特殊符號,大於、空格、小於-->
    <a href="http://www.baidu.com">一人&nbsp;&lt;飲酒&gt;</a>
    <p>你好,換行吧<br/> ok,換完了</p>
    <p>p標簽用來做段落</p>
    <h1>我是h1</h1>
    <h6>我是h6</h6>
    <span>我是span標簽1</span>
    <span>我是span標簽2,默認是白板的</span>
    <div>我是div標簽,默認我是白板的</div>
    <form action="http://localhost:6969/index" method="get">
        <input type="text" name="user"/>
        <input type="password" name="pwd"/>
        <input type="button" value="button"/>
        <input type="submit" value="submit"/>
    </form>
    <form action="https://www.sogou.com/web">
        <input type="text" name="query" value="我是默認值"/>
        <input type="submit" name="搜索" />
    </form>
    <form>
        <div>
            <p>性別:</p><input type="radio" name="gender" value="M" checked="checked"/><input type="radio" name="gender" value="F"/>
            <p>愛好:</p>
            撩妹<input type="checkbox" name="hobby" value="1" checked="checked"/>
            健身<input type="checkbox" name="hobby" value="2" checked="checked"/>
            上網<input type="checkbox" name="hobby" value="3"/>
        </div>
        <p>備註:
            <textarea name="ps">默認值</textarea>
        </p>

        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
    <form enctype="multipart/form-data">
        <p>上傳照片</p>
        <input type="file" name="fname"/>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>
基本設置 技術分享
#!/usr/bin/env python
# -*- coding:utf-8 -*-
# Author:Tong Cable

import tornado.web
import tornado.ioloop

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        print(111)
        u = self.get_argument(user)
        p = self.get_argument(pwd)
        if u == cab and p == 123:
            self.write(登陸成功)
        else:
            self.write(登錄失敗)

    def post(self, *args, **kwargs):
        u = self.get_argument(user)
        p = self.get_argument(pwd)
        print(u,p)
        if u == cab and p == 123:
            self.write(恭喜你,登陸成功)
        else:
            self.write(用戶名或密碼錯誤)

application = tornado.web.Application([
    (r"/index", MainHandler),
])
if __name__ == __main__:
    application.listen(6969)
    tornado.ioloop.IOLoop.instance().start()
server

4、select及a標簽等:

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <select>
            <option value="1" >北京</option>
            <option value="2">山東</option>
            <option value="3" selected="selected">上海</option>
            <option value="4">深圳</option>
        </select>
    </div>
    <hr/>
    <div>
        <select size="5" multiple="multiple">
            <option value="1" >北京</option>
            <option value="2">山東</option>
            <option value="3" selected="selected">上海</option>
            <option value="4">臺灣</option>
            <option value="5" >西藏</option>
            <option value="6">新疆</option>
            <option value="7" selected="selected">廣東</option>
            <option value="8">海南</option>
        </select>
    </div>
    <div>
        <select size="5" multiple="multiple">
            <optgroup label="北京">
                <option value="1" >朝陽</option>
                <option value="2">豐臺</option>
                <option value="3" >昌平</option>
                <option value="4">大興</option>
            </optgroup>
            <optgroup label="山東">
                <option value="5" >德州</option>
                <option value="6">濟南</option>
                <option value="7" selected="selected">青島</option>
                <option value="8">淄博</option>
            </optgroup>
            <optgroup label="黑龍江">
                <option value="5" >哈爾濱</option>
                <option value="6">雞西</option>
                <option value="7" selected="selected">北安</option>
            </optgroup>
        </select>
    </div>
    <hr/>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <div id="i1" style="height: 600px;">第一章內容</div>
    <div id="i2" style="height: 500px">第二章內容</div>
    <div id="i3" style="height: 400px;">第三章內容</div>
</body>
</html>
view

5、圖片、超鏈接、表格等:

技術分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://www.sogou.com/web?query=麻生希">
    <img src="2.jpg" title="麻生希" style="height: 300px; width: 200px;" alt="美女"/>
</a>
<ul>
    <li>上邊那是誰啊?</li>
    <li>已經過時了...</li>
    <li>多麽老了她都!</li>
</ul>
<ol>
    <li>那是90年代的事情了</li>
    <li>那天偶然間看到的</li>
    <li>還有桃谷</li>
</ol>
<dl>
    <dt>我是小明,今年12歲</dt>
    <dd>老司機們談論嘛呢</dd>
    <dd>老司機帶帶我</dd>
    <dd>老司機發車了,趕緊上車</dd>
    <dt>我是老王,今年96歲</dt>
    <dd>小明們,坐好了</dd>
    <dd>走咯。。。</dd>
</dl>
<table border="1">
    <thead>
        <tr>
            <td>主機名</td>
            <td>端口</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>10.1.2.19</td>
            <td>8080</td>
            <td>
                <a href="first.html">查看</a>
            </td>
        </tr>
        <tr>
            <td>10.233.12.128</td>
            <td>9000</td>
            <td>
                <a href="2.jpg">調試</a>
            </td>
        </tr>
         <tr>
            <td rowspan="2">10.233.12.128</td>
            <td colspan="2" >9000</td>
        </tr>
         <tr>
            <td>9000</td>
            <td>
                <a href="1.png">調試</a>
            </td>
        </tr>
    </tbody>
</table>
<br/>
    <!--通過lable的for與input的id進行關聯,獲取光標,即點擊文字就可獲取光標??-->
    <label for="username">用戶名</label>
    <input id="username" type="text" name="user"/>
    <br/>
    <fieldset>
        <legend>登陸</legend>
        <lable for="user">用戶名:</lable>
        <input id="user" type="text" name="use"/>
        <br/>
        <label for="pwd">&nbsp;碼:&nbsp;</label>
        <input id="pwd" type="password" name="passwd"/>
    </fieldset>
</body>
</html>
View Code

html操作