[TOC]

1. HTML

1.1 HTML 简述

网页

网站是指在因特网上根据一定的规则，使用 HTML、Css、JavaScript 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以~~ .htm ~~或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。

HTML
HTML 指的是超文本标记语言，Hyper Text Markup Language，它是用来描述网页的一种语言
标记语言是一套标记标签，markup tag
超文本的两层含义：
- 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）
  网页的形成
  
  HTML 入门代码

创建“文本文档”，重命名“xxx.html”。文件名自定义，扩展名为html

右键/打开方式/记事本，开发html文件，并编写如下内容

<html>
     <head>
       <title>
           这是标题
     </title>
 </head>
   <body>
       Hello HTML!
 </body>
</html>

HTML语法特点

不需要编译，直接使用浏览器阅读即可
HTML文件的扩展名是.html 或 .htm
- HTML结构都是由标签组成
- 标签名预先定义好的，我们只需要了解其功能即可
- 标签名不区分大小写，标签体
- 通常情况下标签由开始标签和结束标签组成。例如：标签体
- 如果没有结束标签，建议以 / 结尾。例如：
HTML结构包括两部分：头head 和 体body
注释：
- 浏览器查看时，不显示。右键查看源码可以看到
- 注释标签不能嵌套
- 注释特殊用法，为不同的浏览器提供不同的解决方案（了解）
  HTML开发工具
  | | WebStorm | | —- | —- | | | Visual Studio Code | | | HBuilder | | | SublimeText | | | Dreamweaver |
本课程使用的是Visual Studio code

1.2 基本标签

标题 heading

共六级标题

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>

特点
- 加了标题的文字会变的加粗，字号也会依次变大
- 一个标题独占一行
  段落 paragraph
  <p></p>
特点：
- 标签会自动在其前后创建一些空白
- 可以把 HTML 文档分割为若干段落
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保有空隙
- 单词 paragraph 的缩写
  换行 break
  <br/>
特点：
- 单标签
- 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
- 单词 break 的缩写，：强制换行的意思

