前言

来源：动力节点_老杜

开发工具

  • 选择使用 Vs code 完成前端代码的编写
  • 一些必开的设置
    • 文件——->打开自动保存
    • 查看——>自动换行
  • 快捷键：
    • ！ + 回车
    • F5 启动程序，shfit+F5 暂停程序
    • emmet语法 可以看下手册 可以快速写代码
      • tr>th + 回车 就是tr里面嵌套 th 标签
      • th*3 + 回车 就是生成三组 th 标签
      • div#test + 回车 快速生成 id 为 test 的标签
      • div.test + 回车 快速生成 class 为 test 的标签
    • 快捷键大全

前端资源和文档

  • 好用的插件
    • Live Server
      • 作用：就是安装这个插件后，可以不用自动刷新页面，保存好源代码后，自动在浏览器刷新，无法预览图片
  • 调试

如果要使用VScode工具的调试，需要在
vscode文件夹——->launch.json 里面配置文件的路径

启动一次调试，需要关闭后在能启动下一次，否则会报错

HTML

超文本链接和表单是重中之重
浏览器的F12面板 是用来调试前端程序错误的

基本概念

1、系统结构：

  1. B/S架构：（以后主要走的方向是这个。）
  2.     **Browser / Server      （浏览器/服务器的交互形式。）**
  4.     Browser支持哪些语言：HTML CSS JavaScript
  6.     **写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。**（Java程序员目前来看也需要会一些前端的东西。）
  7.     前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。）
  8.     S是服务器端Server，Server端的语言很多：C C++ Java python.....（我们主要是使用Java语言完成服务器端的开发）
  10.     **B/S架构的系统有什么优点和缺点？**

优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢、体验不好、界面不炫酷

  1.     企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统，不需要炫酷，不需要特别好的用户体验，只要能做数据  的增删改查即可。并且企业内部更注重维护的成本。
  3.     B/S架构的系统有哪些代表？
  4.         京东
  5.         百度
  6.         天猫
  7.         ....
  9. **C/S架构**

Client / Server （客户端/服务器端的交互形式。）

缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）

  1.     常见的C/S架构的系统：
  2.         QQ
  3.         微信
  4.         支付宝
  5.         ....

2、什么是HTML？怎么开发HTML？怎么运行HTML？

  1. * **HTML: Hyper Text Markup Language （超文本标记语言）**
  2.     **由大量的标签组成，每一个标签都有开始标签和结束标签。**
  3.     <标签>
  4.         <标签>
  5.             <标签 属性名="属性值" 属性名="属性值">
  6.             </标签>
  7.         </标签>
  8.     </标签>
  10.     超文本: 流媒体、图片、声音、视频....
  12. * HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
  13. HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....
  15. * 直接采用浏览器打开HTML文件就是运行。

3、HTML是谁制定的？
W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.
我们这里学习HTML4.0（主要是学习一下HTML的基础用法。）

  1. W3C制定了很多规范：
  2.     HTML/XML/http协议/https协议......
  4. 为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
  5.     w3school:先出现的，和W3C没有关系
  6.     w3cschool：后出现的，和W3C没有关系

基础知识

  • windows操作系统中，系统默认以gbk的方式打开html页面的

基本标签

  1. <html>
  2.   <head>
  3.     <meta charset="gbk" />
  4.     <title>基本标签</title>
  5.   </head>
  6.   <body>
  7.     <!--段落标记-->
  8.     <p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p><p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>
  10.     <!--标题字-->
  11.     <h1>标题字</h1>
  12.     <h2>标题字</h2>
  13.     <h3>标题字</h3>
  14.     <h4>标题字</h4>
  15.     <h5>标题字</h5>
  16.     <h6>标题字</h6>
  18.     <!--换行标记-->
  19.     hello 
  20.     world!
  21.     <!--长了一只眼睛，独目标记-->
  22.     hello<br> world!
  24.     <!--水平线，独目标签-->
  25.     <hr>
  27.     <!--color是一个属性，用来指定颜色值-->
  28.     <!--color是属性的名字，red是属性的值-->
  29.     <hr color="red">
  31.     <!--HTML中的字符串可以使用单引号，也可以使用双引号-->
  32.     <hr color='red'>
  34.     <!--HTML的语法很松散，不严格，去掉单引号双引号也行！-->
  35.     <hr color=green >
  37.     <!--HTML不区分大小写！-->
  38.     <HR>
  40.     <!--预留格式-->
  41.     <!--保留格式，在HTML源码上是什么格式，到网页上还是这个格式，不变。-->
  43. <pre>
  44.     for(int i = 0; i < 100; i++){
  45.     System.out.println("i = " + i);
  46.     }
  47.     </pre>
  48. <!--粗体字-->
  49.     <b>粗体字</b>
  51.     <!--斜体字-->
  52.     <i>斜体字</i>
  54.     <ins>插入字</ins>
  56.     <del>删除字</del>
  58.     10<sup>2</sup>
  60.     m<sub>2</sub>
  62.     <!--font字体标签-->
  63.     <!--color是字体颜色，size是字号-->
  64.     <font color="red" size="12">hello world!</font>
  67.     <br><br><br><br><br><br><br><br><br><br>
  69.     </body>
  70. </HTML>

实体符号

  1. !-- 凡是HTML页面中第一行是以下代码的表示该页面是一个HTML5页面：H5。 -->
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <!-- 这个是告诉浏览器采用哪一种字符编码方式打开该页面。一般这个编码方式要和文件的编码方式相同，不然会乱码。 -->
  6.         <!-- windows操作系统的浏览器在没有指定任何编码方式的时候，浏览器默认采用GBK的简体中文的方式打开，这是因为我们的windows操作系统是简体中文环境。 -->
  7.         <!-- 而我们程序员，一般工作区当中文件的编码方式都是UTF-8，因为unicode更加通用。 -->
  8.         <!-- 当前这个文件就是utf8的编码方式，如果不写以下代码，浏览器会采用GBK的方式打开，就会出现乱码。 -->
  9.         <meta charset="utf-8">
  10.         <title>实体符号</title>
  11.     </head>
  12.     <body>
  13.         <!-- 空格 -->
  14.         <!-- &nbsp;  这是一个空格。属于实体符号！ -->
  15.         a                                                                bc
  16.         <br>
  17.         a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bc
  18.         <br>
  19.         <!-- 小于号呢 -->
  20.         b<a>c
  21.         <br>
  22.         <!-- &lt; 这是小于号 -->
  23.         <!-- &gt; 这是大于号 -->
  24.         b&lt;a&gt;c
  25.     </body>
  26. </html>

表格

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>HTML表格</title>
  5.     </head>
  6.     <body>
  7.         <!-- 3行3列的table -->
  8.         <!-- border用来设置边框的宽度，1px表示1像素 -->
  9.         <!-- <table border="1px" width="300px" height="200px"> -->
  10.         <!-- 还可以写成百分比的方式。 -->
  11.         <table border="1px" width="50%" height="200px" align="center">
  12.             <!-- 第一行 -->
  13.             <tr>
  14.                 <!-- 第一个单元格 -->
  15.                 <td>1</td>
  16.                 <td>2</td>
  17.                 <td>3</td>
  18.             </tr>
  19.             <!-- 第二行 -->
  20.             <tr align="center">
  21.                 <!-- 第一个单元格 -->
  22.                 <td>1</td>
  23.                 <td>2</td>
  24.                 <td>3</td>
  25.             </tr>
  26.             <tr>
  27.                 <td>1</td>
  28.                 <td>2</td>
  29.                 <td align="center">3</td>
  30.             </tr>
  31.         </table>
  33.     </body>
  34. </html>

