1、web标准的构成：
构成 语言 说明
结构 HTML 页面元素
表现 CSS 页面样式
行为 JavaScript 页面交互
2、HTML
（Hyper Text Markup Language）中文译为：超文本标记语言
3、VS code
需要安装的插件
- Auto Rename Tag
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- code settings sync
- Error Lens
- ESLint
- GitLens — Git supercharged
- JSON to TS
- Live Server
- One Dark Pro
- Prettier ESLint
- Settings Sync
- TypeScript Vue Plugin (Volar)
- Vue Language Features (Volar)
- Vue VSCode Snippets
- VueHelper
- Vetur
- Vue 3 Snippets
4、HTML基础
排版标签
- 标题标签 h1 h2 h3 h4 h5 h6
- 段落标签 p
- 换行标签 br
- 水平线标签 hr
文本格式化标签
- b，strong 加粗
- u，ins 下划线
- i，em 倾斜
- s，del 删除线
媒体标签
- img，{src，alt，title，weight，height} 图片
- ../，./ 路径
- audio，{src，controls} 音频
- video，{src，controls} 视频
链接标签
- a，{herf，target，title，weight，height} 超链接
列表标签
- ul，li 无序列表
- ol，li 有序列表
- dl，dt，dd 自定义列表
表格标签
-
table 表格整体
-
tr 表格每行
-
td 表格每个单元格
-
border，width，height 表格属性
-
caption 表格外部大标题
-
th 表格第一行的小标题
-
thead，tobody，tfoot 表格结构标签
-
rowspan，colspan 跨行合并，跨列合并
表单标签
-
input，{text，password，radio，checkbox，file，submit，reset，button} 输入框，选择框，按钮
-
button，{submit，reset，button} 按钮
-
td 表格每个单元格
-
select，{selected，option} 下拉菜单
-
textarea，{cols，rows} 文本域
-
label 使用label标签将表单内容包裹起来
语义化标签
无语意的布局标签：实际的作用需要开发者自己定义
- div 独占一行
- span 一行多个
有语义的的布局标签：header头部，nav导航，footer底部，aside侧边栏，section区块，article文章
字符实体
-   空格
- > 大于
- < 小于
- & 和
- " 双引号
- &apos 单引号
5、CSS基础
CSS引入方式
内嵌式、外联式、行内式
基础选择器
标签选择器 p{}，类选择器 .class{}，id 选择器 #value{}，通配符选择器 *{}
class类名可以重复，一个标签可以同时有多个class类名；id属性值不可重复，一个标签只能有一个id属性值
字体和文本样式
-
字体样式：字体大小：font-size，字体粗细：font-weight，字体样式：font-style，字体类型：font-family，字体类型：font属性连写
-
文本样式：文本缩进：text-indent，文本水平对齐：text-align，文本修饰：text-decoration，行高：line-height
chorme调试工具（略）
颜色取值
-
rgb表示法 rgb ( 255 , 255 , 255 ) ：白色
-
rgba表示法 rgba ( 0 , 0 , 0 , 0.5 )
十六进制表示法 #fff ：白色
复合选择器
- 后代选择器：空格 选择器1 选择器2
- 子代选择器：> 选择器1 > 选择器2
- 并集选择器：, 选择器1 ， 选择器2
- 交集选择器：紧挨着 选择器1选择器2
hover伪类选择器
选择器:hover { css }
emmet语法
通过简写语法，快速生成代码，如ul>li*3
背景相关属性
背景颜色background-color，背景图片background-image，背景重复background-repeat，背景定位background-position，背景相关属性的连写形式background:color image repeat position
元素显示模式
元素显示模式：块级元素、行内元素、行内块元素
元素显示模式转换：display：block转换成块级元素，display：inline-block转换成行内块元素，display：inline转换成行内元素
CSS特性
继承性：子元素有默认继承父元素样式的特点（子承父业）
层叠性：①给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上 ②给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
优先级：继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
权重叠加计算：（行内样式的个数，id选择器的个数，类选择器的个数，标签选择器的个数）
PXcook像素大厨的使用：略
盒子模型：宽高width&height，边框border，内边距padding，外边距margin，外边距的合并与塌陷
CSS浮动
结构伪类选择器：first-child{}、last-child{}、nth-child(N){}、nth-last-child(n){}
伪元素：由 CSS 模拟出的标签效果，如::before，::after
标准流：又称文档流，块级元素：从上往下，垂直布局，独占一行；行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
浮动的作用：早期用来图文环绕，现在用来网页布局
浮动的代码：float : left左浮动，float : right右浮动
浮动的特点：
-
浮动元素会脱标，在标准流中不占位置
-
浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
-
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
-
浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高
清除浮动：
-
直接设置父元素高度
-
额外标签法
-
单伪元素清除法
-
双伪元素清除法
-
给父元素设置overflow : hidden
BFC盒子：块格式化上下文（Block Formatting Context）
定位
属性名：position，
属性值：static静态定位，relative相对定位，absolute绝对定位，fixed固定定位
偏移值：left水平距离左边，right水平距离右边，top垂直距离上面，bottom垂直距离下面
装饰
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
垂直对齐方式：vertical-align，取值baseline基线对齐，top顶部对齐，middle中部对齐，bottom底部对齐
光标类型：cursor，取值default箭头，pointer抓手，text工字型，move十字光标
边框圆角：border-radius，取值border-radius:50%设置边框圆角为盒子宽高的一半
元素溢出处理：overflow，取值visible默认，hidden溢出隐藏，scroll添加滚动条，auto自动判断是否添加滚动条
元素隐藏：visibility：hidden和display：none，区别是visibility：hidden 隐藏元素本身，并且在网页中 占位置；display：none 隐藏元素本身，并且在网页中 不占位置
边框合并：border-collapse：collapse让相邻表格边框进行合并，得到细线边框效果
学成在线项目（略）
小兔鲜项目（略）
项目样式补充
1.精灵图 2. 背景图片大小 3. 文字阴影 4. 盒子阴影 5. 过渡
项目前置认知
1.网页与网站的关系 2. 骨架结构标签 3. SEO三大标签 4. ico图标设置 5. 版心
项目结构搭建
1.文件和目录准备 2. 基础公共样式 3. index页面骨架
