今日内容概要

前端简介
HTTP简介
HTTP协议
HTML简介
head内常见标签
body内基本标签
body内特殊符号
body内常见标签
标签的两大重要参数
列表标签
表格标签

今日内容详细

一、前端简介

什么是前端什么是后端？

前端：
        任何与用户直接打交道的界面都可以称之为前端
         eg:淘宝页面游戏页面操作页面
后端：
        不直接与用户打交道的用于执行真正业务逻辑的代码
        eg:python代码 java代码 c++代码
前端的学习路径
        真正的前端工程师也需要培训六个月左右我们作为python全栈工程师只需要掌握前端最核心的知识点即可做到能看到前端代码并且将来有能力去钻研前端即可
        知识脉络:
                HTML CSS JavaScript jQuery(框架) Bootstrap(框架)
        只要学习前端看到要学’前端三剑客’>>>:HTML CSS JavaScript
        比喻说明:
        HTML：“网页的骨架
蜡笔小新不穿衣服赤裸裸的(难看)
        CSS：网页的样式
穿上衣服化好妆(好看)
        JavaScript:网页的动态效果
扭起来跳起来动起来(生动)
整个培训心路历程（课外补充）
1）信心满满我肯定能学会凭啥学不会
2）哎呦卧槽好像有点难肯定学不会
3）他喵的怎么还不毕业老子要出去挣大钱
4）我靠怎么毕业了我啥都不会

  """所有人都会经历这些阶段(也可能不经历:那是最好的)但是学得好的同学每个阶段可能只会停留一两天学的差得同学会一直停留在某个阶段 开始摆烂!!!"""

二、 HTTP简介

# 可以充当客户端的有哪些?1.自己写的python代码(TCP客户端)2.别人写的浏览器'''cs架构与bs架构:bs本质也是cs'''# 问题我们自己写的TCP服务端与浏览器之间通信了 但是浏览器不识别服务端数据# 推导不同的服务端数据的组织策略千差万别 但是浏览器却需要做到能够统一处理最佳的解决措施是统一规定一个标准>>>:HTTP协议# HTTP协议规定了服务端与浏览器之间的数据交互格式及其他事项"""如果服务端遵循HTTP协议 就可以被浏览器正常访问并展示内容如果服务端不遵循HTTP协议 浏览器就不会正常访问和展示 但是不影响服务端如果这个应用特别火爆 那么完全可以让用户下载专属的客户端(app)"""

三、HTTP协议

# 1.四大特性1.基于请求、响应服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应2.基于TCP/IP作用于应用层之上的协议应用层协议:HTTP HTTPS FTP ...3.无状态服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)4.短连接不保持客户端与服务端之间的链接导通补充:websocket(长连接) 主要用于加好友聊天等业务# 2.数据格式请求格式:客户端给服务端发送消息应该遵循的数据格式1.请求首行(请求方法 协议版本)2.请求头(一大堆k:v键值对)3.(换行不能省略)4.请求体(携带敏感数据:密码 身份照号...) 不是一直都有响应格式:服务端给客户端发送消息应该遵循的数据格式1.响应首行(响应状态码 协议版本)2.响应头(一大堆k:v键值对)3.(换行不能省略)4.响应体(给浏览器展示给用户看的页面内容)# 3.响应状态码用数字来表示一串中文意思(简化理解)1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送2XX:200 OK  表示请求成功 服务端给出了响应3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)4XX:403请求不合法(权限不够)	404请求资源不存在5XX:都是服务端错误  与客户端无关(代码bug、机房炸了...)在工作中还会自定义状态码(因为默认的不够)自定义状态码一般都是从10000开始# 以后我们进公司写后端也需要给前端提供一个手册eg:聚合数据

四、 HTML简介

<h1>hello big baby</h1>
<a href="https://www.sogo.com">click me</a>
<img src="111.jpg"/>
# 上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成)
1.存放HTML代码的文件后缀名一般都是.html2.HTML:超文本标记语言它没有任何的逻辑 固定搭配 """所见即所得"""3.HTML文档结构<html><head>给浏览器看的数据</head><body>给用户看的数据</body></html>4.HTML标签的分类1.双标签:有头有尾		内容写在中间<h1></h1>	<html></html>2.自闭合标签:单标签<img/>				一般有特殊功能5.HTML注释语法<!--单行注释--><!--多行注释-->'''html由于标签非常的多 所以可以通过注释区分页面区域'''

补充：

1.如何打开html标签1.查找并右键选择打开方式2.pycharm快捷方式(重要)html文件内容区右上方浏览器图标2.html标签其实没有缩进的概念之所以缩进是因为我们习惯了 更加美观3.在pycharm中的html文件内编写标签只需要写表名名称即可 按tab键自动补全4.在pycharm中的html文件内注释的快捷键也是ctrl+?

五、 head内常见标签

# head标签内编写的标签一般都是给浏览器看的title标签			控制网页小标题style标签			内部支持编写css代码link标签			引入外部css文件script标签		    内部支持编写js代码 也可以通过src属性引入外部js文件meta标签			功能非常多keywords:搜索引擎查询关键字description:用于展示页面搜索结果的文本描述
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""

六、 body内基本标签

"""相同的样式可能存在多种标签 区别在于语义不一样(后面再说)"""
1.标题系列h1~h6(1到6级标题)
2.字体系列<i>斜体</i><b>加粗</b><u>下划线</u><s>删除线</s>
3.文本段落<p></p>
4.其他hr 	 水平分割线br	 换行符

七、 body内特殊符号

&nbsp;		    空格
&gt;			大于号
&lt;			小于号
&amp;			&符号
&yen;			羊角符
&copy;		    版权	
&reg;			商标

八、body内常见标签

"""
标签的类别块儿级标签:h1~h6 p	div默认独占浏览器一行内 行内标签:s i u b span自身内部文本多大就占多大标签之间支持嵌套(最好是布局类相关标签参与)块儿级标签可以嵌套任意标签不属于布局标签的块儿级标签不建议嵌套块儿级标签行内标签只能嵌套行内标签
"""1.布局标签divspan# 页面的编写首先就是先用布局标签占位 之后填充内容即可2.图片标签imgsrc			图片路径title		鼠标悬浮自动展示提示信息alt	  	    当图片无法正常展示自动提示的信息height 		自定义图片高度width   	自定义图片宽度# height和width调整一个另外一个自适应调节 单位是px(像素)3.链接标签ahref	  点击跳转到位置可以写网址<a href='网址'></a>也可以写标签id值<a href='页面上某个标签id值'></a>target	控制是否当前页跳转默认_self当前页设置_blank新建页

九、标签的两大重要参数

1.id类似于身份证号 同一个html页面上标签的id值不允许重复用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)

十、列表标签

# 无序列表<ul><li>001</li><li>002</li><li>003</li><li>004</li><li>005</li></ul>
"""
无序列表是使用频率最高的列表标签页面上只有是有规则排列的横向或者竖向内容 几乎使用的都是无序列表
"""

十一、表格标签

<table ><thead><tr>  <!--tr表示一行--><th>编号</th>  <!--th加粗文本--><th>姓名</th><th>年龄</th></tr></thead>  <!--表头字段--><tbody><tr><td>1</td>  <!--td普通文本--><td>jason</td><td>18</td></tr><tr><td>2</td><td>tony</td><td>28</td></tr><tr><td>3</td><td>kevin</td><td>38</td></tr></tbody>  <!--表单数据-->
</table>