第一章 HTML

1、系统结构：

B/S架构（Browser/Server）

Browser支持哪些语言：HTML CSS JavaScript

写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。（Java程序员目前来看也需要会一些前端的东西。）前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求）S是服务器端Server，Server端的语言很多：C C++ Java python…..（我们主要是使用Java语言完成服务器端的开发）

B/S架构的系统有什么优点和缺点？
优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢、体验不好、界面不炫酷

企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业内部更注重维护的成本。

B/S架构的系统有哪些代表？
京东
百度
天猫
….

C/S架构（Client / Server）

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

常见的C/S架构的系统：
QQ
微信
支付宝
….

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

HTML:
Hyper Text Markup Language （超文本标记语言）由大量的标签组成，每一个标签都有开始标签和结束标签
超文本:
流媒体、图片、声音、视频….

  1. <标签>
  2.   <标签>
  3.     <标签 属性名="属性值" 属性名="属性值">
  4.     </标签>
  5.   </标签>
  6. </标签>

HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm；HTML也有专业的开发工具，例如：DreamWeaver、HBuilder…..

直接采用浏览器打开HTML文件就是运行

3、HTML是谁制定的？

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

4、网页基本结构

4.1. 注释：

  1. <!--
  2. 1、这是HTML的注释
  3. 2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
  4. 3、HTML不区分大小写，语法松散不严格。
  5. -->

4.2. 一个简单网页最基本的结构

  1. <!doctype html>
  2. <!--根-->
  3. <html>
  4.     <!--头-->
  5.     <head>
  6.   <!--网页标题，显示在网页左上角-->
  7.   <title>网页的标题</title>
  8.     </head>
  9.     <!--体-->
  10.     <body>
  11.   网页的主体内容，欢迎学习HTML！
  12.     </body>
  13. </html>

4.3、基本标签

  1.         <!--段落标记-->
  2.         <p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。</p>
  4.         <!--标题字：是HTML预留的格式，和word中的标题字相同-->
  5.         <h1>标题字</h1>
  6.         <h2>标题字</h2>
  7.         <h3>标题字</h3>
  8.         <h4>标题字</h4>
  9.         <h5>标题字</h5>
  10.         <h6>标题字</h6>
  12.         <!--换行标记，br标签是一个独目标记-->
  13.         hello 
  14.         world!
  15.         hello <br>world!
  17.         <!--横线，独目标记-->
  18.         <hr>
  20.         <!--color和width都是hr标签的属性-->
  21.         <hr color="red" width="50%">
  22.         <!--语法太松散了。-->
  23.         <hr color='green' width=30%>
  25.         <!--预留格式-->
  26.             <pre>
  27.         for i = 1 to 10
  28.              print i
  29.         next i
  30.                 </pre>
  32.         <del>删除字</del>
  33.         <ins>插入字</ins>
  34.         <b>粗体字</b>
  35.         <i>斜体字</i>
  37.         10<sup>2</sup>
  39.         10<sub>m</sub>
  41.         <!--字体标签-->
  42.         <font color="red" size="50">字体标签</font>

4.4、实体符号

b<a> 
```html 
  1.     <!--
  2.     <table border="1px" width="300px">
  3.     -->
  4.     <table align="center" border="1px" width="60%" height="150px">
  5.         <!--align对齐方式-->
  6.         <tr align="center">
  7.             <td>a</td>
  8.             <td>b</td>
  9.             <td>c</td>
  10.         </tr>
  11.         <tr>
  12.             <td>d</td>
  13.             <td>e</td>
  14.             <td>f</td>
  15.         </tr>
  16.         <tr>
  17.             <td>x</td>
  18.             <td>y</td>
  19.             <td align="center">z</td>
  20.         </tr>
  21.     </table>
  2. <a name="asPPL"></a>
  3. ### 4.5、单元格合并与th标签
  5. ```html
  6. <!--注意事项：
  7.             1、row合并的时候，删除“下面的”单元格
  8.             2、col合并的时候，对删除哪个没有要求。
  9.         -->
  10.         <table border="1px" width="50%">
  11.             <tr>
  12.                 <!--
  13.                 <td>员工编号</td>
  14.                 <td>员工薪资</td>
  15.                 <td>部门名称</td>
  16.                 -->
  17.                 <!-- th 标签也是单元格标签，比td多的是居中、加粗。-->
  18.                 <th>员工编号</th>
  19.                 <th>员工薪资</th>
  20.                 <th>部门名称</th>
  21.             </tr>
  22.             <tr>
  23.                 <td>1</td>
  24.                 <td>2</td>
  25.                 <td>3</td>
  26.             </tr>
  27.             <tr>
  28.                 <td>a</td>
  29.                 <td>b</td>
  30.                 <td rowspan="2">f</td>
  31.             </tr>
  32.             <tr>
  33.                 <td colspan="2">d</td>
  34.                 <!--
  35.                 <td>f</td>
  36.                 -->
  37.             </tr>
  38.         </table>

