HTML

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

基本概念

1、系统结构：

  1. B/S架构：（以后主要走的方向是这个。）<br />        **Browser / Server      （浏览器/服务器的交互形式。）**
  3.     Browser支持哪些语言：HTML CSS JavaScript
  5.     **写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。**（Java程序员目前来看也需要会一些前端的东西。）<br />        前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。）<br />        S是服务器端Server，Server端的语言很多：C C++ Java python.....（我们主要是使用Java语言完成服务器端的开发）
  7.     **B/S架构的系统有什么优点和缺点？**<br />**            优点：升级方便，只升级服务器端代码即可。维护成本低。**<br />**            缺点：速度慢、体验不好、界面不炫酷**<br />        <br />        企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统，不需要炫酷，不需要特别好的用户体验，只要能做数据  的增删改查即可。并且企业内部更注重维护的成本。
  9.     B/S架构的系统有哪些代表？<br />            京东<br />            百度<br />            天猫<br />            ....
  11. C/S架构<br />        Client / Server     （客户端/服务器端的交互形式。）
  13.     缺点：升级麻烦，维护成本较高。<br />        优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）
  15.     常见的C/S架构的系统：<br />            QQ<br />            微信<br />            支付宝<br />            ....<br />2、什么是HTML？怎么开发HTML？怎么运行HTML？
  17. * HTML: Hyper Text Markup Language （超文本标记语言）<br />        由大量的标签组成，每一个标签都有开始标签和结束标签。<br />        <标签><br />            <标签><br />                <标签 属性名="属性值" 属性名="属性值"><br />                </标签><br />            </标签><br />        </标签>
  19.     超文本: 流媒体、图片、声音、视频....
  21. * HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm<br />    HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....
  23. * 直接采用浏览器打开HTML文件就是运行。

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

  1. W3C制定了很多规范：<br />        HTML/XML/http协议/https协议......
  3. 为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。<br />        w3school:先出现的，和W3C没有关系<br />        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源码上是什么格式，到网页上还是这个格式，不变。-->
  42.     <pre>
  43.     for(int i = 0; i < 100; i++){
  44.     System.out.println("i = " + i);
  45.     }
  46.     </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>

表单

  • 011

    1. <body>
    2.       <!-- 
    3.           1、什么是表单有什么用？
    4.               发送请求，并且携带数据给服务器。
    5.               表单和超链接有共同的特征，就是都可以向服务器发送请求，
    6.               只不过超链接是用户直接点击发送请求，不能填写数据。
    7.               而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。
    9.               表单最主要的作用就是：收集用户的信息。
    11.               表单对应的英语单词是：form
    12.           2、怎么定义一个表单对象呢？语法格式
    13.               <form>
    14.                   表单项1:
    15.                   表单项2:
    16.               </form>
    17.               另外要注意：一个网页上可以有多个表单对象。
    18.           3、form标签中有一个action属性，这个属性和超链接的href相同。
    19.           都需要填写url。
    20.        -->
    22.        <!-- 超链接-->
    23.        <a href="http://www.baidu.com">百度</a>
    25.        <br><br><br>
    26.        <!-- 表单-->
    27.        <form action="http://www.baidu.com">
    28.            <!-- 按钮，提交表单的按钮，只要点击这个提交按钮，就发送请求了！ -->
    29.           <!-- 所有能够提交表单的按钮，type必须是submit，不能随便写 -->
    30.           <!-- <input type="submit"/> -->
    31.           <!-- 设置按钮上显示的文本 -->
    32.           <!-- vaule 是按钮名称-->
    33.           <input type="submit" value="百度"/>
    35.           <!-- button是一个普通按钮，能提交表单吗？不能。 -->
    36.           <!-- <input type="button" value="百度"/> -->
    38.        </form>
    39.        form
    40.        <!-- submit提交按钮放在form外面也是不行的！-->
    41.        <input type="submit" value="百度(外)"/>
    43.   </body>

  • 012

    1. <body>
    2.       <!-- 画一个登录的表单 -->
    3.       <!-- action路径随便写了 -->
    4.       <!-- 
    5.           http://192.168.145.2:8080/crm/login
    6.               协议：http协议
    7.               访问的服务器IP地址是什么？192.168.145.2
    8.               访问这个服务器上的那个软件：8080端口对应一个服务。
    9.               /crm/login：是这个服务器上的某个资源名！（它可能是一段处理登录的java程序！！！）
    11.           重点*****重点*****重点*****重点*****重点*****重点*****重点*****重点*****重点*****
    12.           表单最终提交的时候，表单项的name属性非常重要，有name的才会提交。没有name是不会提交的。
    13.           并且浏览器向服务器提交数据的格式是？
    14.               url?name=value&name=value&name=value&name=value&name=value
    15.               以上的提交数据的格式，是W3C指定的格式。所有浏览器都是这样的。
    17.           以下表单提交数据的时候，格式是这样的：
    18.               http://192.168.145.2:8080/crm/login?x=zhangsan&y=111
    20.           这个格式非常重要，必须背会，所有浏览器都是这样提交数据的：name=value&name=value&name=value
    21.           类似map：
    22.               key            value
    23.               ---------------------------
    24.               x              zhangsan
    25.               y              111
    26.        -->
    27.       <form action="http://192.168.145.2:8080/crm/login">
    28.           <!-- input是输入域，type不同，展示样式不同。text表示文本框 -->
    29.           用户名：<input type="text" name="x"/><!-- 文本框和密码框的value实际上是不需要程序员提供的，是用户输入的！ -->
    30.           <br>
    31.           <!-- type="password"表示密码框 -->
    32.           密码：<input type="password" name="y" />
    33.           <br>
    34.           <!-- 提交表单的按钮 -->
    35.           <input type="submit" value="登录"/>
    36.       </form>
    38.   </body>

  • 013

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

  1. <body>
  3.         <!--readonly和disabled都是只读的！  -->
  4.         <!-- http://127.0.0.1:8080/crm/save?orgcode=1111 -->
  5.         <!-- readonly修饰的表单项可以提交给服务器，但是disabled修饰的不会提交！ -->
  6.         <form action="http://127.0.0.1:8080/crm/save">
  7.             机构代码 <input type="text" name="orgcode" value="1111" readonly />
  8.             <br>
  9.             用户代码 <input type="text" name="usercode" value="2222" disabled />
  10.             <br>
  11.             <input type="submit" value="提交" />
  12.         </form>
  14.     </body>

maxlength属性

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

HTML元素的id属性

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

div和span

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

开发工具

  • 在hbudiler中 输入标签的名字，回车就出来了 不需要打括号

CSS

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