Python開發【前端】：HTML

時間  2019-12-18
標籤 python 開發 前端 html 欄目 Python 简体版
原文   原文鏈接

HTML

　　HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種製做萬維網頁面標準語言（標記）。至關於定義統一的一套規則，你們都來遵照他，這樣就可讓瀏覽器根據標記語言的規則去解釋它。javascript

瀏覽器負責將標籤翻譯成用戶「看得懂」的格式，呈現給用戶！(例：djangomoan模版引擎)css

標準模板：html

<!DOCTYPE html>     #標準規範
<html lang="en">
<head>                  #html頭
    <meta charset="UTF-8">      #字符編碼
    <title>Title</title>        #頁面頭部顯示內容
</head>
<body>
        <p>主體內容</p>         #頁面內容主體
</body>
</html>

 

Doctype標準

　　Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔前端

有和無的區別java

  • BackCompat：標準兼容模式未開啓（或叫怪異模式[Quirks mode]、混雜模式）
  • CSS1Compat：標準兼容模式已開啓（或叫嚴格模式[Standards mode/Strict mode]）

　　這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,這也就是惡魔的開始 -- 瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。若是你的頁面添加了那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了python

有，用什麼？web

  • Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔, dtd文件則包含了標記、attributes 、properties、約束規則

 

<head>頁面頭部

meta(metadata information)django

提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞瀏覽器

頁面編碼（告訴瀏覽器是什麼編碼）安全

< meta http-equiv=「content-type」 content=「text/html;charset=utf-8」>

刷新和跳轉

< meta http-equiv=「Refresh」 Content=「30″>        30秒刷新

< meta http-equiv=」Refresh「 Content=」5; Url=http://www.autohome.com.cn「 />

關鍵詞

< meta name="keywords" content="星際2,星際老男孩,專訪,F91,小色,JOY" >

描述

例如：cnblogs

X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

微軟的IE6是經過XP、Win2003等操做系統發佈出來，做爲佔統治地位的桌面操做系統，也使得IE佔據了通知地位，許多的網站開發的時候，就按照IE6的標準去開發，而IE6自身的標準也是微軟公司內部定義的。到了IE7出來的時候，採用了微軟公司內部標準以及部分W3C的標準，這個時候許多網站升級到IE7的時候，就比較痛苦，不少代碼必須調整後，纔可以正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部本身定義的標準拋棄了，而全面的支持W3C的標準，因爲基於對標準完全的變化了，使得原先在早期IE8版本上可以訪問的網站，在IE8中沒法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各類兼容性錯誤。

與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標準提供了更加緊密的支持。 所以，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。 爲了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而容許您指定站點所支持的 Internet Explorer 版本。 文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。 若是您的站點在 Internet Explorer 8 中沒法正確顯示，則能夠更新該站點以支持最新的 Web 標準（首選方式），也能夠強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。 經過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，能夠實現這一點。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 指令來肯定如何顯示該網頁。 若是該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁

title 標籤

網頁頭部信息

link 標籤

<!--css-->
< link rel="stylesheet" type="text/css" href="css/common.css" >

<!--icon-->
< link rel="shortcut icon" href="image/favicon.ico">

style 標籤

在頁面中寫樣式

例如：
< style type="text/css" > 
.bb{ 
      background-color: red; 
   } 
< /style>

script 標籤

<!--引進文件-->
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

<!--寫js代碼-->
< script type="text/javascript" > ... </script >

 

<body>頁面主體

標籤通常分爲兩種：塊級標籤 和 行內標籤

  • a、span、select 等
  • div、h一、p 等

特殊符號

更多-》》http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p和br 標籤

<p>段落</p>        <!--p表示段落，默認段落之間是有間隔的！-->
<br/>                <!--br是換行-->

a 標籤

超連接：

<a href="http://www.baidu.com" target="_blank">點我</a>

href表示跳轉的地址，target="_blank"表示新窗口打開，默認爲當前頁

錨：

<body>
    <a href="#1">第一章</a><br/>
    <a href="#2">第二章</a><br/>
    <a href="#3">第三章</a><br/>
    <a href="#4">第四章</a><br/>

    <div id="1" style="height: 600px;">第一章的內容</div>
    <div id="2" style="height: 600px;">第二章的內容</div>
    <div id="3" style="height: 600px;">第三章的內容</div>
    <div id="4" style="height: 600px;">第四章的內容</div>
</body>

h 標籤

標題h一、h二、h3、h四、h五、h六、h7表示不一樣的大小

span 標籤

行內標籤-白板

div 標籤

塊級標籤-白板，能夠加屬性而後能夠變身

 

form 標籤

form至關於一個表單，配合input標籤submit能夠把表單的內容提交到指定位置，提交內容以字典的形式提交{‘user’：xx,'email':xx,'pwd':xx},key值爲name屬性值

<form action="http://localhost:8888/index" method="post" >
</form>

action表示提交動做，把數據提交到指定的路徑，methon指定提交類型，默認爲get

post與get的區別：