4.6、thead、tbody、tfoot标签

  • 便于维护，将表格分成几个部分，没有其他作用
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
  5.         注意：并不是设置当前页面的字符编码方式。-->
  6.         <meta charset="gbk">
  7.         <title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。</title>
  8.     </head>
  9.     <body>
  11.         <table border="1px" width="50%">
  12.             <!--头-->
  13.             <thead>
  14.                 <tr>
  15.                     <th>员工编号</th>
  16.                     <th>员工薪资</th>
  17.                     <th>部门名称</th>
  18.                 </tr>
  19.             </thead>
  21.             <!--体-->
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>2</td>
  26.                     <td>3</td>
  27.                 </tr>
  28.                 <tr>
  29.                     <td>a</td>
  30.                     <td>b</td>
  31.                     <td rowspan="2">f</td>
  32.                 </tr>
  33.                 <tr>
  34.                     <td colspan="2">d</td>
  35.                 </tr>
  36.             </tbody>
  38.             <!--脚-->
  39.             <tfoot>
  40.                 <tr>
  41.                     <td>1</td>
  42.                     <td>2</td>
  43.                     <td>3</td>
  44.                 </tr>
  45.             </tfoot>
  47.         </table>
  48.     </body>
  49. </html>

4.7、背景颜色和背景图片

  1. <head>
  2.         <meta charset="utf-8">
  3.         <title>背景颜色和背景图片</title>
  4.     </head>
  5.     <!--
  6.         bgcolor : 设置背景色
  7.         background : 设置背景图片
  8.         以上的设置都是对背景进行设置。
  9.     -->
  10.     <body bgcolor="red" background="img/bd_logo1.png">
  11.     </body>

4.8、图片

  1. <!--
  2.             1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
  3.             2、img标签就是图片标签
  4.             3、src属性是图片的路径
  5.             4、width设置宽度,height设置高度
  6.             5、title设置鼠标悬停时显示的信息。
  7.             6、alt设置图片加载失败时显示的提示信息。
  8.         -->
  9.         <img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/>
  11.         <img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img>
  13.         <br><br><br>
  15.         <img src="img/bd_logo1.png" />

4.9、超链接（热链接）

  • 超链接的作用：

通过超链接可以从浏览器向服务器发送请求
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）

  • B/S结构的系统：每一个请求都会对应一个响应。

  • 用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？

本质上没有区别，都是向服务器发送请求；从操作上来讲，超链接使用更方便。

  1. <!--
  2.             超链接的特点：
  3.                 有下划线
  4.                 鼠标停留在超链接上面显示小手形状。
  5.                 点击超链接之后还能跳转页面。
  6.         -->
  7.         <a href="http://www.baidu.com">百度</a>
  8.         <a href="http://news.baidu.com/">百度新闻</a>
  9.         <a href="http://www.jd.com/">京东商城</a>
  10.         <a href="http://www.tmall.com/">天猫</a>
  11.         <a href="http://www.126.com/">126邮箱</a>
  13.         <br><br>
  15.         <!--
  16.             href：hot references 热引用
  17.             href属性后面一定是一个资源的地址。
  19.             href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
  20.         -->
  21.         <a href="007-背景颜色和背景图片.html">007</a>
  23.         <!--图片超链接-->
  24.         <a href="https://www.hao123.com/">
  25.             <img src="img/hao123.png" width="120px"/>
  26.         </a>
  28.         <!--
  29.             超链接有一个target属性：
  30.                 可取值：
  31.                     _blank : 新窗口
  32.                     _self ： 当前窗口（默认就是这种方式。）
  33.                     _top ： 顶级窗口
  34.                     _parent ： 父窗口
  35.         -->
  36.         <a href="https://www.hao123.com/" target="_self">
  37.             <img src="img/hao123.png" width="120px"/>
  38.         </a>

