前端01初步了解前端
软件开发架构
目前的软件开发架构有两种
b/s和c/s,我们现在用的架构已经慢慢在向b/s去靠拢了，就比如说微信小程序，支付宝小程序，出现小程序的原因，就是为了统一接口，让你只使用一个软件，就能在这个软件上使用多个软件，也增加了用户量
web服务器的本质
其本质就是请求和响应
当我在浏览器输入一个网址时，首先会朝着指定的服务器发送一个请求，然后服务器接收请求，并进行处理，处理完成后会返回响应，最后浏览器会接收响应并渲染成页面给用户浏览
请求方式：
-
get请求
朝服务器要资源，比如访问一个网址
-
post请求
朝服务器提交资源，比如登录功能
HTTP协议
是什么
全称是超文本传输协议，协议通俗的说就是一个规范，HTTP协议就是浏览器和服务器的沟通的一种规范
HTTP协议的作用
规定了服务端和浏览器的传输格式
为什么要有HTTP协议
首先我们知道TCP协议是基于三次握手建立连接的，具有一定的可靠性，和安全性，但是因为它需要建立连接，所以当同时有十万个客户端同时连接服务端时，一直建立连接服务端是难以承载这么多的用户量的，所以这就衍生除了HTTP协议，HTTP协议在发送请求之后会立即关闭将连接，释放服务器的资源，极大的节省了服务器的压力，同时它又时基于TCP协议之上的，所以又保留了TCP协议的可靠性安全性。
HTTP协议的四个特性
1. 基于TCP/IP作用于应用层之上的协议
2.基于请求响应
一次请求对应一次响应，就比如我们在访问百度的时候，只有点击连接服务端才会给我们响应，不点击连接就服务端就不会有响应
4.无连接
HTTP协议在请求之后会立即断开服务器连接
3. 无状态
正是由于HTTP协议在请求之后会立即与服务器断开连接，所以它不会保存用户状态，无论这个客户端来了多少次，服务端都会把它当作一个全新的客户端。也就是说服务端并不知道客户端干了啥，这些大多都是基于性能去考虑的。
所以后来就出现了cookies和sessions用来保存用户状态
HTML
什么时HTML
HTML也是一种语言，全程是超文本标记语言
使用HTML
注释
首先，使用一种语言就要先了解一下它的注释该怎么写
其语法是
<!--单行注释-->
<!--
多行注释
......
......
-->
我们在搭建页面的时候也可以用注释来划分区域
HTML的文档结构
<html>
<head></head> <!--不是给人看的 给浏览器看的-->
<body></body> <!--body内的代码才是给人看的-->
</html>
标签的分类
- 双标签
- 自闭合标签
head内的常用标签
title 定义网页标题
style 内部可以写css代码
link 可以引入外部的css文件
script 可以写js的代码，也可以引入js的代码
meta 定义网页原信息，其参数于name 和 content
body内常用标签
<h1>~<h6> 标题标签
<p> 段落标签 一个p就是一行内容
<s> 删除线
<b> 加粗
<u> 下划线
<i> 斜体
<br> 换行
<hr> 一条分割线
<b><s><u>hello<i>hello world</i></u></s></b>
body 内的特殊号
body内特殊符号
空格
& &
¥ ¥
> >
lt; <
© ©
® ®
标签分类
- 块儿级标签 h1~h6 p br hr div
- 独占一行
- 块儿级标签内可以嵌套其他块儿级和行内标签
- p标签虽然是快儿级标签 但是他的内部不能嵌套任何快儿级标签 只能嵌套行内标签
- 行内标签 s i u b span
- 内部文本多大 就占多大
- 行内不能嵌套块儿级
标签通常应该有两个属性
-
id 就类似于是身份证号 每一个标签 都应该有id值 并且在同一个html文档中
标签的id不能重复
-
class 类属性 有点类似于面向对象的继承 class = 'c1 c2 c3' 你这个标签就
会拥有c1 c2 c3的所有样式
body内重要的标签
div
一块区域 你可以往这块儿区域内填写任何内容
span
div和span是前期构建网页的基本骨架
a 链接标签
链接标签有两个共能
-
跳转功能 href参数控制跳转的地址
这个地址如果在你的机器上如果没有被点击过那么默认是蓝色
只要点过一次之后 之后颜色 都是紫色
<a href="https://music.163.com/song?id=408814900&userid=344466378">这是一个链接</a>
a标签默认是在当前窗口跳转使用target = "_blank"，可以新建窗口打开
-
锚点功能
给a标签设置id值然后在href中书写对应的a标签id值 点击即可跳转到对应的位置
<a href="" id="a1">开头</a> ...... ...... <a href="#a1">回到顶部</a>
img 图片标签
<img src="这里是链接" alt=没有图片，将就着看 title="点击图片显示的文字" width="大小">
src
-
图片地址 网上的地址也可以是你的本地图片地址
-
url(网址) 自动朝该网址发送get请求 获取图片资源
alt
当图片加载不出来的时候 展示的提示信息
title
鼠标悬浮上去之后展示的提示信息
width和height
这两个参数 你只需要设置一个 就可以 默认是等比例缩放
两个都调整的话 图片就会失真
列表标签
无序列表
<ul>
<li type="square">
《借我》 谢春花
</li>
<li>
《雾》 年年/张小九
</li>
</ul>
type参数
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
有序列表
<ol>
<li type="1">
《短叹》 房东的猫
</li>
<li>
《盼兮》 翁大涵
</li>
</ol>
type参数
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
标题列表
<dl>
<dt>
《越过山丘》
</dt>
<dd>
李宗伟
</dd>
</dl>
dt 小标题
dd 小章节
表格标签
<table border="10">
<thead>
<tr>
<th>name</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>lk</td>
<td>study</td>
</tr>
</tbody>
</table>
border 控制表格的边界
tr 控制行，一个tr 控制一行
thead 写表的字段
tbody 写表的信息
