什么是前端？
任何与用户直接打交道的操作界面都可以被称为前端，如：网页界面，手机界面....
前端的学习历程和内容：
要学习的内容：
三大重点：
浏览器中敲入网址回车发送了几件事?
1.浏览器超服务端发送请求
2.服务端接收请求
3.服务端返回相应的响应
4.浏览器接收响应 根据特定的规则渲染页面展示给用户看
服务端：连接htlm在页面展示
import socket server= socket.socket() server.bind((‘127.0.0.1‘,8080)) server.listen(5) while True: conn,addr= server.accept() data = conn.recv(1024) print(data) conn.send(b‘HTTP/1.1 200 ok\r\n\r\n‘) conn.send("hell world!".encode(‘utf-8‘)) with open(‘a.txt‘,‘rb‘) as f: res=f.read() conn.send(res) conn.close()
web需遵循的协议
超文本传输协议，规定了浏览器与服务端之间消息传输的数据格式
1.基于请求响应
2.基于TCP/IP之上的作用于应用层的协议
3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见)
4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了)
websocket 相当于是HTTP协议的一个大的补丁，它支持长连接
1.请求首行(标识HTTP协议版本,当前请求方式)
2.请求头(一大堆k,v键值对)
请求体(携带的是一些敏感信息比如 密码,身份证号...)
1.响应首行(标识HTTP协议版本,响应状态码)
2.响应头(一大堆k,v键值对)
响应体(返回给浏览器页面的数据 通常响应体都是html页面)
用一串简单的数字来表示一些复杂的状态或者提示信息
1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据
2XX:服务端成功响应 你想要的数据(请求成功200)
3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302)
4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)
5XX:服务器内部错误(500)
1.get请求
朝服务端要资源(比如浏览器窗口输入www.baidu.com)
2.post请求
朝服务端提交数据(比如用户登录 提交用户名和密码)
URL:统一资源定位符(就是指网址)
HTLM部分：
htlm：超文本标记语言，要想让你的页面能够正常被浏览器显示出来，所写的页面就必须遵循htlm标记语法
浏览器只识别：htlm css js
pycharm修改标签字体颜色：
web本质：浏览器/服务器
文件（后缀名是.htlm结尾的文件，也就意味着,只要看到.htlm，那么它就是一个前端页面文件）
文件的后缀名仅仅是给人看的，计算机无所谓，因为都是二进制
HTLM注释：
<!--单行注释-->
<!--
多行注释
多行注释
-->
HTLM是什么?
是超文本标记语言,是一种用于创建网页的标记语言
扩展名:.htlm或.htm
HTLM不是什么？
HTLM是一种标记语言,它不是一种编程语言
<!DOCTYPE htlm> <htlm lang="zh-CN"> <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> </body> </htlm> </!doctype>
解释：
1:<!DOCTYPE htlm> 声明为HTLM5文档
2:<htlm>、</htlm> 是文档的开始标记和结束的标记。是HTLM页面的跟元素，在它们之间是文档的头部（head）和主体（body）。
3:<head>、</head> head内的标签，不是用来展示给用户看的，而是定义一些配置，主要是给浏览器看的。
4：<title>、</title>定义了网页标题，在浏览器标题栏显示。
5：<body>、</body> body内的标签 就是浏览器展示给用户看的内容
在pycharm里输入title直接按住TAB键 <title>、</title>
.HTLM标签是由尖括号包围的关键字，如<htlm>、<div>等
.HTLM标签通常是成对的出现的，比如：<div>和<div>,第一个标签开始，第 二个标签是结束符，结束符会由斜线。
.<标签名 属性1=“属性值1” 属性2=“属性值2”....>内容部分</标签名>
.<标签名 属性1=“属性值1” 属性2=“属性值2”..../>
title：用来显示网页标题
style：用来控制样式的，内部支持写css代码
script：内支持写js代码，也支持导入外界的js文件
link：专门用来引入外部的css文件
1.双标签(<h1></h1> <a></a>)
2.单标签(自闭和标签 <img/>)
（1）.快儿级标签（独占浏览器一行）
div p h
1.块儿级标签可以修改长度
2.块儿级标签内部可以嵌套任意的块级标签
总结：
只要是块儿级标签，都是可以嵌套行 内的标签
p标签只能嵌套行内，其他块儿级可以嵌套任意的块儿级标签
（2）.行内标签（自身文本多大就占多大）
sapn b s i u
body内常用的标签
h 标签：标题标签
p标签：段落标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--><hr>
| 内容 | 对应代码 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
div标签用来定义一个块级元素，并无实际意义，主要通过CSS样式为其赋予不同的表现。
span 标签用来定义内联（行内）元素，并无实际意义......
src存放的是图片的路径（该路径可以是本地的也可以是网上的）
1.也可以是url(会自动请求该url获取相应数据)
2.也可以直接存放图片的二进制数据，会自动转换成图片
alt 当图片加载不出来的时候，显示的提示信息
title 当鼠标悬浮在图片上 提示信息
height、width 当你指定一个参数的时候，另一个会等比例缩放
href 后面存放 url 的时候 点击跳转到该 url
（如果该连接没有被点过，那么默认是蓝色，只要点过一次之后都是紫色）
target 默认是_self 当前页面跳转
_blank 新建页面跳转
锚点功能（回到顶部）
href 还可以写另一个a标签的id值，点击就会跳转到id对应的a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery-3.4.1.js"></script> </head> <body> <h1>宁</h1> <h2>静</h2> <h3>致</h3> <h4>远</h4> <h5>路</h5> <h6>漫</h6> <h7>漫</h7> <h8>其</h8> <h9>修</h9> <h10>远</h10> <h11>兮</h11> 孟母三迁 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>人生得意需尽欢，莫使金樽空对月</p> <p>人生得意需尽欢，莫使金樽空对月</p> <p>人生得意需尽欢，莫使金樽空对月</p> 等你下课 超人不会飞 <p>人生得意需尽欢，莫使金樽空对月</p> <br> <p>人生得意需尽欢，莫使金樽空对月</p> <hr> <p>人生得意需尽欢，莫使金樽空对月</p> </body> </html>
每一个标签都应该有三个比较重要的属性
1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复
2.class值 该值就类似于面向对象里面的继承 可以写多个
3.style(不是必备) 支持在标签内直接写css代码 属于行内样式 优先级最高
补充 任何标签都支持自定义属性 !
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery-3.4.1.js"></script> </head> <body> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2215934588,2652507557&fm=26&gp=0.jpg" alt="校花"> <stript> <p><a href="http://xiaohuar.com"> 点击有你好看哦！</a></p> </stript> <div>div <div>div1</div> <div>div2 <p>p <a href="https://www.luffycity.com">a</a> </p> </div> </div> <span>span</span> <a href="" id="d1">顶部</a> <!--> <div style="height: 100px;background-color: black"></div> <a href="" id="d2" class="c1">中间</a> <div style="height: 200px;background-color: green"></div> <a href="#d2">会到中间</a> <div style="height: 150px;background-color: yellow"></div> <a href="#d1" username="jason" password="123">点我回到顶部</a> </body> </html>
网页效果：
1.无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性：
2.有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性：
3.标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jQuery-3.4.1.js"></script> </head> <body> <p>无序列表</p> <!--<ul>type="circle"</ul>--> <ul>type="square" <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul> <p>有序列表</p> <ol> type="I" start="2" <li>aa</li> <li>bb</li> <li>cc</li> </ol> <p>标题列表</p> <dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl> </body> </html>
演示页面效果：
原文：https://www.cnblogs.com/Gaimo/p/11509633.html