系统结构

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架构的系统？
QQ、微信、支付宝.......

世界五大主流浏览器：IE、Chrome、fire fox、safari（苹果浏览器）、opera（欧朋）

网页制作三剑客：Dreamweaver、Firework Flash

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

HTML：Hyper Text Markup Language（超文本标记语言）
由大量的标签组成，每一个标签都有开始标签和结束标签。

<标签>
    <标签>
        <标签 属性名="属性值" 属性名="属性值">

超文本：流媒体、图片、声音、视频......

HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm。

直接采用浏览器打开HTML文件就是运行。
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder......

HTML是谁制定的？

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

为了方便中国web前端程序员的开发，提供了大量的帮助文档。为了开发方便（这是两个网站）
w3school 先出现的，和W3C没关系
w3cschool 后出现的，和W3C没关系

HTML的注释：，它也支持多行注释
加上就是表示HTML5语法，不加就表示HTML4语法
HTML不区分大小写，语法松散不严格。

HTML的基本标签

段落标记：

标题字：是HTML预留的格式，和word中的标题字相同。 h1--h6

换行标记：br 这是个独目标记

水平线：hr 这也是个独目标记
color和width都是hr标签的属性。

预留格式：

删除字：
插入字：
粗体字：
斜体字：

右上角加字：
右下角加字：

字体标签：

实体符号

实体符号的特点是：以&开始，以;结束。
小于号：“<”;
大于号：”>“;
空格：“ ”;

HTML的表格

table表格
tr是一行
td是一个格
border属性：border="1px" 设置表格的边框为1像素宽度。
width属性宽度
hright属性高度
align属性：对齐方式

合并单元格
用 rowspan 合并几个属性值就是几，例如：rowspan="2"
行合并的时候，删除“下面的”单元格
用 colspan 合并几个属性值就是几，例如：colspan="2"
列合并，无所谓。
th标签也是单元格标签，比td多的是居中、加粗。

thead tbody tfoot
在table中不是必须的，只是这样做便于后期的JS代码的编写

这一行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
注意：并不是设置当前页面的字符编码方式

背景颜色和背景图片

图片下面是背景色
bgcolor属性：背景颜色（用在body）
background属性：背景图片（用在body）

图片img

设置图片宽度和高度的时候，只设置宽度，高度会等比例缩放
img标签就是图片标签
src属性就是图片的路径
width设置宽度
height设置高度
title设置鼠标悬停时显示的信息
alt设置图片加载失败时显示的提示信息
开始标签和结束标签之间没东西的话，可以不写结束标签，在开始标签的最后写一个“/”。

超链接或热链接

href：hot reference 热引用
href属性后面一定是一个资源的地址。
href后面路径可以是绝对路径也可以是相对路径。

超链接的特点：有下划线。鼠标停留在超链接上显示小手形状。点击超链接之后还能跳转页面。

图片也可以做超链接。

target属性后面跟
_blank：新窗口
_self：当前窗口
_top：顶级窗口
_parent：父窗口

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

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

用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便

列表

有序列表：ol
无序列表：ul
列表项：li
无序列表有几个type：circle（圆圈）、square（方块）、disc（点）。指定列表前面的样式。
有序列表有几个type：1（数字）、A（大写英文字母）、I（罗马字符）、a（小写英文字母）

表单form

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

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

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

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

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

画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。
type="button"这是一个普通按钮，不具备提交表单的能力。
对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。

submit（提交）必须放到form标签内部。
reset（重置）也必须放到form标签内部。

表单是以什么格式提交数据给服务器的？
格式：action?name=value&name=value&name=value......
HTTP协议规定，必须要以这种格式提交给服务器。

重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一向，就不要写name属性。

文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。

当value没有写的时候，value的默认值是空字符串" ",会将空字符串提交给服务器。java代码得到的是，String s = " ";

单选或多选要默认选中加一个checked
下拉框默认选中加一个selected
单选多选按钮的value必须手动指定。
服务器接收的是value。

文本域（textarea）没有value属性，用户填写的内容就是value。

form表单method属性：

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

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

post提交的时候提交的数据格式和get还是一样的，只不过不在地址栏上显示出来。

