前端學習之HTML

    HTML(htyper text markup language)即超文本標記語言。超文本: 就是指頁面內能夠包含圖片、連接,甚至音樂、程序等非文字元素。標記語言: 標記(標籤)構成的語言。javascript

1、HTML文檔結構

    HTML文件固定結構以下css

<!DOCTYPE HTML>
<html>
    <head>...</head>
    <body>...</body>
</html>

     首先,<!DOCTYPE HTML>是文檔聲明,必須寫在HTML文檔的第一行,位於<html>標籤以前。若是頁面添加了<!DOCTYPE html>,那麼就等同於開啓了標準模式,瀏覽器就得老老實實的按照W3C的html

標準解析渲染頁面,這樣一來,你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。java

    一、<html></html> 稱爲根標籤,全部的網頁標籤都在<html></html>中。python

    二、<head></head> 標籤用於定義文檔的頭部,它是全部頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標籤django

    三、在<body>和</body>標籤之間的內容是網頁的主要內容,如<h1>、<p>、<a>、<img>等網頁內容標籤,在<body>標籤中的內容(圖中淡綠色部份內容)最終會在瀏覽器中顯示出來。編程

2、標籤介紹

 一、什麼是標籤
一、是由一對尖括號包裹的單詞構成 例如: <html>  全部標籤中的單詞不可能以數字開頭.
二、標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
三、標籤分爲兩部分: 開始標籤<a> 和 結束標籤</a>. 兩個標籤之間的部分 咱們叫作標籤體.
四、有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/> <hr/> <input /> <img />
五、標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>
二、標籤的屬性
一、一般是以鍵值對形式出現的. 例如 name="aaaa"
2、屬性只能出如今開始標籤 或 自閉和標籤中
三、屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="aaaa"
四、若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly
三、標籤分類

    標籤能夠分爲塊級標籤和內聯標籤json

    塊級標籤:顧名思義就是以塊顯示的元素,高度寬度都是能夠設置的。好比咱們經常使用的<div>、<p>、<ul>默認狀態下都是屬於塊級元素。塊級元素比較霸道,默認狀態下每次都佔據一整個行,後面的內容也必須再新起一行顯示。固然非塊級元素也能夠經過css的display:block;將其更改爲塊級元素。此外還有個特殊的,float也具備此功能。後端

    block(塊)元素的特色:瀏覽器

1、老是在新行上開始;
二、寬度缺省是它的容器的100%,除非設定一個寬度。
三、它能夠容納內聯元素和其餘塊元素
四、佔據整行,自帶換行效果。除了div之外,通常塊級標籤都會有內外邊距,寬度和高度

    常見的塊級標籤:<h1-h6></h1-h6>,<p></p>,<div></div>

    內聯標籤:通俗點來講就是文本的顯示方式,與塊級元素相反,內聯元素的高度寬度都是不能夠設置的,其寬度就是自身文字或者圖片的寬度。咱們經常使用到的<a>、<span>、<em>都屬於內聯元素。內聯元素的顯示特色就是像文本同樣的顯示,不會獨自佔據一個行。固然塊級元素也能變成內聯元素,那就是經過css的display:inline;和float來實現。 

    inline元素的特色:

1、和其餘元素都在一行上;
2、寬度就是它的文字或圖片的寬度,不可改變
三、內聯元素只能容納文本或者其餘內聯元素

    常見的內聯標籤:<span></span>,<a></a>,<img/>

    注意:在內聯標籤中,有一個標籤,img標籤,是有邊距和寬度和高度的,叫行內塊級標籤

 3、基本標籤

一、head標籤

    head標籤都放在頭部分之間。這裏麪包含了:<title>、<meta><link>,<style>

