前端學習(1)

  • 2020 年 3 月 28 日
  • 筆記

一 首先需要寫個Socket服務器　

import socket    def main():      sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)      sock.bind(('192.168.1.5',8888))      sock.listen(5)        while True:          connection, address = sock.accept()          connection.recv(1024)            connection.sendall(bytes("HTTP/1.1 201 OKrnrn","utf8"))          with open('helloworld.html','rb') as f:              data = f.read()              connection.sendall(data)            connection.close()    if __name__ == '__main__':        main()

　　創建HTML文件：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Test</title>  </head>  <body>      <h1>hello world</h1>  </body>  </html>

　　這樣把Server run起來，就可以在瀏覽器中輸入IP+端口號訪問了。

 二 HTML語句

　　前端三劍客：HTML、js、css

　　1. 什麼是標籤？

　　　　a. 是由一對尖括號包裹起來的單詞，e.g: <html> 注意：不能以數字開頭；

　　　　b. 不區分大小寫，推薦使用小寫；

　　　　c. 標籤有兩個部分，開始標籤<h1>，結束標籤</h1>，兩個標籤之間的部分叫做標籤體；

　　　　d. 有些標籤只有一個，<br/><hr/>，叫做自閉和標籤，功能比較簡單；

　　　　e. 標籤不可以交叉嵌套；<h1><h2></h1></h2>

　　2. <!DOCTYPE html>標籤

　　　　使瀏覽器以標準模式渲染頁面。

　　3. <meta>標籤　　　

<meta name="keywords" content="前端學習"> #搜索的關鍵字    <meta name="description content="Damon的前端學習"> #對於頁面的描述

<meta http-equiv="Refresh" content="2;URL=htps://www.baidu.com"> #兩秒鐘夠刷新頁面，跳轉到URL頁面中

<meta http-equiv="content-Type, charset=UTFB"> #網頁的編碼格式

<mata http-equiv="X-UA-Compatible content="IE=EmulateIE7"> #兼容IE7瀏覽器

　　4. <body>標籤　

<hn>: n的取值範圍是1-6；標籤體的字體大小，逐漸減小，是用來表示標題的；  <p>: 段落標籤，包裹的內容被換行，與上行內容間有隔行；  <b><strong>: 加粗標籤；  <strike>: 在文字上加上一條中線；(不推薦使用)  <em>: 文字變成斜體；  <sup>和<sub>: 上角標和下角標；  <br>: 換行；  <hr>: 水平線；  <div>: 什麼功能都沒有；用的非常多，主要是和CSS一起使用；  <span>:
特殊符號：&nbsp;空格
　　　　　&lt;小於 &gt;大於 &quot; &copy; &reg; 網上有HTML特殊符號對照表

塊級標籤：網頁上的一塊區域都屬於這個標籤；<p><h1><table><ol><ul><form><div>都屬於塊級標籤。

內聯標籤：根據你的文本或者圖片的真是大小來分配區域。<a><input><img><sub><sup><textarea><span>

　　5. <img>圖片標籤

src: 圖片的路徑；    alt: 圖片沒有加載成功的提示    title: 鼠標懸浮在圖片上時的提示信息；    width：控制圖片的寬度；    heigth: 控制圖片的高；

　　6. <a> 超鏈接標籤

href:要連接的資源路徑 例如： <a href="https://www.baidu.com">百度</a>    用於本頁面跳轉：href="#id" id是跳轉目的地標籤的id值    target: 在新的窗口打開超鏈接。target="_blank"

　　7.列表標籤

<ul> 無序列表      <li></li>  </ul>    <ol> 有序列表      <li></li>  </ol>    <dl>      <dt></dt> 列表標題      <dd></dd> 列表項

　　8.form標籤

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

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>吳靜</title>  </head>  <body>      <h1>hello world</h1>      <img src="1.jpg" title = "美女" alt="Error">      <form action="127.0.0.1:8880/damon/" method="get" enctype="multipart/form-data"> {#method中還有post方法，都是用來傳輸數據的方法#}         <p><input type="text" name="username"></p> {#文本輸入#}            <p><input type="password" name="password"></p> {#文本輸入#}           <p><input type="button" value="press"></p> {#配合js使用，用來觸發事件#}            <p><input type="checkbox" name="hobby" value="1"></p> {#複選框#}         <p><input type="checkbox" name="hobby" value="2"></p> {#複選框#}           <p><input type="radio" name="sex" value="0"></p> {#互斥選框#}         <p><input type="radio" name="sex" value="1"> </p>{#互斥選框#}           <p><input type="file"></p> {#上傳文件#}           <p><input type="reset" value="reset"></p> {#把輸入的數據清空#}           <p><input type="file" name="test"></p>  {#提交文件(和上面的enctype一起使用, method="post"),需要後端的支持來接收文件。#}    　　　　<p><select name="city" multiple="multiple" size="2"> {#multiple用於多選 size用來最多顯示兩個#}  　　　　　　  　　　　　<optgroup label="中國">  　　　　　　<option value="beijing">北京</option>  　　　　　　<option value="tianjin">天津</option>  　　　　　　<option value="shanghai">上海</option>  　　　　　</optgroup>  　　　　</select></p>  　　　　<p><textarea rows="6", cols="5">自我介紹</textarea></p> {#6行5列#}  　　　　<label for="test">姓名</label>  　　　　<input id="test" type="text"> {#lable標籤對下面的input標籤進行關聯， for與id必須是一樣的#}  　　　　<p><input type="submit" value="submit"></p> {#提交數據#}      </form>  </body>  </html>

 　　 get方法：提交的鍵值對在地址欄url後面， 安全性較低，對提交內容長度有限制；默認值是get

　　  post方法：提交的的鍵值對，安全性較高，對提交內容的長度理論上無限制；

　　  input中的name作為傳入後端數據字典的鍵，value作為值。

VirMach 便宜 VPS

QNews

QNews