表格中的单元格的合并

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>表格单元格的合并</title>
  5.     </head>
  6.     <body>
  7.         <table width="50%" border="1px">
  8.             <tr>
  9.                 <td>1</td>
  10.                 <!-- colspan表示列合并，合并2个。 -->
  11.                 <td colspan="2">xy</td>
  12.                 <!-- <td>y</td> -->
  13.             </tr>
  14.             <tr>
  15.                 <td>1</td>
  16.                 <td>1</td>
  17.                 <!-- rowspan表示行合并，2表示合并两个。 -->
  18.                 <td rowspan="2">KINGford</td>
  19.             </tr>
  20.             <tr>
  21.                 <td>1</td>
  22.                 <td>1</td>
  23.                 <!-- <td>ford</td> -->
  24.             </tr>
  25.         </table>
  26.     </body>
  27. </html>

表格_th标签

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>th标签</title>
  5.     </head>
  6.     <body>
  7.         <table border="1px" width="50%">
  8.             <tr>
  9.                 <!-- <td>员工编号</td>
  10.                 <td>员工姓名</td>
  11.                 <td>员工薪资</td> -->
  13.                 <!-- th可以代替td做单元格，th中的内容会自动加粗，会自动居中。 -->
  14.                 <th>员工编号</th>
  15.                 <th>员工姓名</th>
  16.                 <th>员工薪资</th>
  17.             </tr>
  18.             <tr>
  19.                 <td>7369</td>
  20.                 <td>SMITH</td>
  21.                 <td>800.0</td>
  22.             </tr>
  23.             <tr>
  24.                 <td>7370</td>
  25.                 <td>KING</td>
  26.                 <td>8000.0</td>
  27.             </tr>
  28.         </table>
  29.     </body>
  30. </html>

表格_thead-tbody-tfoot

  1. <!-- 一个table可以被thead tbody tfoot分隔为三部分。 -->
  2.         <!-- 这个语法主要是为了后期javascript提供方便。 -->
  3.         <table border="1px" width="50%">
  5.             <thead>
  6.                 <tr>
  7.                     <th>员工编号</th>
  8.                     <th>员工姓名</th>
  9.                     <th>员工薪资</th>
  10.                 </tr>
  11.             </thead>
  13.             <tbody>
  14.                 <tr>
  15.                     <td>7369</td>
  16.                     <td>SMITH</td>
  17.                     <td>800.0</td>
  18.                 </tr>
  19.                 <tr>
  20.                     <td>7370</td>
  21.                     <td>KING</td>
  22.                     <td>8000.0</td>
  23.                 </tr>
  24.             </tbody>
  26.             <tfoot>
  27.                 <tr>
  28.                     <td>x</td>
  29.                     <td>y</td>
  30.                     <td>z</td>
  31.                 </tr>
  32.             </tfoot>
  34.         </table>

背景颜色和背景图片

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>背景颜色和背景图片</title>
  5.     </head>
  7.     <!-- body标签的bgcolor属性指定背景颜色。 -->
  8.     <!-- <body bgcolor="red"> -->
  10.     <!-- body标签的background属性指定背景图片。 -->
  11.     <body background="images/dyzh.jpg">
  13.     </body>
  14. </html>

图片

  1. <!-- 背景图片 -->
  2.     <body background="images/dyzh.jpg">
  4.         <!-- 这个图片是网页中的一个元素 -->
  5.         <!-- <img src="images/bd.png"></img> -->
  6.         <!-- 开始标签和结束标签之间没有内容的话，可以直接把结束标签删除掉，开始标签末尾添加 / -->
  7.         <img src="images/bd.png"/>
  9.         <!-- img标签的属性有哪些呢？ -->
  10.         <!-- src属性：用来指定图片的路径 -->
  11.         <!-- width属性：用来指定图片的宽度，高度会等比例缩放！ 不要手动设置高度。-->
  12.         <!-- title属性用来设置鼠标悬停时的提示信息。 -->
  13.         <img src="images/bd.png" width="200px" title="点击我跳转到百度哦!" />
  15.         <!--alt用来指定当图片加载失败的时候的提示信息 -->
  16.         <img src="im/bd.png" alt="图片找不到了哦!" >

超链接

  1. <body>
  2.         <!-- 链接到百度 -->
  3.         <!-- href 属性表示：hot references，用来指定链接的路径 -->
  4.         <a href="http://www.baidu.com">百度</a>
  5.         <br>
  6.         <!-- 链接路径可以是一个网络中的路径，也可以是一个本地的路径！ -->
  7.         <!-- 超链接的特点：鼠标停留在超链接上自动变成小手，超链接自动添加下划线！ -->
  8.         <a href="004-表格.html">链接到本地的表格！</a>
  9.         <br>
  10.         <a href="http://www.jd.com">京东商城</a>
  11.         <br>
  12.         <a href="http://www.126.com">126邮箱</a>
  13.         <br>
  14.         <a href="https://map.baidu.com">百度地图</a>
  16.         <!-- 图片可以做热链接吗？可以 -->
  17.         <a href="https://map.baidu.com">
  18.             <!-- 标签嵌套使用！ -->
  19.             <img src="images/bd.png" width="200px" title="点击我跳转到百度地图哦!" />
  20.         </a>
  22.         <hr>
  24.         <!-- 关于超链接的target属性 -->
  25.         <!-- target属性用来设置，最终打开窗口的位置 -->
  26.         <!-- 
  27.         target ：
  28.             _blank：新窗口
  29.             _self：当前窗口
  30.             _parent：当前窗口的父窗口
  31.             _top：当前窗口的顶级窗口
  32.         -->
  33.         <a href="http://www.baidu.com" target="_self">百度（当前窗口）</a>
  34.         <a href="http://www.baidu.com" target="_blank">百度（新窗口）</a>
  35.         <a href="http://www.baidu.com">百度（默认是怎样的？当前窗口）</a>
  37.         <hr>
  38.         <!-- 一个窗口中的内部窗口 -->
  39.         <iframe src="http://www.baidu.com"></iframe>

列表

  1. <body>
  3.         <!-- 无序列表 -->
  4.         <ul type="circle">
  5.             <!-- 列表项 -->
  6.             <li>中国
  7.                 <ul type="square">
  8.                     <li>北京
  9.                         <ul type="disc">
  10.                             <li>东城区</li>
  11.                             <li>西城区</li>
  12.                             <li>海淀区</li>
  13.                             <li>朝阳区</li>
  14.                         </ul>
  15.                     </li>
  16.                     <li>上海</li>
  17.                     <li>天津</li>
  18.                     <li>重庆</li>
  19.                 </ul>
  20.             </li>
  21.             <li>美国</li>
  22.             <li>日本</li>
  23.             <li>俄国</li>
  24.         </ul>
  26.         <!-- 有序列表 -->
  27.         <ol type="A">
  28.             <li>水果
  29.                 <ol type="a">
  30.                     <li>香蕉</li>
  31.                     <li>哈密瓜</li>
  32.                     <li>菠萝</li>
  33.                     <li>苹果</li>
  34.                 </ol>
  35.             </li>
  36.             <li>蔬菜</li>
  37.             <li>茶
  38.                 <ol type="I">
  39.                     <li>绿茶
  40.                         <ol type="1">
  41.                             <li>西红柿茶</li>
  42.                             <li>龙井</li>
  43.                             <li>毛尖</li>
  44.                         </ol>
  45.                     </li>
  46.                     <li>红茶</li>
  47.                 </ol>
  48.             </li>
  49.         </ol>
  51.     </body>

表单

1、什么是表单有什么用？
发送请求，并且携带数据给服务器。
表单和超链接有共同的特征，就是都可以向服务器发送请求，只不过超链接是用户直接点击发送请求，不能填写数据。
而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。

  1.             **表单最主要的作用就是：收集用户的信息。**
  3.             **表单对应的英语单词是：form**

