-
前端
-
HTTP简介
-
HTTP协议
-
HTML简介
-
head内常见标签
-
body内基本标签
-
body内特殊符号
-
body内常见标签
-
标签的两大重要参数
-
列表标签
-
表格标签
-
前端
# 前端含义
前端就是任何与用户打交道的界面
各种网页页面: 淘宝页面、网游页面
后端就是不直接与用户打交道， 用来执行真正业务逻辑的代码
各种代码: Python代码、Java代码
# 前端学习路径
知识脉络:
HTML、CSS 、 JavaScript、JQuery(框架)、Bootstrap(框架)
# 比喻说明
HTML:网页的骨架
刚出生的新生儿，啥也没穿
CSS:网页的样式
长了肉，穿上小衣服，变好看了
JavaScript:网页的动态效果
学会走和跳，开始活动起来
# 那些可以充当客户端
1、自己写的python代码(TCP客户端)
2、浏览器
"""
CS架构和BS架构:BS本质上也是CS
"""
# 问题
我们自己写的TCP服务端与浏览器之间通信了，但是浏览器没有识别
# 无法访问此网站127.0.0.1 拒绝了我们的连接请求。
# 推导
不同的服务端数据的组织策略不一样，但是浏览器又要做到统一处理
所以最佳的解决措施就是制定一个标准:HTTP协议
# HTTP协议
规定了服务端和浏览器之间的数据交互格式以及其他事项
# 四大特性
1、基本请求、响应
服务端永远不会主动客户端发信息， 都是客户端先先、向服务端发送请求被动响应
2、基于TCP/IP作用于应用层之上的协议
应用层协议: HTTP、HTTPS、FTP ...
3、无状态
服务端不保存客户端状态
4、短连接
不保持客户端和服务端之间的链接导通
# websocket(长链接)， 主要是聊天业务
# 数据格式
请求格式: 客户端给服务端发送消息应该遵循的数据格式
1、请求首行(请求方法、协议版本)
2、请求头(k:v形式)
3、换行(不能省略)
4、请求体(带有敏感信息)不是一直都有
响应格式: 服务端给客户端发送消息应该遵循的数据格式
1、响应首行(响应状态码、协议版本)
2、响应头(k:v形式)
3、换行(不能省略)
4、响应体(让浏览器展示给用户看的页面内容)
# 响应状态码
1xx : 服务端成功接收到数据，正在处理
2xx : 200 ok 表示请求成功， 服务端给了响应
3xx : 301、302表示重定向(访问1页面， 但是制动跳转到2页面)
4xx : 403请求不合法(权限不够)、404请求资源不存在
5xx : 都是服务端错误,与客户端无关(代码bug)
# 以后工作还可以自定义状态码、自定义状态码一般从10000开始
eg: 聚合数据
<h1>wuhuwuhun</h1>
<a href="http://www.7k7k.com">click me</a>
<img src = "照片链接"/>
# 上面这个语法就是HTML， 用于构建网页的骨架
1、存放HTML代码的文件后缀名为.html
2、HTML:超文本标记语言
固定搭配——所见即所得
3.HTML文档结构
<html>
<head>给浏览器看的数据</head>
<body>给用户看的数据</body>
</html>
4.HTML标签的分类
1.双标签:有头有尾 内容写在中间
<h1></h1> <html></html>
2.自闭合标签:单标签
<img/> 一般有特殊功能
5.HTML注释语法
<!--单行注释-->
<!--
多行注释
--> (换行即可)
'''html由于标签非常的多 所以可以通过注释区分页面区域'''
1.如何打开html标签
1.1.新建文件里面有
1.2.pycharm快捷方式(重要)
html文件内容区右上方浏览器图标
2.html标签其实没有缩进的概念
3.在pycharm中的html文件内
编写标签只需要写表名名称即可 按tab键自动补全
4.在pycharm中的html文件内
注释的快捷键也是ctrl+?
# head里面写的都是给浏览器看的
title标签——控制网页小标题
style标签——内部支持编写css代码
link标签——引入外部css文件<link rel="stylesheet" href=""> 在herf后面写
script标签——内部支持编写js代码 也可以通过src=引入外部js文件
meta标签——功能非常多
keywords:搜索引擎查询关键字
description:用于展示页面搜索结果的文本描述
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""
1、标题
h1 ~ h6(一到六级标题)
2、字体系列
<i>斜体</i>
<b>加粗</b>
<u>下划线</u>
<s>删除线</s>
3、文本段落
<p>守得云开见月明</p>
4、其他
hr——水平分割线 单标签
br——换行符 单标签
—— 空格
> —— 大于号
< —— 小于号
& —— &符号
¥ —— 羊角符
© —— 版权
® —— 商标
"""
标签的类别:
块儿级标签:h1~h6 p 、 div
默认独占浏览器一行内
行内标签:s i u b span
自身内部文本多大就占多大
标签之间支持嵌套(最好是布局类相关标签参与)
块儿级标签可以嵌套任意标签
不属于布局标签的块儿级标签不建议嵌套块儿级标签
行内标签只能嵌套行内标签
"""
1.布局标签
div
span
2.图片标签
img
src —— 图片路径
title —— 鼠标悬浮自动展示提示信息
alt——当图片无法正常展示自动提示的信息
height —— 自定义图片高度
width —— 自定义图片宽度
# height和width调整一个另外一个自适应调节 单位是px(像素)
3.链接标签
a
href——点击跳转到位置
写网址
<a href='网址'></a>
写标签id值
<a href='页面上某个标签id值'></a>
target 控制是否当前页跳转
默认_self当前页
设置_blank新建页
# 无序列表
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
"""
无序列表是使用频率最高的列表标签
页面上只有是有规则排列的横向或者竖向内容使用的都是无序列表
"""
<table> # border="1"
<thead>
<tr> <!--tr表示一行-->
<th>编号</th> <!--th加粗文本-->
<th>姓名</th>
<th>年龄</th>
</tr>
</thead> <!--表头字段-->
<tbody>
<tr>
<td>1</td> <!--td普通文本-->
<td>熊大</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>熊二</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>光头强</td>
<td>5</td>
</tr>
</tbody> <!--表单数据-->
</table>
浙公网安备 33010602011771号