4.10、有序列表和无序列表

  1. <!--有序列表-->
  2.         <ol type="I">
  3.             <li>水果
  4.                 <ol type="a">
  5.                     <li>苹果</li>
  6.                     <li>西瓜</li>
  7.                     <li>桃子</li>
  8.                 </ol>
  9.             </li>
  10.             <li>蔬菜
  11.                 <ol>
  12.                     <li>西红柿</li>
  13.                 </ol>
  14.             </li>
  15.             <li>甜点</li>
  16.         </ol>
  18.         <!--无序列表-->
  19.         <ul type="circle">
  20.             <li>中国
  21.                 <ul type="square">
  22.                     <li>北京
  23.                         <ul type="disc">
  24.                             <li>东城区</li>
  25.                             <li>西城区</li>
  26.                             <li>海淀区</li>
  27.                             <li>朝阳区</li>
  28.                         </ul>
  29.                     </li>
  30.                     <li>天津</li>
  31.                     <li>上海</li>
  32.                 </ul>
  33.             </li>
  34.             <li>美国</li>
  35.             <li>日本</li>
  36.         </ul>

5、表单

1、表单有什么用？
收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。

2、怎么画一个表单？
使用form标签画表单。

3、一个网页当中可以有多个表单form。

4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：action属性用来指定数据提交给哪个服务器，action属性和超链接中的href属性一样，都可以向服务器发送请求（request）

5、http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：192.168.111.3机器上的8080端口对应的软件。

  1.             <form action="http://192.168.111.3:8080/oa/save">
  2.             <!-- 画一个提交按钮，这个按钮可以提交表单-->
  3.             <!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。-->
  4.             <!-- 对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。-->
  5.             <input type="submit" value="登录"/>
  7.             <!--这是一个普通按钮，不具备提交表单的能力。-->
  8.             <input type="button" value="设置按钮上显示的文本"/>
  10.         </form>
  12.         <a href="http://www.baidu.com">百度</a>
  14.         <!--这个按钮和普通的超链接没什么太大的区别。（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）-->
  15.         <form action="http://www.baidu.com">
  16.             <input type="submit" value="百度" />
  17.         </form>
  19.         <br>
  20.         <br>
  22.         <form action="http://localhost:8080/jd/login">
  23.             用户名<input type="text" /><br>
  24.             密码<input type="password" /><br>
  25.             <input type="submit" value="登录" />
  26.         </form>
  28.         <form action="http://localhost:8080/jd/login">
  29.             <table>
  30.                 <tr>
  31.                     <td>用户名</td>
  32.                     <td><input type="text" name="username" /></td>
  33.                 </tr>
  34.                 <tr>
  35.                     <td>密码</td>
  36.                     <td><input type="password" name="userpwd" /></td>
  37.                 </tr>
  38.                 <tr align="center">
  39.                     <td colspan="2">
  40.                         <input type="submit" value="登录" />
  41.                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  42.                         <input type="reset" value="清空" />
  43.                     </td>
  44.                 </tr>
  45.             </table>
  46.         </form>
  48.         <!--submit必须放到form标签内部-->
  49.         <input type="submit" value="登录" />
  51.         <!--必须放到form标签内部-->
  52.         <input type="reset" value="清空" />

6、表单是以什么格式提交数据给服务器的？
http://localhost:8080/jd/login?username=abc&userpwd=111
格式：action?name=value&name=value&name=value&name=value&name=value…
W3C的HTTP协议规定的，必须以这种格式提交给服务器。

重点强调： 表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性；文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。 当name没有写的时候，该项不会提交给服务器。但是当value没有写的时候，value的默认值是空字符串””，会将空字符串提交给服务器。java代码得到的是：String username = “”;

7、form表单method属性：

get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上

post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上，当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交

method属性不指定，或者指定get，这种情况下都是get；只有当method属性指定为post的时候才是post请求，剩下所有的请求都是get请求

