前端學習(1)

時間 2020-10-03

標籤前端學習简体版

原文原文鏈接

一首先須要寫個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 OK\r\n\r\n","utf8"))
        with open('helloworld.html','rb') as f:
            data = f.read()
            connection.sendall(data)

        connection.close()

if __name__ == '__main__':

    main()

　　建立HTML文件：css

<!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語句

　　前端三劍客：HTML、js、css前端

　　1. 什麼是標籤？

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

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

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

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

　　　　e. 標籤不能夠交叉嵌套；<h1><h2></h1></h2>socket

　　2. <!DOCTYPE html>標籤

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

　　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>Test</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>