2、怎么定义一个表单对象呢？语法格式

表单项1:
表单项2:

另外要注意：一个网页上可以有多个表单对象。

3、form标签中有一个action属性，这个属性和超链接的href相同，都需要填写url。

  • 011
  1. <body>
  3.          <!-- 超链接-->
  4.          <a href="http://www.baidu.com">百度</a>
  6.          <br><br><br>
  7.          <!-- 表单-->
  8.          <form action="http://www.baidu.com">
  9.              <!-- 按钮，提交表单的按钮，只要点击这个提交按钮，就发送请求了！ -->
  10.             <!-- 所有能够提交表单的按钮，type必须是submit，不能随便写 -->
  11.             <!-- <input type="submit"/> -->
  12.             <!-- 设置按钮上显示的文本 -->
  13.             <!-- vaule 是按钮名称-->
  14.             <input type="submit" value="百度"/>
  16.             <!-- button是一个普通按钮，能提交表单吗？不能。 -->
  17.             <!-- <input type="button" value="百度"/> -->
  19.          </form>
  20.          form
  21.          <!-- submit提交按钮放在form外面也是不行的！-->
  22.          <input type="submit" value="百度(外)"/>
  24.     </body>
  • 012

  1. 画一个登录表单 

    1. <!-- action路径随便写了 -->
    2. <!-- 
    3.  [http://192.168.145.2:8080/crm/login](http://192.168.145.2:8080/crm/login)
    4.      协议：http协议
    5.      访问的服务器IP地址是什么？192.168.145.2
    6.      访问这个服务器上的那个软件：8080端口对应一个服务。
    7.      /crm/login：是这个服务器上的某个资源名！（它可能是一段处理登录的java程序！！！）
    9.  重点*****重点*****重点*****重点*****重点*****重点*****重点*****重点*****重点*****
    10.  **表单最终提交的时候，表单项的name属性非常重要，有name的才会提交。没有name是不会提交的。**
    11.  并且浏览器向服务器提交数据的格式是？
    12.      **url?name=value&name=value&name=value&name=value&name=value**

以上的提交数据的格式，是W3C指定的格式。所有浏览器都是这样的。

  1.         以下表单提交数据的时候，格式是这样的：
  2.             [http://192.168.145.2:8080/crm/login?x=zhangsan&y=111](http://192.168.145.2:8080/crm/login?x=zhangsan&y=111)
  4.         这个格式非常重要，必须背会，所有浏览器都是这样提交数据的：                     name=value&name=value&name=value
  5.         类似map：
  6.             key            value
  7.             ---------------------------
  8.             x              zhangsan
  9.             y              111
  1. <body>
  2.         <form action="http://192.168.145.2:8080/crm/login">
  3.             <!-- input是输入域，type不同，展示样式不同。text表示文本框 -->
  4.             用户名：<input type="text" name="x"/><!-- 文本框和密码框的value实际上是不需要程序员提供的，是用户输入的！ -->
  5.             <br>
  6.             <!-- type="password"表示密码框 -->
  7.             密码：<input type="password" name="y" />
  8.             <br>
  9.             <!-- 提交表单的按钮 -->
  10.             <input type="submit" value="登录"/>
  11.         </form>
  13.     </body>
  • 013
    • name有，就能提交，没有name属性就不能提交。
    • 提交格式：name=value&name=value&name=value
    • 表单中，如果有一些项用户没有填写，默认提交的就是空字符串
  1. <body>
  2.         <form action="http://localhost:80/crm/register">
  3.             用户名 <input type="text" name="username" /><!-- value不需要程序员提供 -->
  4.             <br>
  5.             密码 <input type="password" name="userpwd" /><!-- value不需要程序员提供 -->
  6.             <br>
  7.             性别 <!-- 最终提交给服务器的数据是：sex=1 或者 sex=0 -->
  8.                 <!-- 同一组的单选按钮，name是需要一致的，这样才可以做到单选的效果 -->
  9.                 <!-- checked 表示默认选中此项 -->
  10.                 <input type="radio" name="sex" value="1" checked />男 <!-- value需要程序员提供 -->
  11.                 <input type="radio" name="sex" value="0"/>女 
  12.             <br>
  13.             兴趣
  14.                 <!-- 复选框，同一组的复选框name也是一致的。 -->
  15.                 <input type="checkbox" name="aihao" value="smoke"/>抽烟 <!-- value需要程序员提供-->
  16.                 <input type="checkbox" name="aihao" value="drink" checked />喝酒
  17.                 <input type="checkbox" name="aihao" value="firehair" checked />烫头
  18.             <br>
  19.             学历
  20.                 <!-- 下拉列表 -->
  21.                 <select name="xueli"><!-- 假设选中专科，提交的是：xueli=zk -->
  22.                     <option value="gz">高中</option>
  23.                     <option value="zk">专科</option>
  24.                     <option value="bk" selected >本科</option><!-- selected默认选中 -->
  25.                     <option value="ss">硕士</option>
  26.                 </select>
  27.             <br>
  28.             简介
  29.                 <!-- 文本域 --><!-- value是用户填写的！-->
  30.                 <textarea rows="10" cols="60" name="jianjie"></textarea>
  31.             <br>
  32.             <!-- 提交表单 -->
  33.             <input type="submit" value="注册" /><!-- 这个提交按钮不能有name，不然，这个按钮的value也会提交给服务器。 -->
  34.             <!-- 重置按钮 -->
  35.             <input type="reset" value="重置" />
  36.             <!-- 普通按钮不能提交 -->
  37.             <input type="button" value="普通按钮" />
  38.         </form>
  40.         <!-- 不管用！ -->
  41.         <input type="reset" value="重置" />

name=vaule&name=vaule&name=vaule 格式详解
image.png

下拉列表多选

  1. <body>
  3.         <!-- multiple 表示下拉列表支持多选 -->
  4.         <!-- size是设置下拉列表一次最多显示的条目数量。 -->
  5.         <select name="province" size="3" multiple  >
  6.             <option value ="hebei">河北省</option>
  7.             <option value ="henan">河南省</option>
  8.             <option value ="shandong">山东省</option>
  9.             <option value ="shanxi">山西省</option>
  10.             <option value ="hubei">湖北省</option>
  11.             <option value ="hunan">湖南省</option>
  12.         </select>
  14.     </body>

file控件

  1. <body>
  3.         <!-- 后台java程序使用IO流的方式接收这个文件！ -->
  4.         <form action="http://www.baidu.com">
  6.             文件：<input type="file" />
  8.             <br><br><br><br>
  9.             <input type="submit" value="文件上传" />
  10.         </form>
  12.     </body>

hidden控件

  1. <body>
  3.         <!-- hidden隐藏域空间 -->
  4.         <form action="http://127.0.0.1:8080/crm/save" >
  6.             <!-- 隐藏域 -->
  7.             <!-- 不希望用户在浏览器上看到，但是希望可以将这个数据提交过去！ -->
  8.             <input type="hidden" name="usercode" value="11111"/>
  10.             <!-- 提交按钮 -->
  11.             <input type="submit" value="提交" />
  13.         </form>
  14.         <!-- 最终提交：http://127.0.0.1:8080/crm/save?usercode=11111 -->
  16.     </body>

readonly和disabled

readonly和disabled都是只读的！
http://127.0.0.1:8080/crm/save?orgcode=1111
readonly修饰的表单项可以提交给服务器，但是disabled修饰的不会提交！

  1. <body>
  2.         <form action="http://127.0.0.1:8080/crm/save">
  3.             机构代码 <input type="text" name="orgcode" value="1111" readonly />
  4.             <br>
  5.             用户代码 <input type="text" name="usercode" value="2222" disabled />
  6.             <br>
  7.             <input type="submit" value="提交" />
  8.         </form>
  10.     </body>

maxlength属性

  1. <body>
  2.         <!-- 最多输入3个字符 -->
  3.         <input type="text" maxlength="3" />
  4.     </body>

HTML元素的id属性

  1.         1、在HTML中任何一个节点上，都有id属性
  2.         2、在同一个网页中，id属性是不能重复的。
  3.         3、id代表了这个节点，id是这个节点的身份证号。
  5.         4、后期学习了javascript之后，我们要通过javascript对HTML的节点进行增删改，对节点         增 删改的时候，**需要先获取到该节点对象，id属性可以让我们方便的获取到该节点对象。**
  7.         5、**通过id属性可以很方便的在Javascript中获取到该节点，然后对这个节点进行操作，最终产生网页的动态效果，所以javascript可以让死气沉沉网页活跃起来。**
  1. <body id="mybody">
  2.          <form id="myform">
  3.              <input id="username">
  4.          </form>
  6.          <ul id="myul">
  7.              <li id="myli"></li>
  8.          </ul>
  10.     </body>

div和span

  1.         1、div和span都是图层。（div和span都是盒子）
  3.         2、什么是图层，有什么用？
  4.             每一个图层在网页当中都是一个独立的盒子。
  5.             图层的最主要作用就是：网页布局
  7.         3、table表格不是可以布局吗？
  8.             table表格布局有什么缺点：不灵活
  9.             div和span布局更加灵活。
  11.         4、每一个div和span左上角的顶点，都有x和y轴的坐标，通过这个坐标可以定位div在网页当中的位置。后面讲CSS的时候，我们可以通过CSS样式进行定位。
  13.         5、很久以前都是采用table进行布局，现代化的网页都是采用div+span进行布局。
  15.         6、对于web前端来说，怎么调试程序？
  16.                 **每一个浏览器都内置了调试器，使用快捷键F12，可以调出来调试器。**
  18.         7、div和span有什么区别？
  19.             div默认情况下独自占用1行。
  20.             span不会独占行！
  1. <body>
  2.          <div id="div1">
  3.              我是一个div！
  4.          </div>
  5.          是新的一行吗？
  6.          <span id="myspan">我是一个span标签！</span>
  8.          <!-- div嵌套-->
  9.          <div id="">
  10.              <div id="">
  11.                  <div id="">
  12.                      <span id="">
  14.                      </span>
  15.                     <span id="">
  17.                     </span>
  18.                  </div>
  19.              </div>
  20.          </div>
  22.     </body>

CSS

掌握：看见css要懂，常见的样式要会写

HTML中嵌入CSS样式的第一种方式：内联定义

  1. 内联定义语法格式？ 
    1.      <标签 style="样式名 : 样式值; 
    2.                  样式名 : 样式值; 
    3.                  样式名 : 样式值;">

</标签>

  1.             **style：风格，样式。**
  2.             任何一个HTML标签都可以指定style属性。
  1. <body>
  2.         <div id="div1" style="background-color : #CCCC33; 
  3.                             width : 300px; 
  4.                             height: 300px;
  5.                             position : absolute;
  6.                             top: 100px;
  7.                             left: 100px;
  8.                             border-style : solid;
  9.                             border-color : red;
  10.                             border-width : 1px;">
  12.         </div>
  14.     </body>

HTML中嵌入CSS样式的第二种方式：定义内部样式块对象

  • CSS中常见的选择器包括：最常用的三种选择器。

标签选择器
标签名 {}
作用于改类型的所有标签

id选择器
ID选择器
#id{} 只作用于id这个元素

class选择器
.class {} 样式作用于当前网页中某一类的标签
class属性，任何一个标签都有，class相同的，可以看做是同一类标签。 

  2.             div{ /* 作用于所有的div元素*/
  3.                 background-color: aqua;
  4.                 width: 100px;
  5.                 height: 100px;
  6.                 border-color: red;
  7.                 border-style: solid;
  8.                 border-width: 10px;
  9.             }
  10.             /* ID选择器
  11.                 #id{} 只作用于id这个元素
  12.              */
  13.             #username {
  14.                 width: 400px;
  15.                 height: 30px;
  16.                 border-color: black;
  17.                 border-style: solid;
  18.                 border-width: 1px;
  19.             }
  21.             /* 类选择器
  22.                 .class {} 样式作用于当前网页中某一类的标签
  23.              */
  24.             .student {
  25.                 font-size: 12px;
  26.                 color: #FF0000;
  27.             }
  29.         </style>
  31.     </head>
  32.     <body>
  34.         <div>
  36.         </div>
  38.         <div>
  40.         </div>
  42.         <div>
  44.         </div>
  46.         <br>
  47.         <br>
  48.         <br>
  50.         <!-- 怎么才能让样式作用于某1个标签，可以使用id选择器 -->
  51.         <input type="text" id="username" />
  53.         <hr>
  55.         <!-- class属性，任何一个标签都有，class相同的，可以看做是同一类标签。 -->
  56.         <span class="student">文本内容span</span>
  58.         <p class="student">文本内容：段落p标签</p>
  60.         <br><br><br><br><br><br><br><br><br><br><br>
  62.     </body>

HTML中嵌入CSS样式的第三种方式:链入外部样式表文件

  1. <head>
  2.         <meta charset="utf-8">
  3.         <title>HTML中嵌入CSS样式的第三种方式:链入外部样式表文件</title>
  5.         <!-- 引入外部独立的CSS样式表文件 -->
  6.         <!-- 在web前端开发中，这种方式是最常用的！ -->
  7.         <link rel="stylesheet" type="text/css" href="css/1.css"/>
  9.     </head>

隐藏样式

  1. <head>
  2.         <meta charset="utf-8">
  3.         <title>隐藏样式</title>
  4.         <style type="text/css">
  5.             #citysOfChina {
  6.                 display: none; /* 隐藏*/
  7.             }
  9.             input {
  10.                 display: block; /* 显示*/
  11.             }
  13.             ul {
  14.                 /* list-style-type: circle; */
  15.                 list-style-type: none;
  16.             }
  18.             ol {
  19.                 /* list-style-type: none; */
  20.                 list-style-type : upper-roman;
  21.             }
  22.         </style>
  23.     </head>