例子：

  ![image.png](https://cdn.nlark.com/yuque/0/2020/png/2322054/1598070456626-813eddef-9f54-4b47-940b-a159b7b1d54e.png#align=left&display=inline&height=85&margin=%5Bobject%20Object%5D&name=image.png&originHeight=169&originWidth=867&size=34430&status=done&style=none&width=433.5)

分割线

<hr/>

字体

<font 属性=“属性值” ... >文本内容</font>

属性	值
color	1. 颜色的单词，如green、red等，如：color=”green” 1. #六个符号，每个符号的值从0 至 f，16进制，

  如 color="#00FF00"<br />3. rgb参数，如：<br />
  **style="color : rgb(0,225,0)" --> 推荐使用** |

| size | 1px 至 7px，px是像素单位，可省略不写 |

文本格式化

语义	标签
加粗	或者
倾斜	或者
删除线	或者
下划线	或者

图片

<img src="URL路径" 属性=“属性值” ... />
关于属性 width，也可以赋值如 width=”50%”，表示图片缩小到50%，随着页面变化而变化
但是属性值为像素时，则图片大小不会随着页面变化而变化

特点：
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
- 属性采取属性采取键值对的格式，即 key=“value” 的格式，属性 =“属性值”的格式，即 key=“value” 的格式，属性 =“属性值”

列表 list

有序列表：Ordered List
无序列表：Unordered List
列表项：List Item

超链接（重要）

anchor（锚），也叫 a链接
href：hypertext reference

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性	描述
href	URL路径
target	取值1：_blank 新窗口中打开新页面取值2：_self 默认方式，页面替换

超链接分类 | 类别 | 举例 | | —- | —- | |
1. 外部链接
| <a href="https://www.baidu.com"> 跳转到百度 </a> | |
2. 内部链接
| <a href="本地html文件路径"> 随便起个名 </a> | |
3. 空链接
| <a href="#"> 在本页面 </a> | |
4. 下载链接
| <a href="C:\Users\Administrator\Pictures\Camera Roll.rar"> 下载图片rar包 </a> | |
5. 网页元素链接
| <a href="https://www.tencent.com" target="_blank"
<img src="C:\Users\Administrator\Pictures\1.jpg" width="20%">
</a>
（即在图像） | |
6. 锚点链接
| 点击的地方：<a href="#title1"> 文本或图像 </a>
目标地点（例子）：<h4 id="title1"> 我是目标地点 </h4> |
锚点链接代码

（还能实现回到顶部的功能）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接标签-锚点</title>
</head>

<body>

    <li id="top"></li>
    <ul>
        <li><a href="#sudukuai">速度快</a></li><br/>
        <li><a href="#fuwuhao">服务好</a></li><br/>
        <li><a href="#zhiweiduo">职位多</a></li><br/>
        <li><a href="#chanpinqiquan">产品齐全</a></li><br/>
        <li><a href="#fazhanlicheng">发展历程</a></li><br/>
        <li><a href="#lagouapp">拉勾APP</a></li>
    </ul>

    <br/>
    <br/>
    <hr/>
    <h1>产品特色</h1>
    <h4 id="sudukuai">速度快</h4>
    <h4 id="fuwuhao">服务好</h4>
    <h4 id="zhiweiduo">职位多</h4>
    <h4 id="chanpinqiquan">产品齐全</h4>
    <h4 id="fazhanlicheng">发展历程</h4>
    <h4 id="lagouapp">拉勾网APP</h4>
    <hr/>
    <h4><a href="#top">回到顶部</a></h4>

</body>

</html>

表格

表格标签属性介绍

制作表格

基本语法

表头是 th，其余的行是 td

<> table> >>

        <th>姓名</th>
        <th>年龄</th>           <!-- 第一行 -->
        <th>地址</th>
  </tr>
  <tr>
        <td>乔峰</td>
        <td>30</td>             <!-- 第二行 -->
        <td>丐帮</td>
  </tr>
  <tr>
        <td>段誉</td>
        <td>25</td>             <!-- 第三行 -->
        <td>大理</td>
  </tr>

代码演示 ```html <!DOCTYPE html>

姓名	年龄	地址
乔峰	30	丐帮
段誉	25	大理

<a name="U7mWR"></a>
#### 单元格合并

- 把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可
- 合并单元格方式
   - 跨行合并：rowspan="合并单元格的个数"
   - 跨列合并：colspan="合并单元格的个数"
- 代码示例
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1px" cellspacing="0px" width="50%" height="400px">
        <tr  align="center">
            <th width="17%"  colspan="5"> <h2>个人简历</h2> </th>
        </tr>
        <tr  align="center">
            <td width="17%" >姓名</td>
            <td width="17%"></td>
            <td width="17%" >学历</td>
            <td width="17%" ></td>
            <td width="17%"  rowspan="3">照片</td>
        </tr>
        <tr  align="center">
            <td width="17%" >性别</td>
            <td width="17%" ></td>
            <td width="17%" >生日</td>
            <td width="17%" ></td>
        </tr>
        <tr  align="center">
            <td width="17%" >年龄</td>
            <td width="17%" ></td>
            <td width="17%" >民族</td>
            <td width="17%" ></td>
        </tr>
    </table>
</body>
</html>

效果：

1.3 表单相关标签

`1) form action="URL地址" method="GET/POST"（大小写均可） name=""`
`2) input type="text" name=""（name是必要属性）`
`3) input type="password" name=""（name是必要属性）`
`4) input type="radio" name=""（name是必要属性，并且多个选项中name属性值要一致，达到单选的目的）`

``可选属性：代表默认选中: checked="true/checked" 或者直接checked，不加属性值
提交值属性：value="male/female/..." 提交到后台的数据 | | 5) select name=""（name是必要属性）;
option: value="shanghai"，注意value中的属性值是提交到后台的，
而option之间的文本值只是提供给用户看的 | | 6) input type="file" name=""（name是必要属性） | | 7) input type="checkbox"
name=""（name是必要属性，多个选项中name属性值要一致）
value="" 具体提交到后天的值（每个选项不一致）
代表默认选中: checked="true/checked" 或者直接checked，不加属性值 | | 8) textarea 文本域
name=""（name是必要属性）
cols="数值"
rows="数值" | | 9) input type="image"
name=""（name是必要属性）
src="图片地址" | | 10) input type="hidden" 一般不需要用户操作，但是还想给后台传递数据，用隐藏域
name="" 必要属性
value="传递的数据" | | 11) input type="submit" value="按钮名称" 将表单的数据提交到form处制定的URL处 | | 12) input type="reset" value="按钮名称" 重置表单中的内容 | | 13) input type="button" value="按钮名称" | | | | 补充说明： | | name和value 相当于 键值对 | | disabled=”true” 或 disable : 该组件不允许操作，而且不能提交 | | readOnly=”readOnly” 输入框只读，跟 disable 有区别 | | 下拉框的特殊属性：multiple=”multiple”（按Ctrl允许选中多个值） | | | | 提交表单 | | 提交表单 get/post，参数传递 | | 前提条件：
1) action=”https://www.baidu.com/“ 表单要提交的地址
2) 必须要有组件，且组件不能是disable
3) 必须有提交按钮，
4) 没有name属性则不能提交对应数据 |

代码示例 ```html <!DOCTYPE html>
用户名
密码
性别男女
地址
头像
兴趣看书打游戏泡妞
简介
图片
隐藏域


