前端学习笔记

1.npm指令

npm前端包管理工具
npm run serve 运行项目
npm i 安装
npm add 别名 源url

根路径文件package.json的说明参考

2.线上创建vue项目工具

vue ui 指令后点击 http://localhost:8000
跳到浏览器后有页面可以填写创建Vue项目，填写项目名字和远程仓库等，本地编译器和这个页面服务建立长链接，填完之后自动在本地编译器创建一个初始化Vue项目。

3.不写ul写li也可以

不写ul直接li没影响，但是有个概念就是，标签语言是有它的意义的，光写li没意义、

4.ul指定list-style-type属性:

list-style-type可以根据枚举值指定这个ul下的li项前的点的是什么样子的点

none不使用项目符号

disc实心圆，默认值

circle空心圆

square实心方块

decimal阿拉伯数字

lower-roman小写罗马数字

upper-roman大写罗马数字

lower-alpha小写英文字母

upper-alpha大写英文字母

5.inline block inline-block区别

inline:
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行.
不能更改元素的height，width的值，大小由内容撑开.
可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
block:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block:
结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素

6.css的font-family 属性

font - family属性指定一个元素的字体。他的值指定某一些字体，arial为宋体

7.css的webkit-font-smoothing属性

8.css的text-align属性

“text-align 属性规定HTML元素中的文本的水平对齐方式，center为居中，right为靠右

9.onload不能用在div只能在body标签

nload 事件会在页面或图像加载完成后立即发生。

onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。下面这些标签也可以。

, , , , , , ,

10.js改变html标签元素的方法

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
appendChild()这个方法一般是在指定元素节点的最后一个子节点之后添加节点
document.createTextNode:创建一个文本节点:

例如： oTable.rows[i].cells[m].appendChild(document.createTextNode(" "+time.getTime()));

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
参考

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

1.通过 id 找到 HTML 元素
2.通过标签名找到 HTML 元素：
通过标签名查找 HTML 元素
本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有

元素：
var x=document.getElementById(“main”);
var y=x.getElementsByTagName(“p”);
3、通过类名找到 HTML 元素：var x=document.getElementsByClassName(“intro”);

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

1.JavaScript 能够改变页面中的所有 HTML 元素
2.JavaScript 能够改变页面中的所有 HTML 属性
3.JavaScript 能够改变页面中的所有 CSS 样式：document.getElementById(“p2”).style.color=“blue”;
4.JavaScript 能够对页面中的所有事件做出反应：

4.1当用户点击鼠标时：onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
4.2当网页已加载时：onload 和 onunload 事件会在用户进入或离开页面时被触发。
4.3当图像已加载时
4.4当鼠标移动到元素上时：onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
4.5当输入字段被改变时,onchange 事件
onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

4.6、当提交 HTML 表单时
4.7、当用户触发按键时

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：displayDate()是一个函数

4.8重置窗口时.onResize事件，调整浏览器窗口大小的时候

11.js里面的this指的是什么

1.在方法中，this指的是所有者对象。
2.单独的情况下，this指的是全局对象。
3.在函数中，this指的是全局对象。
4.在函数中，严格模式下，this指的是undefined。
5.在事件中，this指的是接收事件的元素。

12.document对象和window对象的区别

简单来说,document 是 window 的一个对象属性 Window 对象表示浏览器中打开的窗口
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

1.该对象是 window 和 frames 对象的一个属性,是显示于窗口或框架内的一个文档。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

2.在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。

13.addEventListener() 方法用于向指定元素添加事件句柄

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
例如：在用户点击按钮时触发监听事件：

document.getElementById(“myBtn”).addEventListener(“click”, displayDate);
displayDate是函数名
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

实例
element.addEventListener(“click”, myFunction);
element.addEventListener(“click”, mySecondFunction);

14.创建/移除/替换去HTML 元素

appendChild()：
要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。
removeChild：
要移除一个元素，你需要知道该元素的父元素。
例如：

<div id="div1">
<p id="p1">这是一个段落。p>
<p id="p2">这是另外一个段落。p>
div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
script>

1
2
3
4
5
6
7
8
9
10
11

replaceChild()：替换 HTML 元素 -
我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。
例如：

<div id="div1">
<p id="p1">这是一个段落。p>
<p id="p2">这是另外一个段落。p>
div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

15.js的{},（）,[]的使用

{}表示对象，()表示函数调用，还可以使用在箭头函数
参考

 aa={
        name:"张三",
        myfunc1:function (){
            return "aaa"
        },
        myfunc2(){//这里相当于函数名为myfunc2的函数缩写
            return "bb"
        }
    }
    console.log(aa.myfunc1())
    console.log(aa.myfunc2())
1
2
3
4
5
6
7
8
9
10
11

15.html的空标签

HTML中大部分标签都是闭合标签，常用空标签如下：

、
、

、 等。

16.内容超出了div的高度或者宽度

当内容超出div时，自动出现滚动条的条件
内容必须在div中

div要设置宽高

overflow设置为auto

备注
overflow:auto;当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。
overflow-x:auto;当内容宽度超出div宽度，自动出现水平滚动条
overflow-y:auto;当内容宽度超出div高度，自动出现垂直滚动条