前端——http协议、html简介、head标签、body标签、列表标签、表格标签

---

前言

前端：任何与用户直接打交道的界面都可以称之为前端

前端知识脉络:

HTML、CSS、 JavaScript、 jQuery(框架)、 Bootstrap(框架)

---

一、http协议

1.1 四大特性

1. 基于请求、响应
   服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应
2. 基于TCP/IP作用于应用层之上的协议
   应用层协议:HTTP HTTPS FTP …
3. 无状态
   服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)
4. 短连接
   不保持客户端与服务端之间的链接导通
   补充:websocket(长连接) 主要用于加好友聊天等业务

1.2 数据格式

请求格式:客户端给服务端发送消息应该遵循的数据格式
1.请求首行(请求方法 协议版本)
2.请求头(一大堆k:v键值对)
3.(换行不能省略)
4.请求体(携带敏感数据:密码 身份照号…) 不是一直都有

响应格式:服务端给客户端发送消息应该遵循的数据格式
1.响应首行(响应状态码 协议版本)
2.响应头(一大堆k:v键值对)
3.(换行不能省略)
4.响应体(给浏览器展示给用户看的页面内容)

1.3 响应状态码

用数字来表示一串中文意思(简化理解)
1XX:服务端成功接收到了你的数据正在处理 你可以等待或者继续发送
2XX:200 OK 表示请求成功 服务端给出了响应
3XX:301\302 表示重定向(想访问A页面但是自动跳转到了B页面)
4XX:403请求不合法(权限不够) 404请求资源不存在
5XX:都是服务端错误 与客户端无关(代码bug、机房炸了…)
在工作中还会自定义状态码(因为默认的不够)
自定义状态码一般都是从10000开始

---

二、html简介

2.1 存放HTML代码的文件后缀名一般都是.html

2.2 HTML:超文本标记语言
它没有任何的逻辑 固定搭配 “”“所见即所得”“”

2.3 HTML文档结构
< html>
< head>给浏览器看的数据< /head>
< body>给用户看的数据< /body>
</ html>

2.4 HTML标签的分类

1.双标签:有头有尾 内容写在中间
< h1 ></ h1> < html>< /html>
2.自闭合标签:单标签
<img/ > 一般有特殊功能

---

三、head标签

• title标签 控制网页小标题
• style标签 内部支持编写css代码
• link标签 引入外部css文件
• script标签 内部支持编写js代码 也可以通过src属性引入外部js文件
• meta标签 功能非常多
  - keywords:搜索引擎查询关键字
  - description:用于展示页面搜索结果的文本描述

---

四、body标签

1. 标题系列

h1~h6(1到6级标题)

2. 字体系列

< i>斜体< /i>
< b>加粗< /b>
< u>下划线< /u>
< s>删除线< /s>

3. 文本段落
   < p > < /p >
4. 其他

hr 水平分割线
br 换行符

5. 特殊符号

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

1.布局标签

div
span
页面的编写首先就是先用布局标签占位 之后填充内容即可
ps:课下随便找几个网站查看一些div的使用

2.图片标签

img
src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度 height和width调整一个另外一个自适应调节 单位是px(像素)

3.链接标签

a
href 点击跳转到位置
可以写网址

也可以写标签id值

target 控制是否当前页跳转
默认_self当前页
设置_blank新建页

标签中的重要参数

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

---

五、列表标签

无序列表

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

效果：

• 001

---

六、表格标签

一个table标签下有thead表示表的第一行，然后是tr代表第一列，
tbody下的tr对应第二行往后的每一列。

< table >
< thead>
< tr>
< th>编号< /th>
< /tr>
< /thead>
< tbody>
< tr>
< td>1< /td>
< /tr>
< /tbody>
< /table>

编号	姓名	年龄
1	j	18
2	t	28
3	k	38