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


文章目录

  • 前言
  • 一、http协议
    • 1.1 四大特性
    • 1.2 数据格式
    • 1.3 响应状态码
  • 二、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>

2.4 HTML标签的分类
1.双标签:有头有尾 内容写在中间
< h1 > < html>< /html>
2.自闭合标签:单标签
一般有特殊功能
三、head标签
  • title标签 控制网页小标题
  • style标签 内部支持编写css代码
  • link标签 引入外部css文件
  • script标签 内部支持编写js代码 也可以通过src属性引入外部js文件
  • meta标签 功能非常多
    - keywords:搜索引擎查询关键字
    - description:用于展示页面搜索结果的文本描述
四、body标签
  1. 标题系列
h1~h6(1到6级标题)
  1. 字体系列
< i>斜体< /i>
< b>加粗< /b>
< u>下划线< /u>
< s>删除线< /s>
  1. 文本段落
    < p > < /p >
  2. 其他
hr 水平分割线
br 换行符
  1. 特殊符号
& 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对应第二行往后的每一列。
【前端|前端——http协议、html简介、head标签、body标签、列表标签、表格标签】< table >
< thead>
< tr>
< th>编号< /th>
< /tr>
< /thead>
< tbody>
< tr>
< td>1< /td>
< /tr>
< /tbody>
< /table>
编号 姓名 年龄
1 j 18
2 t 28
3 k 38

    推荐阅读