Python 前端之HTML


1.HTML

  <!DOCTYPE=HTML>表示各個瀏覽器用統一的HTML模式來解析,避免出現不同瀏覽器用不同規則解析顯示效果不一樣的問題。

2.<HEAD></HEAD>里定義的標簽

  <title></title>打開瀏覽器時上面的提示信息

  <meta>沒有結束標簽

  a.<meta charset="UTF-8"/>指定網頁的編碼方式,或者使用<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

  b.<meta http-equiv="Refresh" content="3" /> 三秒鍾刷新網頁;

     <meta http-equiv="Refresh" content="3;url=http://www.cnblogs.com" />三秒后跳轉到其他網頁

  c.<meta http-equiv=“Cache-Control” content=“no-cache” /> 禁止緩存頁面

  d.<meta name=“keywords” content=“博客園,程序員,八卦”/>關鍵字,可用於爬蟲處理

  e.<meta name=“description” content=”博客園是最適合DotNet開發人員的技術家園”/> 描述信息

  f.<link rel="shortcut icon" href="kaola.jpg" type="image/x-icon" />為title顯示相應的圖標信息,href指定圖標的路徑

3.標簽的兩類(塊級標簽、行內標簽)

  <span></span>塊級標簽,只占文字的這一部分

  <div></div>行內標簽,占文本的這一行

  在文本中如果需要標記某些特別的字符,需要使用規定的寫法,詳情參考:

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

  <p></p>標簽,段落標簽,段與段之間有間距,<br />自閉合標簽,換行

  <a href="http://www.baidu.com">百度</a> 跳轉標簽

  <a href="http://www.baidu.com" target="_blank">百度</a> 加上參數target="_blank"表示新開一個頁面

  跳轉到本頁面的開頭行,id必須唯一定義

    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>

    <div id="i1" style="height: 500px">第一章內容</div>
    <div id="i2" style="height: 500px">第二章內容</div>
    <div id="i3" style="height: 500px">第三章內容</div>

  <h1></h1>標記字體的大小,從h1到h6,從大到小的順序,這是缺省樣式,可以通過引入CSS修改屬性。

  input和select標簽詳解

<body>
<form>
    <div style="border :1px solid red;" >
        <p>用戶名:<input type="text"/></p>        #單行文本
        <p>密碼:<input type="password"></p>    #密碼
        <p>郵箱:<input type="email"></p>      #自動檢測郵箱
    </div>
    <div style="border:2px solid green">
        <p>
            性別: 男<input type="radio" name="sex"/><br />  #加上name屬性,選項互斥<input type="radio" name="sex" />
        </p>
        <p>
            愛好:1<input type="checkbox" /><br />        #多選框
                 2<input type="checkbox" /><br />
                 3<input type="checkbox" /><br />
                 4<input type="checkbox" /><br />
                 5<input type="checkbox" /><br />
        </p>
        <p>
            省份:<select multiple size="3">            #下拉菜單,multiple可以多選,size默認顯示幾行數據
            <option>廣東</option>
            <option>湖北</option>
            <option>湖南</option>
            <option>山西</option>
            <option>江西</option>

        </select>

            城市:<select>
                <optgroup label="廣東">              #label這一列不可選,label下面的選項可以被選中
                    <option>廣州</option>
                    <option>深圳</option>
                </optgroup>
                 <optgroup label="湖北">
                    <option>武漢</option>
                    <option>仙桃</option>
                </optgroup>
            </select>
        </p>
        <p>上傳相片:<input type="file"/></p>            #上傳文件
        <p>備注信息:<textarea>填寫</textarea></p>          #多行文本
        <input type="button" value="button"/>
        <input type="submit" value="submit"/>
        <input type="reset" value="reset"/>
    </div>
</form>
</body>

向服務器傳遞數據:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
        <input type="text" name="user"/>
        <input type="password" name="pwd"/><input type="radio" name="sex",value="1"/><input type="radio" name="sex",value="2"/>
        <p>
            愛好:
            籃球<input type="checkbox" name="favor" value="1"/>
            足球<input type="checkbox" name="favor" value="2"/>
            羽毛球<input type="checkbox" name="favor" value="3"/>
        </p>
        <p>上傳文件:
            <input type="file" name="uploadfile"/>
        </p>
        <p>城市:
            <select>
               <option value="1">上海</option>
               <option value="2">深圳</option>
               <option value="3">廣州</option>
            </select>
        </p>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

直接傳值給sogou,利用sogou搜索的時候,輸入查詢條件,可以看到"https://www.sogou.com/web?query=發&ie=utf8&_ast=1474797952&_asf=null&w=01029901&cid=",這是傳遞的值,因此可以利用程序直接傳值給瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
    <title></title>
</head>
<body>
    <form action="https://www.sogou.com/web" method="post">
        <!--https://www.sogou.com/web?query=發-->
        <input type="text" name="query"/>
        <input type="submit" value="提交"/>
    </form>
</body>
</html>

  table標簽,下面繪制三行三列的圖表,tr表示行,th表示列的名稱,td表示列里的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1">
        <tr>
            <th>標題1</th>
            <th>標題2</th>
            <th>標題3</th>
        </tr>
        <tr>
            <td>內容1</td>
            <td>內容2</td>
            <td>內容3</td>
        </tr>
        <tr>
            <td>內容1</td>
            <td>內容2</td>
            <td>內容3</td>
        </tr>
    </table>
</body>
</html>

  合並單元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">標題1</th>
            <th>標題2</th>
            <!--<th>標題3</th>-->
        </tr>
        <tr>
            <td>內容1</td>
            <td rowspan="2">內容2</td>
            <td>內容3</td>
        </tr>
        <tr>
            <td>內容1</td>
            <!--<td>內容2</td>-->
            <td rowspan="2">內容3</td>
        </tr>
        <tr>
            <td>內容1</td>
            <td>內容2</td>
            <!--<td>內容3</td>-->
        </tr>
        <tr>
            <td>內容1</td>
            <td>內容2</td>
            <td>內容3</td>
        </tr>
    </table>
</body>
</html>

  iframe,fieldset,div,span,ul,ol,dl

 

 
        

  


免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM