前端：①前端是软件系统中直接和用户交互的部分
目前国内的前端总体而言是完成基于浏览器用户界面设计和开发，主要工作有PC网站开发，移动端网站开发，WebApp开发，在线游戏开发，本地软件开发
HTML---网页骨架
CSS---美化网页（层叠样式表）
JavaScript+NodeJS---实现动作。NodeJS后端
Vue，React---结构框架（提高工作效率）
Webpack---打包优化
算法+设计模式---最后学
html是超文本标记语言
掘金，优快云，博客园——网站
MDN，W3school，HTML 教程 | 菜鸟教程（菜鸟）文档网站
准备工作
快捷键：
Ctrl+Z 撤销
Ctrl+X 剪切
Ctrl+C 复制
Ctrl+V 粘贴
Ctrl+S 保存
Ctrl+Y 反撤销
Ctrl+F 查找
F5/Ctrl+R 刷新
电脑系统设置——显示——缩放与布局——100%
（不是100%，测量工具测量——数值会不准）
QQ截图快捷键 Ctrl+Alt+A
①可以查看宽高的像素值
②拖动鼠标点的位置，可以查看RGB（颜色）的数值RGB（21，21，21）
---按Ctrl可以无缝切换十六进制&RGB色号的数值
③截图---钉在桌面上
④画图，标记都有
PxCook
PxCook - 高效易用的自动标注工具,生成前端代码,设计研发协作利器（修图工具PxCook）
可以一次性把需要的数值给标注出来
1.创建项目选择Web——添加图片
2.距离标注
3.图片真实距离标注
4.显示颜色具体色号
VS Code
VS Code 网页编辑器
主题颜色，深色看着舒服
需要下载的插件
1.Chinese ——中文插件
2.CSS Peek ——标签出错显示
3.Auto Rename Tag ——自动重命名插件
4.open in browser ——浏览器打开网页
5.Live Server ——服务器打开网页
为静态和动态页面启动具有活动重新加载功能的开发本地服务器
1.HTML标签骨架
<-- 《!DOCTYPE html》
文档声明 代表是html5的文档类型 <html lang="zh-CN"> html是根标签 lang是语言 en这是一个英文网站 zh-CN这是一个中文网站
<head> <meat charset="UTF-8"> <meta name="keywords" content="第一个网页 初学者 IT民工"> <meta name="description" content="萌新学习"> <title>网页标题</title>
meat：元数据 keywords：关键词 desciption：网站描述信息 content：内容 </head> <body>
body:网页内容写在这里 ——存放内容
</body> 《/html》
控制台查看标签块元素还是行内元素 F12 选择标签。—Computed—display—inline（行内元素）
F12 选择标签。—Computed—display—back（块元素）
HTML特殊转义符
2.HTML标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--1.标题标签，块级元素，h1只能有一个 -->
<p>我是一段文字我是一段文字</p>
<!--2.段落标签，块级标签 -->
<hr>
<!--3.水平线标签，块级标签-->
<br>
<!--4.换行标签(最好不用) -->
<div>Cherry</div>
<!--5.div标签，块级标签 -->
<span>文字</span>
<!--6.span标签，行内标签 -->
<blockquote>长引用</blockquote>
<q>短引用</q>
<!--7.引用标签 -->
<b>加粗</b>
<strong>加粗并通知浏览器，强调重要</strong>
<i>斜体</i>
<em>斜体并通知浏览器，代表反义</em>
<s>删除线</s>
<del>删除线并通知浏览器文档中已删除的文字</del>
<!--8.图片展示标签 -->
<!--
src="" :路径 ①相对路径
./ 同级目录
../ 上级目录
../../../以此类推
②网络路径 复制地址
③绝对路径 C盘出发（不要用）
alt="" :名称，图片打不开会显示文字
width=""宽度(单独打一个，另一个会等比例显示)
height=""高度
-->
<img src="" alt="" width="500" height="500">
<!--9.视频展示标签 -->
<!--
网页只能播放mp4格式的视频
controls="controls" 播放控件
-->
<vdeo src="" controls="cotrols" ></vdeo>
<!--10.音频展示标签 规则同上 -->
<audio src="" controls=""></audio>
<!--11.链接标签 -->
<!--
href="" :目标地址链接
嵌套img可以实现点击图片跳转
text-decoration:none 取消下划线（在style里面)
target ①_self 当前页面打开
②_blank 新打开页面+n个页面
③_new 只打开一个页面
href=“#” 空跳转，方便以后添加地址
-->
<a href="" text-decoration:none;>百度</a>
<!--1.无序列表--> <!-- type="disc" 实心圆 type="circle" 空心圆 type="square" 实心方块 type="none" 不显示(但是会占地方) -->
《ul type="square"> <li>无序列表</li> <li>可以相互嵌套</li> <li>标签组合使用</li> </ul》
<!--2.有序列表 --> <!-- tyoe="1" 123... tyoe="a" abc... tyoe="A" ABC... tyoe="i" i ii iii...(小写罗马数字) tyoe="I" I II III... -->
《ol type="A"> <li>有</li> <li>序</li> <li>列</li> <li>表</li> </ol》
<!--3.自定义列表 --> <!-- dt类似标题标签 dd跟li一样 -->
《dl> <dt>水果</dt> <dd>香蕉</dd> <dd>芒果</dd> </dl》
3.CSS三种样式
1.行内样式，作业不能使用
问题结构样式不分离
后期代码维护困难
权重过大
《h1 style="color:red;">点击有惊喜<h1>
2.内部样式 <style> h2{ color:pimk; } </style>
在head标签加入style标签 代码复用性不强
3.外部样式：大型项目用这个
①创建CSS文件，直接写属性
p{ color:pink； }
②添加link rel=“stylesheet” herf=“” <link rel="stylesheet" herf="路径">
命名格式&命名规范
class 谁都可以取，可以重复 符号 “.”
id 只能是唯一，统一页面只能出现一次 符号“#”
标签名字：
①见名知意
②必须是小写字母
③不能用中文
④特殊符号只能用“-”
三大基础选择器
①class选择器=类选择器
.box{ color:red; }
②id选择器：#
#{ color:red; }
③标签选择器：标签名
div{ color:red; }
CSS常用选择器
①交集选择器---连着写
前面必须是标签，后面是类选择器
缺点：权重小的，会被覆盖样式
<style>
p.container{
color:red;
}
</style>
<p class="container">pppp</p>
②并集选择器 --- ，
可以添加多个标签，同时实现样式效果
缺点，多个标签会产生标签空格
可以继承样式
.container,
div{
border:10px solid #ccc
}
或者
p.container,（一个整体）
div{
border:10px solid #ccc
}
③后代选择器--- 空格添加
符合标签的，全部会改变样式
可以解析空格，没有样式会继承样式
.gran p{ color:red; }
<div class="gran"> <p>一级的P</p> <p>一级的P</p> <p>一级的P</p> <p> 一级的P <p>二级的p</p> </p> </div>
④子代选择器--- >
缺点必须是谁的子代，兄弟不行
精准改变同代样式，别个默认样式会被继承就近父代样式
可以解析空格
.gram>p{
color:red;
}
⑤相邻元素选择器-- +
以自己是参照物，找邻居，往下找一位来改变样式
.lis+li{
color="red"
}
li+li{
color=”red“
}
- 0001
- 0002
- 0003
⑥兄弟选择器--- ~
兄不变，弟弟全部改变样式
.lis~li{
color：red；
}
新年快乐，后期续更，感谢三连mua
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