一、<title>:指定整個網頁的標題,在瀏覽器最上方顯示。
二、<meta>:提供有關頁面的基本信息
三、<link>:定義文檔與外部資源的關係。
四、<style>:定義內部樣式表與網頁的關係

      meta標籤介紹

      元素可提供有關頁面的原信息(mata-information),針對搜索引擎和更新頻度的描述和關鍵詞。提供的信息是用戶不可見的。 meta標籤的組成:meta標籤共有兩個屬性,它們分別是http-equiv屬性和name屬性,不一樣的屬性又有不一樣的參數值,這些不一樣的參數值就實現了不一樣的網頁功能。

      (1)http-equiv屬性

        它用來向瀏覽器傳達一些有用的信息,幫助瀏覽器正確地顯示網頁內容,與之對應的屬性值爲content,content中的內容其實就是各個參數的變量值。

<!--重定向 2秒後跳轉到對應的網址,注意分號-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

      (2)name屬性

        主要用於頁面的關鍵字和描述,是寫給搜索引擎看的,關鍵字能夠有多個用 ‘,’號隔開,與之對應的屬性值爲content,content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />

這些關鍵詞,就是告訴搜索引擎,這個網頁是幹嗎的,可以提升搜索命中率。讓別人可以找到你,搜索到。 
<meta name="Description" content="網易是中國領先的互聯網技術公司,.........................................。" />
只要設置Description頁面描述,那麼百度搜索結果,就可以顯示這些語句,這個技術叫作SEO(search engine optimization,搜索引擎優化)。

       非 meta標籤 

       如下標籤都屬於非meta標籤

    <title>oldboy</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script> 

 二、body標籤

想要在網頁上展現出來的內容必定要放在body標籤中。

(1)基本標籤
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.

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

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角表.

<br>:換行.

<hr>:水平線

<div><span>
(2)圖形標籤: <img> 
src: 要顯示圖片的路徑.

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

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

width: 圖片的寬

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

一個網頁除了有文字,還會有圖片。咱們使用<img/>標籤在網頁中插入圖片

語法

<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息,鼠標放在上面會顯示" />

能夠爲圖片設置寬度(width)和高度(height),不設置就顯示圖片默認的寬度和高度

<img src="1.jpg" alt="圖片加載失敗時顯示的內容" title = "提示信息,鼠標放在上面會顯示" style="width:500px;height:500px" />

 

(3)超連接標籤(錨標籤)<a>

      超級連接<a>標記表明一個連接點,是英文anchor(錨點)的簡寫。它的做用是把當前位置的文本或圖片鏈接到其餘的頁面、文本或圖像

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

target: 打開目標方式 。 _blank :新建標籤窗口頁,設置此屬性,點擊錨文本後對應新建標籤網頁窗口卡打開對應地址 。  _parent:父級打開網頁,此屬性能夠理解爲本頁網頁重新載入錨文本的網頁,針對html框架iframe網頁中,整個網頁將從新載入打開目標網址地址

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

用於跳轉 href : #id.(錨)

例子:

  <a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
  <a href="a.zip">下載包</a>

 

      錨跳轉例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--用css設置對應div標籤樣式-->
    <style>
        #div1{
            height: 500px;
            background-color: #cc3399;
        }
        #div2{
            height: 500px;
            background-color: yellow;
        }
        #div3{
            height: 500px;
            background-color:blue;
        }
    </style>
</head>
<body>

<div id="div_top">開始</div>
<!--點第一章後會直接跳轉到id='div1'的div標籤的內容處-->
<a href="#div1">第一章</a>
<a href="#div2">第二章</a>
<a href="#div3">第三章</a>

<div id="div1">第一章</div>
<!--點返回後會直接跳轉到id='div_top'的div標籤的內容處-->
<a href="#div_top">返回</a>

<div id="div2">第二章</div>
<a href="#div_top">返回</a>
<div id="div3">第三章</div>
<a href="#div_top">返回</a>

<div href="#div_top">test</div>
</body>
</html>
View Code
 (4)列表標籤ul,ol

    網站頁面上一些列表相關的內容好比說物品列表、人名列表等等均可以使用列表標籤來展現。一般後面跟<li>標籤一塊兒用,每條li表示列表的內容。

    <li>標籤訂義和用法:
