什么是前端

任何与用户直接的打交道的操作界面, 都可以称之为前端
HTML ---> 内容, 网页的骨架
CSS ---> 外观, 页面的样式
JavaScript ---> 动作

软件开发架构

c/s
b/s, b/s的本质也是c/s

web服务的本质

请求和响应
浏览器输入网址再回车, 发送了哪些事情
- 朝着指定的服务器地址发送请求
- 服务端接收请求并处理
- 服务端返回处理的结果
- 浏览器接收并渲染出好看的页面展示给用户看

请求的两种方式

get请求
- 朝服务器要资源
post请求
- 朝服务器提交数据

HTTP协议

超文本传输协议 Hyper Text Transfer Protocol
规定了服务器与浏览器数据传输的数据格式

四大特性

基于TCP/IP协议作用于应用层之上的协议
基于请求响应, 一次请求对应一次响应
无状态, 不保存客户端的状态
无连接, 客户端和服务端不用建立连接
- 长连接, websocket, 长连接

数据格式

请求格式
- 请求首行 (请求方式协议版本)
- 请求头 ( 一大腿k:v键值对)
- \r\n
- 请求体 ( 敏感信息, 如密码等
响应格式
- 响应首行 (响应方式协议版本)
- 响应头 (一大推k:v键值对)
- \r\n
- 响应体 ( 给用户看的数据)

响应状态码

用数字代号来表示服务端的响应状态
- 1XX: 服务端已成功接收请求, 正在处理, 可以继续提交其他数据
- 2XX: 服务端成功响应了响应的数据(200)
- 3XX: 重定向
- 4XX: (404请求资源部存在) (403请求不符合某些条件, 无法正常访问)
- 5XX: 服务器内部错误 (500)

代码

先写好服务端
浏览器(客户端)输入127.0.0.1:8888访问客户端

# text1.txt: This is a test of HTTP

# 服务端
import socket

server = socket.socket()
server.bind(('127.0.0.1', 8888))
server.listen(5)

while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    # 响应首行
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')

    with open(r'text1.txt', 'rb') as f:
        conn.send(f.read())
    conn.close()

HTML

超文本标记语言 Hyper Text Markup Language
< > 标签狂魔...

注释

注释是代码之母
在搭建页面时, 通常会利用注释来划分区域

<!--导航条开始-->

<!--导航条结束-->
<!--侧边栏开始-->

<!--侧边栏结束-->

单行注释

<!--单行注释-->

多行注释

<!--
多行注释1
多行注释2
多行注释3
-->

HTML文档结构

head 不是给人看的, 是给浏览器看的
body 内的代码才是给人看的

<html>
    <head></head>  
    <body></body>
</html>

标签的分类

双标签, 既有头有尾
- <h1>This is the first html page I made!</h1>
自闭合标签, 既有头无尾
- <img src="test.jpg"/>

head内常用标签

title 定义网页标题 <title>Welcome to MrBigB's Website</title>
style 内部支持写css代码

<style>
        h1 {
            color: darkred;
        }
    </style>

link 引入外部css样式文件 <link rel="stylesheet" type="text/css" href="test.css"/>

/* test.css */

h2 {
    color: darkgreen;
}

script 内部可以直接写js代码, 也可以引入外部js文档
- <script>alert="Hello world!"</script>
- <script src="test.js"></script>
meta 定义网页源信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
    <style>
        h1 {
            color: darkred;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    <script src="test.js"></script>
</head>
<body>
<h1>This is the first html page I made!</h1>
<h2>HTML is fucking awesome!</h2>
<img src="https://images.cnblogs.com/cnblogs_com/bigb/1551224/o_%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA.jpg"/>
</body>
</html>

body内常用标签

h1-h6 标题标签
p 段落标签, 一个p就是一行内容
s 删除线
b 加粗
u 下划线
i 斜体
br 换行
hr 一条分割线

body内特殊符号

  空格
& &
yen; ¥
> >
< <
© ©
® ®

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's website!</title>
</head>
<body>
<h1>h1标签效果测试</h1>
<h2>h2标签效果测试</h2>
<h3>h3标签效果测试</h3>

<s>s标签效果测试</s>
<b>b标签效果测试</b>
<u>u标签效果测试</u>
<i>i标签效果测试</i>

<p>p标签效果测试</p>
<br>
我是无标签文本1上面测试的br标签效果
<hr>
我是无标签文本2上面测试的是hr标签的效果
<p>p标签效果测试</p>

<p>a &gt; b</p>
<p>a &lt; b</p>
<p>&amp;</p>
<p>&yen;</p>
<p>&copy;</p>
<p>&reg;</p>

</body>
</html>

块级标签和行内标签

行内标签, 内部文本有多大就占多大: s, i, u, b, span
- 行内标签不能嵌套行内标签和块级标签
块级标签独占一行: h1-h6, p, br, hr, div
- 块级标签内可以嵌套其他块级标签和行内标签
- 注意: p标签虽然也是块级标签, 但只能嵌套行内标签, 不能嵌套块级标签

标签的两个属性

id 标签的编号, 每一个标签都应该都一个id, 且同一个文档中, 标签的id是唯一的
class 类属性, 有点类似于面向对象的继承
- class = "c1, c2, c3" 则当前标签就会拥有c1, c2, c3的所有样式

body内重要的几个标签

div
- 是一个块标签
- 相当于一块区域, 可以往区域内填写任何内容
span
- 是一个行内标签
a 连接标签
- 跳转功能, href参数控制跳转的地址 , target参数控制是在当前页面跳转还是新打开页面(_self, _blank)
锚点功能


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
</head>
<body>
<a href="" id="a1">start</a>
<a href="http://www.baidu.com" target=_self>click me to search</a>
<div style="background-color: darkred;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkblue;height: 200px"></div>
<a href="" id="a2">middle</a>
<div style="background-color: darkblue;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkred;height: 200px"></div>
<a href="#a1">back to the start</a>
<br>
<a href="#a2">bac to the middle</a>
</body>
</html>

img 图片标签
- src 图片地址
- alt 当图片加载不出来的时候展示的提示信息
- title 鼠标悬浮在图片上后的提示信息
- width和height 设置图片展示大小, 只需设置一个即可, 默认等比缩放

  <img src="test.jpg" alt="this is a picture of a dog" title="the dog is playing" height="200"/>

列表标签

ul无序列表
- disc 实心圆(默认)
- circle 空心圆
- square 实心方块
- none 无样式
ol有序列表
- 1 数字列表
- A 大写字母
- a 小写字母
- I 大写罗马
- i 小写罗马
dl标题列表
- dt 小标题
- dd 小章节

表格标签

展示数据的时候一般都用到表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1">
    <thead> <!--表头-->
    <tr> <!--一个tr代表一行-->
        <th>name</th>
        <th>gender</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody> <!--表数据-->
    <tr>
        <td>bigb</td>
        <!--<td rowspan="2">bigb</td>--> 
        <td>male</td>
        <td>18</td>
    </tr>
    <tr>
        <td>blake</td>
        <!--<td colspan="2">blake</td>-->
        <td>female</td>
        <td>22</td>
    </tr>
    </tbody>
</table>
</body>
</html>

HTML 01

什么是前端

软件开发架构

web服务的本质

请求的两种方式

HTTP协议

四大特性

数据格式

响应状态码

代码

HTML

注释

HTML文档结构

标签的分类

head内常用标签

body内常用标签

body内特殊符号

块级标签和行内标签

标签的两个属性

body内重要的几个标签

列表标签

表格标签

猜你喜欢