软件开发架构

​ c/s

​ b/s

​ b/s本质也是c/s

​

统一接口（**）

web服务的本质

​ 请求 响应

​ 浏览器输入网址，回车发生了哪些事

​ 1 朝着指定的服务器地址发送请求

​ 2 服务端接收请求，并处理

​ 3 返回相应的响应

​ 4 浏览器接收并渲染出好看的页面给用户看

​

请求方式

​ 1.get请求

​ 朝服务器要资源

​ eg:敲www.baidu.com

​

	2.post请求

		朝服务器提交数据

		eg:登录功能

总分总

HTTP协议

​ 超文本传输协议

​ 规定了服务端与浏览器数据传输的数据格式

​

1四大特性

​ 1 基于TCP/IP作用于应用层之上的协议

​ 2 基于请求响应

​ 请求对应响应

​

3 无状态

	不保存客户状态

4 无连接

	长连接	websocket	聊天室

2 数据格式

请求格式

请求首行（请求方式 协议版本）

请求头（一大堆K:V键值对）

	请求体（敏感信息 密码 身份证号）

响应格式

	响应首行（请求方式	协议版本）

	响应头（一大堆K:V键值对）

	响应体（给用户看的数据）

3 响应状态码

用数字来表示一串文字需要表达的意思

1xx:服务端已经成功接收到了你的请求，正在处理，你可以继续提交其他数据

2xx:服务端成功响应了响应的数据（200）

3xx:重定向

4xx:（404请求资源不存在）（403 你当前不符合某一些条件，无法正常访问）

5xx:服务器内部错误（500）

HTML

超文本标记语言

文件的后缀名

文件的后缀名是给人看的，对于计算机来说，全都是二进制

之所以不同的后缀名有不同的功能，那是我们程序员自己认为的定制的

注释是代码之母

HTML的注释

​ <!---单行注释---->

​

<!----

多行注释

多行注释

多行注释

多行注释

多行注释

------->

我们在搭建页面的时候，通常会利用注释来划分区域




HTML的文档结构

​

	<head><head>不是给人看的，给浏览器看的

	<body><body>body内的代码才给人看的

<HTML>

标签的分类

​ 1 双标签（h1 ,a）

​ 2 自闭合标签（img）

​

head内常用的标签

​ title 定义网页标题

​ style 内部支持写css样式代码

​ link 引入外部css样式文件

​ script 内部可以直接写js代码，也可以引入外部js文件

​ meta 定义网页源信息

​

​

body内常用标签

​ h1~h6 标题标签

​ p 段落标签，一个p就是一行内容

​ s 删除线

​ b 加粗线

​ u 下划线

​ i 斜体

​ br 换行

​ hr 一条分割线

​

body内特殊符号

​ 空格

​ & &

​ ￥ ￥

< <

© ©

® ®

标签的分类

​ 1 块级标签 h1~h6 p br hr div

​ 独占一块

​ 1.块级标签内可以嵌套其它块级和行内标签

​ 2 注意：p标签虽然是块级标签，但是他的内部不能嵌套任何块级标签，只能嵌套行内标签（**）

​

2 行内标签	s i u b span

	内部文本多大，就占多大

	行内不能嵌套行内和块级

标签通常有两个属性

id 就类似于是身份证号，每一个标签都应该有id值，并且在同一个html文档中，标签的id不能重复

class 类属性，就有点类似于面向对象的继承 class= 'c1 c2 c3'你这个标签就会拥有c1,c2,c3的所有样式

body内重要的标签

div 一块区域，你可以往这块区域填写任何内容

span

div和span是前期构建网页的基本骨架

a 链接标签

1 跳转功能 href参数控制跳转的地址

这个地址如果在你的机器上如果没有被点击过那么默认就是蓝色

只要点过一次之后，之后的颜色都是紫色

a标签默认是当前窗口跳转

你可以指定新建窗口打开

target = '_self'

target = '_blank'

2 锚点功能

	给a标签设置id值

	然后在href中书写对应的a标签id值，点击即可跳转到对应的位置

	<a href="" id="a1">文章开头</a>

	<div style="background-color: red;height: 1000px"></div>

	<div style="background-color: green;height: 1000px"></div>

	<div style="background-color: orange;height: 1000px"></div>

	<a href="" id="a2">文章中部</a>

	<div style="background-color: black;height: 1000px"></div>

	<div style="background-color: green;height: 1000px"></div>

	<div style="background-color: orange;height: 1000px"></div>

	<a href="#a1">回到顶部</a>

	<a href="#a2">回到中部</a>

img） 图片标签

src

1 图片地址，网上的地址也可以是你的本图片地址

2 url(网址) 自动朝该网址发送get请求，获取图片资源

alt

	当图片加载不出来的时候，展示提示信息

title

	鼠标悬浮上去之后展示的提示信息