- 表单练习
   - 表格和表单配合使用
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
</head>

<body>
    <!-- 
        1.表单嵌套表格一起使用 form ==> table ==> tr ==> th/td ==> 表单组件

     -->
    <form action="demo01.html" mothod="get" name="myForm">
        <table border="1px" width="40%" height="600px" align="center" cellspacing="0px">
            <tr align="center">
                <td width="10%">用户名</td>
                <td><input type="text" name="username" /></td>
            </tr>
            <tr align="center">
                <td>密码</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr align="center">
                <td>性别</td>
                <td>
                    男<input type="radio" name="sex" value="male" /> &nbsp;&nbsp;
                    女<input type="radio" name="sex" value="female" /> &nbsp;&nbsp;
                </td>
            </tr>
            <tr align="center">
                <td>地址</td>
                <td>
                    <select name="city">
                        <option value="beijing">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="shenzhen">深圳</option>
                    </select>
                </td>
            </tr>
            <tr align="center">
                <td>兴趣爱好</td>
                <td>
                    读书 <input type="checkbox" name="hobby" value="read"> &nbsp;&nbsp;
                    写字 <input type="checkbox" name="hobby" value="write"> &nbsp;&nbsp;
                    玩游戏 <input type="checkbox" name="hobby" value="game">
                </td>
            </tr>
            <tr align="center">
                <td>上传文件</td>
                <td><input type="file" name="myFile"></td>
            </tr>
            <tr align="center">
                <td>头像</td>
                <td><input type="image" src="C:\Users\Administrator\Pictures\1.jpg" width="15%" alt="艾希" name="艾希"></td>
            </tr>
            <tr align="center">
                <td>我的简介</td>
                <td><textarea name="remark" cols="30" rows="10"></textarea></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit" value="注册">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

效果

2. div、CSS

2.1 div、span

div就是html一个普通标签，进行区域划分

特点：

独自占一行
独自不能实现复杂效果，必须结合CSS样式进行渲染

块标签：1)行级元素: div 2) 行内元素: span

<!--
   div标签:块标签, 行级元素,会霸占html的一行
-->
<div> div中的数据 </div> div之外的数据 <br/>
<!--
   span标签:块标签, 行内元素,不会占用一行
-->
<span> span中的数据 </span> span外的数据

2.2 CSS

层叠样式表，Cascading Style Sheets，也称 CSS样式表或级联样式表
CSS也是一种标记语言，只要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图形的外形（宽高、边框样式、边距等）、版面的布局和外观显示样式
CSS 可以 美化 HTML , 让 HTML 更漂亮，让页面布局更简单

CSS 样式规则

说明
- 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英“;”进行区分

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS入门案例</title>

  <style>
      h2 {
          color:palegreen;
          font-size: 20px;
      }

  </style>
</head>
<body>
  <!-- 
      css的入门案例
      h2标签，里面添加内容，使用css修饰h2标签，设置字体颜色及字体大小

      问题：
      1.css写在哪里
          写在head标签中，设置一个子标签：style标签
      2.css如何编写 
          先编写选择器 {属性名1:属性值1; 属性名2:属性值2;}
   -->
   <h2>我的css入门案例</h2>
</body>
</html>

注意事项

CSS样式“选择器”严格区分大小写，“属性”和“属性值”不区分大小写。
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：
- p { font-family:"Times New Roman";}
在style标签里面的注释：/* 注释内容 */
属性的值和单位之间是不允许出现空格的，否则浏览器解析时会出错。
- 例如，这行代码就是不正确的：h1{ font-size:20 px; } /* 20和单位px之间有空格 */
  引入css样式