method默認爲get類型，數據會包含在html的頭部進行提交，表現形式是點擊提交後會在外部url路徑上查看提交到的數據表單內容，效果以下

http://localhost:8888/index?user=lianzhilei&email=James%40123.com&pwd=123123

method若是指定爲post類型的話，數據會包含在html的body內進行提交，從外部看不出來裏面的信息

二者 沒有誰安全之說，由於抓包都能抓到

 

input 系列標籤

text、password 用戶輸入框

<body>
    <form action="http://localhost:8888/index" method="post" >
        <span>用戶：</span><input type="text" name="user"><br />
        <span>郵箱：</span><input type="text" name="email"><br />
        <span>密碼：</span><input type="password" name="pwd"><br />

        <input type="button" value="不能提交">
        <input type="submit" value="提交">
    </form>
</body>

配合使用的tornado腳本（數據提交地址）

#!/usr/bin/env python
# -*- coding:utf-8 -*-
#-Author-Lian

import tornado.ioloop
import tornado.web


class MainHandler(tornado.web.RequestHandler):
    def get(self):
        print("get")
        u = self.get_argument("user")
        e = self.get_argument("email")
        p = self.get_argument("pwd")
        print(u,e,p)

    def post(self,*args,**kwargs):
        print("post")
        u = self.get_argument("user")
        e = self.get_argument("email")
        p = self.get_argument("pwd")
        print(u,e,p)

application = tornado.web.Application([
    (r"/index", MainHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    tornado.ioloop.IOLoop.instance().start()
表單數據接收端.py

頁面效果：

點擊提交後tornado腳本顯示效果以下：

post
lianzhilei James@123.com 123123

radio、checkbox 單選與多選

<body>
    <form action="http://localhost:8888/index" method="post">
        <div>
            <p>性別：</p>
            男： <input type="radio" name="gender" value="1" />
            女： <input type="radio" name="gender" value="2" />
            <p>愛好：</p>
            籃球： <input type="checkbox" name="favor" value="1" />
            足球： <input type="checkbox" name="favor" value="2" />
            排球： <input type="checkbox" name="favor" value="3" />
        </div>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>

name表示提交字典裏的key值，value爲值，type=reset能夠重置選項

顯示效果：

file 上傳文件

<form enctype="multipart/form-data">
        <div>
            <p>上傳文件：</p>
            <input type="file" name="fname">
        </div>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
</form>

上傳文件時要添加enctype="multipart/form-data"參數

textarea 多行輸入

<form action="http://localhost:8888/index" method="post">
        <textarea name="linearea">默認數據</textarea>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
</form>

name指定key值，默認數據寫中間便可

select 下拉框

<form action="http://localhost:8888/index" method="post">
        <select name="city" size="2" multiple="multiple">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">南京</option>
            <option value="4" selected="selected">邯鄲</option>
        </select>
        <br />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
</form>

city爲提交表單的key值，value是提交值，size指定顯示的個數，mothod表示能夠多選

img 圖片標籤

<a href="https://www.baidu.com">
        <img src="i.png" title="大帥鍋" style="height: 300px;width: 220px;" alt="索隆">
</a>

和a標籤結合點擊圖片直接跳轉，title指定鼠標放到圖片後顯示的內容，style定義寬高，alt指定圖片不存在時的顯示信息　　

 

ul、ol、dl 列表標籤

    <ul>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
    </ul>

    <ol>
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
    </ol>

    <dl>
        <dt>qwe</dt>
        <dd>qwe</dd>
        <dd>qwe</dd>
        <dt>qwe</dt>
    </dl>
列表.html

顯示效果：

 

table 列表

簡單單元格

<table border="1">
    <thead>
    <tr>
        <td>主機名</td>
        <td>IP</td>
        <td>詳情</td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>localhost</td>
        <td>127.0.0.1</td>
        <td>
            <a href="test3.html">點擊</a>
        </td>
    </tr>
    <tr>
        <td>localhost</td>
        <td>127.0.0.1</td>
        <td>點擊</td>
    </tr>
    </tbody>
表格.html

合併單元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <td>表頭1</td>
        <td>表頭2</td>
        <td>表頭3</td>
        <td>表頭4</td>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td colspan="2">1</td>
        <!--<td>2</td>-->
        <td>3</td>
        <td>4</td>
    </tr>
       <tr>
        <td>1</td>
        <td>2</td>
        <td rowspan="2">3</td>
        <td>4</td>
    </tr>
        <tr>
        <!--<td>1</td>-->
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
        <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    </tbody>
</table>
</body>
</html>
合併單元格.html

 

label 標籤

    <label for="username">用戶名</label>
    <input id="username" type="text" name="user" />

點擊文字使其關聯的標籤獲取光標

 

 

Python開發【前端】：CSS--》》http://www.cnblogs.com/lianzhilei/p/6046131.html

Python開發【前端】：JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html

Python開發【前端】：DOM--》》http://www.cnblogs.com/lianzhilei/p/6072367.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程