前端学习(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