<li> 標籤訂義列表項目
<li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>) 中
    <ol>:ordered listsde的縮寫 有序列表。

    有序列表,編號列表標記。其功能是將文字段落向內縮進,並在段落的每一個項目前面加上1,2,3 有順序的數字。<ol>標記必須搭配<li>標記使用。

    ol標籤的屬性:
type:列表標識的類型
    1:數字
    a:小寫字母
    A:大寫字母
    i:小寫羅馬字符
    I:大寫羅馬字符

start:規定有序列表的起始值
    默認爲1
    ol標籤示例
<ol type="1" start="2">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

顯示:
  2.咖啡
  3.牛奶
  4.茶
View Code
    <ul>:unordered lists的縮寫 無序列表

    無序列表,其功能是將文字段落向內縮進,並在段落前面加上圓形或空心圓形或方塊等項目符號,以達到醒目的效果。<ul>必須搭配<li>標記使用。

    ul標籤的屬性:
type:列表標識的類型
    disc:實心圓(默認值)
    circle:空心圓
    square:實心矩形
    none:不顯示標識
    ul標籤示例
<ul type="circle">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ul>


 
View Code

    顯示:

    <dl>  自定義列表

    列表項包含在<dt></dt>標籤對中,<dd></dd>與定義項對應的每一個定義,自定義列表以<dl></dl>定義,項目前有符號縮進

     dl標籤示例
<dl>
    <dt>第一章</dt>
    <dd>111</dd>
    <dd>222</dd>
    <dd>333</dd>
    <dt>第二章</dt>
    <dd>444</dd>
    <dd>555</dd>
    <dd>666</dd>
</dl>
View Code

    顯示

 
