1. node
1. nodejs
跨平台脚本语言。可做前端，可做后端。相当于JDK
1.1 安装
-
安装版不需要配置环境变量
-
非安装版：
- path
- node -v
- npm -v
– 更新npm
npm install npm;
-- 速度变快： cnpm方式
-- npm 命令 install 安装 -g 全局 -i局部 cnpm要安装的东西 --registry注册到 ： 安装cnpm指定指向淘宝
npm install -g cnpm --registry=https://registry.npm.taobao.org
—网太差等着。讲别的
2. HTML
2.1 HTTP协议： 超文本传输协议
HTTP协议基于TCP/IP; 给浏览器用的。 web开发—BS (browser–server)
2.2 HTML: 时一种特殊的XML超文本标记语言
XML: 可扩展标记语言
-
特点
-
只有一个根
-
大小写敏感
-
合理嵌套
-
属性值用双引号
-
<abc abc="abc:abc">hell world</abc>
abc 标签，标记，元素(getElement) -ElementUI - GUI
abc蓝色： 属性属性名
“abc”"abc:abc": 属性值
hello world：内容
<abc /> ：没有内容的标签br hr input img
<div style="color:red; font-style: italic">afad</div>
color:样式的属性
red: 样式的值
HTML: 超文本标记语言： SQL不区分大小写，HTML也不区分大小写
- 特点:
- 只有一个根
- 大小写不敏感
- 合理嵌套（尽量吧）
- 双引号可以不写
- 只有一个根
请求头：
GET / HTTP/1.1 GET请求的类型
Host: www.baidu.com
Connection: keep-alive
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36 -客户端信息
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br --压缩类型
Accept-Language: zh-CN,zh;q=0.9 -- 本地语言环境
Cookie: BIDUPSID=2BB28B1C47298CA1A17784903EBE10C8; PSTM=1614732172; BAIDUID=2BB28B1C47298CA1FE174CF20D3109AE:FG=1; BD_UPN=12314753; ispeed_lsm=2; __yjs_duid=1_fbdb7f6867f950a3064fe9e75266a8221617268682770; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; BAIDUID_BFESS=2BB28B1C47298CA1FE174CF20D3109AE:FG=1; COOKIE_SESSION=3429_4_9_6_17_38_0_0_9_5_0_12_3428_0_7_0_1619315469_1619139304_1619315462%7C9%23236990_15_1619139299%7C5; H_PS_645EC=6db5RmugDxoWfqKkfhaWT9ZWglrL2DxpRxOjtLNeMjAwNpc%2FiVEBwNvds%2FM; BD_HOME=1; H_PS_PSSID=31253_33848_33855_26350_33811; BA_HECTOR=018l0halal8g0501dv1g89kkc0q
-- 客户端存储
-- 请求数据
ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E8%B5%B5%E4%B8%BD%E9%A2%96&fenlei=256&rsv_pq=fc3baa1a009b7fff&rsv_t=9abebVK%2F5uCUarum5H%2BTFDqmTIrZgI7ie6hOF5Qdc%2Fq8%2FXb18nXIUAwm9pg&rqlang=cn&rsv_enter=1&rsv_dl=ib&rsv_sug3=2&rsv_sug1=1&rsv_sug7=001&rsv_n=2
响应头：
Bdpagetype: 3
Bdqid: 0xc7780859009a94a5
Cache-Control: private
Ckpacknum: 2
Ckrndstr: 9009a94a5
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8 --类型
Date: Sun, 25 Apr 2021 02:31:46 GMT
Server: BWS/1.1
Set-Cookie: delPer=0; path=/; domain=.baidu.com --往cookie放值
Set-Cookie: BD_CK_SAM=1;path=/
Set-Cookie: PSINO=2; domain=.baidu.com; path=/
Set-Cookie: BDSVRTM=12; path=/
Set-Cookie: H_PS_PSSID=31253_33848_33855_26350_33811; path=/; domain=.baidu.com
Strict-Transport-Security: max-age=172800
Traceid: 1619317906244142311414373247389108180133
Transfer-Encoding: chunked
Vary: Accept-Encoding
X-Ua-Compatible: IE=Edge,chrome=1
-- 响应的内容
<html>......
2.3 HTML: 文档头
HTML4有三类文档头
1. Transitional过渡的，以前默认
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. strict的严格的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3. frameset的 框架集
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML5:
<!DOCTYPE html>
2.4 Meta标签 ： 元
meta用于 整个网页的描述
- content-type ： text/html;charset=utf-8
- description： 描述
- keywords： 关键字
- referer： 防盗链
干嘛的？？？？---- 收录用的
**webkit moz ms **
webkit- 大多数 safari, chrome,opera…
moz: firefox火狐
ms: microsoft -ie
`
2.5 title： 标题
- 显示在选项卡（tab）上
- 收藏默认名
2.6. Base标签： 修改相对的绝对路径
3. Body: 标签
body:网页的主题
body默认有margin:8px 外边距
<body style="margin: 0px;">
style 样式
- bgcolor: 背景色
#FFFFFF #FFF rgb(255,255,255) white
#00000 #000 rgb(0,0,0) black
transparent ： 无色
- backgraound: 背景图片：CSS3中，能用样式不要用属性。
background-image: url(../imgs/zhaoliying.jpg); 背景图片
background-repeat: no-repeat; 不循环
background-size: cover; 覆盖填充， contain:按内容大小填充背景 -- css3
相对路径：
当前目录： ./ 或直接写
上一级目录: …/
根目录用： /
http://127.0.0.1:5500/imgs/zhaoliying.jpg http://127.0.0.1:5500/lesson1/test2.html 里引入上面的图片 当前目录：http://127.0.0.1:5500/lesson1/ 上一级： http://127.0.0.1:5500/ ../imgs/zhaoliying.jpg
5. H1 - H6
对应的是word一级标题到六级标题
- em二倍默认字体： 16px
空格
- 字变大了,打了多少
- 字黑了
- 间距不一样
display: block; 块元素:前后换行
font-size: 2em; 字的大小
margin-block-start: 0.67em; 上边距
margin-block-end: 0.67em; 下边距
margin-inline-start: 0px; 左
margin-inline-end: 0px; 右
font-weight: bold; 字的宽度： 粗体
所有标签分两类：
- 块元素： 默认顶行。如果没内容高度是0
- 行级-行内： 在一行
- 行级-行块： 在一行。 有宽高
6. HR
一条横线
hr {
display: block; --块
unicode-bidi: isolate;
margin-block-start: 0.5em; -- 上边距
margin-block-end: 0.5em; -- 下边距
margin-inline-start: auto; -- 左右自动，相对父水平居中
margin-inline-end: auto;
overflow: hidden; -- 溢出隐藏
border-style: inset; -- 边线的样式：内置
border-width: 1px; -- 边线的宽度
}
- border:边线
- border-width: 线宽
- border-style: 样式 solid实现 dotted点 double双实线 dashed虚线
- border-color: 颜色
- 简写： 顺时针原则 上-右-下-左， 上下-左右， 上-左右-下border-color: blue red green
- 简写：border: 1px solid black;
<h1 align="center">一级标题打算发发发雷达数据来看</h1>2
<p> 生卒：701年(长安元年)-762年12月(宝应元年)
主要成就：创造了古代浪漫主义文学高峰、歌行体和七绝达到后人难及的高度
简介：李白（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称...</p>
<p> 生卒：701年(长安元年)-762年12月(宝应元年)
主要成就：创造了古代浪漫主义文学高峰、歌行体和七绝达到后人难及的高度
简介：李白（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称...</p>
<p style="text-indent: 2em;">生卒：701年(长安元年)-762年12月(宝应元年)
主要成就：创造了古代浪漫主义文学高峰、歌行体和七绝达到后人难及的高度
简介：李白（701年—762年12月），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称...</p>
<h2 align="right">二级标题</h2>
<h3></h3>
1 <meinv style="display: block;font-size: 2em;font-weight: bold;">美女</meinv>2
<hr width="100px" color="red" size="10" />3
<hr style="border: 10px green dotted;width: 200px" />3
<div style="width: 600px;height: 600px; border-style: double dashed solid dotted;border-width: 10px 20px 30px;border-color: blue red green;
background: url(../imgs/zhaoliying.jpg) no-repeat;
"></div>
dth=“100px” color=“red” size=“10” />3
3
