HTML标签 块级标签 独占一行,可以设置宽高 display:block H1-h6 标题标签 P 段落标签 Hr 水平线标签 Div
Ul li 无序列表
Ol li 有序列表 Dl dt dd 自定义列表 行内标签 不独占一行 不可以设置宽高 display:inline Strong 加粗 Em & I 倾斜 A 超链接 （可以实现页面的跳转，可以实现功能性连接，可以做锚链接使用） Span 可以写在任何地方 并没有实际意义 行内块标签 不独占一行，可以设置宽高 display:inline-block

Img 图片标签

特殊字符： 空格   大于 > 小于 < 版权符号 © 爱心 ♥

Css 引入方式（优先级 遵循就近原则 行内>内部>外部） 外部引入

外部两种引入方式

(推荐使用) @import url(./html.css) 行内引入

内部引入（head 标签里） Style{ } （权重为1）基本选择器（优先级 id>class>标签） 标签 ：直接用需要改变样式的标签做选择器

（权重为10）类选择器：(.hello-world可以给不同标签加上相同的类名)如果只有一个单词，就直接用，两个以上用匈牙利命名 例如（hello-world）

(权重最大100)Id选择器：(#hello-world一个id名只能对应一个标签)如果只有一个单词，就直接用，两个以上用匈牙利命名 例如（hello-world）

高级选择器 （子代选择器，后代选择器） 子代选择器指的是当前标签的下一级 Div>p{} 后代选择器 指的是当前标签下的所有符合的所有后代选择器 Div .p{}

通配符选择器 *{padding：0；margin：0；list-style:none} 伪类 div:before{ 给div 的里面的最前面加上对应的元素 } div:after{ 给div 的里面的最后面加上对应的元素 } 选择一组元素中的第一个 ：first-of-type 选择一组元素中的最后一个 ：last-of-type 选择一组元素中的第二个 ：nth-of-type(2) 交集选择器 一个div标签包含了.red Div.red{}

字体样式： Font-family:“宋体” Font-size:16px em rem Font-style:italic（倾斜） normal（默认值） Font-weight:blod bloder 100-900

文本样式： Color:#ff0000 red #00ff00 green #0000ff blue Text-align:left (默认) right center Text-indent: 20px(首行缩进) Text-decoration:文本的修饰 none 去除文本修饰 overline line-through Line-height:行高 （设置行高等于元素高度，里面的文字就可以居中）

A伪类 ： （想要样式生效，一定要按顺序写） A:link 未点击时候的超链接样式 A:visited 访问过后的超链接样式 A:hover 鼠标悬浮的超链接样式 A:active 鼠标点击未释放时候的样式

文本和图片的对齐方式 Vertical-align:bottom (下方) middle top

元素的宽高 Width：50px Height:50px 改变鼠标的样式 cursor: pointer; 文本不能被选择 user-select: none;

背景颜色：background-color:red 背景图 background-image:url(“图片的路径”) 背景图重复方式 background-repeat:no-repeat 背景图的定位 background-position: x y 背景图的尺寸 background-size:cover contain 背景的缩写 颜色 image 重复方式 定位方式 定位尺寸/ 背景图的大小

列表 块级元素

Ul li 无序列表
Ol li 有序列表 Dl dt dd 自定义列表 表格元素 Table //申明一个表格 Tr td Tr td

合并单元格 Colspan 两列合并成一列 Rowspan 两行合并成一行

表单元素：

Input type=”text” 文本输入框 placeholder value name Input type=”password” 密码输入框 placeholder value name Input type=”submit” 提交框 （可以提交表单） value name disabled(可以被禁用) Input type=”button” 按钮 （不能提交表单） value name disabled(可以被禁用) Input type=”image” 图片按钮 （可以提交表单） value name

想保持按钮为一组，必须设置一样的name名 Input type=”radio” 单选框 value name Input type=”checkbox” 复选框 value name Input type=”reset” 重置按钮 （可以重置表单的内容） value name Input type=”file” 上传文件 value name Selcted 下拉列表 Option value name Textarea 文本域
resize: none 设置 文本域不能随意缩放输入框的大小

盒子模型 border 内边距 外边距 内容 Border -width:边框的宽度 Border-style：dashed dotted solid Border-color:边框的颜色 Border : 1px solid red (简写形式同时设置四个边) Border-top:1px soli red //单独为某一条边设置样式 Border-radius:5px//设置圆角 Border- radius: 值为元素的一半 //如果设置的是正方形，就会变成原型，否则就是药丸状 扇形 Border-radius: 一个边为正方形的宽 ，其他为0 就出现一个扇形

三角形设置 Width:0 Height:0 Border:50px solid Border-color: red transparent transparent transparent

Margin-top：上外边距 Margin: 上右下左 （同时设置四个外边距） Margin:0 auto 设置元素的居中 必须是有固定的宽度 必须是块级元素

Padding Padding -top： 内上边距 padding: 上右下左 （同时设置四个内边距） padding: 一个值（四个边距都一样） padding: 上下 左右 padding: 上 左右 下

盒子模型的尺寸：padding width border-width Box-sizing: content-box (默认盒子模型尺寸) Box-sizing: border-box(使尺寸等于我们设置的宽高)

浮动： 浮动 float：left
float: right
清除父元素塌陷4种方法 1：给父元素一个固定的高度 2：给父元素的最后面加一个空的div 标签，并且给他设置clear:both 3:overflow:hidden 4:伪类设置 父元素：after{content:“”；display：block;clear:both}

省略号：(重点) 首先给我们需要设置省略号的盒子给一个固定的宽度 给盒子设置样式： overflow：hidden; text-overflow: ellipsis; white-space:nowrap Icon font

定位： 相对定位：position：relative 相对应自身进行定位 绝对定位：position：absolute 脱离了文档流，如果祖先元素有定位，就相对于最近的一个已经定位的祖先元素进行定位否则相对于浏览器窗口进行定位 固定定位：position:fixed 相对于浏览器进行定位

调整元素的层级关系 z-index:0-max

Hover 改变其他元素的样式 如果改变的是兄弟元素 前一个兄弟元素：Hover+紧接着的后一个兄弟元素{ } 如果改变的是子元素 父元素：Hover 需要被改变样式的子元素{ } Css 的计算表达式 Calc(100px – 50px)—中间的空格不能少

三种元素不可见方式 Display :none 脱离文档流 display:block 可见 Opacity：0 不可见 不脱离文档流 opacity:1 可见 Visibility：hidden 不脱离文档流 visible 盒子的阴影 Box-shaodow : x值 y值 模糊值 red 阴影的位置 Text-shadow: x值 y值 模糊值 red

水平垂直居中 第一种方法： 父元素{position:relative} 子元素{ Position：absolute； Left:50%; Top:50%; transform: translate(-50%,-50%); } 第二种方法 父元素设置：Display:flex Justify-content:center Align-item:center

Css 变形 移动 Transform：translate(x,y) Transform：translateX||translate 变形 Transform：skew(角度值（deg）) 缩放 Transform：scale(2)//放大两倍 旋转 Transform：rotate(2(deg))

新增标签： Header 头部 Nav 导航栏 Section 主要内容 Aside 侧边栏 Article 正文部分 Footer 底部标签 Audio 音频 controls必须加上这个属性才能播放 Video 视频controls必须加上这个属性才能播放

过渡： Transition : 需要设置过渡的对象 过渡完成需要的时间 变化的方式 延迟几秒钟进行 动画 Animation Animation ： 起一个动画名，完成动画需要的时间 动画完成的速度曲线 几秒后后开始我们的动画 动画运行的次数 让动画偶数次反向运行

@keyframs 动画的名字{ 0%{ } 100%{ } } @keyframs 动画的名字{ Form{ }to{ } }

弹性布局 Display:flex Flex:direction 设置排列方向 Flex-wrap：设置是否换行 Justify-content 设置排列的方式 Align-items：设置主轴的交叉轴的排列方式

Flex：1； 可以设置一个元素沾满剩余的空间