前端学习随笔01
前端基础知识总结
1. 网络编程的三大基石：
a. http 超文本传输协议：
三大特点：
-
- 长链接 VS 短链接
“硬件决定 软件的发展” http1.1版本后，长链接；（客户端发送请求跟服务器建立连接后，可以发送多次请求 获得服务器多次响应吗，直到客户端断开连接结束）
- 长链接 VS 短链接
-
- 单向性：
只能由客户端发起请求，建立与服务端的连接
- 单向性：
-
- 无状态：
http协议规定，整个互联网架构只做数据传输，不做数据的记录。
cookie 本地数据存储；
登录后的数据记录：session
- 无状态：
b. URL 统一资源定位符 ---“网址”
互联网中，某一资源的唯一标记
例如
https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
URI 统一资源标识符 ---“地址” 当前项目内，某一资源的唯一标记
c. html 超文本标记/标签语言
2. html
a. index
默认为当前项目的 “欢迎页”。访问的时候，地址只需要写到项目名 就可以看到欢迎页了。
当然与之相对的就是 “着陆页” ：访问的时候，地址必须写清楚要访问的页面名字。
个人实战项目介绍
“百360度” （仿 “百谷歌度”）
先上源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>百360度 一起搜索</h1>
<input id="txt1"/>
<input type="button" value="页面一起搜" onclick="clibut()"/>
<form name="bd" action="https://www.baidu.com/s" target="left">
<input type="hidden" name="wd" />
</form>
<form name="yh" action="https://www.so.com/s" target="right">
<input type="hidden" name="q" />
</form>
<iframe name="left" style="height: 500px; width: 49%;"></iframe>
<iframe name="right" style="height: 500px; width: 49%;"></iframe>
<script type="text/javascript">
function clibut(){
// alert("你点击了查询按钮！");
var txt1 = document.getElementById("txt1").value;
document.bd.wd.value=txt1;
document.yh.q.value=txt1;
document.bd.submit();
document.yh.submit();
}
</script>
</body>
</html>
具体效果如下图所示：
看到的这个错误是由于百度官网（https://www.baidu.com/）设置了 CSP 规则中的 frame-ancestors 指令，仅允许指定域名（如百度自家的聊天、开发平台等域名）嵌入它的页面。浏览器会直接拦截嵌入请求，避免未授权的框架引用。
浙公网安备 33010602011771号