html 經常使用的body標籤概括

 塊級元素與行內元素的區別： 

　　所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
　　這兩個元素是專門爲定義CSS樣式而生的。

　　塊元素能夠寫入高和款，行內元素則根據自有內容和瀏覽器窗口比例自適應調節寬和高

 

1 標題標籤

　　塊元素

　　　　<h1>標題1</h1>
　　　　<h2>標題2</h2>
　　　　<h3>標題3</h3>
　　　　<h4>標題4</h4>
　　　　<h5>標題5</h5>
　　　　<h6>標題6</h6>

2  經常使用小標籤

　　　　<!--換行-->
　　　　<br>
　　　　<!--水平線--><hr>
　　　　<b>加粗</b>

　　　　<i>斜體</i>
　　　　<u>下劃線</u>
　　　　<s>刪除</s>
　　　　<p>段落標籤</p>

3 特殊字符　

　　　　　空格    　　　　
　　　　　大於   >　　　　
　　　　　小於 　<　　　　
　　　　　人民幣符號  &yen；
　　　　　&      &
　　　　  版權   ©
　　　　  註冊   ®

 4 div標籤和span標籤

　　div標籤用來定義一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。
　　span標籤用來定義內聯(行內)元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。

　　p標籤不能包含塊級標籤，p標籤也不能包含p標籤。

5  img標籤

　　<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

6 a標籤

　　超連接標籤

　　所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。

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

href屬性指定目標網頁地址。該地址能夠有幾種類型：

• 絕對URL - 指向另外一個站點（好比 href="http://www.jd.com）
• 相對URL - 指當前站點中確切的路徑（href="index.htm"）
• 錨URL - 指向頁面中的錨（href="#top"）

 　　

target：

• _blank表示在新標籤頁中打開目標網頁
• _self表示在當前標籤頁中打開目標網頁

對超連接下劃線設置

使用代碼"text-decoration"
語法： 
text-decoration : none || underline || blink || overline || line-through 

text-decoration參數： 
none : 　無裝飾
blink : 　閃爍
underline : 　下劃線
line-through : 　貫穿線
overline : 　上劃線

7 列表　

1.無序列表

<ul type="disc">
  <li>第一項</li>
  <li>第二項</li>
</ul>

type屬性：

• disc（實心圓點，默認值）
• circle（空心圓圈）
• square（實心方塊）
• none（無樣式）

2.有序列表

<ol type="1" start="2">
  <li>第一項</li>
  <li>第二項</li>
</ol>

type屬性：

• 1 數字列表，默認值
• A 大寫字母
• a 小寫字母
• Ⅰ大寫羅馬
• ⅰ小寫羅馬

3.標題列表

<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>

8 表格

　　　　表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。
表格的基本結構：

　　　　

<table>
  <thead>
  <tr>
    <th>序號</th>
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>槓娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

屬性:

• border: 表格邊框.
• cellpadding: 內邊距
• cellspacing: 外邊距.
• width: 像素 百分比.（最好經過css來設置長寬）
• rowspan: 單元格豎跨多少行
• colspan: 單元格橫跨多少列（即合併單元格）

9 form 表單　

　　功能：

　　表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互

　　表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。

　　表單還能夠包含textarea、select、fieldset和 label標籤。

　　

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
            return HttpResponse('上傳成功')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r'^upload/', upload),
]

10 input

　　<input> 元素會根據不一樣的 type 屬性，變化爲多種形態。

　　type屬性:

　　<input type=text" />   單行輸入文本

　　<input type="password"  />   密碼輸入框

　　<input type="date" />　　　日期輸入框

　　<input type="checkbox" checked="checked"  />    複選框

　　<input type="radio"  />       單選框

　　<input type="submit" value="提交" />   提交按鈕

　　<input type="reset" value="重置"  />     重置按鈕

　　<input type="button" value="普通按鈕"  />    普通按鈕

　　<input type="hidden"  />      隱藏輸入框

　　<input type="file"  />        文件選擇框

　　<input type='email' />      可對內容檢查是否符合Email格式的字符串

　　 屬性說明:

• name：表單提交時的「鍵」，注意和id的區別
• value：表單提交時對應項的值
  • type="button", "reset", "submit"時，爲按鈕上顯示的文本年內容
  • type="text","password","hidden"時，爲輸入框的初始值
  • type="checkbox", "radio", "file"，爲輸入相關聯的值
• checked：radio和checkbox默認被選中的項
• readonly：text和password設置只讀
• disabled：全部input均適用
• placeholder：  佔位符，效果是input框裏面有淺色的沒法選中的字符

11  select標籤　

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option>
    <option value="3">廣州</option>
    <option value="4">深圳</option>
  </select>
</form>

　　屬性說明：

• multiple：布爾屬性，設置後爲多選，不然默認單選
• disabled：禁用
• selected：默認選中該項
• value：定義提交時的選項值,值由選定option值決定

12 label標籤

　　定義：<label> 標籤爲 input 元素定義標註（標記）。

　　

　　

說明：

1. label 元素不會向用戶呈現任何特殊效果。
2. <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

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

  <label for="username">

　　　　<input type="text" id="username" name="username">用戶名

  </label>
  

</form>

13 textarea 多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默認內容
</textarea>

屬性說明：

• name：名稱
• rows：行數
• cols：列數
• disabled：禁用