# HTML手册 ## 标题标签 ``` h1~h6 文字加粗 字号逐渐减小 独占一行 ``` ## 段落标签 ``` p 独占一行 段落之间存在间隙 ``` ## 换行标签 ``` br ``` ## 水平线标签 ``` hr ``` ## 文本格式化标签 ``` strong 加粗 em 倾斜 ins 下划线 del 删除线 ``` ## 图像标签 ``` img 属性： src 图片url alt 替换文本 title 鼠标悬浮在图片上提示文本 width 图片高度 height 图片高度 ``` ## 超链接 ``` a 属性： href 跳转地址 target="_blank" 新窗口打开页面 ``` ## 音频标签 ``` audio 属性： src 音频URL controls 显示视频控制面板 loop 循环播放 autoplay 自动播放 ``` ## 视频标签 ``` video 属性： src 视频url controls 显示视频控制面板 muted 静音播放 loop 循环播放 autoplay 自动播放 ``` ## 列表标签 ``` ul 无序列表 ol 有序列表 li 列表项 能放任何东西 dl 定义列表 dt 列表标题 dd 列表项 ``` ## 表格标签 ``` table 表格 tr 行 th 头 td 列 ``` ## 合并表格 ``` rowspan 行跨几行 colspan 列跨几行 ``` ## 表单 ``` form ``` ## 输入标签 ``` input 属性： type text 文本框 password 密码框 radio 单选框 name 同组中只能选一个 checked 默认选中 checkbox 多选框 file 上传文件 multiple 多选文件 placeholder 提示信息 ``` ## 下拉菜单 ``` select 下拉菜单整体 option 每一项 selected 默认选中 ``` ## 文本域 ``` textarea ``` ## 标签标签 ``` label for id 绑定id增大选中范围 ``` ## 按钮标签 ``` button type submit 提交按钮提交数据到后台 reset 重置按钮 button 普通按钮没有功能 ``` ## 语义标签 ``` div 块级标签 span 行内标签 ``` # CSS手册 ## 标签选择器 ``` 标签名 { } ``` ## 类选择器 ``` .类名 { } ``` ## id选择器 ``` #id名 { } ``` ## 通配符选择器 ``` * { } ``` ## 后代选择器 ``` div span { 选择所有后代 } ``` ## 子代选择器 ``` div > span { 只选择一个子代 } ``` ## 交集选择器 ``` p.box { 选择带有类名为box的p标签 } ``` ## 鼠标悬停选择器 ``` a:hover { 鼠标悬停 } ``` ## 超链接访问前选择器 ``` a:link { 超链接访问前 } ``` ## 超链接访问后选择器 ``` a:visited { 超链接访问后 } ``` ## 超链接点击时选择器 ``` a:active { 超链接点击时 } ``` ## 查找第一个元素选择器 ``` 标签:first-child ``` ## 查找最后一个元素选择器 ``` 标签:last-child ``` ## 查找第N个元素选择器 ``` 标签:nth-child(N) n从0开始 2n 偶数 2n+1 奇数 ``` ## 添加内容选择器 ``` 标签::before { content : "内容" } ``` ``` 标签::after { content : "内容" } ``` ## 继承性 ``` 子级默认继承父级的文字控制属性 ``` ## 层叠性 ``` 相同的属性后面覆盖前面的 不同的属性会叠加 ``` ## 优先级 ``` 直接看vscode 前面的越大越优先（id、类、标签） ``` ## 盒子宽度 ``` width 宽度 ``` ## 盒子高度 ``` height 高度 ``` ## 内边距 ``` padding 内边距 ``` ## 外边距 ``` margin ``` ## 边框线 ``` border 宽度 线类型 颜色 solid 实线 dashed 虚线 dotted 点线 ``` ## 盒子尺寸 ``` box-sizing border-box 内减，不会撑大盒子尺寸 ``` ## 盒子溢出 ``` overflow hidden 溢出隐藏 scroll 溢出滚动，无论溢出与否都显示滚动条 auto 溢出才滚动 ``` ## 外边距合并 ``` 垂直排列的兄弟，上下margin会合并，取最大的值生效 ``` ## 外边距塌陷 ``` 父子级标签，子级添加外边距会被父亲抢走 解决方式： 1、取消子级margin，设置父亲padding 2、父级设置overflow: hidden 3、父级设置border-top ``` ## 行内元素内外边距 ``` 行内元素添加margin、padding 无法改变元素垂直 解决方式： 1、给行内元素添加line-height 改变垂直位置 ``` ## 圆角盒子 ``` border-radius 数字+px ``` ## 阴影盒子 ``` box-shadow ``` ## 文字大小 ``` font-size 文字大小px，默认16px ``` ## 文字粗细 ``` font-weight 400 正常 700 加粗 ``` ## 字体倾斜 ``` font-style normal 正常 italic 倾斜 ``` ## 文本行高 ``` line-height 等于盒子高度的时候单行文字会在盒子里垂直居中 ``` ## 字体族 ``` font-family 字体名 设置字体样式 ``` ## 文本缩进 ``` text-indent ?em 缩进几个字符 ``` ## 文本水平对齐 ``` text-align left 左对齐 center 居中对齐 right 右对齐 ``` ## 文本修饰线 ``` text-decoration none 无效果 underline 下划线 line-through 删除线 overline 上划线 ``` ## 文字颜色 ``` color rgba（r,g,b,a） ``` ## 背景色 ``` background-color ``` ## 背景图 ``` background-image url() ``` ## 背景图平铺方式 ``` background-repeat no-repeat 不平铺 repeat 平铺 repeat-x 水平方向平铺 repeat-y 垂直方向平铺 ``` ## 背景图位置 ``` background-position left 左侧 right 右侧 center 居中 top 顶部 bottom 底部 ``` ## 背景图缩放 ``` background-size cover 等比例缩放背景图完全覆盖背景区、可能背景图片部分看不见 contain 等比例缩放背景图片以完全装入背景区，可能部分区域空白 ``` ## 背景图固定 ``` background-attachment fixed 固定 ``` ## 显示模式 ``` display block 独占一行 宽度默认是父级的100% 添加宽高属性生效 lnline-block 一行可显示多个 设置宽高属性不生效 宽高尺寸由内容撑开 inline 一行可以显示多个 设置宽高属性生效 宽高尺寸也可以由内容撑开 ``` ## 浮动 ``` float 让块元素水平排列 left 左对齐 right 右对齐 浮动后的盒子顶对齐 浮动后的盒子具备行内块特点 浮动后的盒子脱标，不占标准流位置 如果父级没有高度，子级无法撑开父亲高度 ``` ## 清除浮动 ``` .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } ``` ## Flex组成 ``` 设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸 组成部分： 弹性容器 弹性盒子 主轴：默认在水平方向 侧州：默认在垂直方向 ``` ## 创建flex容器 ``` display: flex； ``` ## flex主轴对齐方式 ``` justify-content 属性： flex-start 弹性盒子从起点开始依次排列 flex-end 弹性盒子从终点开始依次排列 center 弹性盒子沿主轴居中排列 space-between 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子之间 space-around 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子两侧 space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 ``` ## flex侧轴对齐方式 ``` align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式 align-self 单独控制某个弹性盒子的侧轴对齐方式 属性： stretch 弹性盒子沿测轴线被拉伸至铺满容器 center 弹性盒子沿测轴居中排列 flex-start 弹性盒子从起点开始依次排列 flex-end 弹性盒子从终点开始依次排列 ``` ## flex主轴方向 ``` flex-direction 主轴默认在水平方向，侧轴默认在垂直方向 属性： row 水平方向，从左向右 column 垂直方向，从上到下 row-reverse 水平方向，从右向左 column-reverse 垂直方向，从下向上 ``` ## flex弹性伸缩比 ``` flex 控制弹性盒子的主轴方向的尺寸 整数数字，占用父级剩余尺寸份数 ``` ## flex弹性盒子换行 ``` flex-wrap 弹性盒子可以自动挤压或拉伸，默认情况在，所有弹性盒子都在一行显示 属性： wrap 换行 nowrap 不换行 ``` ## flex行对齐方式 ``` align-content 属性： flex-start 弹性盒子从起点开始依次排列 flex-end 弹性盒子从终点开始依次排列 center 弹性盒子沿主轴居中排列 space-between 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子之间 space-around 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子两侧 space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 ``` ## 相对定位 ``` position: relative 设置盒子的位置 不脱标，占用自己原来的位置 left right top bottom 值可以写50% 需要加transform:translate(-50%,-50%) ``` ## 绝对定位 ``` position: absolute 脱标，不占位 显示模式具备行内块特点 设置偏移则相对最近的已经定位的祖先元素改变位置，所以子绝父相 ``` ## 挪动自己大小的一半 ``` transform:translate(-50%,-50%) ``` ## 固定定位 ``` position：fixed 元素的位置在网页滚动时不会改变 脱标，不占位 显示模式具备行内块特点 ``` ## 堆叠层级 ``` z-index 按照标签书写位置，后来者居上，属性值为数字，取值越大，层级越高 ``` ## 行内块垂直对齐方式 ``` vertical-align bottom top middle ``` ## 过渡 ``` transition给一个元素在不同状态之间切换的时候增加过渡效果 加到原属性 属性值： 过渡的属性（可以是all） 花费的时间 ``` ## 透明度 ``` opacity 设置整个元素的透明度 ``` ## 光标类型 ``` cursor 鼠标悬停在元素上时显示样式 pointer 小手效果 text 工字型 move 十字光标 ``` ## 平面转换（2D转换） ``` transform为元素添加动态效果，改变盒子在平面的形态（位移、旋转、缩放、倾斜），通常卸载hover里 属性值： translate(x轴，y轴) 左/上都为负，值为像素和百分比 rotate(旋转角度) 单位deg 取正顺时针旋转，取负逆时针旋转 transform-origin 水平原点位置 垂直原点位置 。转换原点位置 取值left、top、right、bottom scale(缩放倍数/x轴/y轴缩放倍数) skew(倾斜度数) 多重转换：先平移再旋转 ``` ## 渐变色 ``` linear-gradient( 渐变方向（默认从上到下,可以to right/left/top/角度度数) 颜色1 终点位置(百分比), 颜色2 终点位置 ) ``` ## 径向渐变 ``` radial-gradient( 半径（可以是2条） at 圆心位置（像素单位数值/百分比/方位名词）， 颜色 终点位置， 颜色 终点位置， ) ``` ## 空间平移（3D） ``` transform: translate3d(x,y,z) translateX() translateY() translateZ() perspective：视距（人眼和屏幕之间的距离，建议800-1200px），给父级元素添加，子级的translateZ就生效了 ``` ## 空间旋转（3D） ``` transform: 沿着哪个轴旋转 rotateX() rotateY() rotateZ() ``` ## 动画 ``` animation 动画名字 动画花费时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态 定义动画 @keyframes 动画名 { from {} to {} } @keyframes 动画名 { 0% {} 20% {} 100% {} } 速度曲线： linear：匀速 steps(步骤) 分步动画 重复次数：infinite 无限循环 反向：alternate 结束状态：forwards 结束状态 backwards 开始状态 animation-play-state 暂停动画 paused 为暂停 ``` ## rem适配 ``` rem 相对于HTML标签的字号计算结果 ``` ## 媒体查询 ``` @media (媒体特性[width:375px]) { #差异化CSS样式 选择器 { } } ``` ## flexible.js ``` flexible.js是淘宝开发的一个用来适配移动端的js库，根据不同的视口宽度设置不同的fontsize ``` ## less ``` less是一个CSS预处理器，Less后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力 ``` ## 页面丝滑滚动 ``` html { scroll-behavior: smooth; } ```