前端学习笔记（部分）
前端笔记：
h5笔记：
英文状态下输入！可以直接跳出格式
UTF-8：万国码
head第二行没用，可以删去。
title内为网页名称
body内填网页内容
这是单标签 主要用于申明属性 主要用于输入内容 lang 后面写语言 en代表英语 可以直接删去
段落标签：
-
段落和换行标签：
<\p>
- 水平线分割标签
- 水平线分割标签
斜体
加粗
结构标签
、图片标签：输入image src后面填写路径 alt后面是若图片出现异常无法显示而显示的文本 后面可以跟width设定宽度 height设置高度
超链接：a标签 herf后面跟网址 标签内内容填写超链接显示文字或者标签嵌套加入image标签做成图片超链接
锚链接：使用超链接实现 只是跳转到内部 所以跳转目标出设定一个id 然后a标签herf后写“#id名”即可
功能性发邮件/打电话：也是以超链接形式实现 herf后写mailto：邮箱地址 实现发邮件 herf后写tel：电话号码实现打电话
块级元素：独占一行，换行显示，可以设置宽高，块可以套块和行。
行级元素：在行内显示，内容撑开宽高，不可以设置宽高（img、input除外），行只能套行。
css3笔记：
- 选择器{声明；属性：值；} 如 （标签选择器）
- 颜色：color 字体大小：front-size
- 类选择器：1.首先在标签中 定义类名 class=“类名”多个标签的类名可以重复 因为类选择器目的就是选中多个 2.使用方法： .类名{声明；}
- id选择器：首先在标签中 定义id名 id=“id名” 2.使用方法： #id名{声明；}
- id选择器和类型选择器的区别： id是唯一的 类不唯一
- 标签选择器 < 类选择器 < id选择器
- 可以同时设置标签和id
- Html导入css的样式方法：1.内连样式：在head之前写css 2.内部样式 在每个标签内写 3.外联样式：直接新创建一个css文件 格式：选择器{声明；} 然后将新css文件和原html文件连接起来 连接方式：html文件head前加link 然后跳出框内herf后写css文件路径以及名字（链接式）
- 当前目录：./
- 第二种外联连接方式：head前加里面用@import url（css文件路径以及名字）（导入式）
- 一般用链接式，导入式只能导入css样式，而且有些浏览器不兼容
- 样式优先级：内部>内联？外联 取决于在head中 谁在下面，谁的样式起作用
- 设置字体样式：font-family 设置字体类型 font-style 设置字体风格italic（斜体） front-weight 设置字体粗细 font 可以设定所有属性
- text-align 文本位置 left左对齐 right右对齐 center居中
- 设置字体颜色：color：颜色
- background-color 背景颜色
- line-height:行高
- text-decoration 文本装饰 underline（下划线）overline（上划线） line-through（中划线） none取消所有格式
- 伪类语法：伪类名称：a:link（未单击访问时超链接形式） a:visited （单击访问后超链接形式） a:hover（鼠标悬浮其上的超链接样式） a:active（鼠标单击未释放） 内部可以加属性如color然后设定颜色
- css设定鼠标形状：default 默认光标 pointer 超链接的指针（手） wait（转圈等待的效果）help（指示可用的帮助） text（指示文本） crosshair（十字架）
- 在伪类语法中用cursor使用设定鼠标形状
- span的作用类似小括号 用于改文本局部的样式
- 列表分为： 无序列表（ul） 有序列表（ol） 自定义列表（dl）
- （在body内）使用列表分为两个步骤：申明列表类型 和申明列表项
- 每个浏览器为列表设定的初边距不一样 所以需要style内加上*{margin：0；padding：0；}
- 有序列表会帮你排序 标上序号 若像倒叙 则在ol 后加reversed
- 更改序号类型可在ol后加type选择序号类型
- 设置起始序号 start=“xx”
- 设置无序列表的类型：style中加list-style选择类型 none是取消·
- 自定义列表使用方法 dt后内容左对齐 dd相当于段落行
- 表格
标签
行 列 - 列合并：（标签内加入）colspan=“合并几列”框内写合并框的内容
- 同样的原理 行合并：rowspan
- 表单：input标签 一般格式 xxx可以是text（文本）、password（密码···形式）、radio（选择圆圈）
- Radio设置多选一可以把所有选项取相同名字 即都加name=“xxx”
- 默认选中：标签内加checked=“checked”
- 扩大选框选中的范围：1.给文字部分加一个label标签 for起名字 2.给input起一个和for后面名字相同的id名
- 复选框：type=“checkbox”
- 按钮：type=“botton” value后面写内容 或者
- 选择框下拉菜单： xxx填写备选项 value后面写获取该选项时反馈的值
- option<>内后可以加selected=“selected”使该选项为默认选择
- 多行文本域（限制最大输入字数）：标签 name后面写该多行文本域 cols：显示的行数 rows：显示的列数 xxx：文本内容 （但一般不用textarea）
- 使用input限制输入文字个数：利用maxlength属性 设定最大输入长度 在input类型是text或者password时适用
- 可以给input设置id 然后可以通过id选择器设置输入框宽高
- 隐藏域：type=“hidden” 可以隐藏内容且不占空间 同时也可以
隐藏段落
- 只读：readonly 在标签内加
- 禁用：（按钮变成灰色不可使用状态）一般使用于后期的判断 disabled 在标签内加
- 后代选择器：标签选择器下通过写一层层的标签 如li a{color：red；} 注：只要是后代，都发生变化
- 子代选择器：只有儿子生效 使用方法：类似于后代选择器 但用>连接 如h1>strong{color:red;}
- 并集选择器：用，连接标签选择器下的多个声明 可以联用子代选择器
- 交集选择器：用.连接标签选择器下的多个声明
- 属性选择器（只要具备某个属性，或者属性=属性值，就会被选中执行某些操作）：在标签选择器下用[xxx]{}xxx是属性如herf 满足以下任意条件：1.具备某个属性 2.满足属性=值 3.^=‘’以什么字母开头 $=‘’以什么字母结束 4.*=“xxx”包含xxx
- 边框设置的四种样式：border属性：后面可以添加宽、线类型、颜色 线类型：solid（实线）、dashed（虚线）、double（双实线）、dotted（点状虚线）
- 如果只给了一个边框属性，那么则同时生效作用于元素的四个边框
- 若想让元素的四个边框不同，可以分别设置 如border-top border-bottom border-left border-right
- 将div变圆：border-radius属性 参数设置为50% 且div必须是正方形 否则是椭圆
- 将div变三角形：将div的width和height都设置为0px 设置四个边框不同颜色相同像素宽 将其他三个边框颜色设置为transparent（透明） 即可 （调高width或height可以变成梯形）
- 给元素设置外边距：margin参数 可以margin-bottom、margin-top……一个个单独设置 也可以直接margin后面跟四个参数值（依次为上右下左） 单位为px（像素） 另外，设置两个值的时候第一个值代表上下 第二个值代表左右
- 盒模型的计算大小：实际展示大小=元素大小+边框+内边距
- 内边距：padding 用法和margin相同
- 怪异模式：box-sizing：border-box 增加内边距且不改变元素的大小
- 初始化css样式：不同浏览器初始格式不同 需要统一样式 则需要先初始化 即设置*{margin：0；padding：0；}
- 块元素：一定是独占一行，可以设置宽高。如ul、ol、li、form、div等
- 行内块元素：不独占一行，可以设置宽高。如button、img、input、select等
- 行内元素：不独占一行，可以设置宽高。如：span、a、label等
- 转换为行内元素：display：inline 转换为块元素：display：block 转换为行内块元素：display：inline-block
- 浮动：float 可以设定方向如float：left
- 元素浮动之后就脱离了标准文档流
- 清除浮动的方法：1.给浮动的父元素加一个高度 2.给浮动下面建一个空白的div 起名叫clearfix，然后在选择器中设定clearfix下clear：both（或者clear：方向）
- 超出部分隐藏：overflow:xxx xxx可以是visible(默认值。内容不会被修建，会呈现在盒子之外) hidden（内容会被剪切，且其余内容不可见） scroll（内容会被修建，但浏览器会显示滚动条以便查看其余内容） auto(如果内容被剪切，则浏览器会显示滚动条以便查看其余内容)
- 定位：把元素放在我们指定的位置
- 定位分类：static（默认值，没有定位） relative（相对定位） absolute（绝对定位) fixed(固定定位)
- 固定定位：滚轮滑动，显示的位置一直不变 参照物：浏览器屏幕 不占实际位置，位置会被下面元素占去
- 申明定位属性后，可以通过设定left、bottom（距离当前页面最底部的距离）、top、right的参数值来设定位置
- 相对定位：滚轮滑动，位置随滑动改变。占实际位置，位置不会被下面元素占去 参照物：自身左上角的原点
- 绝对定位：脱离标准流 ，如果绝对元素的父元素没有设定过任意定位，参照物是最外面元素的左上角（浏览器的左上角），如果绝对元素的父元素有任意定位，参照物就是父元素的左上角。
- 子元素设定绝对定位，那一般父元素就设定相对定位
- z-index属性：整数，默认值为0 数字越大越优先显示 用于重叠的时候分层 最大值是2147483647 值相同的时候 谁的代码在下面谁优先显示，因为程序最后读到他
- 实现文本在div中上下居中：使用flex布局 display: flex;align-items: center;justify-content: space-around; flex-direction: column;
JS笔记：
JavaScipt分为三个部分：ECMAScript、BOM、DOM。ECMAScipt：语言标准 BOM：浏览器对象模型，只要是浏览器给我提供的功能，前后退隐藏最小化最大关闭等统称为BOM DOM：文档对象模型，页面上显示的所有内容，统称为DOM
js文件代码的后缀就直接是.js
Js代码引入的三种方式：外部、内部、行内。
外部引入：使用 xxx为js文件地址
内部样式：在script双标签之间填入js内容 可以放在head双标签之间 body双标签之间 body双标签之外
标签内部嵌套：eg.<button onclick=“alert(xxx)”xxx
js的方法：弹框输出方法：alert（‘弹出内容’(或者用””)）document.write(‘xxx’)直接显示
声明变量：var 变量名=值 赋值：等号后面的值赋值给等号前面的变量名 变量：常常变化的量
声明变量后，系统会立马在内存开辟一片空间。
声明变量如果不写var，解释器会自动帮你补全。
js中；代表结束
接受浏览器弹框输入：prompt（‘xxx’） xxx为内容（提示用户输入的信息）
js的数据类型：undefined 当变量被申明时没有初识值，则将会被赋予undefined null 表示一个空值，与undefined值相等 number 包含整数和浮点数 boolean 布尔型 string 被引号括起来的文本 object 属性的集合、每个属性都由‘名/值’对构成
只要变量值是‘’ 无论前面怎么定义变量类型 都是string类型
console.log(xxx) xxx为变量名 这是程序员调试用的 可以测试xxx的输出值
算术运算符：+、-、*、/、%、++、– 赋值运算符：= 比较运算符：>、<、>=、<=、==、!=
加法：对于A+B，如果一个是字符串，一个是数字类型，会拼接 ，如果都是数字类型，则会运算
减法：对变量隐式转换，只要能转换为number类型，全部转换为number类型，然后运算
如果无法转换为number类型，将不再运算 无法运算 返回结果NaN （not a number）
乘法、除法和减法一样
取余数的时候 如果被除数小于除数 取本身
取整 在需要取整的变量前加parseInt
小数 paseInt
==只判断内容 ===不但判断值，还要判断数据类型 成立返回true 不成立返回false
++代表自增 –代表自减 ++在前，先自增，再运算 –在后，先运算，再自增
变量命名规则 严格区分大小写 不能以数字开头 不能是关键字、保留字 遵循驼峰命名法（首字母小写，后面单词的首字母需要大写）
typeof可用来获取检测变量的数据类型 可以加在console.log(xxx)中xxx的前面 则输出值为xxx的数据类型
if、if else、else if、switch、do-while、break语句用法和c语言相同
三元表达式（三目运算符）：条件表达式？表达式1：表达式2 如果条件表达式为真 则返回表达式1的值 如果条件表达式为假 则返回表达式2的值
声明函数语法结构：function 函数名（）{ 函数体 } 调用函数则直接使用函数名（）即可
我们可以利用函数的参数实现函数重复不同的代码（参照c语言的实参和形参的区别）
如果实参数量大于形参，则会忽略多余的实参用其他的进行运算 如果实参数量小于形参，意味着是数字加上undefined，结果是NaN
返回语句return语句和c语言用法相同
不知道有多少个参数传递时，可以用arguments来获取。arguments实际上是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中储存了传递的所有实参。
1.arguments展现形式是一个伪数组，因此可以遍历。具有特点：1.具有数组的length属性 2.按照索引的方式进行存储的3.它没有真正数组的一些方法pop（） push()等等
用法eg.function fn(){
console.log(agruments);
}
fn(1,2,3);
预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面。
构造函数的语法格式：function 构造函数名(){
this.属性=值；
this.方法=function(){}
}
1.构造函数的名字首字母必须要大写 2.构造函数不需要return就可以返回结果 3.我们构造函数必须要使用new 4.我们只要new Star（）调用函数就创建了一个对象 5.我们的属性和方法前面必须添加this
对象：特指是一个具体的事物
我们利用构造函数创建对象的过程我们也称之为对象的实例化
new关键字执行过程：1.new构造函数可以在内存中创建一个空的对象 2.this就会指向刚才创建的空对象 3.执行构造函数的代码 给这个空对象添加属性和方法 4.返回这个对象
遍历对象：for（变量 in 对象）{ }
JS中的对象分为3种：自定义对象、内置对象、浏览器对象
通过查MDN文档可以查阅js的具体各内置对象用法
Math数学对象 不是一个构造函数，所以我们不需要new来调用 而是直接使用里面的属性和方法即可。
js中的四舍五入：其他数字都是四舍五入，只有.5是往大了取 如-1.5四舍五入后是-1
window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
window.onload 事件绑定事件处理函数，绑定的是一个匿名函数，也可以绑定具名函数。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 仰望星空时！评论数据库加载中