post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来；POST提交的数据还是：name=value&name=value&name=value…..

  1. <form action="http://localhost:8080/jd/register">
  2.             用户名
  3.             <input type="text" name="username"/>
  4.             <br>
  5.             密码
  6.             <input type="password" name="userpwd" />
  7.             <br>
  8.             确认密码
  9.             <input type="password"/>
  10.             <br>
  11.             性别
  12.             <input type="radio" name="gender" value="1" />男
  13.             <input type="radio" name="gender" value="0" checked/>女 <!--单选按钮的value必须手动指定-->
  14.             <br>
  15.             兴趣爱好
  16.             <input type="checkbox" name="interest" value="smoke"/>抽烟
  17.             <input type="checkbox" name="interest" value="drink" checked/>喝酒
  18.             <input type="checkbox" name="interest" value="fireHair" checked/>烫头
  19.             <br>
  20.             学历
  21.             <select name="grade">
  22.                 <option value="gz">高中</option>
  23.                 <option value="dz">大专</option>
  24.                 <option value="bk" selected>本科</option> <!--默认选中-->
  25.                 <option value="ss">硕士</option>
  26.             </select>
  27.             <br>
  28.             简介 <!--文本域，文本域没有value属性，用户填写的内容就是value-->
  29.             <textarea rows="10" cols="60" name="introduce"></textarea>
  30.             <br>
  31.             <input type="submit" value="注册" />
  32.             <input type="reset" value="清空" />
  33.         </form>
  35.         <!--超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。-->
  36.         <!--超链接是get请求。不是post请求。-->
  37.         <a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>

6、下拉列表支持多选

  1. <!-- multiple="multiple" 支持多选的 size设置显示条目数量。-->
  2.         <select multiple="multiple" size="2">
  3.             <option>河北省</option>
  4.             <option>河南省</option>
  5.             <option>山东省</option>
  6.             <option>山西省</option>
  7.         </select>

7、file控件、隐藏域

  2.         <!--file控件：文件上传专用。-->
  3.         <input type="file" />
  5.         <form action="http://localhost:8080/oa/save">
  7.             <!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。
  8.             对于一些不需要让用户知道，但需要提交给服务器的一些东西，可以使用该控件
  9.             -->
  10.             <input type="hidden" name="userid" value="111" />
  12.             用户代码<input type="text" name="usercode" />
  14.             <input type="submit" value="提交" />
  16.         </form>

8、readonly、disabled

  1. <!--
  2.             readonly和disabled相同点：都是只读不能修改。
  3.             但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交。）
  4. -->
  5.         <form action="http://localhost:8080/taobao/save">
  6.             用户代码<input type="text" name="usercode" value="110" readonly />
  7.             <br>
  8.             用户姓名<input type="text" name="username" value="zhangsan" disabled />
  9.             <br>
  10.             <input type="submit" value="提交数据" />
  11.         </form>

9、input控件的maxlength属性

  1. <!--
  2.       maxlength 设置文本框中可输入的字符数量。
  3. -->
  4.   <input type="text" maxlength="3" />

10、HTML中元素的id属性

  1. <!--
  2.             1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
  3.             2、注意：表单提交数据的时候，只和name有关系，和id无关。
  4.             3、id有什么用？
  5.                 javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
  6.                 javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
  7.                 id的存在让我们获取元素（节点）更方便。
  8.             4、HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
  9.                 javascript主要就是对这棵DOM树上的节点进行增删改的。
  10.                 DOM(Document)树。
  11.         -->
  12.         <form id="myform">
  13.             <input type="text" id="username" name="username"/>
  14.             <input type="password" id="userpwd" name="userpwd"/>
  16.             <!--id就是节点的身份证号码，不能重复。-->
  17.             <!--
  18.             <input type="text" id="username" />
  19.             -->
  20.         </form>

11、HTML中的div和span

  1. <!--
  2.       1、div和span是什么？有什么用？
  3.     * div和span都可以称为“图层”
  4.     * 图层的作用是为了保证页面可以灵活的布局。
  5.     * 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
  6.     * div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
  7.       2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
  8.       现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
  10.       3、div和span的区别？
  11.     div独自占用一行（默认情况下）
  12.     span不会独自占用一行。
  13.   -->
  14.   <div id="div1">我是一个DIV</div>
  15.   <div id="div2">我是一个DIV</div>
  17.   <span id="span1">我是一个SPAN标签</span>
  18.   <span id="span2">我是一个SPAN标签</span>
  20.   <div id="div3">
  21.       <div>
  22.     <div>test</div>
  23.       </div>
  24.   </div>