一.Html网页

1. HTML标签

HTML 是用来描述网页的一种语言。HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 。成对出现的标签中，第一个标签称为开始标签，第二个标签称为结束标签（闭合标签）。HTML 中的不同标签具有不同的含义，学习 HTML 其实就是学习各个标签的含义，根据实际场景的需要，选择合适的标签，从而制作出精美的网页。
HTML中每个标签都有自己的语义（含义），例如

标签代表段落，标签代表加粗。根据标签的不同，浏览器会使用不同的方式展示标签中的内容。一般情况下，一个 HTML 标签由开始标签、属性、内容和结束标签组成，标签的名称不区分大小写，但大多数属性的值需要区分大小写，如下所示：

1
2
3
4
5
	  属性
	   ↓
<div class="foo">C语言中文网</div>
 ↑            ↑     ↑
开始标签        内容   结束标签

除了 class 属性外，开始标签中还可以包含其它属性信息，比如 id、title 等属性，当使用浏览器打开我们编写的 HTML 文档时，浏览器会从上到下依次读取文档中的内容，并根据 HTML 标签和属性将标签中的内容呈现在浏览器中。

2.HTML标签的通用属性

HTML 标签中有一些通用的属性，如 id、title、class、style 等，这些通用属性可以在大多数 HTML 标签中使用。

(1.)标签的id属性

id 属性用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签

1
<div id="content">测试代码</div>
(2.)标签的class属性

与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。

1
<div class="content">测试代码</div>
(3.)标签的style属性

使用 style 属性我们可以在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等

1
<p style="color:red;">测试代码</p>

3.HTML文档流

文档流，又称为普通流或者常规流。在HTML中任何一个元素其实就是一个对象，也是一个盒子。文档流就是HTML在没有对样式进行设计前，网页行元素、块元素等的默认排列顺序。比如div的上下排布，p的左右排布等。

浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式定位会脱离文档流(下文会讲解)。

4.HTML块级元素

定义:
正常流时，每个块级元素默认占一行高度 ，一行内添加一个块级元素后一般无法添加其他元素，元素样式的display:block都是块级元素。
特点：

  • 总是在新行上开始。
  • 高度，行高以及外边距和内边距都可控制。
  • 宽度缺省是它的容器的100%，除非设定一个宽度。
  • 它可以容纳内联元素和其他块元素。
    示例

div、h1（大标题） 、 p（段落） 、hr、table

5.HTML行内元素

定义:
行内元素不会另起一行,只占据它对应的标签的边框所包含内容的空间,元素样式的display : inline的都是行内元素。
特点:

  • 和其他元素都在一行上；
  • 高，行高及外边距和内边距不可改变；
  • 宽度就是它的文字或图片的宽度，不可改变
  • 内联元素只能容纳文本或者其他内联元素
    示例:
    a、 span、iframe、br（换行）、em（强调）、img（图片）、input、label、select 、textarea（多行文本输入框）

二.CSS样式

CSS样式全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表,CSS的作用就是定义如何显示html元素，设置他的背景、字体大小颜色、边框等等。

1.HTML中引入CSS

在HTML中引入CSS共有三种方式：行内样式就是把样式写在HTML元素里面，用style属性声明样式。

(1.)行内样式表(内联样式)
1
<text style="color:red;background-color:blue">hello world</text>
(2.)内部样式表

内部样式就是把CSS代码写在HTML文件里面，不同于行内样式，它是把CSS代码集中写在HTML文件的头部，就是标签里面，用标签注明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #p1{
            font-family:黑体;/*字体类型为黑体*/
            font-size:13px;/*文字大小为12像素*/
            font-weight:bold;/*文字加粗*/
            font-style:normal;/*文字正常，不设置斜体*/
            color:red;/*文字颜色为红色*/
        }
        #p2{
            font-family:微软雅黑;/*字体类型为微软雅黑*/
            font-size:19px;/*文字大小为16像素*/
            font-weight:normal;/*文字正常，不加粗*/
            font-style:italic;/*文字设置为斜体*/
            color:#1000FF;/*文字颜色取值用16进制RGB表示*/
        }
    </style>
</head>
<body>
    <div><!--CSS样式统一写在头部标签里面-->
        <p id="p1">hello</p>
        <p id="p2">hello</p>
    </div>