文本装饰样式

  1. <head>
  2.         <meta charset="utf-8">
  3.         <title>文本装饰样式</title>
  4.         <style type="text/css">
  5.             #baidu {
  6.                 text-decoration : underline;
  7.                 /* text-decoration : overline; */
  8.                 /* text-decoration : line-through; */
  9.                 /* text-decoration : blink; */
  10.             }
  12.             #baidu2 {
  13.                 text-decoration: none;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  19.         <div id="baidu">百度</div>
  21.         <a id="baidu2" href="http://www.baidu.com">百度</a>
  24.     </body>

设置鼠标的悬停效果

  • :hover 是专门用来设置鼠标悬停效果的
  • :hover在使用的时候，这个冒号两边都是不允许有空格的 
  1. <head>
  2.         <meta charset="utf-8">
  3.         <title>设置鼠标的悬停效果</title>
  5.         <style type="text/css">
  6.             /* :hover 是专门用来设置鼠标悬停效果的 */
  7.             span:hover {
  8.                 color: red;
  9.                 font-size: 20px;
  10.             }
  12.             /* 注意：:hover在使用的时候，这个冒号两边都是不允许有空格的。 */
  13.             input:hover {
  14.                 border-color: black;
  15.             }
  16.         </style>
  18.     </head>
  19.     <body>
  21.         <span>我是一个段落</span>        
  22.         <span>我是一个段落</span>
  24.         <input type="text" />
  26.     </body>

