HTML介紹

HTML是什麼？

htyper text markup language  即超文本標記語言。

超文本: 就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。

結構：

 

head標籤    

<meta>:

　　meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性。

　　1: name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。　　

1 　　<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
2 
3 　　<meta name="description" content="老男孩培訓機構是由一個老的男孩建立的">

　　2: http-equiv顧名思義，至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值爲content，

　　　content中的內容其實就是各個參數的變量值。

1 <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意後面的引號，分別在秒數的前面和網址的後面)
2  
3 <meta http-equiv="content-Type" charset=UTF8">
4  
5 <meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 

非<meta>：

1 <title>oldboy</title>　　#網頁標題名
2 <link rel="icon" href="http://www.jd.com/favicon.ico">　　#網頁小圖標
3 <link rel="stylesheet" href="css.css">
4 <script src="hello.js"></script>

 body標籤    

1、基本標籤：

　　　　塊級標籤：老是在新行開始

　　　　　　<p>：段落標籤，包裹的內容被換行，而且上下內容之間有一行空白；

　　　　　　<hn>：n=1～6，從大到小，用來表示標題；

　　　　　　<table>、<ol>、<ul>、<form>、<div>　

　　　　內聯標籤：和其餘元素都在一行上

　　　　　　<span>、<b>、<input>、<sup>、<sub>、<textarea>

2、圖形標籤：<img>　

src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

View Code

 3、超連接標籤：<a>

href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.

name: 定義一個頁面的書籤.

用於跳轉 href : #id.（錨）

View Code

4、列表標籤：<ol> <ul>

<ol> 有序列表
<ul> 無序列表
    <li></li>
    <li></li>
</ul>

View Code

5、表格標籤: <table>

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素 百分比.（最好經過css來設置長寬）

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  單元格豎跨多少行

colspan:  單元格橫跨多少列（即合併單元格）

<th>: table header <tbody>(不經常使用): 爲表格進行分區.

View Code

6、表單標籤：<form>

　　表單用於向服務器傳輸數據。

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

      表單還能夠包含textarea、select、fieldset和 label 元素。

1.表單屬性

　　HTML 表單用於接收不一樣類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中。

            action: 表單提交到哪. 通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web。

            method: 表單的提交方式 post/get 默認取值 就是 get（信封）

                          get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制；

                          post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制。

                          get/post是常見的兩種請求方式。

2.表單元素

　　<input>標籤的屬性和對應值

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(須要配合js使用.) button和submit的區別？

             file 提交文件：form表單須要加上屬性enctype="multipart/form-data"   

 name:    表單提交項的鍵.注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客          戶端編程，而在css和javascript中使用的
 value:   表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

?12345type="button", "reset", "submit" - 定義按鈕上的顯示的文本 type="text", "password", "hidden" - 定義輸入字段的初始值 type="checkbox", "radio", "image" - 定義與輸入相關聯的值　　

 checked:  radio 和 checkbox 默認被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

View Code

上傳文件注意兩點：

 1 請求方式必須是post

 2 enctype="multipart/form-data"

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')

上傳文件

View Code