</body>
</html>
(3.)外部样式表(常用)

在实际开发当中，一般使用外部样式，就是把HTML和CSS分别写在不同的文件里，然后在HTML中用link标签来引用。这种方式能提高网站的性能，并且能方便网站的维护。
.wxml文件

1
2
3
4
5
6
7
8
9
//写在head标签中引入css文件，href属性中的为绝对路径，当前在同一级目录下
<head>
      <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
      <div class="outter">
          <div class="inner"></div >
      </div >
</body>

.wxss文件

1
2
3
4
5
6
7
8
9
10
11
12
13
.outter{
  
    padding: 20px;
	background-color: #2980B9;/*深蓝色*/
}
.inner{

    margin-top: 50px;
    width: 50px;
    margin: 50px;
    height: 50px;
    background-color: blueviolet
}

2.CSS基础语法

CSS 的核心功能是将 CSS 属性设定为特定的值。一个属性与值的键值对被称为声明（declaration）。

1
color: red;

而如果将一个或者多个声明用 {} 包裹起来后，那就组成了一个声明块（declaration block）。

1
2
3
4
{
    color: red;
    text-align: center;
}

声明块如果需要作用到对应的 HTML 元素，那还需要加上选择器。选择器和声明块组成了CSS 规则集（CSS ruleset），常简称为 CSS 规则。

1
2
3
4
text {
    color: red;
    text-align: center;
}

3.CSS中的注释

1
2
3
4
5
6
/* 单行注释 */

/*
    多行
    注释
*/

4.CSS选择器

在css中，通过模式匹配规则来决定给HTML的元素应用什么样的样式。这些模式规则就被称为选择器。CSS选择器是是CSS最重要的部分之一。它们使你能够在网页上针对你想要的HTML元素设置样式。

(1.)CSS 元素（标签）选择器

CSS元素选择器根据元素名来选择HTML元素。在HTML中，元素名就是类似于h1、 p的东西。

1
2
3
4
5
6
7
8
9
10
h3 {
 text-align: center;
 color: blue;
}

/** 设置元素p为红色 **/
p {
　　color: red;  
}

(2.)CSS ID 选择器

ID选择器选择具有匹配的ID属性的HTML元素。由于在一个HTML文档中不能有一个以上具有相同ID的元素，这个选择器允许你选择一个单独的元素。

1
2
3
4
/** 设置 id="myid" 的元素为红色 **/
#myid {
　　color: red;
}
(3.)CSS 类选择器

类选择器选择具有相同的class属性的HTML元素。类选择器对于定位多个元素很有用，比如你想要匹配样式的卡片或图像。

1
2
3
4
/** 设置 calss="myclass" 的元素为红色 **/
.myClass {
　　color: red
}

多类选择器

1
2
3
4
/** 设置 calss="myclass myotherclass" 的元素为红色 **/
.myClass.myotherclass {
　　color: red
}
(4.)CSS 通用选择器

通用选择器用来选择所有的HTML元素，这意味者你页面上的每一个元素，从标题到页脚。

1
2
3
4
/** 设置所有元素为红色 **/
* {
　　color: red;  
}

5.CSS盒子模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。
盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

  • width和height：内容的宽度、高度（不是盒子的宽度、高度）。
  • padding：内边距。
  • border：边框。
  • margin：外边距。

6.CSS块级/行内元素转换。

display是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block或 inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

块级元素 行内元素
独占一行,默认情况下，其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
可以设置width，height属性 行内元素设置width，height属性无效
可以设置margin和padding属性 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
对应于display:block 对应于display:inline； 
1
2
3
4
5
display:block; 转化为块状元素；一个块状元素独占一行；可设宽、高、行高、顶和底边距离；宽默认为父元素的100%；

display:inline;转化为行内元素；和其他元素共处一行；不可设宽、高、行高、顶和底边距离；宽即所包含的文字图片之宽；

display:inline-block:可用{display:inline-block;}转化为内联块状元素；和其他元素共处一行；可设宽、高、行高、顶和底边距离；

7.CSS定位

**文档普通流:**就是元素标签正常在HTML里的顺序，块级元素从上至下排列，行内元素从左到右排列。css中有三种手段可以使一个元素脱离标准文档流，分别为浮动和绝对定位,固定定位。