内边距和外边距

  1. <head>
  2.         <meta charset="utf-8">
  3.         <title>内边距和外边距</title>
  4.         <style type="text/css">
  5.             #div1 {
  6.                 width: 300px;
  7.                 height: 300px;
  8.                 background-color: #00FFFF;
  9.                 border: solid 1px red;
  10.                 /* 内补丁 */
  11.                 padding-left: 20px;
  12.             }
  13.             #div2 {
  14.                 width: 100px;
  15.                 height: 100px;
  16.                 background-color: black;
  17.                 border: solid 1px red;
  18.                 /* 在div2这个节点顶部top打一个补丁，这个补丁离top 10px */
  19.                 /* 外补丁 */
  20.                 margin-top : 10px;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  26.         <!-- 盒子套盒子 -->
  27.         <!-- 如果盒子套盒子，需要定位的话，可以使用外补丁和内补丁。 -->
  28.         <div id="div1">
  29.             <div id="div2">
  31.             </div>
  32.         </div>
  34.     </body>

float浮动效果

  1. <head>
  2.         <meta charset="utf-8">
  3.         <title>float浮动效果</title>
  4.         <style type="text/css">
  5.             img {
  6.                 float: right;
  7.             }
  8.         </style>
  9.     </head>

定位样式

  1. <head>
  2.         <meta charset="utf-8">
  3.         <title>定位样式position</title>
  4.         <style type="text/css">
  5.             #div1 {
  6.                 background-color: red;
  7.                 border: solid 1px black;
  8.                 width: 100px;
  9.                 height: 100px;
  11.                 /* 定位 */                
  12.                 position: absolute;
  13.                 top: 100px;
  14.                 left: 100px;
  15.             }
  17.             #baidu:hover {
  18.                 /* 变成小手 */
  19.                 cursor: pointer ; /* 尽量不要使用hand，有浏览器兼容问题！*/
  20.                 text-decoration: underline;
  21.                 color: blue;
  22.             }
  23.         </style>
  24.     </head>

JAVAScript

HTML中嵌入JS代码的第一种方式：行间事件

笔记:
1、要实现的功能：
用户点击以下按钮，弹出消息框。

2、JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何
事件都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：
事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在
的。

3、onclick=”js代码”，执行原理是什么？
页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。

4、怎么使用JS代码弹出消息框？
在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
window对象有一个函数叫做:alert，用法是：window.alert(“消息”);这样就可以弹窗了。

5、JS中的字符串可以使用双引号，也可以使用单引号。

6、JS中的一条语句结束之后可以使用分号“;”，也可以不用。

7 事件和事件句柄的区别,多了一个on

画图理解:
image.png
代码:

  1. <html>
  2.     <head>
  3.         <title>HTML中嵌入JS代码的第一种方式</title>
  4.     </head>
  5.     <body>
  7.         <!--
  9.         -->
  10.         <input type="button" value="hello" onclick="window.alert('hello js')"/>
  12.         <input type="button" value="hello" onclick='window.alert("hello jscode")'/>
  14.         <input type="button" value="hello" onclick="window.alert('hello zhangsan')
  15.                                                     window.alert('hello lis')
  16.                                                     window.alert('hello wangwu')"/>
  18.         <!-- window. 可以省略。-->
  19.         <input type="button" value="hello" onclick="alert('hello zhangsan')
  20.                                                     alert('hello lis')
  21.                                                     alert('hello wangwu')"/>
  23.         <input type="button" value="hello" onclick="alert('hello zhangsan');
  24.                                                     alert('hello lis');
  25.                                                     alert('hello wangwu');"/>
  27.     </body>
  28. </html>

在HTML中嵌入JS代码的第二种方式：脚本块的方式

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>在HTML中嵌入JS代码的第二种方式：脚本块的方式</title>
  5.     </head>
  6.     <body>
  8.         <!-- 这个按钮会先被加载到浏览器内存。 -->
  9.         <input type="button" value="按钮1" />
  11.         <!-- 脚本块 -->
  12.         <!-- 一个页面中脚本块可以出现多个！ -->
  13.         <script type="text/javascript">
  14.             /* 在这里直接编写JS代码，这些JS代码在页面打开的时候自上而下的顺序依次逐行执行！ */
  15.             //alert("hello world"); // 单行注释
  16.             alert("hello zhangsan");
  17.             alert("hello lisi");
  19.             /*
  20.                 多行注释
  21.             */
  22.         </script>
  24.         <!-- 最后加载这个按钮2 -->
  25.         <input type="button" value="按钮2" />
  27.     </body>
  28. </html>
  30. <script type="text/javascript">
  31.     alert("page end!")
  32. </script>

在HTML中嵌入JS的第三种方式：引入外部独立的JS文件

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>在HTML中嵌入JS的第三种方式：引入外部独立的JS文件</title>
  6.         <!-- 引入外部独立的CSS文件。这个标签link中属性是href -->
  7.         <link rel="stylesheet" type="text/css" href=""/>
  8.     </head>
  9.     <body>
  11.         <!-- 引入外部独立的js文件 -->
  12.         <!-- script标签引入js文件的时候，是src属性，不是href。 -->
  13.         <script type="text/javascript" src="js/1.js"></script>
  15.         <!-- 引入第二次，这个操作没有意义，测试结果：只要引入一次JS文件，JS文件中的代码就会全部执行一遍 -->
  16.         <script type="text/javascript" src="js/1.js"></script>
  18.         <script type="text/javascript" src="js/1.js">
  19.             //alert("hello world!~~~~~"); // 这里的代码不会执行！
  20.         </script>
  22.         <!-- 单独的脚本块 -->
  23.         <script type="text/javascript">
  24.             alert("hello world!%%%%%%%%");
  25.         </script>
  27.     </body>
  28. </html>

关于前端的各种注释：

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>关于各种注释</title>
  6.         <style type="text/css">
  7.             /* CSS的注释 */
  8.         </style>
  10.     </head>
  11.     <body>
  12.         <!-- 这是HTML的注释 -->
  13.         <script type="text/javascript">
  14.             /* 这是javascript注释，多行 */
  15.             // 这是javascript注释,单行
  16.         </script>
  17.     </body>
  18. </html>

标识符和关键字

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>标识符和关键字</title>
  5.     </head>
  6.     <body>
  7.         <script type="text/javascript">
  9.             /* 标识符命名规则和命名规范按照java那一套来就行！ */
  10.             /*
  11.                 以下这段代码是JS的for循环，找出其中的关键字和标识符？
  12.                     关键字：var、for
  13.                     标识符：i、alert
  15.                 标识符命名规则：
  16.                     标识符只能由数字、字母、下划线、美元符号组成，不能含有其它特殊符号
  17.                     标识符不能以数字开始
  18.                     标识符严格区分大小写
  19.                     关键字不能做标识符
  20.                     标识符理论上没有长度限制
  22.                 标识符命名规范？
  23.                     .....
  24.             */
  25.             for(var i = 0; i < 10; i++){
  26.                 alert("i = " + i)
  27.             }
  29.         </script>
  30.     </body>
  31. </html>