超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。
超链接是get请求，不是post请求。

下拉列表支持多选

multiple：支持多选
size：设置显示条目数量。

按住ctrl，然后用鼠标去点，就可以实现多选了。

file控件

可以选择文件上传

hidden控件

隐藏域：网页上看不到，但是表单提交的时候，数据会自动提交给服务器。

readonly和disabled

readonly和disabled相同点：都是只读不能修改。
但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）
readonly只针对文本框text，密码框password，文本域textarea
disabled对于所有的表单元素都有效。

input控件的maxlength属性

maxlength设置文本框中可输入的字符数量。

HTML中元素的id属性

在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。

id就是节点的身份证号码，不能重复。

注意：表单提交数据的时候，只和name有关系，和id无关。

id有什么用？
JavaScript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们和获取元素（节点）更方便。

HTML文档是一棵树，书上有很多节点，每一个节点都有唯一的id。
JavaScript主要就是对这棵DOM数上的节点进行增删改的。
DOM（Document）树。

DOM树.png

HTML中的div和span

div和span是什么？有什么用？
div和span都可以称为“图层”。
图层的作用是为了保证页面可以灵活的布局。
图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
div和span是可以定位的，只要定下div的左上角的x轴y轴坐标即可。

其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。

div和span的区别？
div独自占用一行（默认情况下）
span不会独自占用一行。

补充

介绍:

1.HTML编程语言是一种专门在浏览器编译与执行的编程语言
2.HTML编程语言学称是超文本标记式编程语言

作用：

作用一：HTML编程语言通知浏览器将接收的数据以指定方式在窗口展示 [前端工程师]

作用二：控制浏览器请求行为[前端工程师/服务端工程师] 【重点】

HTML编程语言语法规范:

1.HTML编程语言中所有命令都是声明在标签中,比如br

2.HTML编程语言中所有命令都是预先定义好，不允许开发人员自行创建新的命令

3.HTML编程语言中所有命令不区分英文字母大小写，比如
br
都是合法命令

4.HTML编程语言中命令开发时主要通过对命令中属性进行赋值实现开发目的。
属性赋值时内容可以包含一个""中，也可以包含在'',也可以省略双引号与单引号，此时属性之间必须采用空格进行隔离

5.HTML编程语言中命令根据书写方式分为：双目标签命令与单目标签命令

6.双目标签命令书写命令分别出现在开始标签与结束标签，比如
双目标签命令在书写时结束标签是不能省略的,比如,由于没有书写结束标签因此是一个非法命令

7.单目标签命令书写命令出现一个标签之内，比如：br/
单目标签命令用于表示结束"/"可以省略不写，比如 br/, br 这两个都是合法单目标签命令

以下【作为服务端工程师必须背住的知识点】

浏览器发送请求三要素:

1.控制浏览器发送请求地址
2.控制浏览器发送请求采用请求方式
3.控制浏览器发送请求携带请求参数

控制浏览器发送请求地址

1.超链接标签命令:

1)格式: 提示信息

2)工作原理:
超链接标签命令不会被浏览器自动执行。在用户使用鼠标单击超链接标签命令时，此时这个命令才会执行，执行要求浏览器立刻按照href属性地址发送请求

2.表单标签命令

1)格式:

2)工作原理:
表单标签命令不会被浏览器自动执行。在用户单击提交按钮时，此时表单标签命令被触发执行。执行时要求浏览器立刻按照action属性地址发送请求

控制浏览器发送请求采用请求方式

1.请求方式：决定浏览器在发送请求时行为特征

2.浏览器可以选择请求方式：7种，目前为止只考虑【POST请求方式】和【GET请求方式】

3.GET请求方式:

要求浏览器发送请求时，携带的【请求参数数量】不能超过4K
要求浏览器发送请求时，必须在浏览器地址栏上将【请求参数信息】展示出来
要求浏览器发送请求时，必须将请求参数信息保存在Http请求协议包中【请求头】
要求浏览器在接收到服务器返回的资源文件内容后，必须将资源文件内容保存在浏览器的缓存

4.POST请求方式：
1）要求浏览器发送请求时，可以携带任意数量的【请求参数】