width和height

	这两个参数，你只需要设置一个就可以默认就是等比例缩放

	两个都调整的话，图片就会失真

列表标签

​ 无序列表

​ ul

​ li

​

​

type参数

	disc(实心圆点，默认值)

	circle(空心圆圈)

	square（实心方块）

	none(无样式)

有序列表(了解)

ol

li

type参数

	1 数字列表，默认值

	A 大写字母

	a 小写字母

	Ⅰ大写罗马

	ⅰ小写罗马

标题列表(了解)

dl

dt 小标题

dd 小章节

表格标签

​ 展示数据一般都用到表格标签

	<table>

		<thead>

			<tr>

				<th>username</th>

				<th>password</th>

				<th>hobby</th>

				<th>is_delete</th>

			</tr>  一个tr就表示一行

		</thead>

		<tbody>

			<tr>

				<td>jason</td>

				<td>123</td>

				<td>study</td>

				<td>0</td>

			</tr>

		</tbody>

	</table>

前端day01的更多相关文章

  1. day01 前端bootstrap框架

    day01 django框架之bootstrap框架 今日内容概要 前端框架之bootstrap 该框架支持cv编写前端页面 利用socket模块编写一个简易版本的web框架 利用wsgiref模块编 ...

  2. Day01 对前端的初步了解

    了解了工作性质以及流程 产品经理+UI+前端程序员+后端程序员+测试人员 了解了工作会做到的项目 pc端项目,后台管理系统,APP,小程序,移动端网页 了解了后续需要学到的课程 HTML+CSS Ja ...

  3. 前端练习错题day01

    <1>.css盒子模型中,padding是透明的,这一部分可以显示背景. <2>.注意&&符号左右条件先后顺序,可能会报错. <3>.在 HTML5 ...

  4. 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

    HTML5 第一天 一.什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...

  5. Jquery day01

    day01: 基础--选择器.属性和CSS.文档处理 day02: 高级--筛选.事件.效果.ajax jQuery介绍 JS类库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用 ...

  6. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  7. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

随机推荐

  1. 护网杯2019 mergeheap --pwn

    护网 又是签到 一天 这道题一开始 不懂得如何泄露 libc 信息,就蒙了  后来群里师傅也是刚刚好 做出 到这里 我就接着做了 . 先看下保护,发现  全开了 然后 就看下流程 大概 就是添加  c ...

  2. python logger日志通用配置文件

    阅读须知⚠️ 1.示例代码可直接放在项目py文件中即可使用 2.project_name,logfile_name变量需根据你的项目进行修改 3.日志输出格式format选择(可根据你的需要替换或修改 ...

  3. tcpip协议

    几个概念 1.分层(我们使用四层模型更为贴合我们的实际网络) 分层是为什么,其实和公司中职位是一样的,不同职位的人做不同的事情,然后不同职位的人合起来,一起完成了数据传输的事情. 链路层  在这个层面 ...

  4. Tomcat安装和使用

    1.Tomcat简介 Tomcat是Apache开源组织下的开源免费的中小型Web应用服务器,支持javaEE中的servlet和jsp规范. 2.Windows版安装和使用 下载地址:http:// ...

  5. 【Luogu P3834】可持久化线段树（主席树）

    Luogu P3834 可持久化数据结构就是支持在历史版本上进行查询和修改操作的数据结构. 主席树就是对线段树的改进,使之可持久化. 前置知识:动态开点线段树 我们利用权值(值域)线段树统计区间内的数 ...

  6. SQL语句实用技巧1

    --显示行号 select *, ROW_NUMBER() OVER(Order by TYPENAME ) AS RowNumber from ( select distinct TYPENAME ...

  7. 品优购详情页---产品细节模块product_detail

    结构搭建 整个大盒子产品细节模块命名为: product_detail(不给高度,注意清除浮动带来的影响) 1号盒子命名为:aside(左侧浮动,有宽带不给高度) 2号盒子命名为:detail(右侧浮 ...

  8. 最小生成树与最短路径--C语言实现

    接昨天,在这里给出图的其中一种应用:最小生成树算法(Prime算法和Kruskal算法).两种算法的区别就是:Prime算法以顶点为主线,适合用于顶点少,边密集的图结构:Kruskal算法以边为主线, ...

  9. L1 loss, L2 loss以及Smooth L1 Loss的对比

    总结对比下\(L_1\) 损失函数,\(L_2\) 损失函数以及\(\text{Smooth} L_1\) 损失函数的优缺点. 均方误差MSE (\(L_2\) Loss) 均方误差(Mean Squ ...

  10. Android 自定义饼状图

    github 地址:https://github.com/dkest/PieView 简单分析 其实根据我们上面的知识已经能自己制作一个饼状图了.不过制作东西最重要的不是制作结果,而是制作思路. 相信 ...