一、什么是前端
二、web服务
- （一）流程
- （二）请求方式
  - （1）get请求
  - （2）post请求
三、HTTP协议
四、HTML

一、什么是前端

任何与用户直接交互的操作界面，都可以称之为前端，比如：电脑界面，手机界面

二、web服务

（一）流程

向指定的服务器发送请求
服务端接受请求，并处理
返回相应的响应
浏览器接受响应并渲染出页面

（二）请求方式

（1）get请求

向服务器获取资源，比如域名

（2）post请求

向服务器提交数据，比如登录功能

三、HTTP协议

（一）什么是HTTP协议

超文本传输协议，规定了服务端和浏览器传输的数据格式

（二）四大特性

基于TCP/IP作用于应用层之上的协议
基于请求响应

一次请求对应一次响应
无状态

不保存客户端状态，所以才有了cookies和session
无连接

相反的长连接，比如基于websocket实现的聊天室功能

（三）数据格式

（1）请求格式

注意：请求头和请求体之间的换行（\r\n）是不能省略的

请求首行（请求方式 协议版本）
请求头 （一堆k:v键值对）

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

（2）响应格式

同请求格式

响应首行（响应方式 协议版本）
响应头（一堆k:v键值对）

请求体（给用户看的数据）

（四）响应状态码

用数字表示要返回的信息

1xx：服务端成功接收了请求，正在处理，可以继续提交其他数据
2xx：服务端成功响应了相应的数据（200）
3xx：重定向
4xx
1. 404：请求资源不存在
2. 403：用户当前不符合一些条件，无法正常访问
5xx：服务器内部错误（500）

四、HTML

（一）什么是HTML

超文本标记语言，一种标示性的语言，它不是一种编程语言，本质上是浏览器可识别的规则，包括一系列标签，统一网络上的文档格式

（二）注释

<!--注释内容-->

搭建页面时可以用注释来划分区域

（三）文档结构

<!DOCTYPE html>  # 声明是html5文档
<html lang='zh-CN'> # 开始标签
    <head></head> # 头部、给浏览器看的
    <body></body> # 主题、给人看的代码
</html> # 结束标签

（四）标签的分类

（1）双标签和自闭和标签

双标签

head标签中：title,style,script

body标签中：h,p,s,b,u,i,div,span,a,列表标签、表格标签
自闭和标签

head标签中：link,meta

body标签中：br,hr，img

（2）块级标签和行内标签

只针对于body标签

块级标签 h1~h6、p、br、hr、div、a、列表标签、表格标签

独占一行
1. 块级把标签可以嵌套其他块级标签和行内标签
2. p标签虽然是块级标签，但是不能嵌套其他块级标签，只能嵌套行级标签
行内标签 s、b、u、i、span、img
1. 内部文本多大，就占多大
2. 行内不能嵌套行内和块级标签

（五）head标签

（1） title

<title>标题</title>，定义网页标题

（2） style

<style></style>，内部支持写css代码

<style>
    h1 {
        color: green;
    }
</style>

（3） link

<link>，引入外部css样式文件

<link rel="stylesheet" href="03%20我的第一个css文件.css">

（4）script

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

<!--直接定义js代码-->
<script>
        alert('hello baby')
</script>

<!--外部引入js代码-->
<script src="04%20我的第一个js文件.js"></script>

（5）meta

<meta>，定义网页源信息，针对搜索引擎和更新频度的描述和关键字

<meta name="keywords" content="百度搜索的关键字">
<meta name="description" content="百度搜索后网页的描述">

（六）body内常用标签

（1）常用标签

1. h1~h6

<h1>标题1</h1>，标题标签

2. p

<p>文本内容</p>，段落标签，一个标签就是一行

3. s

<s>删除线</s>，删除线

4. b

<b>加粗</b>，加粗

5. u

<u>下划线</u>，下划线

6. i

<i>斜体</i>，斜体

7. br

<br>，换行

8. hr

<hr>，一条分割线