行内样式
内部样式
外部样式

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入css的三种方式</title>

    <style>
        #div2 {
            width: 200px;
            height: 200px;
            background-color: blue ;
        }
    </style>

    <!-- 
        引入css文件到当前HTML文件中
        link：引入css标签
        rel：关系，styelsheet 样式表
        type：文件类型   text/css 文本类型的文件
        href: 编写地址，引入具体的css文件
     -->
    <link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>
<body>
    <!-- 
        需求：创建div标签
            方式一：行内样式，修饰第一个div，宽度和高度设为200px，背景色 红色
                <div style="属性名1:属性值1; 属性名2:属性值2; ...">
            方式二：内部样式，修饰第二个div，宽度和高度设为200px，背景色 蓝色
                在head标签中写一个字标签style标签，然后在style标签中编写css样式
                <head>
                    <style>
                        选择器 {
                            属性名1:属性值1;
                            属性名2:属性值2;
                            ...
                        }
                    </style>
                </head>

            方式三：外部样式，修饰第三个div，宽度和高度设为200px，背景色 黄色
                1. 创建一个后缀为 .css 的文件
                2. 编写css文件
                    选择器 {
                            属性名1:属性值1;
                            属性名2:属性值2;
                            ...
                        }
                3. html中的head标签中 用link标签引入该css文件

     -->

     <div style="width: 200px; height: 200px; background-color: red;">我的第 1 个div</div>
     <div id="div2">我的第 2 个div</div>
     <div id="div3">我的第 3 个div</div>
</body>
</html>

三种样式的优先级
- 行内样式 > 内部样式|外部样式 (谁写在后边,使用谁,后边的会覆盖前边的)
  选择器
将 CSS样式应用于特定的 HTML元素，首先要找到该目标元素。在css中，执行这一任务的样式规则部分被称为选择器。
分类：
- 元素选择器
- id 选择器
- 类选择器
- 派生选择器
注意事项：
- 优先级从高到低：id选择器->类选择器->元素选择器

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>介绍css的四类选择器</title>

  <style>
      /* 1.使用 标签选择器（元素选择器），选择所有的div标签，设置宽度和高度都为100px，背景色为黄色 */
      div {
          width: 100px;
          height: 100px;
          background-color: yellow;
      }

      /*2.使用 id选择器，选择id为div1的元素，设置宽度和高度为200px，背景色为红色*/
      #div1 {
          width: 200px;
          height: 200px;
          background-color: red;
      }

      /*3.使用 类选择器，选择所有的 class属性，mystyle的元素，设置宽度和高度为300px，背景色为蓝色*/
      .mystyle {
          width: 300px;
          height: 300px;
          background-color: blue;
      }

      /*4.使用 派生选择器，选择div下的p标签，设置边框背景色为粉色*/
      div p {
          border: 1px solid black;
          background-color: pink;
      }
  </style>
</head>
<body>

   <div id="div1">111</div>
   <hr/>
   <div>222</div>
   <hr/>
   <div class="mystyle">333</div>
   <hr/>
   <div class="mystyle">444</div>
   <hr/>
   <div class="mystyle">555</div>
   <hr/>
   <div>666
       <p>我的div666中的p元素</p>
   </div>
   <p>我是外面的p元素</p>
   <hr/>
</body>
</html>

CSS 样式

边框

```html <!DOCTYPE html>

我的第一个p标签

我的第二个p标签

我的第三个p标签

我的第四个p标签

我的第五个p标签

<a name="WLe4w"></a>
#### 尺寸
```html
<style type="text/css">
    div{
      /* 宽度width 可以设置为 像素，如200px，也可设置为窗口的占比，如20% */
        border:1px solid #000; /*1像素，实边，黑色*/
        width:20%;
        height:200px;
    }
</style>

display

HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：行级元素 和 行内元素
- 行级元素：以区域块方式出现。每个块标签独自占据一整行或多整行
  - 常见的块元素：
    、
    等
- 行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示
  - 常见的行内元素：、等
在开发中，希望行内元素具有块元素的特性或者行内元素具有块元素的特性，可以使用display进行转换

