html快捷键
查找替换文本 Ctrl + H
查找 Ctrl + F
返回上一步 Ctrl + Y
定位到下一个标签页 Ctrl + Tab
打开一个新的标签页 Ctrl + T
关闭当前标签页 Ctrl + W
父子关系：
div>p
<div>
<p></p>
</div>
兄弟关系：
div+p
<div></div>
<p></p>
乘法关系：
ul>li*2
<ul>
<li></li>
<li></li>
</ul>
id与class属性：
div#one
<div id="one"></div>
div.calss
<div class="aaa"></div>
元素内容：
div.sss{我是文本}
<div class="ss">我是文本</div>
自增符$
p.a$*3
<p class="a1"></p>
<p class="a2"></p>
<p class="a3"></p>
link:css
<link rel="stylesheet" href="style.css">
script:src
<script type="text/javascript" src=""></script>
ul+
<ul>
<li></li>
a:link
<a href="http://"></a>
form:get
<form action="" method="get"></form>
form:post
<form action="" method="post"></form>
select+
<select id="">
<option value=""></option>
</select>
HTML简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简介</title>
<link rel="icon" type="image/png" href="../../icon/ke.png">
<meta name="keywords" content="简绍，简介">
<meta name="descripition" content="HTML简绍">
<meta name="author" content="zhou">
<meta name="descripition">
</head>
<body>
<div>
html全称:超文本标记语言(HyperText Markup Language)<br/>
<strong>超文本：超文本使用链接的方式，将各个空间的资源链接在一起形成网站结构，链接内容时可以是文本，可以是音频，视频</strong>
<br>
<b>标记语言：通过标签完成功能的设计</b>
<p>HTML特点</p>
<h1>简单性：重要学习标记，你掌握常用的标记就可以组织网页结构</h1>
<h2>可扩展性：对于网页功能的扩展是非常方便的</h2>
<h3>跨平台性：跟操作系统没有任何关系，只要一个浏览器</h3>
<h4>通用性：不管手机还是电脑的可以看到各种简单或复杂的页面</h4>
<h5>浏览器加载模式：浏览器解析网页时会有两种模式：严格模式，混杂模式(兼容模式)</h5>
<p>严格模式：标准模式，浏览器按照w3c用最新的标准来解析我们的网页</p>
<p>混杂模式：浏览器用自己的制定的标准来解析我们的网站</p>
<span>如果你的HTML版本很低，会用混杂模式，或者你忘记</span>
</div>
</body>
</html>
head标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="icon" type="image/png" href="">
<link rel="icon" type="image/x-icon" href="">
<link rel="icon" type="image/jpeg" href="">
<link rel="icon" type="image/gif" href="">
<meta name="keywords" content="美团,京东,生活,服务">
<meta name="description" content="">
<meta http-equiv="refresh" content="5;url=https://www.jd.com/#ns">
</head>
<body>
<ul>
<li>link：引用外部文件</li>
<li>rel:定义当前文档与被链接文档的关系</li>
<li>type:定义被链接文档的mine类型</li>
<li>定义链接文档的路径</li>
</ul>
<div>
标题栏图标的设置：16x16像素
<li>网站根目录下放一个favicon.ico文件。浏览器会自动显示在标题栏中</li>
<li>使用icon图标作为标题栏的图标</li>
<li>使用ico生成器生成图标</li>
</div>
<div>
关键字与描述：
关键字与描述不是给人看的，是供搜索引擎使用
关键字与描述是网站优化很重要的部分
关键字：
meta标签
name="keywords"
content="可以使用多个，建议不要超过5个，用英文逗号分隔"
描述：
meta标签
name="description"
content="建议不要超过100字"
</div>
<div>10秒后跳转至百度首页</div>
</body>
</html>
a标签
<p>
四种状态：
未被访问的链接，link状态：文字为蓝色，有下划线。
已经被访问的状态visited状态：文字为紫色，有下划线。
鼠标移动到链接上的状态：hover状态，有下划线，鼠标变成手型。
鼠标点击未松开时的状态，activer状态，文字变为红色。
</p>
标签title属性:提示文字
<a href="https://www.baidu.com" target="_blank" title="5151">点击</a>
<a href="https://www.runoob.com/" target="_self">点击1</a>
链接说明文字：<a href="/" title="链接说明">链接说明</a>
<a href="javascript:;">回到顶部</a>
<a href="#">回到顶部</a>
<a href="">返回顶部</a>
三者都有刷新效果
<a href="#two">跳转至c3</a>
当做锚点跳转指定节点（例如小说章节）
<p id="two">1</p>
<a href="微信图片_20211217133016.zip">文件下载</a>
<a href="./微信图片_20211217133016.jpg" download="one">图片下载</a>
one规定作为文件名来使用的文本
img
<div>
<img src="https://www.w3school.com.cn/i/eg_cute.gif" alt="图片加载错误" width="200px" onload="onLoadImg()" onerror="onErrorImg()">
</div>
<script>
function onLoadImg(){
console.log(this);
event.target.src="https://tpc.googlesyndication.com/simgad/1174692691301795314?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4qkUZ9bKaoaz1zLfQa3bnEN-avyOlg";
event.target.οnlοad=null;
}
function onErrorImg() {
console.log(this,event);
event.target.src="https://tpc.googlesyndication.com/simgad/1174692691301795314?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4qkUZ9bKaoaz1zLfQa3bnEN-avyOlg";
event.target.οnerrοr=null;
}
</script>
图片常见格式
位图：
有损压缩
无损压缩
特点
放大会失真
颜色比较单一256
图片比较小
<p>图片在<img src="https://www.w3school.com.cn/i/eg_cute.gif">文字中</p>
jpg/jpeg:
1色彩丰富，压缩比高，画质损失小(40:1)，体积小
2不支持透明度，不支持动画
3适用于色彩丰富，要求体积小的场景
png:
1色彩丰富，压缩比高，比JPG大10倍，体积小
2支持任意透明度，不支持动画
3适用于色彩丰富，支持任意透明度的场景
gif:
1仅支持256种色彩，画质损失大，体积最小
2支持完全透明度，支持动画
3适用于色彩丰富，支持任意透明度的场景
Wbmp是无线位图的缩写。它是移动计算机设备使用的标准图像格式。它是专为无线通信设备设计的文件格式。
矢量图：
由点
特点：放大不会失真
常用格式：ai,svg,fla(swf)
psd:是一个工程文件图片，会在工程中保留图层，不能作为图片或发布网上，电脑想要看到，需要下载ps缩略图补丁，psd是ps的专属文件格式
音视频
<div>
<video src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" width="600" controls poster="https://www.w3school.com.cn/i/eg_cute.gif"></video>
<video src="https://www.w3school.com.cn/i/movie.mp4" controls poster="https://www.w3school.com.cn/i/eg_cute.gif"></video>
</div>
<div>
<video width="600" controls>
<source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
<source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<embed src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
当前浏览器不支持video直接播放
</video>
</div>
列表
<div>
<ul style="list-style: square;">
<li>北京</li>
<li>上海
<ul>
<li>奉贤区</li>
<li>宝山区</li>
</ul>
</li>
<li>深圳</li>
<li>天津</li>
</ul>
<ul style="list-style: circle;">
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>天津</li>
</ul>
</div>
<ol type="1">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>桃子</li>
</ol>
<ol start="10">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>桃子</li>
</ol>
<ol start="10" reversed>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>桃子</li>
</ol>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>桃子</li>
</ol>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>桃子</li>
</ol>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>桃子</li>
</ol>
自定义列表
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
什么是SPA:SPA（single-page application）
单页面应用 用户交互时，动态加载资源；不会跳转页面,更新部分页面
我们熟知的JS框架如react,vue,angular,ember都属于SPA
多页应用MPA（MultiPage-page application）
####单页应用与多页应用的区别
单页面应用（SPA） 多页面应用（MPA）
组成 一个主页面和多个页面片段 多个主页面
刷新方式 局部刷新 整页刷新
url模式 哈希模式 历史模式
SEO搜索引擎优化 难实现，可使用SSR方式改善 容易实现
数据传递 容易 通过url、cookie、localStorage等传递页
面切 换速度快，用户体验良好 切换加载资源，速度慢，用户体验差维
护成本 相对容易 相对复杂
单页应用优缺点
优点：
具有桌面应用的即时性、网站的可移植性和可访问性
用户体验好、快，内容的改变不需要重新加载整个页面
良好的前后端分离，分工更明确
缺点：
不利于搜索引擎的抓取
首次渲染速度相对较慢