(5)表格標籤: <table>

       表格由<table> 標籤來定義。每一個表格均有若干行(由 <tr> 標籤訂義),每行被分割爲若干單元格(由<td>標籤訂義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。

border: 表格邊框.
 
cellpadding: 內邊距
 
cellspacing: 外邊距.
 
width: 像素 百分比.(最好經過css來設置長寬)
 
<tr>: table row
 
         <th>: table head cell
 
         <td>: table data cell
 
rowspan:  單元格豎跨多少行   合併行(豎着合併)
 
colspan:  單元格橫跨多少列(即合併單元格)   合併列(橫着合併)
 
<th>: table header <tbody>(不經常使用): 爲表格進行分區.
    示例
<div class="table">
        <table border="1" cellspacing="0">
            <!--表格頭-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列,【注意】這裏使用的是th-->
                    <th></th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <!--表格主體-->
            <tbody>
                <!--表格行-->
                <tr>
                    <td rowspan="3">上午</td>
                    <!--表格列,【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列,【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列,【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td rowspan ="2">下午</td>
                    <!--表格列,【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列,【注意】這裏使用的是td-->
                    <td>語文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td colspan="6">課程表</td>
                </tr>
            </tfoot>
        </table>
    </div>
View Code
(6)表單標籤<form>

    表單是一個包含表單元素的區域。表單元素是容許用戶在表單中輸入內容,好比:文本域(textarea)、輸入框(input)、單選框()

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

    語法:

<form>容許出現表單控件</form>

表單可以包含 input 元素,好比文本字段、複選框、單選框、提交按鈕等等。
表單還能夠包含textarea、select、fieldset和 label 元素。
    一、表單屬性

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

     action: 表單提交到哪. 通常指向服務器端一個程序,程序接收到表單提交過來的數據(即表單元素值)做相應處理

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

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

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

<form action="/host/add/"  method="post">
    
</form>
    二、表單元素

    語法:

<input  type="text"(input元素類型)name="fname"(input元素名稱) 
value="text"(input元素的值)/>

 

        <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 屬性的用法也不一樣:
1
2
3
4
5
type = "button" "reset" "submit"  -  定義按鈕上的顯示的文本
 
type = "text" "password" "hidden"  -  定義輸入字段的初始值
 
type = "checkbox" "radio" "image"  -  定義與輸入相關聯的值  
 checked:  radio 和 checkbox 默認被選中

 readonly: 只讀. text 和 password

 disabled: 對所用input都好使.

     經常使用的例子:

文本框-語法 <p>姓名: <input  type="text"(文本框)  name="userName"(文本框名稱) value="用戶名"(文本框初始值通常不寫) size="30"(文本框長度) maxlength="20"(文本框可輸入最多字符) /> </p> 密碼框-語法 <p>密碼:<input  type="password "(密碼框)  name="pass"(密碼框的名稱)  size="20"(密碼框的長度) /></p> 單選按鈕-語法 <p><input name="gen" type="radio"(單選按鈕框) value=""(值)  checked(單選按鈕選中狀態)  />男</p>
<p><input name="gen" type="radio" value="" />女</p> 複選框-語法 <p><input type="checkbox"(複選框) name="interest" value="sports"(值)/>運動</p>
<p><input type="checkbox" name="interest" value="talk" checked(複選框選中狀態) />聊天</p>
<p><input type="checkbox" name="interest" value="play"/>玩遊戲</p> 按鈕-語法 <input type="reset" (重置按鈕) name="butReset"  value="reset按鈕"(按鈕上顯示的文字)>
<input type="submit"(提交按鈕) name="butSubmit" value="submit按鈕">
<input type="button"(普通按鈕) name="butButton" value="button按鈕"/>
多行文本域-語法
<textarea(多行文本域)  name="showText"  cols="x"(顯示的列數)  rows="y"(顯示的行數)>文本內容 </textarea  >

         <select> 下拉選標籤屬性 

name:表單提交項的鍵.

          size:選項個數

          multiple:multiple    multiple設置之後實現多選效果,ctrl+鼠標左鍵進行多選

                 <option> 下拉選中的每一項 屬性:

                       value:表單提交項的值.   selected: selected下拉選默認被選中

                 <optgroup>爲每一項加上分組

     示例

<!--選擇框-->
            <!--滾動列表 multiple設置之後實現多選效果,ctrl+鼠標左鍵進行多選-->
            <p>籍貫:
                <select name="sel" size="3" multiple>
                    <option value="廣州" selected>廣州</option>
                    <optgroup label="深圳">
                         <option value="羅湖區">羅湖區</option>
                         <option value="福田區">福田區</option>
                    </optgroup>

                    <option value="北京">北京</option>
                    <option value="上海">上海</option>

                </select>
            </p>
            <!--下拉列表-->
            <p>意向工做城市:
                <select name="sel">
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="廣州" selected>廣州</option>
                </select>
            </p>
View Code

        <label>   

    在HTML中<label>標籤不會向用戶展現任何特殊內容,它的做用是把本身與其餘標籤"綁定"起來,也能夠說是與其餘元素關聯到一塊兒。

    <label>與其餘元素關聯的方式有兩種:

一、顯式聯繫:顯式聯繫經過<label>的 "for" 屬性和目標標籤的 ID 來完成
二、隱式聯繫:隱式聯繫可經過標籤嵌套完成

    顯示聯繫例子:

<label for="www">姓名</label>
<input id="www" type="text">

 4、和Django進行數據交互

    django的使用就很少介紹了,經過django相關命令建立project,而後建立app,編寫url以及views.py

url設置
url(r'^learn/$',learn)

views.py

from django.http import HttpResponse
from django.views.decorators import csrf
import requests

def learn(request):
    #if request.method == "POST":    
    print(request.POST)
    return HttpResponse('ok')
django部分代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<form action="http://192.168.149.129:8080/learn/"  method="post">
    
   <p>姓名: <input  type="text"  name="username")  size="30" maxlength="20" /> </p>
    <p>密碼:<input  type="password "  name="pass")  size="20" /></p>

    <p><input name="sex" type="radio" value=""  />男</p>
    <p><input name="sex" type="radio" value="" />女</p>

     <p><input type="checkbox" name="hobby" value="sports"/>運動</p>
     <p><input type="checkbox" name="hobby" value="talk" />聊天</p>
     <p><input type="checkbox" name="hobby" value="play"/>玩遊戲</p>
    <!--選擇框-->
            <!--滾動列表 multiple設置之後實現多選效果,ctrl+鼠標左鍵進行多選-->
            <p>籍貫:
                <select name="jiguan" size="3" multiple>
                    <option value="羅湖區">羅湖區</option>
                    <option value="福田區">福田區</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>

                </select>
            </p>
            <!--下拉列表-->
            <p>意向工做城市:
                <select name="city">
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>

                </select>
            </p>
    <input type="reset"  name="butReset"  value="重置">
    <input type="submit" name="butSubmit" value="提交">