属性 描述
absolute 生成绝对定位的元素，相对于最近一级定位不是static的父元素来进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素，相对于其所在普通的文档流位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值，没有定位，元素出现在正常的文档流中;
fixed 老IE不支持，和absolute一致，相对于窗口进行定位，当出现滚动条时，不随着滚动而滚动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定；
sticky (CSS3)有兼容性问题，它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。
(1.)相对定位
1
position: relative

元素相对于它自己原来的位置进行移动。

注意，相对定位使元素仍然占据原来的位置。

如果将div2设置为相对定位，它会相对自己原来的位置移动，且会发现它原来的位置仍然占据着,不会被别的标签占据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
        }
    </style>

</head>
<body>
<body>
<div style="background-color: chartreuse">1</div>
<div style="background-color: darkblue;position: relative;top: 20px;left: 20px">2</div>
<div style="background-color: red">3</div>
</body>
</body>
</html>

(2.).绝对定位
1
position: absolute

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

如果将div2设置为绝对定位，会发现它会相对于HTML定位，因为没有已经定位的祖先元素，且原来的位置被div3补上了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
        }
    </style>

</head>
<body>
<body>
<div style="background-color: chartreuse">1</div>
<div style="background-color: darkblue;position: absolute;top: 20px;left: 20px">2</div>
<div style="background-color: red">3</div>
</body>
</body>
</html>

8.CSS浮动

(1.)CSS浮动基础
1
float: left;

定义:
浮动,float，浮动的元素可以向左或向右移动，直到它的外边缘碰到包含的元素边框或另一个浮动元素的边框为止。
注意:
浮动会脱离标准文档流，所以文档的普通流的其他元素表现得就像浮动元素不存在一样。
例子1:

解释:当框1向右浮动的时候,他会脱离文档流向右移动,直到他的右边缘碰到包含框的右边缘。
例子2:

解释:当框1向左浮动时,他脱离文档流并且向左移动,知道他的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以他不占据空间,框2就会替代框1的位置,而由于框1浮在上方就会将框2覆盖住,使框2从视图中消失。
例子3

解释:如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其他的浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其他元素”卡住”。

(2.)float实现文字环绕
1
2
3
4
5
6
7
8
<div>
    <img style="background-color: chartreuse; width: 100px;height: 100px;float: left"/>
    <p>时光的单车飞快驶去，岁月的倒影也将消失，白天与黑夜不停的交替，轮回的四季斑驳了谁的岁月，
        蹉跎了谁的年华。一个人静静地与岁月交错，于平淡之中细细体会生活的深意，去注视，去聆听，
        去感受那些带着希望的别离以及那些经受沧桑的相逢，不论时光如何飞转，那些落花一样的往事，
        依然鲜活地存在于我的脑海之中。当岁月和美丽的回忆已成为风中的叹息，我们伤感的眼里也许依
        然残存旧时的泪痕，模糊了视线，不敢轻易触碰。</p>
</div>

(3.)CSS清除浮动

为何要清除浮动?
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
例如:
创建给父容器设置边框和背景色。

1
2
3
4
<div style="border-style: outset;width: 400px;background-color: darkorange" >
    <div style="width: 200px;height: 200px;background-color: red">big</div>
    <div style="width: 100px;height: 100px;background-color: chartreuse">small</div>
</div>

正常情况
将子控件设置为浮动

1
2
3
4
<div style="border-style: outset;width: 400px;background-color: darkorange" >
    <div style="width: 200px;height: 200px;background-color: red;float: left">big</div>
    <div style="width: 100px;height: 100px;background-color: chartreuse;float: left">small</div>
</div>

父控件高度塌陷
当父元素不给高度的时候，内部元素不浮动时会撑开而浮动的时候，父元素变成一条线。
解决方式:
方式一:给父级元素设置高度，但一般写页面高度都是不固定的。

1
2
3
#father {
         height: 300px;
     }

方式二:给父级元素设置overflow:hidden或overflow:auto,zoom:1是为了浏览器的兼容性（IE大家都懂的），这种方法要注意溢出的元素。

1
2
3
4
#father{
    overflow:hidden;
    zoom:1;
}

方式三:给父级设置浮动，这种方法适用于本来父级就需要浮动的，如果父级不需要浮动，影响布局，还是没解决根本问题。