补充属性：
- visibility:hidden 效果是：隐藏元素，位置不消失（占用空间页面） ```html <!DOCTYPE html>
  
  我是一个div,我会霸占一行
  
  我是一个div,被转换为了行内元素,不在占用一行
  我是一个span标签,只占用一行中的一部分我是一个span标签,被转换为了行间元素,会霸占一行
  我是一个消失的的div,你是看不到我的
  
  我是一个不可见的div,你是看不到我的

<a name="iakhc"></a>
#### 字体样式

- color
- font-size
- fon-family
- text-decoration: none    -->   取消文字上的下划线
```html
<a href="#" target="_blank" style="color: red;">我是红色超链接</a>
<a href="#" target="_blank" style="font-size:50px">我是最大超链接</a>
<a href="#" target="_blank" style="font-family: 楷体;">我是楷体超链接</a>
<a href="#" target="_blank" style="text-decoration: none;">我是无下划线的超链接</a>

背景色

background-color : 设置背景色

background-image : url(url_path) ```html <!DOCTYPE html>

  <meta charset="UTF-8">
  <title>设置背景色和设置背景图片属性</title>

我是一个div

<a name="pjLBE"></a>
#### 布局：float、clear

- float、clear 都是在 选择器中设置的属性
- 通常默认的排版方式是，将页面中的元素从上到下一一罗列
- 实际开发中，需要左右方式进行排版，就需要使用浮动 **float**
```html
选择器 {float:属性值;}
    常用属性值：
        left：元素向左浮动
        right：元素向右浮动
        none：元素不浮动（默认值）

由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用 clear** **属性进行清除浮动。

注意：clear 只能作用于自身，而不能影响其他块

选择器{clear:属性值;}
   常用属性值：
           left：不允许左侧有浮动元素（清除左侧浮动的影响）
           right：不允许右侧有浮动元素（清除右侧浮动的影响）
           both：同时清除左右两侧浮动的影响

CSS盒子模型

盒子模型的概念
- CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

CSS 案例

代码示例 ```html <!DOCTYPE html>
head
```
  
  <div class="main">
      
      <div class="leftbar">leftbar</div>
      
      <div class="content">content</div>
      
      <div class="rightbar">rightbar</div>
  </div>

  
  <div class="footer">footer</div>
```

</div>


---

<a name="jT5w2"></a>
# 3. JavaScript
<a name="JCUrU"></a>
## 3.1 基本概述
<a name="e8f862c2"></a>
### 什么是 JavaScript

   - JavaScript是现在网络上比较流行的一种**脚本语言**，通过javaScript可以让用户与Web 站点之间增强交互。JavaScript可以被**所有Web浏览器解析**。
   - **脚本语言**: 脚本语言也叫做**动态语言**，它是一种**解释型语言**，它一般由 **文本编辑器 **编辑。_**脚本语言，一般它不能单独运行，需要嵌入到其它语言中**_，例如：javaScript， 我们可以将编写的javaScript嵌入到 HTML代码 中，由浏览器解析执行它
<a name="OD40j"></a>
### 应用场景

   - 数据可视化
      - 数据可视化是当下大家所推崇的一种互动展示模式，而JavaScript拥有ECharts、D3.js等多种可实现数据可视化效果的框架
   - 移动应用
      - PhoneGap 将 WebVieW 带向了移动应用，同时也将 JavaScript 带向了移动应用
   - 服务端
      - 因为 **V8** 的性能将JavaScript带到了一个新的高度，于是 **Node.js **诞生了——**前端、后台都可以用JavaScript**，现在任何一个网页都离不开JavaScript
   - VR
      - 利用3D游戏引擎，如Three.js
   - 游戏
      - JavaScript也可以做出华丽的**特效**
<a name="4MciQ"></a>
### JavaScript 的组成

- **_ECMAScript_** ：描述了该语言的语法、语句和基本对象（核心）
- _BOM_ :  Browser Object Model，浏览器对象. 描述处理网页内容的方法和接口
- _DOM_ : Document Object Model，操作文档中的元素和内容

![image.png](https://cdn.nlark.com/yuque/0/2020/png/2322054/1598328623722-7777fddb-236c-4aac-a1c3-e2d4eed97657.png#align=left&display=inline&height=232&margin=%5Bobject%20Object%5D&name=image.png&originHeight=709&originWidth=1298&size=95324&status=done&style=none&width=425)
<a name="q0T85"></a>
### JavaScript 的引入

- HTML文件中引入JavaScript有两种方式
   - 内嵌式
      - 在HTML文档中，通过 **script **标签引入(是内部代码，而不是外部文件)
> <script type="text/javascript">
> //此处为JavaScript代码
> </script>

   - 外联式
      - 在HTML文档中，通过script标签引入 .js 文件，src 表示该 .js文件的路径
>               <script src="1.js"  type="text/javascript" ></script>


---

<a name="eUOsy"></a>
## 3.2 基本语法 ECMAScript
<a name="I3erC"></a>
### 变量

- 在使用JavaScript时，需要遵循以下命名规范：
   - 变量名必须以字母或下划线开头，数字不能开头
   - 变量名不能包含特殊符号 (如:空格等符号 )
   - 变量名不能使用JavaScript关键字作为变量名，如：function
   - JavaScript **严格区分大小写**
- 变量的声明
   - `var 变量名;      //JavaScript变量可以不声明，直接使用。默认值：undefined`
