前端学习日记 (一)

前端介绍

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程,通过HTML、CSS、JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。它从网页制作演变而来,名称上有很明显的时代特征。
HTML用于展现网页的内容、CSS用于展现网页的外观、JavaScript用于实现一些网页动作。

WEB框架的本质

浏览器输入网址回车后都发生了什么?
浏览器(客户端)给服务端发送了一个消息,服务端在拿到了消息之后,服务端返回消息,浏览器展示页面

客户端和服务端的消息格式要一致,因此就有了HTTP协议来约束两边的消息格式。
我们可以写一个服务端来访问自定义的网页:

import socketsk = socket.socket()sk.bind(('127.0.0.1',8000))sk.listen(4)while 1: conn,addr = sk.accept() data = conn.recv(1024) #接收消息 conn.send(b'HTTP/1.1 200 OK\r\n\r\n') conn.send(b'Hello World!') #发送消息 conn.close()

复制代码

执行代码后再打开浏览器去访问127.0.0.1:8000这个网址,就可以看到下面的页面:

改变程式码:

conn.send(b'[size=6]Hello world![/size]
\n')

复制代码

这样字体就发生了改变:

发送多行的HTML代码
我们可以新建一个txt文件,把要执行的HTML代码放到里面
服务端通过文件读取HTML代码展现页面:

import socketsk = socket.socket()sk.bind(('127.0.0.1',8000))sk.listen(4)while 1: conn,addr = sk.accept() data = conn.recv(1024) #接收消息 conn.send(b'HTTP/1.1 200 OK\r\n\r\n') with open('h.txt','rb') as f: msg = f.read() conn.send(msg) conn.close()

复制代码

txt文档:

那最后的展现结果和上面是一致的
展示图片:
在网上随便找一张图片去拿到它的图片地址,然后在txt档中写下这段代码:

[img]https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFC_UkJ_78k9qpn5-JoC16WAa-phw7hF8lGsT8AVumfen3FghR&s[/img]

复制代码

执行服务端代码再刷新网页:

增加一个链接

[url=https://ieeexplore.ieee.org/Xplore/home.jsp]Open Website![/url]

复制代码

执行服务端代码再刷新网页:

WEB开发的本质:服务端、浏览器、HTML文件
同样如果要将txt档里的文件变更为html档,也是可以有相同的执行效果

服务端:

import socketsk = socket.socket()sk.bind(('127.0.0.1',8000))sk.listen(4)while 1: conn,addr = sk.accept() data = conn.recv(1024) #接收消息 conn.send(b'HTTP/1.1 200 OK\r\n\r\n') with open('h.html','rb') as f: msg = f.read() conn.send(msg) conn.close()

复制代码

常用标签

HTML是一个标准它规定了大家怎么写网页
像'...'这种格式的语言是标记语言,比如XML、HTML。标签可以分为单标签和双标签。
那像前面所写的HTML语句并不是规范的语句,接下来对它进行改进:

　　　　 [size=6]Hello world![/size]
[img]https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTFC_UkJ_78k9qpn5-JoC16WAa-phw7hF8lGsT8AVumfen3FghR&s[/img] [url=https://ieeexplore.ieee.org/Xplore/home.jsp]Open Website![/url]

复制代码

标签分析
我们可以直接创建一个新的HTML档,里面就有已经写好的HTML结构

Title

复制代码

...表示这个网页的主要语言是英文,那如果是中文可以改成...
表示编码方式为UTF-8
...表示网页的标题
表示注释
...表示内部的样式表

My first HTML FILE a{ color:red; } [url=http://192.168.1.133:88/iotbbs/"]Hello world![/url]

复制代码

网页结果:

表示JS代码或引入JS外部文件

My first HTML FILE a{ color:red; } [url=http://192.168.1.133:88/iotbbs/"]Hello world![/url]

复制代码

网页结果:

引入外部样式表文件,比如说把CSS写入另外一个文件中在通过link给引入进来
先创建一个c.css文件再写入代码:

a{ color : green;}

复制代码

再在html文件中引入这个css文件:

My first HTML FILE [url=http://192.168.1.133:88/iotbbs/"]Hello world![/url]

复制代码

最后网页上显示:

定义网页元信息

My first HTML FILE [url=http://192.168.1.133:88/iotbbs/"]Hello world![/url]

复制代码

...之间的差异

[size=6]This is h1![/size]
[size=5]This is h2![/size]
[size=4]This is h3![/size]
[size=3]This is h4![/size]
[size=2]This is h5![/size]
[size=1]This is h6![/size]
This is h!

复制代码

网页效果:

src表示图片的来源地址,alt表示当图片失效后的一些处理,title表示图片的提示
...表示可以保留当前的页面下开启一个新的页面

[url=https://ieeexplore.ieee.org/Xplore/home.jsp]Open Website![/url]

复制代码

制作到顶部到底部效果:

[url=http://192.168.1.133:88/iotbbs/#a2]到底部[/url] [size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[size=6]aaaaaaaaa[/size]
[url=https://ieeexplore.ieee.org/Xplore/home.jsp]Open Website![/url] [url=http://192.168.1.133:88/iotbbs/#a1]到顶部[/url]

复制代码

其他常用标签
1....表示字体加粗
2....表示斜体
3....表示加下划线
4....表示加删除线

你好! [b]你好![/b] [i]你好![/i] [u]你好![/u] 你好!

复制代码

5....
表示一个段落
6.
表示换行
7.表示水平线

特殊字符
1.空格
2.>　　>

<strong>3. [tr] 姓名年龄性别爱好 [/tr] [tr] [td]Alice[/td] [td]18[/td] [td=1,2]Male[/td] [td]Football[/td] [/tr] [tr] [td]Bob[/td] [td]19[/td] [td]Skiing[/td] [/tr] [tr] [td]Maria[/td] [td]20[/td] [td=2,1]Female[/td] [/tr] [/table][/code]网页效果:

快捷写法
1.h1*4+Tab