1
2
3
#father{
    float:left;
}

方式四:使用before和after双伪元素清除浮动（推荐）
这种方法是推荐使用的，bootsrtap也在使用，应该掌握，不然太low了，他的原理就是通过伪元素选择器，在div后面添加了一个clear:both的属性，跟第三种方法是一样的道理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.clearfix:before, .clearfix:after {
           content: "";
           display: table;
       }

       .clearfix:after {
           clear: both;
       }

       .clearfix { /*照顾ie6*/
           zoom: 1;
           border-style: outset;
           width: 400px;
           background-color: darkorange;

       }
1
2
3
4
<div class="clearfix">
    <div style="width: 200px;height: 200px;background-color: red;float: left;">big</div>
    <div style="width: 100px;height: 100px;background-color: chartreuse;float: left;">small</div>
</div>

三.弹性布局Flex

1.Flex基础使用

网页布局在flex出来之前，是由盒模型为底子，float，position，table，百分比来进行布局的，重绘的比较多，影响性能，复杂又不好维护。flex布局，可以简便、完整、响应式地实现各种页面布局。
概念
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。（任何一个容器都可以指定为Flex布局，块级元素，行内元素也可。）
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

主轴和交叉轴
主轴和交叉轴取决于flex-direction的取值.如果flex-direction=raw那么水平方向上面的轴是主轴,垂直方向上面的轴是交叉轴。如果flex-direction=column那么垂直方向上面的轴是主轴,水平方向的轴是交叉轴。
justify-content:用于主轴上的子元素的对齐方式。
align-items:用于交叉轴上的子元素的对齐方式。
注意
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

display: flex; 将对象作为弹性伸缩盒展示，用于块级元素
display: inline-flex; 将对象作为弹性伸缩盒展示，用于行内元素

例子:

1
2
3
4
5
<div class="box"> <!--容器-->
  <div class="item">1</div> <!--子项-->
  <div class="item">2</div>
  <div class="item">3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.box {
  width: 200px;
  height: 200px;
  background-color: #58a;
}
.item {
  width: 50px;
  height: 50px;
  margin: 2px;
  background-color: #fb3;
}

2.Flex 作用于Box容器上的属性

(1.) flex-direction

定义:
用于指定Flex主轴的方向，继而决定 Flex子项在Flex容器中的位置
取值:
row , row-reverse , column , column-reverse
代码:

1
2
3
4
5
6
7
8
box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            display: flex;
            flex-direction: column-reverse;
            border: 5px solid red;
        }

1. row：
默认值，表示水平方向从左到右排列，此时水平方向轴线为主轴

2. row-reverse：
与row相反,主轴为水平方向，起点在容器的右端。

3. column：
表示垂直方向从上到下排列，此时垂直方向轴线为主轴

4. column-reverse：
与column相反,主轴为垂直方向，起点在容器的下沿。

(2.) flex-wrap

定义:
用于指定Flex子项是否换行。
取值:
nowrap , wrap , wrap-reverse
代码:

1
2
3
4
5
6
7
8
.box {
           width: 200px;
           height: 200px;
           background-color: chartreuse;
           display: flex;
           flex-wrap: wrap;
           border: 5px solid red;
       }

1. nowrap
默认值，表示不换行，Flex子项平均分配。(不换行，在一行显示，即使子元素的宽度或者高度大于父元素的宽度或者高度，也在一行显示)

2. wrap
表示换行，溢出的Flex子项会被放到下一行。(解决间距的方式就是将Flex子项的父项目的高度设置为两行的高度)

3. wrap-reverse
表示反方向换行(换行后有两条轴线，reverse就是把轴线排列的顺序倒置过来)

(3.) justify-content

定义:
用于指定主轴(水平方向)上Flex子项的对齐方式
取值
flex-start , flex-end , center , space-between , space-around
代码:

1
2
3
4
5
6
7
8
.box {
           width: 200px;
           height: 200px;
           background-color: chartreuse;
           display: flex;
           justify-content:flex-start;
           border: 5px solid red;
       }

1. flex-start
start侧对齐，左对齐

2. flex-end
end侧对齐，右对齐

3. center
中心对齐

4. space-between
左边的靠左对齐,右边的靠右对齐,中间的等距排列。(两端对齐)