- 变量的赋值
   - `var 变量名 = 值; //JavaScript变量是`**`弱类型`**`，及同一个变量可以存放不同类型的数据`
<a name="dGdX6"></a>
### 数据类型

- **_基本类型_**
   - undefined
      - undefined类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined
   - boolean
      - true 和 false
   - number
      - 表示任意数字
   - string
      - 字符串由双引号（"）或单引号（'）声明的。JavaScript **没有字符类型**
- _关键字_ :  **typeof** 可以查看**变量的数据类型**
- **_引用类型_**
   - 引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是**对象**
   - JavaScript是**基于对象**而不是面向对象
   - JavaScript**提供众多预定义引用类型**（内置对象）
      - `造一个对象：var obj = new Object();`
      - `造一个字符串对象：var str = new String();`
      - `造一个日期对象：var date = new Date();`
<a name="bCeSm"></a>
### 运算符

- JavaScript运算符与Java运算符基本一致
- 区别与java的地方：
   - 1. == 表示内容相等，而 === 表示内容和类型相等
   - 2. 字符串跟数值如果用 + 连接：字符串拼接；用 - 号连接：数值计算
   - boolean运算规则：

           ![image.png](https://cdn.nlark.com/yuque/0/2020/png/2322054/1598331000545-1af2df3c-cd38-42ae-8dfe-42168ee40899.png#align=left&display=inline&height=193&margin=%5Bobject%20Object%5D&name=image.png&originHeight=517&originWidth=1605&size=146805&status=done&style=none&width=600)
<a name="Uh3Pi"></a>
### JS中的语句

   - 跟java一样，js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致，此处不再一一阐述
   - 区别：for循环
```html
<script type="text/javascript">

        for (var i=0; i<10; i++) {
                //alert(i);
      }

        //定义数组
        var arr = [1,2,3,5.5,true,"hello"];
        //普通for遍历数组
        for(var i=0; i<arr.length; i++){
                alert(arr[i]);
        }

        //加强for循环， 遍历索引
        for(index in arr){ 
                alert(arr[index]);
        }

    //加强for循环， 遍历内容
      for(element of arr) {
        alert(element);
    }

</script>

函数（重要）

js的函数是js非常重要的组成部分，js最常用的函数的定义方式有两种
普通函数
```javascript //定义函数 function 函数名(参数列表){
```
  js逻辑代码
  //return 返回值，若不需要返回值可以省略return
```
}

//函数调用：函数名(实际参数);

<a name="ODKAd"></a>
#### 匿名函数
```javascript
//1. 定义匿名函数也就是没有名字的函数
function(参数列表){
        js逻辑代码
}

//2. 定义函数并赋值给变量
var fn = function(参数列表){
    js逻辑代码
}
//调用函数：fn(实际参数);

事件（重要）

事件概述
- 事件源：被监听的html元素
- 事件：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
- 事件与事件源的绑定：在事件源上注册上某事件
- 事件触发后的响应行为：事件触发后需要执行的代码，一般使用函数进行封装

常用事件

![image.png](https://cdn.nlark.com/yuque/0/2020/png/2322054/1598401893338-e55347ca-6e1d-4ad4-8724-49ec6075b2dc.png#align=left&display=inline&height=495&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1230&originWidth=1503&size=139664&status=done&style=none&width=605)

事件绑定

给页面上的标签添加一个事件,关联一个函数. 当我们操作这个标签是,javaScript就会侦听到对应的事件发生,从而执行关联函数我们称为事件绑定函数. ```html <!DOCTYPE html>

用户名
地址