2）要求浏览器发送请求时，必须在浏览器地址栏上隐藏请求参数信息

3）要求浏览器发送请求时，必须将请求参数信息保存在Http请求协议包中【请求体】

4）禁止浏览器将服务器返回资源文件内容进行保存【阅后即焚】

5.控制浏览器发送请求时采用GET请求方式

超链接标签命令在执行时，要求浏览器必须采用GET方式发送请求

表单标签存在一个method属性，通过这个属性可以要求浏览器采用对应请求方式发送请求




method属性默认值是GET
---->浏览器以GET方式发送请求

6.控制浏览器发送请求时采用POST请求方式

7.请求方式适用场景【面试】

考虑到POST请求方式，用户可以将【病毒文件内容】发送到服务器上进行攻击。因此绝大多数门户级网站拒绝接收POST请求，日常开发过程绝大多数请求都是GET

在某些特殊场景下必须使用POST：
1)文件上传，必须使用POST
2)发起登录验证请求，必须使用POST
3)索要服务器中实时变化数据时（股票价格，车票数量。。。），必须采用POST

控制浏览器发送请求携带请求参数

1.请求参数作用:

比如用户通过浏览器访问服务端计算机动态资源文件Student.class
class Student{
public int add(int n1,int n2){
//请求处理
int sum = n1 + n2;
return sum;
}
}

Http服务器：
Student stu = new Student();
stu.add(?,?)//add方法运行时需要实参，需要由用户通过浏览器以请求参数方式提供

浏览器发送请求时需要携带调用方法需要实参（请求参数）

http://www.baidu.com?n1=100&n2=200 [n1=100&n2=200]就是浏览器发送请求参数

2.请求参数格式

浏览器发送请求时请求地址?请求参数名1=值1&请求参数名2=值2

3.浏览器发送请求时携带的请求参数来源:

1).通过超链接标签命令指定请求参数
2).通过表单域标签命令指定请求参数

4.通过超链接标签命令指定请求参数

                     百度

5.表单域标签命令:

1)一组声明在form标签内部的标签命令

2)提示用户填写对应的【请求参数内容】，用于提供相对灵活的请求参数内容

3)所有的表单域标签都拥有两个属性【name,value】
name属性声明【请求参数名】,value属性声明【请求参数内容】

当用户单击submit后，浏览器发送请求信息 http://www.baidu.com?userName=mike

6.表单域标签分类：

1）
2）
3）

7.表单域标签value属性默认值

1)大多数表单域标签value属性默认值是空字符串 userName=''
2)对于radio与checkbox来说，value属性默认值'on'字符串

8.表单域标签作为请求参数条件

对于大多数表单域标签来说，只要同时满足一下两个条件，就可以作为请求参数
1)必须声明在form标签内部
2)必须声明name属性

对于radio标签与checkbox标签来说在满足上述两个条件同时，还必须满足第三个条件才可以作为请求参数，第三个条件radio与checkbox必须在【被选中】的情况下才可以作为请求参数

如果表单域标签使用disabled来修饰时，失去作为请求参数条件

readOnly与disabled区别：
readOnly：要求当前标签中value属性只能看但是不能被修改，readOnly不会影响表单域标签作为请求参数条件

disabled：设置当前标签为不可用状态，此时标签中value属性内容不能被修改的.
disabled修饰的表单域标签是永远都不能作为请求参数

常用HTML标签

在一个HTML文件中，所有的TML标签命令必须声明在中

包含两个子标签：
：设置基础参数信息
：负责通知浏览器将指定内容以指定方式在窗口展示

：用来指定字符集的

：段落标签

标题标签（就这6个）：
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

： 有序列表
其中列表项使用

：无序列表
其中列表项使用

：表格标签
：一行
：一个格子

align：对齐方式
border：表格边框
style：样式
background-color：背景颜色

rowspan：纵向合并单元格（扩充高度）
colspan：横向合并单元格（扩充宽度）

：图片标签

：type=“”
text文本框 
password 密码框 
submit 提交按钮
radio 单选框 name相同才是一组 value写死
checkbox 多选框 value写死
file 文件选择框
reset 重置按钮

：下拉框

：文本域

HTML：超文本标记语言