使用markdown语法: # HTML ## 基本标签 ### 块级标签 * `div` 分区标签 * `p` 段落标签 * 标题标签`<h1-h3>` 有强调 `<h4-h6>` * `pre` 保留格式 * `ul>li` 无序列表 * `ol>li` 有序列表 * dl>dt dd 定义列表 ### 行内标签 - 文本样式标签 - `label` b 加粗 (label语义强化，常用label) - `del` 删除 - `i` em 倾斜 常用i - span 分区标签 - 图片标签 img (宽高可设置，替代元素） 标签属性 src(图片地址) alt(图片出不来提示) title(鼠标提示) 图片路径 <!-- 查找图片和文件的规则，同级‘.或者省略了./'查找 --> <!-- 查找图片和文件的规则，同级‘.或者省略了./'查找 --> <!-- 查找图片和文件的规则，子目录./'查找 --> <!-- 搜索图片和文件的规则，向父级搜索.通过'../'查找 --> <!-- 图片和文件的搜索规则，父级的父级.通过'../../'查找 --> <!-- 网络资源 直接复制链接 --> <!-- 绝对路径 根目录‘/’--> - `sub`下标 `sup` 上标 - 超链接 a - target 打开目标的方式 _blank 新标签 _parent 使用框架 _self 默认值 _top 使用框架 ``` <a href="#id"></a> <!-- p{内容$(占位符)}* --> 注释快捷键 ctrl / <!-- p{内容$(占位符)}* --> 注释快捷键 ctrl / <!-- 以后用这个 --> <a href="#">空链接</a> <!-- 这个空链这个空链接 --> <a href="javascript:void(0)">空链接</a> <a href="javascript:;">空链接</a> ``` ### HTML预留字符 ` ；` 空格 `$gt;` 小于号 < `>` 大于号> `¥` ·￥·元 `©` 版权 ? ## 列表 ### 表格 border 边框 cellspacing 去除单元格间隙 cellpadding 填充单元格 tr 行 td 列 colspan(将列合并，即横合并，横合并减少同行td） rowspan(合并是上下合并，下一个tr中的td减少) > tr 不能写在里面div table等东西，td可以包含 ```html (1)colspan 两个单元格横合并 <td colspan="2">单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> 本来五个td，两者合并，所以四个td (2)rowspan 上下合并 <tr rowspan="2"> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> 上下合并，所以下面少两个td (3) td里面包裹table，上边合并单元格时，下边的td还需要合并单元格，然后包裹table。在写表格样式时，还需要清除所有样式。在写表格样式时，还需要清除所有样式。然后设置宽度，使用margin居中。 <style> table{ border-spacing: 0; border-collapse: 0; } ///清空格式 .table1{ width: 800px; margin: 0 auto; } //设置宽度，居中 table tr td{ border: 1px solid #ccc; padding: 5px 10px;} //设置边框 .table1 table{ width: 800px; } 设置包裹的宽度与整体相同 .tds{ padding: 0; } .table1 table tr td{ border: 0; } 将边框清0，自己写边框，不然容易重叠。 </style> <table class="table1"> <caption>费用报销单</caption> <tr> <td width="200" align="center">费用项目</td> ///为开头的文本设置宽度 <td width="100">类别</td> <td width="100">金额</td> <td width="200" rowspan="2" align="center">负责人(签字)</td> <td rowspan="2"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="4" >总人民币(大写) 拾 万 千 百 拾 元 角 分 （小写）￥ 元</td> </tr> <tr> <td colspan="4"> <table class="tds"> <tr> <td width="500" style="border-right: 1px solid #ccc;">总经理签字：</td> <td style="border-right: 1px solid #ccc;">财务负责人签字：</td> <td>报销人：</td> </tr> <tr style="border-top: 1px solid #ccc;">///单加边，否则，很容易重复合并单元线 <td style="border-right: 1px solid #ccc;">财务审核：</td> <td colspan="2">部门签字：</td> </tr> </table> </td> </tr> </table> ``` caption 表头 thead头 tr>th tbody 身体 tr>td 必须写在表格中tbody tfoot 尾 写表格table tr th(td)必须一起写 ### 类表格 将普通标签转换为表格标签，就可以借用表格的样式布局 常用 的结构：display:table>display:table-cell ``` //设置表格类 main{ display: table; width: 100%; height: 300px; } // 设一行，加上边框 div{ display: table-cell; //一行几个元素，一行分成几个相同的块 border: 3px solid blueviolet; } .div1,.div3{ width: 150px; } <body> <main> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </main> </body> ``` ### 列表 + ul 无序列表 ol有序列表 >li + li 中可嵌套p div 等 ul ol 中不可 > 首先先写一个盒子，定好几个盒子，盒子的内容用什么标签，写CSS时先清除样式，设置宽度，高度，设置margin居中，然后使用弹性布局浮动居中，之后再将宽度等分。弹性布局横向，是使用布局的父级写display：flex,而浮动是是谁布局写谁。 ```html <style> /* *通配符 */ *{ /* 初始化样式 清除标签不可控的内外边距 */ /* m0+p0 */ margin: 0; padding: 0; } /* 如果使用列表标签，先清除默认样式 */ ol,ul,li{ list-style: none; } /* 如果使用a标签，先初始化a标签的样式 */ a{ color: gray; text-decoration: none; } //初始化所有标签，后面好写 div{ width: 1200px; height: 80px; background-color: bisque; /* 模块在父空间居中 */ margin: 0 auto; /* 一个定宽的元素被设置了外边距自动后，会在父元素空间内平分剩余空间 */ } div ul{ /* 使用弹性布局，排列 */ /* 给要横排显示的列表li父元素设置弹性布局 */ display: flex; } div ul li{ width: 200px; text-align: center; padding-top: 20px; } </style> <div class="box"> <ul> <li> <a href=""> <h3>精选</h3> <p>猜你喜欢</p> </a> </li> <li> <a href=""> <h3>精选</h3> <p>猜你喜欢</p> </a> </li> </ul> ``` + dl>dt&dd (dt与dd同级，但是dt写小标算是) dl内可以嵌套一个dt,n个dd ，dt里面不可以不能插入div等一系列标签，dd可以，如果使***用span等一系列的行内元素写class，设置宽高一些东西，需要display：inline-block，转换为行内块元素，不然设置宽高无效***。 ```HTML <style> /* 初始化样式/样式重置 */ *{ margin: 0; padding: 0; } a{ color: #333; text-decoration: none; } /* 布局 */ .link-box{ width: 1200px; margin: 0 auto; /* 一个定宽的元素被设置了外边距自动后，会在父元素空间内平分剩余空间 */ background-color: #efefef; /*弹性布局浮动 是需要浮动元素的父元素 写让他横排 例如：dl整个浮动 弹性布局需要写在它的父元素.link-box里面*/ display: flex; } .link-box dl{ width: 240px; } .link-box dl dt{ font-size: 14px; } .link-box dl dd a{ font-size: 12px; color: #666; } .link-box dl dd a:hover{ color: crimson; } </style> <div class="link-box"> <dl> <dt>购物指南</dt> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> </dl> <dl> <dt>购物指南</dt> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> <dd><a href="#">购物流程</a></dd> </dl> ``` ### 表单 + 表单 input type 类型决定标签 + input 和button对齐常用属性 vertical-align: bottom; 底部对齐 + type： text password 密码 radio（单选）name 名称必须相同 checkbox 复选框 file 选择文件 date 时间 button 按钮 submit 提交按钮 reset 重置按钮 image 图片按钮 不常用 + button type: submit 提交按钮 reset 重置按钮 + 下拉框 lable select > option + placeholder默认提示 + 文本域 textarea <textarea name="" id="" cols="30" rows="10">内容</textarea> <!-- cols设行 rows 设列 --> ```html <form action=""> 用户名：<input type="text"><br> 密码：<input type="password"><br> <!-- checked 默认选中 --> <input type="radio"name="sex" id="male">//name必须相同，才只能选一个 <!-- 点男可以被点上 for要指向id内容 --> <label for="male">男</label><br> <label><input type="radio"name="sex" id="male">女</label><br> <label><input type="radio" name="sex" id="felm">中性</label><br> 爱好： <label> <input type="checkbox" name="" id="">足球 <input type="checkbox" name="" id="">篮球 <input type="checkbox" name="" id="">羽毛球 <input type="checkbox" name="" id="">乒乓球 </label> <br> <!-- 语义化 --> <!-- 四个按钮 button submit（提交数据，刷新页面） reset（重置表单数据）image图片按钮--> <!-- value 值 --> <input type="button" value="按钮1"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> <input type="image" src="" alt=""> <!-- button --> <button type="submit">提交</button> <button type="button">按钮</button> <!-- 下拉框 --> <label for="">生日：</label> <select> <option value=""请选择</option> <option value="">2022</option> <option value="">2021</option> </select>年 </form> ``` ## 常用样式 ### 文本样式 + color 字体颜色 + font-size：字体大小 + font-family：设置字体 + font-weight：字体加粗 + font-style：字体倾斜 + text-align：文本对齐方式 + text-decoration：文本装饰（下划线） + text-transform:lowercase 字母大写变小写 + text-indent：首行缩进 + line-height：行高 + justify-content: space-around; 均匀排列每个元素 *每个元素周围分配相同的空间* + transition: 0.3s;滑动 + opacity: 0.5;背景色透明 + overflow:hidden 隐藏溢出内容 scroll 添加滚动条 + cursor: pointer;鼠标变成手 + word-spacing：设置单词距离 + (/* 下面三句话为组合，/* 文字太长省略出现... */一定要给宽度样式 */ white-space:nowrap; overflow: hidden; text-overflow: ellipsis;) + letter-spacing：字间距 + object-fit: cover：强制图片不变形 + white-space: nowrap; 强制文本不换行 + vertical-align:middle 垂直居中 {display：table-cell搭配用可以} + transition: 2s linear; 过渡：使标签样式按照动画过程变化,1s表示时间 linear表示匀速 注：width/height=content+padding+border + ``` //文字在线上 <fieldset class="card-header"> <legend> <h3>我们的服务</h3> <p>PFOGRAM HIGHLIGHTS</p> </legend> </fieldset> ``` #### 媒体查询 + 媒体查询,根据条件使用特定的样式集合 ,screen 判断条件，判断展示页面的屏幕是不是普通的显示器（pc,ipad,mobile），max-width 当前浏览器窗口小于指定值。也可使用网格布局设置写出，可参考苹果官网 + 最大最小值：/* 尺寸的最大最小限定 */ max-width: 900px; min-width: 100px; min-height: 100px; max-height：900px ```HTML <!-- col-[size]-[num] 用于创建列。size 控制不同窗口尺寸下的样式，num控制对应的列数(就是份数-6就是十二份占六份，占1/2,4占1/3) --> <!-- 在col-lg中 大型台式电脑尺寸时，占6/12=1/2，col-md中型台式电脑尺寸时4/12=1/3占屏幕1/3，col-sm小型平板是占1/2， --> @media screen and (max-width:1200px) { body { background-color: lightsalmon; height:300px; } @media screen and (max-width:500px) { .col-sm-12{ width: 100%; } } <ul> <li class="col-lg-6 col-sm-12"> <div class="item"></div></li> <li class="col-lg-6 col-sm-12"> <div class="item"></div></li> <li class="col-lg-6 col-sm-12"> <div class="item"></div></li> </ul> ``` ### css样式 #### css选择器 | 选择器 | 例子 | 描述 | | :------------------------------ | -------------------------------------------------------- | :----------------------------------------------------------- | | 通配符选择器 * | *{ } | 选中所有 | | 标签选择器 body p h1-h6 ul li a | body{ } | 根据标签选中范围 | | id选择器 | <id="c"> | #c 前缀用点 id 选择器不能重名 | | 类名选择器（class） | <class="a" > | .a 前缀用点 | | 并列选择器 | ul,ol{ list-style:none } | 并集 ul和ol全部用此样式，用逗号 | | 后代选择器 | ul li{ } | 使用空格隔开 | | 子选择器 | h1 > label | 用于选择直接的紧邻子标签/选择器 h1 > label 可以解释为“选择作为 h1 元素子元素的所有 label 元素”。(父子关系) | | 相邻选择器 ~ | h1 ~ p { **color:** blue; **font-size:** 18px; } | 兄弟元素之间无需紧邻，二者有相同的父元素 | | 紧邻选择器+ | h1 + p { **color:** blue; **font-size:** 18px; } | 用于选择位置靠后的紧邻兄弟标签，二者有相同的父元素 | | 属性选择器 | input[type="text"] { **color:** blue; } | 属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号`[ ]`来指定标签具有的属性信息，如下所示： | + 伪元素 利用样式在页面上添加内容，伪造标签 before after #### 伪类选择器 | 选择器 | 例子 | 描述 | | :------------- | ------------------------------------------------------------ | :----------------------------------------------------------- | | :active | a:active{ box-shadow: 0 0 5px #222; } | 鼠标按下效果 | | :hover | a/div:hover{color:red } .box-bttom:hover .select{display: block;} | 鼠标悬停效果 滑动到box-bttom:的层时select的层显示 | | :link | .a:link{ color:red } | 当前地址没有被浏览器访问过颜色红色 | | :visited | .a:visited{ color:red } | 当前的链接地址被访问过（在浏览器中） | | :focus | input:focus{border: 5px solid blue}; | 表单获取焦点（鼠标点上去）时 ，input 框变色 | | :checked | input:checked{color: chartreuse; } | 匹配处于选中状态的 <input> 元素 | | :nth-child(n) | ul li:nth-child(3){ } | 选中父元素的第3个子元素 | | nth-of-type(n) | .li:nth-of-type(2){ color: salmon; } | 匹配父元素的第二个子元素/nth-of-type 分类型查找 | | :nth-child(4n) | ul li:nth-child(4n){ text-decoration: overline; } | 选择4的倍数 | | :first-of-type | ul li:first-of-type{ font-weight: bold; } | 匹配父元素中的第一个加粗元素 | | :last-of-type | p:last-of-type | 匹配父元素中的最后一个 <p> 元素 | #### 伪元素 | 伪元素 | 例子 | 例子描述 | | ------------ | --------------------------------------------------------- | --------------------------- | | ::after | p::after | 在每个 <p> 元素之后插入内容 | | ::before | p::before | 在每个 <p> 元素之前插入内容 | | 清除浮动 | .a::before,.a::after{content:"",clear:both,display:block} | | | 点击写小弹框 | 可以写在内容中来写 | | #### 选择器权重 + 浏览器只会展示权重最高的样式 + 行内style>id>class>tag/* + *通配符 全选 权重0 + 标签选择器 （权重1） + 类选择器 （权重10） + id选择器 （权重100） + 父子选择器 #p del (权重叠加) + importment权重无限大 ## 布局 ### 盒模型 + width 宽 + height 高 + padding 内填充（字与盒子距离） + margin外边框 （ [深入理解css中的margin属性 - Wayne-Zhu - 博客园 (cnblogs.com)](https://www.cnblogs.com/zhuzhenwei918/p/6124263.html) ） + border 边框：1px soild red; + border-radious:圆角 + border-collapse: collapse 合并表格相邻边框， 相邻的两个边框会合并为一个单一的边框 + background-color:背景颜色 + background-image:url();背景图片 + background-repeated：no-repeate 图片背景不重复 + background-position: center center; //图片位置 + background-size: auto 70%; // 设置背景图像的尺寸 + outline：1px soild red 轮廓线 + display:block/inline-block/inline + box-sizing: border-box; 边框盒模型 + /*内容溢出：隐藏 */ overflow: hidden; /* ，有内容超出才处理，无法单独使用，允许用户调整大小 */ resize: both; ``` //小三角 <title>小三角</title> <style> .sighn{ width: 0px; height: 0px; border-left: 5px solid transparent; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000; } </style> </head> <body> <div class="sighn"></div> </body> ``` ### 弹性布局 + display:flex 弹性布局 需要浮动的父元素写弹性布局 ``` /* 对齐方式 */ justify-content: center; /* 居中排列 */ justify-content: start; /* 从行首开始排列 */ justify-content: end; /* 从行尾开始排列 */ justify-content: flex-start; /* 从行首起始位置开始排列 */ justify-content: flex-end; /* 从行尾位置开始排列 */ justify-content: left; /* 一个挨一个在对齐容器得左边缘 */ justify-content: right; /* 元素以容器右边缘为基准，一个挨着一个对齐, */ /* 基线对齐 */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; /* 分配弹性元素方式 */ justify-content: space-between; /* 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点 */ justify-content: space-around; /* 均匀排列每个元素 每个元素周围分配相同的空间 */ justify-content: space-evenly; /* 均匀排列每个元素 每个元素之间的间隔相等 */ justify-content: stretch; /* 均匀排列每个元素 'auto'-sized 的元素会被拉伸以适应容器的大小 */ /* 溢出对齐方式 */ justify-content: safe center; justify-content: unsafe center; /* 全局值 */ justify-content: inherit; justify-content: initial; justify-content: unset; ``` | 值 | 描述 | 测试 | | :------------ | :----------------------------------------------------------- | :----------------------------------------------------------- | | flex-start | 默认值。从行首起始位置开始排列。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start) | | flex-end | 从行尾位置开始排列。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-end) | | center | 居中排列。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=center) | | space-between | 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between) | | space-evenly | 均匀排列每个元素，每个元素之间的间隔相等。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-evenly) | | space-around | 均匀排列每个元素，每个元素周围分配相同的空间。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-around) | | initial | 设置该属性为它的默认值。请参阅 [*initial*](https://www.runoob.com/cssref/css-initial.html)。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=initial) | | inherit | 从父元素继承该属性。请参阅 [*inherit*](https://www.runoob.com/cssref/css-inherit.html)。 | | ### 浮动 + 指定元素脱离原本的文档流沿着容器的左侧或右侧进行排列，允许其他行内（块）对自身进行行环绕排列（MDN）float:left/right 浮动，浮动是谁要浮动则写在哪里，不写父类。 eg:ul>li li写浮动，ul写清除浮动 + 使用原则1.如果使用浮动，就要将同级的标签全部设为浮动 2.一定要记得清除浮动 + 浮动会造成容器的高度塌陷 1.容器标签使用overfiow 2.容器标签在前后缀上转成block并添加clear样式,需要清除浮动的父类写清除。如下代码，div需要清除浮动，使用main来写清除浮动样式。 .a::before, .a::after{content:"",clear:both,display:block} · ``` // 当左边是图片，右边是文字时，可以写图片左浮动，使文字围绕图片在右边 如果中间自适应，则两边需要左浮动，右浮动，如果横排并列，直接都左浮动就可以 双飞翼布局 /* main{ background-color: rgb(224, 183, 183); height: 300px; } .div1{ float: left; width: 150px; height: 200px; border: 5px solid blue; overflow: hidden; } .div2{ float: right; width: 150px; height: 200px; border: 5px solid orange; } .div3{ height: 200px; border: 5px solid blueviolet; margin: 0 150px; } main::before; main::before{ content:""; display:block; clear:both } </style> </head> <body> <main> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </main> </body> </html> ``` ### 背景图位置(精灵图) + 参考0113 百度作业，苹果官网 + 设置背景图片(图片精灵，需要用background-postion:来调整出我们想要的图片) 1.首先设置一个<div class=""></div>，写一个样式添加背景图片 background-image: url('./img/nicon.png');背景图片要包裹写在背景里的内容 2.设置背景图片父级的宽高，浮动，相对定位等，在列表中就设置li的 3.设置图片的宽高，（最好用百分数写），绝对位置设置图片的位置。 4.清除浮动 5.放在图片上，出现弹框，写出前后缀,记得写display：none,在写hover里面display：block。 6.经常写背景图片要记住 ``` .a{ // 一般根据相对定位来写图片位置,给紧邻的父级写出 position:relative position:absolute; // 图片定位在哪里，图片在父元素中居中 right:0; left:0; margin: 0 auto; //写背景图片固定搭配 background-image: url(); background-repeat: no-repeat; //图片不重复 background-position: center center; //图片位置 background-size: auto 70%; // 图片大小 } ``` ### 定位 #### 相对定位 position:relative 1.使用相对定位的元素不会影响周围元素的布局 2.元素移动的基准点在标签布局的原有位置 可以使用left/top/right/bottom样式控制元素的水平方向和垂直方向的移动距离 距离是由元素边框和原位置的相同方向的边界之间的距离(不脱离文档流) 3.原有空间位置时会被保留的，后续的元素不会进行递补 4.定位元素的垂直层级关系是在普通元素的上方 #### 绝对定位 position:absolute（脱离文档流） 1.拥有绝对定位样式的元素原有的空间是不保留的，后续的元素会正常递补 2.绝对定位元素的默认移动基准点是body标签的左上角 3.可以自定义绝对定位元素的基准点，规则是获取 距离自己最近的 拥有非静态定位样式的 父级（上层）元素 4.移动距离的设定也是以自身标签的边界和定位事基准元素的边界距离 5.绝对定位元素的层叠关系也在普通元素的上方 水平向右正方向 水平向下正方向 6.添加有绝对定位样式的元素自身的特性会发生变化，元素的大小默认取决于内容的大小 如果设置有宽高，就以设置样式为准（行内标签不用改成行内块元素了） ``` #outer { position: relative; width: 500px; height: 500px; background-color: rgb(199, 196, 5); overflow: hidden; resize: both; /* 重置标签大小 */ } #inner { position: absolute; /* 居中 */ left: 0; right: 0; top: 0; bottom: 0; margin: auto; /* 居中，不用写固定值 */ width: 100px; height: 100px; background-color: rgb(51, 132, 185); } /* 绝对定位元素的外边距事根据定位位置进行偏移的 就是绝对定位中left 50px,margin20 居左叠加20，在原有的基础上又移动*/ /* 想要使用绝对定位居中处理，需要将各方向的值圈定出合适的区域， 同时将对应方向的外边距都设置成auto值，就可以实现居中 */ </style> </head> <body> <div id="outer"> <div id="inner"> </div> </div> </body> </html> ``` #### 固定定位 position: fix; （脱离文档流） 能够控制元素固定在浏览器窗口的某个位置 定位基准点就是窗口的左上角 其他的特性和绝对定位相同 #### 粘性定位 position: sticky; 是相对定位和固定定位的结合体 根据指定的位置，如果容器标签和浏览器窗口边缘的距离大于设置的距离时， 元素以相对定位特点展示 如果小于指定的距离值，就会以固定定位进行展示 如果容器标签离开浏览器窗口区域，这个标签也会滚动消失 ``` <style> .item-header{ position: sticky; top: 0; background-color: rgb(190, 243, 43); } </style> </head> <body> <div class="list"> <div class="item"> <div class="item-header"> 分段标题1 </div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="item"> <div class="item-header"> 分段标题2 </div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="item"> <div class="item-header"> 分段标题3 </div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="item"> <div class="item-header"> 分段标题4 </div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="item"> <div class="item-header"> 分段标题5 </div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> </div> </body> </html> ``` ### 网格布局 + bootstrap：Bootstrap 中的网格系统的基础是由media和float搭配实现的。其中列偏移效果是使用增加左侧外边距方式完成的（可写伸缩屏，也可参考苹果官网那个页面） ``` <!-- bootstrap.min.css 提供全部样式 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- bootstrap 的正常使用依赖于 jquery --> <script src="bootstrap/js/jquery.min.js"></script> <!-- bootstrap.min.js 提供框架中的动态效果 --> <script src="bootstrap/js/bootstrap.min.js"></script> 图库标的使用，和文字一样 <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <style> .fa{ font-size: 20px; color: royalblue; } </style> </head> <body> <p> 使用font-awesome 图标需要添加“fa fa- ”这样的类名，具体的样式修改和普通文字一样 </p> <i class="fa fa-user-circle-o" aria-hidden="true"></i> <span>用户</span> ``` + 网格布局 ``` 网格的基本写法 参考0114 //网格初始格式 style{ .row .col{ float: left; min-height: 1px; } .row::before, .row::after{ content: ''; clear: both; display: block; } .row .col-0 { display: none; } .row .col-1 { width: 8.333%; } .row .col-2 { width: 16.666%; } .row .col-3 { width: 25%; } .row .col-4 { width: 33.333%; } .row .col-5 { width: 41.666%; } .row .col-6 { width: 50%; } .row .col-7 { width: 58.333%; } .row .col-8 { width: 66.666%; } .row .col-9 { width: 75%; } .row .col-10 { width: 83.333%; } .row .col-11 { width: 91.666%; } .row .col-12 { width: 100%; } } //引用bootscript浮动格式和宽度样式 <div class="container"> <!-- .row 创建水平行 --> <div class="row"> <!-- 大屏时他们占9/12的屏幕 中屏时他们占9/12的屏幕 9与3是同一层级，占满屏 和列的用法差不多--> <div class="col-lg-9 col-md-9"> <!-- 在9/12的屏幕下.row 创建水平行 --> <div class="row"> <!-- 在9/12的屏幕下，将9/12的屏幕分为四等份 3/12=1/4 --> <div class="col-md-3 col">3/12/10</div> <div class="col-md-3 col">3/12/10</div> <div class="col-md-3 col">3/12/10</div> <div class="col-md-3 col">3/12/10</div> </div> </div> <!-- 大屏时他们占3/12的屏幕 中屏时他们占3/12的屏幕 9与3是同一层级，共同占满屏--> <div class="col-lg-3 col-md-3"> </div> </div> <h3>列嵌套</h3> //创建一个行 <div class="row"> <div class="col-md-10 col" > 在占屏幕的4/5的前提下，把这4/5都在分为四等分 <div class="row"> <div class="col-md-3 col">3/12/10</div> <div class="col-md-3 col">3/12/10</div> <div class="col-md-3 col">3/12/10</div> <div class="col-md-3 col">3/12/10</div> </div> </div> <div class="col-md-2 col">2</div> <div class="col-md-10 col">10</div> <div class="col-md-2 col">2</div> </div> ···································································································· ``` ### 图标库 + 百度上找阿里图标库，在文件中查找 ``` <i class="iconfont"></i> //iconfont是固定的 <div class="iconfont icon-guanbijiantou"></div> <i class="iconfont icon-guanbijiantou"></i> ``` # Javascript ### 数据类型 ##### 基本类型 + 数字类型 Number var a = 1; var b = -1.5; //负号紧跟数字前面 var c = 123456e5; //科学计数法 + 字符串类型 String 表示一些文本信息,在字符串中书写空格也是会保留的 对于长字符串，常规的书写格式不允许换行 var d = '这是一个字符串'; var e = 'this is a string'; var f ='<div> </div>'; var g = "字符串里面也有'引号'" var h = 'dsfde \'a \'gfhudk'; //对于一些特殊字符，可以使用\’转义符号 + 布尔类型 Boolean 只有两个值：真 假。表示条件的计算结果 var i = true; var j = false; + 未定义 undefined 只有一个值，表示没有定义具体值的变量和属性 // var k = undefined; var k; + 空 null 只有一个值，表示，没有具体的结果 var m =document.getElementById('aaa'); ##### 引用数据类型 + 对象类型 Object // 表示一系列相关基本数据的集合 /* 对象的语法格式： { 属性名：属性值， 属性名：属性值， ... } 属性名也要遵从变量名的定义规则 */ var n ={ brand: '联想', weight: 1500, isRed: false, address: {} }; + 数据结构 数组Array ：保存一系列 有顺序要求的 数据类型相同或功能相似的 数据 var p = [1,2,3,4,5]； ##### 命名规则 + 变量名和属性名的命名规则 + 可以使用（大小写）字母、数字、_、$这些符号 + 不能使用数字开头 + 不能使用汉字 + 长名称的中间不要使用空格 document.getElementById() + 当需要使用多个单词才能定义名称时，最好使用 小驼峰命名法 + 除去第一个单词，后面的单词首字母都大写 常见错误 + 符号书写了中文符号 + 是用来错误的定义名称（没定义就使用，使用时写错名称） + 没有遵从具体的数据类型用法(逻辑错误) + 没有遵从基本的使用规范 + 对于变量的声明，要遵从先声明再使用的逻辑 + var k; //不建议声明变量时，不设定初始值 ### 属性运算符 ``` var obj = { username: '张三', age: '22', friend: { username: '李四' } }; // 从对象中获取需要的属性值，使用 点操作符 通过属性名进行获取 console.log(obj.username); console.log(obj.age); // 点操作符在 赋值 号的右边使用，执行的是获取逻辑 var username = obj.friend.username; console.log(username); // 点操作符在 赋值 号的左边使用，执行的是设置逻辑 obj.username = '王五'; console.log(obj); // 在一个对象中扩展属性 obj.sex = '男'; console.log(obj); // 也可以使用[]的方式扩展或获取属性 var h = 'height'; obj[h] = 170; console.log(obj); console.log(obj[h] ); // 从数组中取出需要的数据 var arr = [ 'm','n']; // 需要通过数据存储的索引值（数据在数组的排序位置，默认从0开始） console.log(arr[0]); console.log(arr.length);//获取数组的长度，表示数组内部存储了多少个值 arr[20] = 'o'; console.log(arr); console.log(arr.length); ``` ### 运算符 ##### 算数运算符 + 加法 + ``` //数字之间的加法计算执行的是数学逻辑 //字符串之间的加法计算执行的是拼接逻辑 var a = 1, b = 2; var c = a + b; console.log(c); var d = 'hello ', e = 'world'; var f = d + e; console.log(f); var g = 200 + 100 + 'px'; console.log(g); // 数字和字符串之间的加法计算，会先将数字隐藏性的转换成字符串，在进行拼接 //隐式类型转换；在计算过程中，JS 自动根据类型的差异进行向相同类型转换的过程 //计算机在进行普通计算时，是会有误差的，无法消除 console.log(0.1 + 0.2); ``` + 减法 - ``` //减法计算都是优先将数据转换成数字类型在进行计算 //只有纯数字组成的字符串才可以进行正常转换 console.log(5 - 6); // -1 console.log(5 - '6');//-1 console.log('5' - '6');//-1 console.log('a' - 'b'); //NAN ：not a number //当出现无法转换成数字的内容出现在计算过程中时，计算结果都是NaN //只要有NaN参与的计算，结果都是NaN. console.log(NaN + 5 - 10);// NAN ``` + 乘法 * 除法/ 求余% ``` /数据类型转化逻辑和减法一样 console.log(5 * '6');//30 console.log('5' * '6'); //30 console.log('5' / NaN);//NAN console.log(5 / '6');//0.8333333 console.log(5 / 0); //Infinity无限的 console.log(10 % 3); //1 ``` ##### 赋值/比较运算符 ``` 赋值运算： var a = 1; //a = a + 5; a += 5; //效果完全相同，就是特定写法下的简写方式 console.log(a); // -= *= /= %/ 逻辑完全相同 ar i = 0; //i += 1 ; //++ 自增符号，控制变量的值加1 i++; console.log(i); ++i; console.log(i); var j = 0; console.log(j++); // 0 console.log(j); // 1 var m = 0; console.log(++m); // 1 console.log(m); // 1 // 如果 ++ 在后，就会先将变量的值作为表达式的计算结果，然后在进行加一操作 for(i=0 ;i<10;i++ ){ ++在后，会运算到i<10,就进行括号内运算，之后i++,在i<10循环 } //如果 ++ 在前 就会先进性加一操作，然后将新的变量值作为表达式结果 自减 -- 比较运算： //比较运算符计算的结果都是布尔值 // 大于 > 小于 < 大于等于>= 小于等于<= console.log(5 > 9); //false console.log(10 > 4); // true console.log(6 >= 6); // true //字符串之间的比较本质是按照 字母的 ASCII 码进行逐位比较 console.log('aba' > 'aaa');//ttrue var x = 50; //这里书写的逻辑和数学中的逻辑是完全不同的 // 会优先计算第一个比较符的结果，等到一个布尔值，在和第三个数字作比较 // true 可以当作 1 来看待，false 可以看作 0 看待 console.log(1 < x < 9); //true // 相等运算符 // == 相等 === 全等 !=不等 !==全不等 // === 全等 值与类型的变量比较 console.log(1 == 1); //true console.log(1 == '1'); //字符串和数字做双等比较，会优先将字符串转换成数字，在进行比较 false //双等号尽量不使用，因为会出现隐式类型转换，将两侧的数据转换成想同类型，在进行值比较 console.log(1 === '1'); false //优先使用全等号，先判断类型是否相同，在判断值是否相同 console.log(1 != '1'); //用法同双等 true console.log(1 !== '1'); //用法同全等 true console.log(null==undefined); //true null 与 undefined 都是假值false,所以相等 console.log(null===undefined); // false 类型不同，不相等 console.log(2==true);//数字与布尔值转换优先转换布尔值，true转换为1，1与2不相等 console.log(NaN===NaN); // NaN和任何值都不相等，包括自己 false ``` ##### 逻辑运算符 ``` // 真值：自身为 true 或者可以被转换为 true 的值叫真值，其他都叫假值 // 假值常见的有6个：false、空字符窜 ''、null 、 undefined、 NaN、数字 0 // 与，并且 && // 可以将多个表达式串联到一起， //只有每一个表达式的值都是 true 或者可以转换为true. 整体计算的结果是最后一个表达式的结果 // 如果表达式中存在假值，就返回一个假值表达式的结果 var phone={ color:'red', price:1500 } var pay = phone.color==='red' && phone.price < 2000 console.log(pay); true var m = 1 + 6 && 7 - 9; console.log(m); //-2 console.log(NaN && 0 && false);//NAN var x = 5; 1 < x && x < 9 // 或 || // 可以将多个表达式串联到一起 //只有每一个表达式的值都是 false 或者可以转换为false.整体计算的结果是最后一个表达式的结果 // 如果表达式中存在真值，就返回一个真值表达式的结果 console.log(null || 0 || false); //false console.log(null || 0 || true || 100); // true // 非，取反 ! // 会先将计算的值进行布尔值转换，然后再取反 console.log(!true); //false console.log(4 < 5 && 100 > 90 || 0 || !NaN);//true ``` ##### js的隐式转换 + 大多数情况下，隐式转换都遵循这个规则，当然有特殊情况，特殊情况特殊对待就行了，当使用==判等时，会转成同类型再比较 对象---》字符串 ---》数值 布尔 ---》数值 ###### 对象和布尔值比较 + 对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字 ``` [] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1，所以为false ``` ###### **对象和字符串比较** + 对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。 ``` [1,2,3] == '1,2,3' // true [1,2,3]转化为'1,2,3'，然后和'1,2,3'， so结果为true; ``` ###### **对象和数字比较** + 对象和数字进行比较时，对象先转换为字符串，然后转换为数字，再和数字进行比较。 ``` [1] == 1; // true `对象先转换为字符串再转换为数字，二者再比较 [1] => '1' => 1 所以结果为true ``` ###### **字符串和数字比较** + 字符串和数字进行比较时，字符串转换成数字，二者再比较。 ``` '1' == 1 // true ``` ###### **字符串和布尔值比较** + 字符串和布尔值进行比较时，二者全部转换成数值再比较。 ``` '1' == true; // true ``` ###### **布尔值和数字比较** + 布尔值和数字进行比较时，布尔转换为数字，二者比较。 ``` true == 1 // true ``` ##### 字符串连接符与算术运算符隐式转换规则混淆 + 将字符串连接符(+ : 只要+号两边有一边是字符串)与算术运算符(+:两边都是数字)的隐式转换搞混淆 + 1.字符串连接符+：会把其他数据类型调用String()方法转成字符串然后拼接 ``` //+是字符串连接符： String(1) + 'true' = '1true' console.log ( 1 + "true" );//1true var bar=true; console.log(bar+"xyz") // truexyz ``` + 2.算术运算符+ ：会把其他数据类型调用Number（）方法转成数字然后做加法计算 ``` //+是算术运算符 ： 1 + Number(true) = 1 + 1 = 2 console.log ( 1 + true );//2 // +是算术运算符 ： 1 + Number(undefined) = 1 + NaN = NaN console.log ( 1 + undefined );// NaN // +是算术运算符 ： 1 + Number(null) = 1 + 0 = 1 console.log ( 1 + null );//1 ``` + 字符串连接符- ,将字符串转换为数字 ``` var bar=true alert("1"-bar); //0 alert("1" - 23 +false) //-22 将字符串转为数组，布尔值转为数组 ``` ### 函数的基本用法 ##### 声明式函数和赋值型函数 + 声明式函数(具有函数名) ``` function fo(){ console.log('fo');} // 调用函数：执行内部的语句 fo(); ``` + 赋值型函数(匿名函数) ``` // 把函数作为一个值使用 var fn = function () { console.log('fn'); } fn(); var obj = { x:function(){ console.log('x'); }}; obj.x(); ``` ##### 形参和实参 ``` // 声明函数时书写的小括号用于 声明函数内部需要的参数的 ：形参 （提供给函数内部逻辑的变量） // 执行函数时书写的小括号用于 为函数的参数传递具体的值 ：实参 （满足函数执行时需要是的具体值） function sayHi(username){ console.log(username + '说 你好!'); } sayHi('小米'); // 当为函数设计多个形参时，具体的实参要和形参顺序对应（函数的参数是由于顺序要求的） function sub(a, b){ console.log(a,b); // 10, 5 console.log(a - b); // 10 } sub(10,5); // 如果传递的实参数量小于形参数量，没有获取到值的参数按undefined处理 sub(50); // 50 undefined // 如果传递的实参数量大于形参数量，形参按顺序结束值之后，多余的值会被忽略 sub(100,50,20); // 100,50 ``` ##### arguments ``` function sum(){ // 函数在执行时，内部会初始化一个参数对象，作用就是收集函数所有的实参，放置在一个类数组对象中 // 主要是应对函数参数数量不确定的场景 console.log(arguments);} sum(1,2); sum(1,2,3,4,5); ``` ##### 函数的返回值 ``` // 能够将函数内部的值传递到函数的外部，通过 return关键字把内部值传到外部 // return 中断函数的执行 function add(x,y){ return x + y; console.log('return 后面的代码不会执行') } var s = add(100, 300); console.log(s); function fx(){ // return 后无东西，函数执行的结果按underfined(未定义) 处理 return;} var y = fx(); // 如果函数内部没有给定返回值，函数执行的结果按underfined(未定义) 处理 console.log(y); ``` ### 函数的作用域 + 全局和局部作用域 ``` // 作用域:限制声明变量能够使用的范围 // var 、 function、 函数的形参也是声明 // 全局作用域：当前页面在浏览器内部运行时，所有js代码整体运行的环境(只有一个) // 局部作用域: 函数声明时，大括号({})圈定的范围叫做局部作用域（词法作用域） // 在全局作用域中声明的变量称为 全局变量 // 全局变量可以在声明之后的任意位置被使用 // 在局部作用域中声明的变量称为 局部变量 // 只能在当前函数范围内被使用 var a = 1; console.log('全局变量a',a); function fo(){ var b = 2; 在局部找到声明，则为局部函数，未找到声明，直接赋值，为全局变量 console.log('全局变量a',a); console.log('局部变量b',b); return b; } fo(); // 2 // console.log('局部变量b',b); // error b是未定义的 这个引用的b是全局变量的，但是全局变量未定义 ``` + 函数内部变量值的查找过程 ``` var x = 1; function outer(){ var x = 10 ; var y=2; function inner(){ var z = 3; console.log(x, y, z); } inner(); } outer(); console.log(x); // 10 2 3 // 1.优先在当前函数内部作用域中查找有没有对应变量的声明，如果有，就获取对应的值 // 2.如果没有，就去创建这个函数所在的作用域中查找 // 3. 重复步骤1-2，一只查找到全局作用域 // 4.如果找到最后都没有发现变量声明，就会报错 ``` ### 流程控制语句 ##### if 条件语句（范围限定） ``` /* 语法结构 if(判断条件表达式){ 当条件为真时，执行的代码片段 }else{ 当条件为假时，执行的代码片段 } if语句的组合写法 if() {} if() {} else {} if() {} else if() {} else {} */ eg:var x = 70; if (x > 80) { console.log('x > 80'); } else if (x > 60) { console.log('x > 60'); } else if (x > 40) { console.log('x > 40'); } // 嵌套写法 var p = { color: 'black', price: 1900 } if (p.color === 'black') { if (p.price < 2000) { console.log('买它'); } else { console.log('太贵了,不想要'); } } else { console.log('不是黑色,不想要'); } //条件语句的{} 不会创建局部作用域 //建议：现阶段一般不要再非函数 {} 里面声明变量，如果确实需要声明，也不要在 {} 外部使用 // 返回值 = 条件 ? 条件为真时实际计算的表达式 : 条件为假时实际计算的表达式 n = (m > 10) ? (m * 2) : (m / 2); ``` ##### switch... case... + switch 声明条件语句，将判断的值一次和内部 case 定义的值作全等比较 如果相等，就执行对应 case 后面的代码片段 如果不相等，就继续判断下一个 case 的值 如果都不想等，就默认执行 default 定义的语句 内部 break 用于控制跳出条件语句 一般用于判断 枚举值(设置特定值) 的逻辑 ``` var day = 2; switch (day) { // 可以将多个判断值进行合并，共用同一个代码片段（原因就是再上一个判断值后面没有 break ） case 1: // { // console.log('今天星期一'); // break; // } case 2: { console.log('今天星期二'); break; } case 3: { console.log('今天星期三'); break; } // 最后的 default 是可选的，类似于 if 语句中最后的 else default: { console.log('其他日期'); } } ``` ### 循环语句 ##### for 循环语句 + 使用场景:有明确的重复次数 语法结构： for(声明计数的起始值; 判断循环结束的条件， 比较次数是否达到临界值; 累加次数 ){ 需要循环执行的代码片段 } 执行顺序： 1. 先执行声明次数的语句，获取到次数变量 2. 判断是否满足结束循环的条件， 3. 如果条件为真，就执行一次循环代码 4. 次数累加步骤 5. 再次判断循环条件，重复执行 2-4 步骤 6. 一直执行到条件判断为假，结束循环 计次变量是可以在循环体内部使用的，每循环都表示当前的次数 ``` for(var i=0;i < 10; i++){ console.log('重复', i); } console.log('循环结束', i); var arr = ['a', 'b', 'c']; for(var j=0; j < arr.length; j++){ var item = arr[j]; console.log(item,j); } function sum(){ console.log(arguments); var ret = 0; for(var i=0; i <arguments.length; i++){ var item = arguments[i]; ret += item; } return ret; } var s= sum(4,5,6,7,8); console.log(s); ``` ##### while 循环 + 使用场景：没有次数要求，只要满足条件就会结束 语法结构： while(是否进行下一循环的判断条件){ 条件为真时执行的循环代码 } 循环体内部一定要有不断修改判断条件的代码，否则就会造成死循环 ``` //需求：一次减3，小于2就停下来 var m = 10; var n = 0; while (m >= 2) { // 几次停下来 n++; m -= 3; // if(m < 2){ // break; // } console.log(m); } console.log(n); ``` ##### do{ }...while() + do { 循环体 }while(判断条件)； 先执行一次循环体，在进行循环判断决定是否循环 会保证循环代码至少执行一次 ``` // 提前中断循环 for( var h = 0; h < 10; h++){ if(h === 3){ // 跳过当前循环剩余步骤，直接进入下一循环 continue; } if(h >= 7){ //提前结束循环 break; } console.log(h); } ``` ### 数据类型的判断 ##### typeof + typeof 返回一个字符串，表示对应数据的类型 ,可以判断基本类型数据（除了 null）和函数 ``` var type = typeof 123; console.log(type); // number console.log(typeof NAN); // number console.log(typeof 'abc'); // string console.log(typeof true); // boolen console.log(typeof undefined); // undefined console.log(typeof function () { }); // function console.log(typeof null); // object console.log(typeof []); // object console.log(typeof {}); // object ``` ##### instanceof + instance 实例：通过对应类型构造函数创造出的结果叫实例, + 可以简单的区分出引用数据类型 console.log(123 instanceof Number); // false console.log('abc' instanceof String); //false console.log(true instanceof Boolean); //false console.log([] instanceof Array); // true console.log({} instanceof Object); // true console.log(function(){} instanceof Function); // true console.log([] instanceof Object); // true ##### Object.prototype.toString.call() ``` // 万能方法 function getType(data){ return Object.prototype.toString.call(data).toLowerCase().slice(8,-1); } console.log(getType('abc')); // string console.log(getType(123)); // number console.log(getType(true)); // boolen console.log(getType(null)); // null console.log(getType(undefined)); // undefined console.log(getType([])); // array console.log(getType({})); // object console.log(getType(function(){})); // function console.log(getType(/a/)); // regexp 正则表达式 console.log(getType(new Date())); // date console.log(getType(document.body)); // htmlbodyelement ``` ### 数据类型的特点 + 两大类型： 1.基本类型： Number,number,boolean,null,underfined,string 2.引用数据类型：bject [Array 数据结构] 通过一个地址找到值 ##### 基本类型： + 存储的位置是在内存的栈区，存储的内容就是实际声明的值 + 基本类型的值是不可变的，一旦创建完成，就无法再修改 + 日常的修改操作实际是以原数据为基础，创建新值的过程 var a = 1; var b = 1; var str = 'Hello!' var ret = str.toUpperCase(); // 小写变大写 console.log(ret); //HELLO console.log(str); //hello console.log(a === b); // 在进行值的比较时，就是直接使栈区内存储用具体的值进行比较 var c = b; console.log(c); // 1 // 在使用赋值号进行值传递时，会将对应的值复制一份，传递给新的变量 // 赋值就是复制 b = 5; console.log(c); // 1 // 当原始的变量值发生修改时，新的变量值是不受影响的 ##### 引用数据类型： + 数据存储的位置是在内存的堆区，堆区存储的数据是允许随意的扩大或缩小 + 对应的变量名和数据在堆区中的地址还是存储在栈区的 ``` var obj = {}; console.log(obj); // {} obj.x = 1; console.log(obj); // {x:1} // 引用数据类型的值是可以被修改的 var obj2 = obj; console.log(obj2); // {x:1} obj.x = 5; console.log(obj2); // {x:5} // 引用类型数据在做赋值数据传递时，实际是将栈区中存储的数据地址赋值一份传达过去 // 实际的值没有发生任何变化 obj2.x = 10; console.log(obj2); // {x:10} // 当其中一个变量修改数据时，其他的变量引用结果都会受到影响 function fn(data) { return data; } var m = 100; var n = fn(m); console.log(n); // 100 var o = {}; function fo(data) { data.h = 100; return data; } // data=o; var p = fo(o); console.log(o);// {h:100} console.log(p === o);// true // 函数形参接受的值都是实参变量在栈区中存储的内容（基本类型值、引用类型地址） // 当两个变量在比较时 // 如果两个变量都是基本类型数据，比较的直接就是栈区中的值 // 如果都是引用类型数据，比较的是栈区中存储的地址 console.log({} === {}); // false console.log(1 === 1); // true var i = {}; var j = i; console.log(i === j);// true ``` ### 预编译（变量提升） + js 代码在执行时是分两个阶段的：1.预编译阶段 2.执行阶段 + 变量提升 预编译阶段对普通变量声明的操作：（变量提升）（var a;） 当代码要在解释器环境运行前，解释器会先扫描一边代码（不是运行） 会先将所有声明变量提取