<a name="5119837c"></a>
#### 事件派发

- **不修改html，**通过js方式获取到一个html中的元素对象，并且给它动态的设置一个事件并关联一个函数. 我们称为事件派发. 
- 优点 : **不污染原来的html代码**
- 缺点 : **需要页面内容加载完毕在可以使用，一般写在页面加载函数中**.
- 代码演示
```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>事件派发</title>
    <script>
        //1.事件派发,给button派发一个单机事件,关联一个函数
        //alert(document.getElementById("btn"));
        //2.页面加载函数
        //作用:当整个html页面全部加载完毕之后,自动执行的函数
        //格式 :window.onload = function(){ }
        //页面加载
        window.onload = function () {
            //派发事件
            document.getElementById("btn").onclick = function () {
                alert("点我干嘛!");
            }
        }
    </script>
</head>

<body>
    <input type="button" id="btn" value="点我啊" />
</body>

</html>

3.3 BOM 对象

BOM（Browser Object Model），浏览器对象模型(将客户端的浏览器抽象成一类对象)，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出以下页面，通过 js 提供浏览器对象模型对象我们可以模拟浏览器功能。
例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。当然除此之外，BOM对象不仅仅具备这些功能，让我们来学习吧。

对象分类
Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息
Navigator对象，包含的属性描述了正在使用的浏览器
Window 对象（重点），Window 对象表示一个浏览器窗口或一个框架。
History对象，其实就是来保存浏览器历史记录信息。
Location 对象（重点），Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Window 对象
代表的是当前浏览器窗口
Window对象此处学习它的三个作用：
- 1. 获取文档对象document
- 1. 弹框的方法
- 1. 定时器
注意 : 不管window调用属性还是调用方法都可以省略不写.

弹框的方法（重点）
1. 提示框：alert (提示信息);
1. 确认框：confirm (提示信息);
1. 输入框：prompt (提示信息);

—- 弹出框演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window的弹出框</title>
    <script>
        /*
        1. 提示框：alert(提示信息);
        2. 确认框：confirm(提示信息);
        3. 输入框：prompt(提示信息);

        补充: 凡是window的属性和方法,window调用过程中都可以胜略不写window
         */

         //window.alert("这是警告框");

        //var flag = confirm("您确认删除吗?");  // 如果用户点击了确认,返回true;  如果用户点击取消,返回false;
        //alert(flag);

        var result = prompt("请输入您的用户名");
        alert(result);
    </script>
</head>
<body>

</body>
</html>

定时器（重点）

setInterval (js代码/函数,毫秒值); 反复执行的定时器 —> 周期定时任务
clearInterval (定时器的id值); 取消反复执行的定时器
setTimeout (js代码/函数,毫秒值); 执行一次的定时器
clearTimeout (定时器的id值);取消执行一次的定时器

—- 1 和 2 的代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周期定时任务</title>
    <script>
        /*
        1.方法1: 周期执行任务方法
        setInterval(js脚本片段/函数,毫秒值);

        2.方法2: 取消周期执行任务
        clearInterval(周期执行任务id);
        */

        //window.setInterval("alert('hello')",2000);

        function fun(){
            alert("hello 拉勾");
        }

        var resultId = setInterval("fun()",2000);

        //该方法运行可以停止周期执行任务
        function stopInterval(){
            clearInterval(resultId);
        }
    </script>
</head>
<body>
    <input type="button" value="停止周期执行任务" onclick="stopInterval()">
</body>
</html>

—- 3 和 4 的代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时函数</title>
    <script>
        /*
            1. setTimeout(js代码/函数,毫秒值); 执行一次的定时器
            2. clearTimeout(定时器的id值);取消执行一次的定时器   

        */

        //setTimeout("alert('你好啊')",3000);

        function fun(){
            alert("欢迎大家");
        }

        var resultId = setTimeout("fun()",2000);

        //取消定时任务
        function  stopTimeOut(){
            clearTimeout(resultId);
        }
    </script>
</head>
<body>
    <input type="button" value="取消定时任务" onclick="stopTimeOut()">
</body>
</html>

常用的全局方法

parseInt( )
- 把字符串的数值类型转成 number 类型
parseFloat( )
- 把字符串的数值类型转成 float 类型
  Location 对象(重点)
location.href 相当于在浏览器的地址栏中输入地址并敲回车
- 重点记忆 : location.href 可以在 js 中进行 url 访问

location.reload( ) 让页面重新加载(刷新页面)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>location对象</title>
  <script>
      /*
          location对象: 记录了当前的URL信息

          属性:
          href : 完成一个地址的跳转

          方法:
          reload() ; 重新加载页面,刷新.

          补充:
          页面跳转的方式:
          1) 超链接跳转 <a href="URL地址"></a>
          2) 提交表单  form  action="URL地址"
          3) location.href="URL地址"
      */

      function goTo(){
          location.href="demo1-js入门.html";
      }

      //重新加载页面方法
      function reflesh(){
          location.reload();
      }

  </script>
</head>
<body>
  <input type="button" value="页面跳转" onclick="goTo()"> <br/>

  <input type="button" value="重新加载页面" onclick="reflesh()">
</body>
</html>

3.4 DOM 对象

DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。
- 创建的结构化文档：html、xml 等
- DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下 HTML DOM 和 XML DOM 是可以相互使用的。
HTML DOM 将整个 HTML 文档呈现成一颗 DOM 树，树中有元素、属性、文本等成员

Document 文档对象

浏览器加载整个 HTML 文档形成 Document 对象，Document 对象可以访问和操作 HTML 文档中的所有元素

获得元素对象
```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>获取元素</title>
  <script>
      // 1.定义一个button ,给设置value,也给id; 通过document.getElelentById("id值") 获取的是元素节点 , 及按钮的value值,打印
      function getElement(){
         var element =  document.getElementById("btn");
         //alert(element);    // [object HTMLInputElement]
         alert(element.value);
      }

      // 2.定义2一个input框,设置name属性值一致,获取2个input框元素,打印里面的值
      function getElements(){
         var elements =  document.getElementsByName("myname");
         //alert(elements.length);
         for(var i=0; i < elements.length; i++){
             alert(elements[i].value);
         }

      }

      // 3.定义2个input框,设置class属性值一致,getElelmetsByClassName("class名称"); 获取里面的值,打印
      function getClassElements(){
         var elements =  document.getElementsByClassName("cls");
         for(var i=0; i < elements.length; i++){
             alert(elements[i].value);
         }
      }

      // 4.获取所有的input ,打印里面的值 ,通过getElementsByTagName("标签名称")获取.
      function getTagElements(){
         var elements =  document.getElementsByTagName("input")
         for(var i=0; i < elements.length; i++){
             alert(elements[i].value);
         }
      }

  </script>