变量

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>JS的变量</title>
  5.     </head>
  6.     <body>
  7.         <script type="text/javascript">
  8.             /*
  9.                 回顾Java中的变量？
  10.                     怎么声明？
  11.                         int i;
  12.                         double d;
  13.                         String s;
  14.                     怎么赋值？
  15.                         i = 100;
  16.                         d = 3.14;
  17.                         s = "abc";
  18.                     一行上能声明多个变量吗？
  19.                         int a, b, c = 300;
  20.                         a b c都是int类型。
  21.                         a和b没有赋值。
  22.                         c赋值300
  24.                     重点：Java语言是一种强类型语言，有编译阶段，属于编译型语言。
  25.                         Java语言在编译阶段确定变量的数据类型，也就是说程序还没有
  26.                         运行呢，变量的数据类型就已经确定了，并且该变量的数据类型
  27.                         在这一生中，永远不可变。
  28.                             int x = 1200;【x = true; java的编译器会报错。不让这样做。语法不对！】
  29.                             double d = x; 
  30.                             这行代码表示x的变量中保存的值1200给d变量
  31.                             x变量还是int类型，d变量是double类型。一生不变。
  33.                 JS的变量？
  34.                     怎么声明？
  35.                         var 变量名;
  36.                         var i;
  37.                     怎么赋值？
  38.                         变量名 = 值;
  39.                         i = 100;
  40.                     一行上能声明多个变量吗？
  41.                         var a, b, c = 300;
  42.                         声明3个变量，a b c，并且c赋值300，其中a和b变量没有赋值，系统默认赋值undefined
  43.                         undefined 在JS中一个具体的值，这个值就是 undefined
  45.                     重点：JS语言是一种弱类型语言，没有编译阶段，直接浏览器打开解释执行，
  46.                     在JS中声明变量时不需要指定变量的数据类型，程序在运行过程当中，赋什么
  47.                     类型的值，变量就是什么数据类型，并且变量的数据类型是可变的。
  48.                         var i;
  49.                         i = 100; 到这里i是整数型
  50.                         i = false; 到这里i就是布尔类型了
  51.                         i = true;
  52.                         i = 3.14;
  53.                         i = new Object();
  54.             */
  55.            var i;
  56.            alert(i) // 变量只声明没有赋值,系统默认赋值undefined, 在JS当中undefined是一个具体存在的值.
  58.            var x = "undefined";
  59.            alert(x) // "undefined"这个不是undefined,它是一个字符串.
  61.            // 声明时,同时赋值
  62.            var k = 100;
  63.            alert(k + 1) // 101
  65.            k = false;
  66.            alert(k);
  68.            k = "abc";
  69.            alert(k)
  71.            // 一行上可以声明多个变量
  72.            //var是一个关键字,就是用来声明变量的,variables单词的前3个字母.
  73.            var a, b, c = 100;
  74.            alert(a) // undefined
  75.            alert(b) // undefined
  76.            alert(c) // 100
  78.         </script>
  79.     </body>
  80. </html>

函数初步（一）

1.笔记：

  1.             回顾Java中的方法：
  2.                 [修饰符列表] 返回值类型 方法名(形式参数列表){
  3.                     方法体;
  4.                 }
  5.                 例如：
  6.                     public static int sum(int a,int b){
  7.                         return a + b;
  8.                     }
  10.             JavaScript当中的函数：
  11.                 函数定义的语法格式是什么？
  12.                     function 函数名(形式参数列表){
  13.                         函数体;
  14.                     }
  15.                     例如：
  16.                         function sum(a, b){
  17.                             return a + b;
  18.                         }
  20.                         函数名：sum
  21.                         形式参数列表是：a和b  (a和b都是变量名！)
  23.                 JS中的函数返回值类型是不需要指定的，因为可以返回任何类型的数据。没有限制。
  25.             关于JS的的调试？
  26.                 首选方案是：alert()，在程序的某个位置先使用alert弹出某个变量的值，看看是否是你需要的。
  27.                 通过alert可以调试JS代码。
  29.                 另外一种方案是：采用浏览器自带的调试插件，F12
  30.                     F12这个插件中比较重要的面板：
  31.                         控制台
  32.                         查看器
  33.                         网络
  34.                         掌握以上三个面板！！！！！！！！！！！！
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>函数初步</title>
  5.     </head>
  6.     <body>
  7.         <script type="text/javascript">
  9.             //alert(122222);
  12.             */
  13.            /* function sum(a, b){
  15.            } */
  17.            // 函数必须调用才会执行.
  18.            function sum(x, y){
  19.                alert(x + "," + y);
  20.                //alert("sum函数执行了！");
  21.            }
  23.            //这一切都是因为js是一门弱类型语言!
  24.            sum("abc", false);
  26.            // 调用sum函数
  27.            sum();
  29.            // 调用sum函数
  30.            sum(1);
  32.            // 调用sum函数
  33.            sum(1,2);
  35.            // 调用sum函数
  36.            sum(1,2,3);
  38.            /* JS的函数还有另一种声明方式？*/
  39.            /* function mysum(a, b){
  41.            } */
  43.            //效果相同
  44.            mysum = function(a, b){
  45.                return a + b; //返回计算结果!
  46.            }
  48.            // 调用函数
  49.            var result = mysum(10, 20);
  50.            alert(result)
  52.            //定义一个函数
  53.            function sayHello(username){
  54.                alert("欢迎" + username + "光临！")
  55.            }
  57.         </script>
  59.         <!-- 在事件句柄当中调用sayHello函数 -->
  60.         <input type="button" value="hello" onclick="sayHello('李四')" />
  61.     </body>
  62. </html>

函数初步（二）

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>函数初步</title>
  5.     </head>
  6.     <body>
  7.         <script type="text/javascript">
  9.             // 这里也可以调用sayHello()函数.
  10.             //sayHello();
  12.             // 函数必须手动调用才会执行!
  13.             // 在JS当中函数声明的优先级比较高,打开网页的时候,网页中所有的函数先进行声明.
  14.             function sayHello(){
  15.                 alert("hello world!")
  16.             }
  18.             // 这行代码暴露在script标签当中,在页面打开的时候遵循自上而下的顺序依次逐行执行!
  19.             //sayHello();
  21.             //再调用一次
  22.             //sayHello();
  24.         </script>
  26.         <input type="button" value="hello" onclick="sayHello() "/>
  27.     </body>
  28. </html>

局部变量和全局变量

  1. 笔记

全局变量：
在函数体之外声明的变量，叫做全局变量。
全局变量在浏览器打开的时候分配空间，直到浏览器关闭的时候才会销毁。

  1.      局部变量：
  2.                 在函数体当中声明的变量，叫做局部变量。
  3.                 局部变量在函数被调用的时候分配空间，函数执行结束之后，内存释放。
  5.             **javascript也是遵守就近原则的。**
  7.             变量声明了，但是没有手动赋值，系统默认赋值undefined。
  8.             变量没有声明，直接访问，这个时候会报错。（用F12可以查看控制台的错误信息！）
  10.             在javascript当中，如果一个变量声明的时候没有使用var关键字的话，这个变量
  11.             不管是在哪里声明的，都是全局变量。这种全局变量在声明的时候必须手动赋值，不能
  12.             采用系统默认值。
  1. 代码
  1. // 全局变量
  2. var username = "zhangsan"; 
  4. // 定义函数
  5. function sayHello(){
  6.   // 局部变量
  7.   var username = "lisi";
  8.   alert("welcome, " + username); //就近原则(这是任何一个编程语言都具备的！)
  9.   // 局部变量
  10.   var i = 100;
  11.            }

JS中的函数可以重载吗

  • 在JS中函数是不能重载的,也不存在重载机制
  • JS中的函数只要出现同名函数,之前的函数就消失了
  • 注意在JS中编写函数名的时候,谨慎一些,以防将其他函数干掉!