（2）body内特殊符号

特殊符号	含义
` `	空格
`&`	&
`¥`	¥
`>`	>
`<`	<
`©`	©，版权
`®`	®，注册

（3）body内重要标签

1. div 块级元素

定义一块区域，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

2. span 行内元素

定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

3. a 超链接标签

    <a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href

可以指向绝对URL、相对URL（本地中某个htm文件）和锚URL（href = '#top'，指向页面中的锚，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>

target
- __blank：表示新标签页中打开目标网页
- __self：表示当前标签中打开目标网页

4. img 图片标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

src
1. 本地图片地址
2. URL，会自动向该网址发送get请求，获取图片
alt

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

鼠标悬浮时展示的提示信息
width和height

宽度和高度，如果只设置一个，会等比例缩放

5. 列表标签

无序列表
```
<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>
```
type属性：
1. disc：实心圆点，默认值
2. circle：空心圆圈
3. square：实心方块
4. none：无样式
有序列表
```
<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>
```
type属性：
1. 1：数字列表、默认值
2. A：大写字符
3. a：小写字母
4. I：大写罗马
5. i：小写罗马

标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

6. 表格标签

展示数据

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

属性：

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

（day44）前端、HTTP、HTML的更多相关文章

day44前端开发2之css基础
web前端开发1一.前端三剑客之css 1.选择器:由标签/类/id单独或组合出现 2.作用域:{}内部区域 3.样式块:满足css链接语法的各种样式 eg:引入的基本样式 <head> ...
day44前端开发1之html基础
web前端开发1一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体标签:由< ...
构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的插件生态可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

随机推荐

layer之关闭弹窗
一. layer关闭弹出层方法1-1) 先获取某个弹出层的 index var index = layer.open(); var index = layer.alert(); var index ...
hdu6494 dp
http://acm.hdu.edu.cn/showproblem.php?pid=6494 题意一个长n字符串(n,1e4),'A'代表A得分,'B'代表B得分,'?'代表不确定,一局比赛先得11 ...
Note | PyTorch
目录 0. 教程和笔记 1. 模型操作 2. 网络设计卷积图示填充(padding) 升采样全连接层 3. 损失函数交叉熵 4. 系统或环境交互模型加载 5. 犯过的错误损失异常测试显存 ...
[转]python中np.multiply（）、np.dot（）和星号（*）三种乘法运算的区别
转自https://blog.csdn.net/zenghaitao0128/article/details/78715140 为了区分三种乘法运算的规则,具体分析如下: import numpy a ...
行为驱动：Cucumber + Java - 实现数据的参数化
1.什么是参数化实际设计测试用例过程中,我们经常会用等价类.边界值这样的方法,针对一个功能进行测试数据上的测试,比如一个输入框,正向数据.逆向数据,非法输入等等 2.Cucumber的数据驱动同上 ...
Element-ui 下拉列表全选多选时 select全选新增一个选择所有的选项
项目里经常会用到,在一个多选下拉框里新增一个选择所有的选项,例如: <!DOCTYPE html> <html lang="en"> <head> ...
kali渗透综合靶机(十二)--SickOs1.2靶机
kali渗透综合靶机(十二)--SickOs1.2靶机靶机下载地址:https://www.vulnhub.com/entry/sickos-12,144/ 一.主机发现 1.netdiscover ...
webpack4 打包静态资源
demo 代码点此,开始之前,先做点准备工作. 准备工作准备一个空文件夹,然后执行下列命令: npm init -y npm i -D webpack webpack-cli 然后创建一个 dist ...
UITableView与UITableViewCell
转自:http://blog.sina.com.cn/s/blog_4cd14afb01014j97.html UITableView用来以表格的形式显示数据.关于UITableView,我们应该注意 ...
MySQL之--修改密码
1.在Mac上安装MySQL会随机生成一个临时密码,如下: --24T02::.004376Z [Note] A temporary password is generated for root@lo ...

（day44）前端、HTTP、HTML