</form>
</body>
</html>
html代碼

    打開html頁面填入數據提交,django便可獲取到用戶輸入的數據

 經過django後端能夠看到程序後端已經拿到用戶輸入的相關數據,而後根據業務邏輯代碼便可進行相關數據處理

<QueryDict: {'username': ['admin'], 'pass': ['123456'], 'sex': [''], 'hobby': ['sports', 'play'], 'jiguan': ['北京'], 'city': ['上海'], 'butSubmit': ['提交']}>

     文件上傳

    實現django獲取用戶上傳的文件而後寫入服務器上

     相關代碼

    建立一個form表單,須要特別注意的是,在有文件上傳的form表單中,method屬性必須爲post,並且必須指定它的enctype爲"multipart/form-data",代表不對字符進行編碼。只有設置了enctype,這樣當request方法是POST時,處理這個form的view中才能接受到request.FILES中的文件數據,能夠經過request.FILES['file']來存取。若是不設置這個屬性,request.FILES則爲空。具體的代碼以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<form action="http://192.168.149.129:8080/learn/"  method="post" enctype="multipart/form-data">

<p><input type="file" name="txt"></p>

    <input type="reset"  name="butReset"  value="重置">
    <input type="submit" name="butSubmit" value="提交">
</form>
</body>
</html>
html代碼
from django.shortcuts import render
# Create your views here.

from django.http import HttpResponse
from django.views.decorators import csrf
import json
import requests
import re
import os


def upload(request):
    #if request.method == "POST":
    print(request.POST)
    print(request.FILES)
    obj = request.FILES.get('txt',None)  ## 獲取上傳的文件,若是沒有文件,則默認爲None 
    print(obj)
    if not obj:
        return HttpResponse("no files for upload!")
    print(obj.name)
    f = open(os.path.join('file',obj.name), 'wb')
    for chunk in obj.chunks():
        f.write(chunk)
    f.close()
    return HttpResponse('ok')
django相關代碼

    說明:

    對於上傳的文件須要經過request.FILES["txt"]或者request.FILES.get("txt", None)來訪問,上傳的文件是保存在FILES這個字典中的

    obj.read():從文件中讀取整個上傳的數據,這個方法只適合小文件;
    obj.chunks():返回一個上傳文件的分塊生成器,按塊返回文件,經過在for循環中進行迭代,能夠將大文件按塊寫入到服務器中;
    obj.multiple_chunks():這個方法根據myFile的大小,返回True或者False,當myFile文件大於2.5M(默認爲2.5M,能夠調整)時,該方法返回True,不然返回False,所以能夠根據該方法來選擇選用read方法讀取仍是採用chunks方法

    obj.name:這是一個屬性,不是方法,該屬性獲得上傳的文件名,包括後綴,如:0711.txt

    obj.size:這也是一個屬性,該屬性獲得上傳文件的大小

    經過django後臺能夠看到用戶上傳文件相關信息

<QueryDict: {'butSubmit': ['提交']}>
<MultiValueDict: {'txt': [<InMemoryUploadedFile: 0711.txt (text/plain)>]}>
0711.txt

   在服務上看,文件已經上傳到相關目錄

[root@ myops]# ll file/
total 4
-rw-r--r--. 1 root root 267 Jul 12 02:34 0711.txt
相關文章
相關標籤/搜索