JS的数据类型

  1. 关于JS的数据类型？ 

    1.          1、JS中声明变量不需要指定变量数据类型呀，为什么还要学习数据类型呢？
    2.              例如：var i = 100; var d = 3.14;
    3.              **在JS中学习数据类型也不是为了声明变量，是为了理解JS程序的底层原理。**
    4.              我们起码要知道100是什么类型，3.14是什么类型，怎么存储的....
    6.          2、**ES6之前JS的数据类型包括6种：**
    7.              Undefined
    8.              Number
    9.              Null
    10.              Boolean
    11.              String
    12.              Object
    14.              其中：**Undefined、Number、String、Boolean、Null都属于原始类型（或者叫做基本数据类型）**
    15.              其中：**Object属于引用数据类型（或者叫做对象类型）**
    17.          3、在ES6之后引入了其它新的类型，知道就行：
    18.              Symbol
    19.              BigInt
    20.              注意：ES6之后是8种类型。ES6之前是6种类型。

typeof运算符

  1.                 **typeof运算符**（非常重要*****）
  2.                     typeof运算符可以在JS代码运行过程当中，动态的获取变量的数据类型。
  3.                    ** typeof运算符的语法格式：typeof 变量名**
  5.                     typeof运算符的运算结果是以下6个字符串之一：
  6.                        ** "undefined"**

“number”
“string”
“boolean”
“object”
“function”
并且以上6个字符串都是全部小写的！

  1.                 5、在JS中判断两个字符串是否相等，应该使用“==”,JS中没有equals函数！！！
  3.                 6、关于JS的比较官方的参考文档？
  4.                         https://developer.mozilla.org/zh-CN/docs/Web/API
  5.                         Web API 接口参考

Undefined数据类型

Undefined类型：
1、只有一个值，它的值就是：undefined
2、当一个变量声明之后没有手动赋值，系统默认赋值undefined
3、Undefined类型属于原始类型。

Null类型

Null类型
1、Null类型也是属于原始类型。
2、Null类型只有1个值：null
3、注意: typeof null 运算结果是：”object”

在控制台输出

相当于Java中的system.out.println

  1. console.log(typeof i) // "object"

Number类型

Number类型
1、Number类型属于原始类型。
2、Number类型都有哪些值？
-1
0
1
2
3
3.14
2.0
NaN
Infinity
….
3、NaN？
Not a Number，表示不是一个数字。
但NaN一个值，它属于Number类型。

  1.                 4、什么情况下结果是一个NaN？
  2.                     当一个数学表达式的运算结果本应该返回一个数字，但是最终无法返回一个数字的时候，结果是NaN。
  4.                 5、**Infinity是无穷大，当除数是0的时候，最终计算结果是无穷大。**
  6.                 6、强调：
  7.                     JavaScript当中的Number类型代表了java中的：
  8.                         byte short int long float double 
  10.                 7、在Number类型这一块，有一个函数叫做：**isNaN()函数**，这个函数
  11.                 **最终返回布尔类型，返回true表示不是一个数字，返回false表示是一个**

数字。
isNaN : is Not a Number
true: 表示不是一个数字
false:表示是一个数字

  1.                    ** isNaN(数据)**：这个函数有一个特点，它会首先尝试将“数据”转换成
  2.                     数字，如果转换失败了，则结果就是true。转换为数字成功了，那么
  3.                     结果就是false。
  5.                     isNaN这个函数是干啥的？
  6.                       **  就是用来判断“数据”是否是一个数字！！！！！**
  8.                 8、**在Number类型这一块还有一个函数叫做：Number()函数，这个函数的作用可以将不是数字类型的数据转换成数字类型的数据。**
  10.                 9、**parseInt()函数，将字符串数字转换成数字，并且取整。向下取整。**
  12.                 10、**Math.ceil()，这是一个Math工具类中的一个函数，向上取整。**

向上取整：只要后面有小数前面的整数就加1
向下取整：下取整，不管四舍五入的规则，只要后面有小数忽略小数给定。比如：4． 9，调用用向下取整函数，得到的是4。调用用向上取整函数，得到的是5

Boolean类型

Boolean类型：
1、Boolean类型属于原始类型。
2、Boolean类型只有两个值：true,false，没有其他值。
3、Boolean类型中有一个函数：Boolean()函数
这个函数的作用是？
将不是布尔类型的转换成布尔类型。

  1.                         转换规律是什么？
  2.                         **"只要有东西"结果就是true。**
  3.                         有数据就是true，无数据就是false
  1. console.log(Boolean(1)); // true
  2.             console.log(Boolean(0)); // false
  4.             console.log(Boolean("abc")); // true
  5.             console.log(Boolean("中国")); // true
  6.             console.log(Boolean("")); // false
  8.             console.log(Boolean(NaN)); // false
  9.             console.log(Boolean(Infinity)); // true
  11.             console.log(Boolean(null)); // false
  12.             console.log(Boolean(new Object())); // true
  14.             console.log(Boolean(undefined)); // false
  16.             var i = 0;
  17.             if(i){ // 这里的代码实际上是这样的:if(Boolean(i))
  18.                 console.log("不是0");
  19.             }else{
  20.                 console.log("是0");
  21.             }
  23.             var i = 10;
  24.             while(i) { // 这里也会自动调用Boolean()函数进行转换.
  25.                 alert(i);
  26.                 i--;
  27.             }

Boolean()函数在JS中会被隐式调用![程序员是不需要手动调用的]

  • 这里不是说if后面小括号可以跟字符串,if后面小括号中永远只能是true或者false，如果不是true,也不是false,那么JS会自动隐式调用Boolean()函数进行类型转换. 

    1.  //var username = "zhangsan";
    2.    varusername = "";
    4.    if(Boolean(username)) {
    5.        console.log("welcome, " + username)
    6.    }else{
    7.        console.log("对不起用户名不能为空！")
    8.    }

String 类型

String类型
1、String类型属于原始类型（基本数据类型）

  1.                 2、在JS中怎么定义字符串，包括两种方式：
  2.                     var s = "字符串";
  3.                     var s = '字符串';
  4.                     var s = new String("字符串");
  6.                 3、在JS当中提供了创建字符串的两种方式：
  7.                     如果采用这种方式创建的字符串就属于原始类型！
  8.                             var s = "hello";
  10.                     如果采用这种方式创建的字符串就属于Object类型，这里使用了Object类的子类String，String类是JS内置的，可以直接使用：
  11.                         var s = new String("hello");
  13.                 4、**在JS中不管是原始类型的字符串，还是Object类型的字符串，他们的方法和属性都是通用的。**

常用属性和方法

学习方法：熟练掌握，没必要记忆，开发的时候去查文档
String当中的常用属性和方法：
常用属性：
length属性，获取字符串长度

  1.                     常用方法：
  2.                         charAt 方法                 获取指定下标位置的字符
  3.                         concat 方法                 连接字符串
  4.                         indexOf 方法                 获取某个字符串在当前字符串中第一次出现处的索引
  5.                         lastIndexOf 方法         获取某个字符串在当前字符串中最后一次出现处的索引
  6.                         replace 方法                 替换
  7.                         split 方法                      拆分字符串
  8.                         substr 方法                      截取字符串
  9.                         substring 方法                  截取字符串
  10.                         toLowerCase 方法                     转小写
  11.                         toUpperCase 方法                     转大写
  1. var s1 = "abc";
  2.             console.log(typeof s1) // "string"
  4.             var s2 = new String("hello");
  5.             console.log(typeof s2) //"object"
  7.             console.log("abcdef".length) //6
  8.             console.log("http://www.baidu.com".charAt(3)) //p
  9.             console.log("abc".concat("def")) //abcdef
  10.             console.log("username=zhangsan&password=123".indexOf("=")) // 8
  11.             console.log("username=zhangsan&password=123".lastIndexOf("=")) //26
  12.             console.log("1980-10-11".replace("-",",")) //1980,10-11 (替换所有需要使用正则表达式)
  14.             // 拆分字符串返回一个数组.
  15.             var arr = "1980-11-12".split("-"); // var[] arr; 这是错误的,没有这种语法在JS当中.
  16.             // 遍历数组
  17.             for(var i = 0; i < arr.length; i++){ // arr.length是数组中元素的个数!
  18.                 console.log(arr[i]) // 还是使用中括号的方式加下标的方式访问数组中的元素.
  19.             }
  21.             // 对于substr和substring来说,只有1个参数的话没有区别.
  22.             console.log("abcdef".substr(2)) //cdef
  23.             console.log("abcdef".substring(2)) //cdef
  25.             // 对于substr和substring来说,都有两个参数会有什么区别？
  26.             // substr(startIndex, length)
  27.             // substring(startIndex, endIndex),需要注意,不包括endIndex
  28.             console.log("abcdef".substr(2,3)) //cde
  29.             console.log("abcdef".substring(2,3)) //c
  31.             console.log("ABCdef".toLowerCase()) //abcdef
  32.             console.log("ABCdef".toUpperCase()) //ABCDEF

