(day44)前端、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
- 404:请求资源不存在
- 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、列表标签、表格标签
独占一行
- 块级把标签可以嵌套其他块级标签和行内标签
- p标签虽然是块级标签,但是不能嵌套其他块级标签,只能嵌套行级标签
行内标签 s、b、u、i、span、img
- 内部文本多大,就占多大
- 行内不能嵌套行内和块级标签
(五)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
- 本地图片地址
- URL,会自动向该网址发送get请求,获取图片
alt
当图片加载不出来的时候,展示的提示信息
title
鼠标悬浮时展示的提示信息
width和height
宽度和高度,如果只设置一个,会等比例缩放
5. 列表标签
无序列表
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul>
type属性:
- disc:实心圆点,默认值
- circle:空心圆圈
- square:实心方块
- none:无样式
有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性:
- 1:数字列表、默认值
- A:大写字符
- a:小写字母
- I:大写罗马
- 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 ...
随机推荐
- 42 在Raspberry Pi上安装dlib表情识别
https://www.jianshu.com/p/848014d8dea9 https://www.pyimagesearch.com/2017/05/01/install-dlib-raspber ...
- Nginx Rewrite域名及资源重定向
一.正则匹配 1.匹配规则 ^$ 标识符匹配后面跟-一个字符串.匹配字符串后将停止对后续的正则表达式进行匹配,如location ^~/images/,在匹配了/images ...
- Paper | Model-blind video denoising via frame-to-frame training
目录 故事 本文方法 流程 训练 实验 发表在2019年CVPR. 核心内容:基于Noise2Noise思想,这篇文章致力于无监督的视频盲去噪:是的,连噪声样本都不需要了. 这篇文章写作和概括太棒了! ...
- spring cloud启动zipkin,报错maven依赖jar包冲突 Class path contains multiple SLF4J bindings
项目启动报错: Connected to the target VM, address: '127.0.0.1:59412', transport: 'socket' SLF4J: Class pat ...
- 基于Django的Rest Framework框架的频率组件
0|1一.频率组件的作用 在我们平常浏览网站的时候会发现,一个功能你点击很多次后,系统会让你休息会在点击,这其实就是频率控制,主要作用是限制你在一定时间内提交请求的次数,减少服务器的压力. modle ...
- 大话设计模式Python实现-原型模式
原型模式(Prototype Pattern):用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 一个原型模式的简单demo: #!/usr/bin/env python # -*- c ...
- python-2-条件判断
前言 python3当中的条件语句是非常简单简洁的,说下这两种:if 条件.while 条件. 一.if 条件语句 1.if 语句: # 如果条件成立,打印666 if True: print(666 ...
- CDN的智能调度,链路优化的详细解答
您的用户在请求资源的过程中,可能受到网络.地域.带宽等影响,无法保证请求一定是按照最优访问路径进行传递,猫云 CDN 通过对全网链路进行实时监控,结合自研的 GSLB 调度体系和智能路由技术,从以下几 ...
- tensorflow之tf.stop_gradient
停止梯度计算. 当在一个图中执行时, 这个op按原样输出它的输入张量. 当构建ops来计算梯度时,该op会阻止将其输入贡献考虑在内. 参数: Input: 一个张量. name: 操作的名称(可选) ...
- LuoguP5290 [十二省联考2019]春节十二响 | 启发式合并
还有33天就要高考了,我在干啥-- 题目概述 一棵有根树,每个节点有权值. 要求把所有节点分成组,具有祖先-后代关系的两个节点不能被分到同一组. 每一组的代价是所包含的节点的最大权值,最小化所有组的代 ...