Web前端开发
一、HTML
1.1 网络传输的三大基石
URL：在www上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是www的统一资源定位标志，就是指网络地址。
HTTP协议：http是一个简单的请求-响应协议，反馈完后连接断开，请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。
HTML：超文本标记语言，即强于普通文本的与标签相关的语言，HTML组成的页面可以被浏览器解析，可以在浏览器中将页面进行展示。
1.2 网页的基本结构
定义
由多个html节点组成的树形结构，有且只有一个根节点。
格式
值用""括起来，键和值之间用空格隔开，多个值之间用,分隔。
模板
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta charset="UTF-8"/>
<meta name="keywords" content="word01,word02..."/>
<meta name="description" content="..."/>
<link rel="stylesheet" type="text/css" href="resource_url"/>
</head>
<body>
...
<script>
<charset="UTF-8",type="javascript/text",src="resources_url">
</script>
</body>
</html>
1.3 网页检查
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OmjDEwCj-1688979757763)(./…/%E5%9B%BE%E7%89%87/%E7%BD%91%E9%A1%B5%E6%A3%80%E6%9F%A5.png)]
-
Elements：标签元素
-
Console：交互输出
-
Sources：源码
-
Network：网络，每个资源加载的时间消耗
-
Performance：性能
-
Memory：存储
-
Application：缓存一些状态信息，如Local Storage（较多）,Session Storage,Cookies.存储地址，地址中又包含了多对键值。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n59s9tPV-1688979757764)(./…/%E5%9B%BE%E7%89%87/image-20230710143428135.png)]
其中值为可供采集的数据，将希望采集的数据存放在Local Storage中，当Local Storage的数据达到一定容量后，就会发送到后台，后台会以文件的方式将其记录下来。将后台的文件采集发送到大数据的组件上面。
二、HTML中标签的使用
2.1 head中的标签
head标签放置了页面的配置信息和文档的各种属性信息，
2.2 body中的标签
body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
常用标签
-
行内标签（“气球”：大小被内容撑起）
定义：包裹文本和其它行内元素的标签，不会独占一行
-
原始特征：没有宽高，不可设置宽高。实际大小由内容决定。按行显示。
-
span：没有任何的默认样式和原始特性。应用于局部。
-
label+[input]（行内标签和行内块标签组合的原因是为了扩展行内块标签的作用域）:可以用于为
<label>元素和紧随其后的<input>元素之间建立关联，以便在用户点击<label>元素时，触发与<input>元素相关的操作。for是可以去掉的。
label[for="myInput"] + input { /* 样式或操作 */ }-
a：超链接 | 锚链接
锚链接用于目录导航。（目录导航：通常出现于网页的侧边栏或者顶部的用于快速导航和浏览内容的结构化导航菜单）
<a href="https://www.jd.com/">京东</a> <a href="https://www.baidu.com/">百度</a>- 其他标签：strong（粗体）,em（斜体）
-
-
行内块标签
定义：有默认宽高并且可以可设置宽高的行内标签。
-
原始特征：有默认宽高，可设置宽高。实际大小并不由内容决定。按行显示。
-
表单：form[method=“get | post”,action=“api_url”]
-
表单元素：input
-
type：文本框中数据类型，要符合正则表达式，同时系统会匹配缓存中的类似数据；键就是name,值就是文本框中输入的内容，id用于前端脚本和表单元素作验证，通常name和id的值相同；placeholder：为文本框提示性语句
-
method：请求方式 get:显式请求(请求的内容会能在浏览器的地址栏看见) post:隐式请求（一般常用隐式请求）
action：前端通过API路径访问后台的API
提交表单会以method的方式提交action这个API路径上，后台会有API处理这个请求
-
<form action="api_url" method="get">
<input type="text" name="name" id="name" placeholder="请输入姓名"/>
<input type="password" name="pass" id="pass" placeholder="请输入密码"/>
<input type="tel" name="tel" id="tel" placeholder="请输入常用手机号"/>
</form>
-
块级标签
定义：用于组合和结构化网页内容，会独占一行。
-
原始特征：没有宽高，可设置宽高。独占一行。
-
p：块级标签，表示段落或文本块。它会独占一行，并在上下文中创建一个新的段落。应用于商品的详情介绍。
块级标签被弃用的原因是块级标签的大小包括了内边距，除了有用的标签内容外还存余无用内容。
段落首行的缩进是由样式控制的，并非由块级标签自带的。
块级标签的默认宽度为（当前浏览器的宽度-16个像素）。
<p>这是一个 <span style="color: red;">红色的</span> 文字。</p> -
具体实现
<html>
<head>
<title></title><!-- 概要 -->
<meta name="keywords" content="word01,word02,word03,..."/><!-- 由逗号分割开的关键词 -->
<meta name="description" content="..."/><!-- 具体描述 -->
<!-- 引入样式表文件（血肉） -->
<link rel="stylesheet" type="text/css" href="resource_url"/><!-- ref样式表 type内容类型 css层叠样式表 href为远程或者服务器的资源的链接 url统一资源定位符,即为平时打开的网页域名 -->
<!-- 快捷图标 -->
<link rel="icon" href="icon_url" type="image/x-icon">
...
</head>
<body>
<!-- 由标签组成的页面主体（骨架） -->
<!-- 动画|交互 -->
<script type="text/javascript">
...
</script>
<script charset="UTF-8" type="text/javascript" src="resources_url"></script> <!-- 通常需要设置字符集，防止乱码 type表示内容类型 src表示资源路径 -->
</body>
</body>
</html>
-
< meta > 用于提供关于网页的元数据，不会直接体现在网页上
-
link是为了关联样式表文件的链接的，是可以写多个的，样式是可以分离的，分离的目的是为了共享，多个页面之间有共性的东西可以卸载一个文件里面可以被多个网页取用。
-
SEO（搜索引擎优化）：title+description+Keywords三者协同优化，提高了将关键词和网页的连接强度。
-
Keywords：可供搜索引擎搜索，网页分类，网页描述等。
-
description：在title和Keywords的基础上作进一步描述。
搜索引擎在字数过长后就会进行节选，description的字数不能过多。
-
-
脚本格式为对标签，并在body的最后一行编写
一般存在两种，一种是少量脚本直接编辑为标签的内容，另一种即需要在src中添加链接的文件路径。
脚本决定了动态效果，每一个脚本实现了专项的功能。
-
两种分离
- 动静分离
动态和静态的脚本都是放在独立的文件内的
- 内外分离
即骨架body和样式表文件head-link是分离开的
三、其他补充知识
搜索引擎工作原理
搜索引擎的工作过程
1.对网页进行抓取建库
搜索引擎蜘蛛通过抓取页面上的链接访问其他网页，将获得的HTML代码存入数据库
2.预处理
索引程序对抓取来的页面数据进行文字提取、中文分词、索引等处理，为后面排名程序使用时做准备。
3.给搜索结果进行排名
用户输入关键词后，排名程序调用索引库数据，计算数据和关键词的相关性，然后按照一定格式生成搜索结果页面。
对网页进行抓取建库
方式
- 点击页面上的超链接跳转到其他页面
- 在地址栏中输入网址的URL地址跳转到对应页面
爬取过程
-
搜索引擎会同时使用多个蜘蛛对页面进行爬取，将符合标准的网页收集到数据库中，分析网页内容（价值、相关性…）
-
从A页面开始始，它爬行到A页面上，它可以获取到A页面中所有的超链接，蜘蛛再顺着这个链接进入到链接所指向的页面，再获取到这个页面上所有的超链接进行爬行抓取，这样一来，所有用超链接所关联上的网页便可以被蜘蛛都爬行一遍。
-
爬取策略有深度优先和广度优先
SEO
- 网站和页面权重
- 页面更新度
- 高质量的外链（友情链接）
- 与首页的距离
地址库
分为已爬取地址库和未爬取地址库
网页大小的单位
- “px”（像素）是绝对长度单位，表示屏幕上的一个像素点。在 Web 开发中，通常使用像素作为测量单位来确定元素的大小和位置。例如，
width: 200px;表示元素的宽度为 200 像素。 - “em” 是相对长度单位，它相对于元素的字体大小。默认情况下，1em 等于元素的字体大小。例如，如果一个元素的字体大小为 16 像素，那么
width: 2em;表示元素的宽度为 32 像素（2 * 16px）
标签编辑缩略语法
- p{…}
p{我是中国人} -> <p>我是中国人</p>
- {}*2
span{hello world}*2 -> <span>hello world</span><span>hello world</span>
- {}+{}
strong{我很强壮}+em{我站不稳} -> <strong>我很强壮</strong><em>我站不稳</em>
- a[网址]{网址名称}
a[href="https://www.baidu.com/"]{百度} -> <a href="https://www.baidu.com/">百度</a>
- h${标题内容}*6 -> $代表一个从1自增的数字 生成六级标题，符合块级元素的特性
h${标题}*6 -> <h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