object类型

Object类型：
1、在JS当中内置了一个类型Object，可以将Object类型看做是所有对象的超类/基类

  1.                 2、**在JS当中默认定义的类型，没有特殊说明的话，默认继承Object**
  3.                 3、Object类型中有哪些通用属性和方法呢？
  4.                     属性：
  5.                         **prototype 属性** | constructor 属性
  6.                     方法：
  7.                         toLocaleString 方法 | toString 方法 | valueOf 方法
  9.                     重点掌握：
  10.                        ** prototype属性（**prototype翻译为原型）

这个属性可以给对象动态扩展属性和方法。

语法：
类型.prototype.名称（属性名或者函数名）= function（这里如果是值的话表示动态的给对象扩展属性）

JS中怎么定义类对象

1、在JS中怎么定义类？包括两种方式

  1.                 第一种方式：
  2.                     function 类名(形式参数列表){
  4.                         this.属性名 = 参数;
  5.                         this.属性名 = 参数;
  7.                         this.方法名 = function(){
  9.                         }
  10.                     }
  12.                 第二种方式：
  13.                     类名 = function(形式参数列表){
  15.                         this.属性名 = 参数;
  16.                         this.属性名 = 参数;
  18.                         this.方法名 = function(){
  20.                         }
  21.                     }

既是一个函数,同时又是一个类的定义.
函数名是:sayHello,类名是:sayHello
function sayHello(){

  1.         } 
  3.         sayHello = function(){
  5.         }
  1. 调用
  • 关键看你怎么调用,如果没有使用new运算符调用,表示普通函数调用.不会在堆中new对象. 
    1.    sayHello();
  • 使用new运算符去调用这个函数,显然是把它当做一个类来看待,这个会导致浏览器的堆当中开辟一个新对象!

var obj = new sayHello(); // obj是一个引用,保存内存地址指向对象!

  1. 案例：
  1. function Emp(x, y, z){
  2.                 // 属性
  3.                 this.empno = x;
  4.                 this.ename = y;
  5.                 this.sal = z;
  6.                 // 方法
  7.                 this.work = function(){
  8.                     console.log(this.ename + " is working!!!")
  9.                 }
  10.             }
  1. 访问一个对象的属性还能这样，语法格式：引用[“属性名”] 
    1.  **console.log("e4.empno = " + e4["empno"])**

null NaN undefined的区别

1、和**=有什么区别？**
== 等 同运算符：只比较值是否相等。
=== 全等运算符：既比较值是否相等，同时又比较数据类型是否相同。
== 有点类似于Java语言中的equals方法

2、null undefined NaN的区别？
类型都是不一样的
null和undefined是等同关系。
null的类型属于原始类型,typeof运算符的结果是:object

JS的常用事件

  1. load事件：

这个是卸载body当中的
1、load事件不是在页面加载过程中触发的。

  1.         2、**load事件是在页面中所有的元素全部加载完毕之后才发生的。**

  1. JS的常用事件：

    1. 学习方法：需要背会，这里列举的是常用事件，具体的可以看开发文 

      1.   （1）blur【布勒】                失去焦点
      2.   （5）focus【佛肯死】                获得焦点
      4.   （3）click                鼠标单击
      5.   （4）dblclick            鼠标双击
      7.   （6）keydown                键盘按下
      8.   （7）keyup                键盘弹起
      10.   （9）mousedown            鼠标按下
      11.   （10）mouseover            鼠标经过
      12.   （11）mousemove            鼠标移动
      13.   （12）mouseout            鼠标离开
      14.   （13）mouseup            鼠标弹起
      16.   （16）submit                表单提交
      17.   （14）reset                表单重置
      19.   （15）select                文本被选定
      20.   （2）change                下拉列表选中项改变，或文本框内容改变
      21.   （8）load                页面加载完毕    
      22. **提醒：任何一个事件都有对应的事件句柄。事件句柄是在事件名称前添加on就行。**
  1. 事件的测试

失去焦点的作用：就是开发过程中，注册账号是账号名重复的话，就会失去焦点，提示账号名重复

  1. 测试失去焦点事件：<input type="text" onblur="console.log('失去焦点了')"/>
  2.         <br>
  3. 测试获取焦点事件：<input type="text" onfocus="console.log('获取焦点了')"/>
  4.         <br>
  1. 测试click事件：<input type="button" value="click事件" onclick="console.log('单击')"/>
  2.         <br>
  3. 测试dblclick事件：<input type="button" value="dblclick事件" ondblclick="console.log('双击')"/>
  4.         <br>
  1. 测试keydown事件：<input type="text" onkeydown="console.log('keydown....')" onkeyup="console.log('keyup....')"/>
  2.         <br>
  3. 测试keyup事件：<input type="text" onkeyup="console.log('keyup....')" />

测试mouse相关的事件：【测试时，需要在css里面，构造一个区域】

  2.             <div id="mouseDiv" onmouseover="console.log('鼠标经过了')"
  3.                                onmousedown="console.log('鼠标按下了')"
  4.                                onmouseout="console.log('鼠标离开了')"
  5.                                onmouseup="console.log('鼠标弹起了')"
  6.                                onmousemove="console.log('鼠标移动了')"></div>
  7.             <br>
  1. <body onload="console.log('页面加载完毕了!')">
  2.         <script type="text/javascript">
  4.         </script>
  6.         测试选中文本事件：
  7.         <textarea rows="10" cols="30" onselect="console.log('文本被选中了')"></textarea>
  8.         <br>
  9.         <input type="text" onselect="console.log('文本被选中了')"/>
  10.         <br>
  11.         <br>
  12.         测试change事件：
  13.         <select onchange="console.log('选项被修改!')">
  14.             <option value ="">--请选择您的学历--</option>
  15.             <option value ="gz">高中</option>
  16.             <option value ="zk">专科</option>
  17.         </select>
  18.         <br>
  19.         <br>
  21.         测试表单的提交和重置事件：
  22.         <form action="" onsubmit="alert('表单提交了')" onreset="console.log('表单重置了')">
  23.             <input type="submit" value="提交"/>
  24.             <input type="reset" value="重置"/>
  25.         </form>
  28.         <br>
  29.         测试mouse相关的时间：
  30.             <div id="mouseDiv" onmouseover="console.log('鼠标经过了')"
  31.                                onmousedown="console.log('鼠标按下了')"
  32.                                onmouseout="console.log('鼠标离开了')"
  33.                                onmouseup="console.log('鼠标弹起了')"
  34.                                onmousemove="console.log('鼠标移动了')"></div>
  35.             <br>
  40.     </body>