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

文章目录

前言
一、http协议
- 1.1 四大特性
- 1.2 数据格式
- 1.3 响应状态码
二、html简介
三、head标签
四、body标签
五、列表标签
六、表格标签

前言前端：任何与用户直接打交道的界面都可以称之为前端
前端知识脉络:

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

一、http协议 1.1 四大特性

基于请求、响应
服务端永远不会主动给客户端发消息必须是客户端先请求服务端被动响应
基于TCP/IP作用于应用层之上的协议
应用层协议:HTTP HTTPS FTP …
无状态
服务端不保存客户端状态(纵使见她千百遍我都当她如初见)
短连接
不保持客户端与服务端之间的链接导通
补充: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>

2.4 HTML标签的分类

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

三、head标签

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

四、body标签

标题系列

h1~h6(1到6级标题)

字体系列

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

文本段落
< p > < /p >
其他

hr 水平分割线
br 换行符

特殊符号

& 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>

效果：

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

【前端|前端——http协议、html简介、head标签、body标签、列表标签、表格标签】< table >
< thead>
< tr>
< th>编号< /th>
< /tr>
< /thead>
< tbody>
< tr>
< td>1< /td>
< /tr>
< /tbody>
< /table>