前端完整笔记一、基础概念HTML盖房子页面结构CSS全屋定制样式美化JavaScript智能家居交互逻辑jQuery Ajax做数据交互JavaScript 和 Java没关系只是名字像LiveServer以服务方式打开热加载改了代码立刻更新不用手动刷新二、HTML 基础基本结构!DOCTYPE html html langzh-CN head meta charsetUTF-8 title标题/title /head body 页面内容 /body /htmlhead放基本信息标题、编码、样式引入等body页面可见内容!-- 注释内容 --注释快捷键ctrl /Emmet 快捷语法必背在编辑器里输入以下缩写按 Tab 自动生成缩写生成结果!完整 HTML 框架标签名生成对应标签div{文本}生成带文本的标签div*3生成 3 个 divdivp下一级父子关系divp同级兄弟关系div.a生成 class 为 a 的 divdiv#a生成 id 为 a 的 divdiv[attrval]生成带属性的标签多个属性之间用空格隔开三、HTML 常用标签文本标签标签类型作用div块级块级容器独占一行竖着排列span行内行内容器不独占一行横着排列h1~h6块级标题标签h1最大h6最小p块级段落标签br-换行⚠️ 注意不是所有标签都识别所有属性比如 span 不识别宽高链接标签标签关键属性作用ahref链接地址超链接target_self当前窗口打开默认target_blank新窗口打开target窗口名配合 iframe 的 name 在指定窗口打开图片标签img src路径 alt加载失败提示文字src图片路径相对路径 / 绝对路径alt图片加载失败时显示的文字内嵌窗口iframe src页面地址 namewin1 frameborder0/iframeiframe在页面里嵌入另一个页面name窗口名配合 a 标签的 target 可以在指定 iframe 里打开页面frameborder边框线0 表示无边框列表标签作用ulli无序列表ul 是容器li 是列表项olli有序列表表格标签作用table表格容器tr行td列单元格thead表头包起来的内容在最上面tbody主体形成独立空间tfoot表尾包起来的内容在最下面表格属性border边框宽度cellspacing单元格之间的间距cellpadding单元格内边距内容和边框的距离多媒体标签常用属性audiocontrols控制条autoplay自动播放videocontrols控制条autoplay自动播放不会让视频变形表单form action提交地址 input typetext input typeradio namesex input typecheckbox input typefile select option选项1/option /select /formform表单容器action是提交地址input收集用户信息text文本框radio单选框name 值相同的视为一组checkbox多选框file选择文件selectoption下拉选择框四、CSS 基础三种引入方式行内样式写在标签的 style 属性里 → 优先级最高内部样式style标签写在 head 里外部样式link relstylesheet hrefxxx.css引入优先级行内样式 内部样式 外部样式 同一级别后面的覆盖前面的CSS 语法规则选择器 { 属性名: 属性值; 属性名: 属性值; }五、CSS 选择器基础选择器选择器写法优先级通配符选择器* {}最低元素选择器div {}低class 选择器.a {}中id 选择器#a {}高行内样式style最高优先级排名行内 id class 元素 * 口诀选择器写得越准确优先级越高属性选择器写法作用[attr^aa]属性值以 aa 开头[attr$aa]属性值以 aa 结尾[attr*aa]属性值包含 aa组合选择器写法作用div.a选中 class 为 a 的 div交集div p选中 div 里面所有 p后代包括子孙div p选中 div 的直接子元素 p亲儿子div, p选中 div 和 p并集class 值可以设置多个用空格隔开div classa b c伪元素选择器伪元素选择器主要用在块级元素上伪元素作用::first-letter选中第一个字母/汉字::first-line选中第一行::before在元素内容前面插入内容必须加 content::after在元素内容后面插入内容必须加 contentdiv::before { content: 前面加的文字; }伪类选择器伪类作用:nth-child(n)第 n 个子元素:nth-of-type(n)同类型的第 n 个:nth-last-child(n)倒着数第 n 个:hover鼠标悬停状态:focus获取焦点状态点击后:checked选中状态单选/多选框常用关键词odd奇数even偶数六、常用 CSS 属性文字属性属性作用示例font-size字号16pxfont-weight字重bold加粗 /normal正常font-family字体微软雅黑color文字颜色red/#fff/rgb(255,0,0)text-align文字水平对齐left/center/rightline-height行高20px等于高度时文字垂直居中text-decoration文字装饰none去掉下划线 /underline下划线word-break单词换行break-all单词裂开换行背景属性属性作用background-color背景颜色background-image背景图片background-repeat是否平铺no-repeat 不平铺background-position背景位置background-size背景尺寸cover 覆盖 / contain 包含简写background: 颜色 图片 位置/尺寸 平铺;其他常用属性作用box-shadow盒子阴影opacity透明度0~1border-radius圆角50% 是圆形overflow: hidden超出部分隐藏也可以用来清除浮动七、盒子模型三种盒子类型类型特点例子块级 block独占一行支持宽高div、h1-h6、p、ul、li行内 inline不独占一行不支持宽高span、a行内块 inline-block不独占一行支持宽高input、img⚠️ 行内块级元素的坑HTML 里换行/回车会被浏览器读成空格导致元素之间有间隙盒子四层结构从内到外内容区 content内边距 padding边框 border外边距 marginpadding内边距padding: 上 右 下 左; /* 顺时针 */ padding: 上下 左右; padding: 10px; /* 四边都是10px */margin外边距写法和 padding 一样垂直方向外边距不叠加取最大值谁大听谁的margin: 0 auto块级元素水平居中border边框属性作用示例border-width边框宽度1px、2pxborder-style边框样式必须写否则不显示solid实线、dashed虚线、dotted点线border-color边框颜色red、#fff、rgb()box-sizing盒模型类型值效果content-box默认width/height 只算内容区paddingborder 额外撑大盒子border-boxwidth/height 包含内容paddingborder整体尺寸固定✅ 开发推荐全局设置* { margin: 0; padding: 0; box-sizing: border-box; }八、浮动 float作用让元素浮起来脱离文档流实现横向排列。问题子元素全部浮动后父容器高度塌陷父盒子高度变 0。清除浮动解决高度塌陷父元素加overflow: hidden最简单伪元素清除法项目通用.clearfix::after { content: ; display: block; clear: both; }九、定位 position五种定位模式值特点是否脱离文档流static默认静态定位否relative相对定位相对于自己原来的位置否absolute绝对定位相对于最近的已定位父元素是fixed固定定位相对于浏览器窗口是sticky粘性定位滚动到一定位置吸顶否定位偏移属性top、bottom、left、right设置距离各边的位置z-index层叠顺序数值越大越靠上必须配合定位使用经典搭配子绝父相子元素用absolute父元素用relative子元素相对于父元素定位。十、Flex 弹性布局重点父容器属性写在父盒子上1. flex-direction主轴方向值效果row默认从左到右横向row-reverse从右到左横向倒序column从上到下纵向column-reverse从下到上纵向倒序.father { display: flex; flex-direction: row; }2. justify-content主轴对齐值效果flex-start默认靠起点flex-end靠终点center居中space-between两端贴边中间均分space-around元素两侧空白相等space-evenly所有空白完全相等.father { display: flex; justify-content: center; }3. align-items交叉轴对齐 - 单行值效果stretch默认拉伸填满交叉轴flex-start靠起点flex-end靠终点center居中baseline文字基线对齐.father { display: flex; align-items: center; }4. flex-wrap换行值效果nowrap默认不换行挤在一起wrap换行5. align-content交叉轴对齐 - 多行⚠️ 必须有多行才生效一行时无效值效果stretch默认拉伸填满flex-start靠起点flex-end靠终点center居中space-between首尾贴边行间距均分space-around每行两侧空白相等space-evenly所有空隙完全相等子元素属性写在子盒子上1. flex-grow放大比例默认0不放大父容器有剩余空间时按比例瓜分数值越大分到的剩余空间越多.item { flex-grow: 1; }2. flex-shrink缩小比例默认1空间不足时自动缩小0不缩小可能溢出父容器数值越大缩得越多.item { flex-shrink: 1; }3. flex-basis基础宽度默认auto以 width 或内容宽度为准优先级比width高分配空间前的初始尺寸.item { flex-basis: 200px; }4. flex简写推荐顺序固定grow → shrink → basis.item { flex: 1 1 auto; }简写等价于效果flex: 11 1 0%等比例填满剩余空间flex: none0 0 auto不放大也不缩小固定尺寸flex: auto1 1 auto自动放大缩小5. order排列顺序默认0值越小排得越靠前可以是负数十一、黄金组合必背1. 全局样式重置* { margin: 0; padding: 0; box-sizing: border-box; }2. 完全居中Flex 版.father { display: flex; justify-content: center; /* 主轴居中 */ align-items: center; /* 交叉轴居中 */ }3. 导航栏左右分散.nav { display: flex; justify-content: space-between; align-items: center; }4. 单行文字垂直居中.box { height: 40px; line-height: 40px; /* 行高 高度 */ }5. 清除浮动.clearfix::after { content: ; display: block; clear: both; }十二、速记口诀Flex 布局主轴方向 →flex-direction主轴分布 →justify-content交叉轴单行 →align-items交叉轴多行 →align-content子元素放大 →flex-grow子元素缩小 →flex-shrink子元素基础宽 →flex-basis三属性简写 →flex选择器优先级行内 id class 元素 *