5. space-around
对于flex的子元素他们每侧的距离均相等(等距分布)
1和2之间的距离包含了1的下边距和2的上边距。

(4.) align-items

定义
用于指定交叉轴(又叫侧轴指的是垂直方向)上Flex子项的对齐方式
取值
stretch , flex-start , flex-end , center , baseline
代码

1
2
3
4
5
6
7
8
.box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            display: flex;
            align-items:flex-start;
            border: 5px solid red;
        }

1. stretch
默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。这里需要注意，在只有一行的情况下，行的高度为容器的高度，即Flex子项高度为容器的高度

2. flex-start
表示与侧轴开始位置对齐

3. flex-end
表示与侧轴的结束位置对齐

4. center
表示与侧轴中间对齐

5. baseline
表示基线对齐，当行内轴与侧轴在同一线上，即所有Flex子项的基线在同一线上时，效果等同于flex-start。

(5.) align-content

定义:
该属性只作用于多行的情况下，用于多行的对齐方式
取值:
stretch , flex-start , flex-end , center , space-between , space-around

1
2
3
4
5
6
7
8
.box {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            display: flex;
            align-content:flex-start;
            border: 5px solid red;
        }

1. stretch
默认值，当Flex子项未设置高度或者高度值为auto时，stretch起作用，将Flex子项高度设置为行高度。
2. flex-start
表示各行与侧轴开始位置对齐，第一行紧靠侧轴开始边界，之后的每一行都紧靠前面一行
flex-end：表示各行与侧轴的结束位置对齐，最后一行紧靠侧轴结束边界，之后的每一行都紧靠前面一行
3. flex-start
表示各行与侧轴中间对其
4. space-between
表示两端对齐，中间间距相等。要注意特殊情况，当剩余空间为负数时，效果等同于flex-start
space-around：表示各行之间间距相等，中间间距是两端间距的2倍。要注意特殊情况，当剩余空间为负数时，效果等同于center
再次强调：该属性只作用于多行的情况，在只有一行的Flex容器上无效，另外该属性可以很好的处理，换行以后相邻行之间产生的间距。

3. Flex 作用于子项上的6个属性介绍

(1.) order

该属性用来指定Flex子项的排列顺序，数值越小，越靠前，可以为负数

取值：数值，默认值为0

(2.) flex-grow

用来指定Flex子项的扩展比例，不可以为负数，Flex容器会根据Flex子项设置的扩展比例作为比率来分配剩余空间

取值：数值，默认值为0，表示即使存在剩余空间，Flex子项也不会扩展

(3.) flex-shrink

用来指定Flex子项的收缩比例，不可以为负数，Flex容器会根据Flex子项设置的收缩比例作为比率来收缩各个Flex子项

取值：数值，默认值为1，表示所有子项在剩余空间为负数时，等比例收缩

注意：flex-shrink只能在不换行的情况下使用

(4.)flex-basis

用来指定Flex子项的占据的空间，不可以为负数

取值：auto | length | percentage | content

auto：默认值，计算规则：检索Flex子项是否设置了width值（或者height值，取决于flex-direction），如果设置了非auto的值，则使用width值（或者height值），若没有则使用content
length：用长度值定义宽度，不可为负数
percentage：使用百分比定义宽度，不可为负数

容器宽度为200px，Item1原始宽度为50px，设置 flex-basis: 50%;后宽度变成100px，扩展后宽度为110.5px；而Item2原始宽度为50px，扩展后为81.5px，比例正好是1:3

四.JavaScript简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

1.JavaScript发展

(1.)ECMAScript

因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。JavaScript 由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

(2.)TypeScript

TypeScript 是 JavaScript 的一个超集(TypeScript包含所有的JavaScript功能)，支持 ECMAScript 6 标准。TypeScript 由微软开发的自由和开源的编程语言。

(3.)JavaScript常见框架

AngularJS、ReactJS、VueJS、NodeJS

2.HTML中引入JavaScript

(1.)HTML引入内部的 JavaScript

如需在 HTML 页面中插入 JavaScript， 会告诉 JavaScript 在何处开始和结束。

1
2
3
4
5
6
7
8
9
10
<html>
<body>
<script>
function myFunction(){
	alert("JavaScript运行了");
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
(2.)HTML引入外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在