</head>
<body>
  <input type="button" value="我的按钮123" id="btn"> <br> <br>

  根据name属性获取元素:<input type="text" name="myname"  value="我的值1">  <br>
  根据name属性获取元素:<input type="text" name="myname"  value="我的值2">  <br> <br>

  根据class属性获取元素:<input type="text"   class="cls" value="我的值3">  <br>
  根据class属性获取元素:<input type="text"   class="cls" value="我的值4">  <br> <br>

  根据标签获取元素:<input type="text"   value="我的值5"> <br>
  根据标签获取元素:<input type="text"   value="我的值6"> <br>

  <hr>

  <input type="button" value="点击按钮获取value值" onclick="getElement()">
  <input type="button" value="根据name获取对应元素及value值" onclick="getElements()">
  <input type="button" value="根据class获取对应元素及value值" onclick="getClassElements()">
  <input type="button" value="根据TagName获取对应元素及value值" onclick="getTagElements()">
</body>
</html>
```
操作标签体内容
```html <!DOCTYPE html>

一、html & Css & JavaScript

1. HTML

1.1 HTML 简述

网页

HTML

网页的形成

HTML 入门代码

HTML语法特点

HTML开发工具

1.2 基本标签

标题 heading

段落 paragraph

换行 break

分割线

字体

文本格式化

图片

列表 list

超链接（重要）

表格

表格标签属性介绍

制作表格

1.3 表单相关标签

2. div、CSS

2.1 div、span

2.2 CSS

CSS 样式规则

注意事项

引入css样式

选择器

CSS 样式

边框

display

、 等

背景色

CSS盒子模型

CSS 案例

函数（重要）

普通函数

事件（重要）

事件绑定

3.3 BOM 对象

对象分类

Window 对象

弹框的方法（重点）

定时器（重点）

常用的全局方法

Location 对象(重点)

3.4 DOM 对象

Document 文档对象

获得元素对象

操作标签体内容

、
等