目录
系统结构
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
微信
支付宝
....
HTML概述
什么是HTML?怎么开发HTML?怎么运行HTML?
* HTML: Hyper Text Markup Language (超文本标记语言)
由大量的标签组成,每一个标签都有开始标签和结束标签。
<标签>
<标签>
<标签 属性名="属性值" 属性名="属性值">
</标签>
</标签>
</标签>
超文本: 流媒体、图片、声音、视频....
* HTML开发的时候使用普通的文本编辑器就行,创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具,例如:DreamWeaver、HBuilder.....
* 直接采用浏览器打开HTML文件就是运行。
HTML是谁制定的?
W3C:世界万维网联盟
W3C制定了HTML的规范,每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是:HTML5.0,简称H5.
我们这里学习HTML4.0(主要是学习一下HTML的基础用法。)
W3C制定了很多规范:
HTML/XML/http协议/https协议......
为了方便中国web前端程序员的开发,提供大量的帮助文档。为开发提供方便。
w3school:先出现的,和W3C没有关系
w3cschool:后出现的,和W3C没有关系
HTML基本标签
内容:
开始:
<html>
结束:
</html>
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容,HelloHTML!
</body>
</html>
效果:
开头最开始处加上<!doctype html>表示是html5.0,不加是html4.0
注释 <!--注释内容-->
<!--
这是HTML的注释格式
-->
整体:
<!--
1、这是HTML的注释
2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
3、HTML不区分大小写,语法松散不严格。
-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题,显示在网页左上角-->
<title>网页的标题</title>
</head>
<!--体-->
<body>
网页的主体内容,欢迎学习HTML!
</body>
段落标记 (分段)
<p>亲爱的德洛丽丝: 今天早上我吃了牛排和鸡蛋。乐队演出的地方都特别豪华,谢利博士和我相处得挺好,只是有时我觉得他不开心,所以他喝那么多酒。我以前都从不知道这个国家原来如此美丽,现在亲眼看到了。大自然的美简直难以置信,真的就跟大家说的那样美。而且乡下车少路况通畅,对我来说就很好。我正在吃肉丸意面,可是这家餐厅的东西,吃起来就像在中式面条上浇上了番茄酱。我们现在要去南方了,到了以后,我会再给你写封信,我爱你! 爱你的托尼PS亲亲孩子们!~</p><p>亲爱的德洛丽丝: 今天早上我吃了牛排和鸡蛋。乐队演出的地方都特别豪华,谢利博士和我相处得挺好,只是有时我觉得他不开心,所以他喝那么多酒。我以前都从不知道这个国家原来如此美丽,现在亲眼看到了。大自然的美简直难以置信,真的就跟大家说的那样美。而且乡下车少路况通畅,对我来说就很好。我正在吃肉丸意面,可是这家餐厅的东西,吃起来就像在中式面条上浇上了番茄酱。我们现在要去南方了,到了以后,我会再给你写封信,我爱你! 爱你的托尼PS亲亲孩子们!~</p><p>亲爱的德洛丽丝: 今天早上我吃了牛排和鸡蛋。乐队演出的地方都特别豪华,谢利博士和我相处得挺好,只是有时我觉得他不开心,所以他喝那么多酒。我以前都从不知道这个国家原来如此美丽,现在亲眼看到了。大自然的美简直难以置信,真的就跟大家说的那样美。而且乡下车少路况通畅,对我来说就很好。我正在吃肉丸意面,可是这家餐厅的东西,吃起来就像在中式面条上浇上了番茄酱。我们现在要去南方了,到了以后,我会再给你写封信,我爱你! 爱你的托尼PS亲亲孩子们!~</p>
标题字
<!--标题字:是HTML预留的格式,和word中的标题字相同-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
【注意】:只有h1-6
换行标记
<!--换行标记,br标签是一个独目标记-->
hello
world!
hello <br>world!
其余基本标记
<!--横线,独目标记-->
<hr>
<!--color和width都是hr标签的属性-->
<hr color="blue" width='50%'>
<!--居中显示占屏幕的30%-->
<!--语法松散,'' 和 "" 或者不加都可以-->
<hr color=green width=30%>
<!--预留格式-->
<pre>
for(int i = 0; i < 10; i++){
System.out.println("i = " + i);
}
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup>
10<sub>m</sub>
<!--字体标签-->
<font color="red" size="50">字体标签</font>
解决文件乱码问题
<meta charset="UTF-8"/>解决乱码问题
乱码产生是因为文件采用UTF-8方式,但浏览器打开该文件时采用GBK方式打开的,所以乱码
该行代码的作用就是告诉浏览器采用哪一种字符编码打开该文件。
HTML实体符号
内容:
大于小于符号 < >
由于大小于号><与html语言格式<html>冲突,因此引入实体符号
需求:显示b<a>c
<body>
b<a>c
</body>
实体符号特点是:以 & 开始,以 ; 结束。< 是小于号 > 是大于号
空格 (“nb山炮”)
abc def 中间一堆空格,但实际效果只显示一个空格
abc def
表格
内容:
表格基本属性
画一个三行三列表格
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>m</td>
<td>n</td>
<td>t</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</table>
给表格设置边框属性
border="1px" 设置表格的边框为1像素宽度。 -- px 像素
width 宽度
height 高度
也可等比例缩放 x% (无论页面怎么缩放表格占整个页面的x%)
<!--
border="1px" 设置表格的边框为1像素宽度。
width 宽度
height 高度
-->
<!--
<table border="1px" width="300px">
-->
<table align="center" border="1px" width="60%" height="150px">
align对齐方式
<!--align对齐方式-->
<!--align对齐方式-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td align="center">z</td>
</tr>
<body>
<br><br><br><br><br><br><br><br>
<center><h1>员工信息列表</h1></center>
<hr>
<table align="center" border="1px" width="60%" height="150px">
<!--align对齐方式-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td align="center">z</td>
</tr>
</table>
</body>
效果:
单元格合并
row向下合并
如果要将上下两个单元格合并,原则: 留上面,删下面
rowspan = "向下合并数量"
col左右合并
colspan = "合并数量"
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">d</td>
<!--
<td>f</td>
-->
</tr>
总结:
1、row合并的时候,删除“下面的”单元格
2、col合并的时候,对删除哪个没有要求
<th> 标签
th 标签也是单元格标签,比td多的是居中、加粗
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
表格结构
注:thead tbody tfoot 在table中不是必须的,只是这样做便于后期的JS代码的编写
头<thead></thead>
体<tbody></tbody>
尾 <tfoot><tfoot>
这三者将表结构划分开,而已
<table border="1px" width="50%">
<!--头-->
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
</thead>
<!--体-->
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">d</td>
</tr>
</tbody>
<!--脚-->
<tfoot>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
背景色和背景图片
bgcolor : 设置背景色 background : 设置背景图片 以上的设置都是对背景进行设置。
<body bgcolor="red" background="img/bd_logo1.png">
</body>
图片
<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/>
<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img>
效果:
总结:
1、设置图片宽度和高度的时候,只设置宽度,高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的(相对)路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。
7、如果<img></img>之间没有内容可只写一个<img/>
超链接 (热链接)
超链接赋值
<a href="本地文件的相对路径或绝对路径都可以"></a>
href:hot references 热引用
href属性后面一定是一个资源的地址。
href后面的路径可以是绝对路径也可以是相对路径,可以是网络中某个资源的路径,也可以是本地资源的路径。
<a href="http://www.baidu.com">百度</a>
<a href="http://news.baidu.com/">百度新闻</a>
<a href="http://www.jd.com/">京东商城</a>
<a href="http://www.tmall.com/">天猫</a>
<a href="http://www.126.com/">126邮箱</a>
<a href="007-背景颜色和背景图片.html">007</a>
<!--图片超链接-->
<a href="https://www.hao123.com/">
<img src="img/hao123.png" width="120px"/>
</a>
超链接的特点:
有下划线
鼠标停留在超链接上面显示小手形状(被选中)。
点击超链接之后还能跳转页面。
超链接属性target
超链接有一个target属性:
可取值:
_blank : 新窗口
_self : 当前窗口(默认就是这种方式。)
_top : 顶级窗口
_parent : 父窗
<a href="https://www.hao123.com/" target="_self">
<img src="img/hao123.png" width="120px"/>
</a>
超链接作用
超链接的作用:
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据(请求:request)
服务器向浏览器发送数据(响应:response)
B/S结构的系统:每一个请求都会对应一个响应。
B--请求-->S
S--响应-->B
用户点击超链接和用户在浏览器地址栏上直接输入URL,有什么区别?
本质上没有区别,都是向服务器发送请求。(超链接更傻瓜式)
从操作上来讲,超链接使用更方便。
列表
内容
有序列表
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>
<!--有序列表-->
<ol type="I">
<li>水果
<ol type="a">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>西红柿</li>
</ol>
</li>
<li>甜点</li>
</ol>
无序列表
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>
<!--无序列表-->
<ul type="circle">
<li>中国
<ul type="square">
<li>河南
<ul type="disc">
<li>郑州</li>
<li>洛阳</li>
<li>开封</li>
<li>新乡</li>
</ul>
</li>
<li>山东</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
也可加属性
<ul type = 属性名>
circl 圆圈(空心)⭕
square 方块■
disc 点(实心)●
表单form
什么是表单
用户填写表单,提交数据给服务器,所以表单是专门用来收集用户数据的。
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端口对应的软件。
<form action="http://192.168.111.3:8080/oa/save"> </form>
input标签
input标签的type是submit表示提交按钮,该按钮可以提交表单,所谓表单的提交是发送请求url,并携带数据给服务器。
<!-- 画一个提交按钮,这个按钮可以提交表单-->
<!-- 画按钮可以使用input输入域,type="submit"的时候
表示该按钮是一个提交按钮,具有提交表单的能力。-->
<!-- 对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息。-->
<input type="submit" value="登录"/>
<!--这是一个普通按钮,不具备提交表单的能力。-->
<input type="button" value="设置按钮上显示的文本"/>
input标签的type是submit表示提交按钮,该按钮可以提交表单,所谓表单的提交是发送请求url,并携带数据给服务器。
<a href="http://www.baidu.com">百度</a>
<!--这个按钮和普通的超链接没什么太大的区别。
(超链接和表单都可以向服务器发送请求,只不过表单发送请求的同时可以携带数据。)-->
<form action="http://www.baidu.com">
<input type="submit" value="百度" />
</form>
input标签属于输入域标签,input标签的type属性是text,表示文本框,是password,表示密码框
<form action="http://localhost:8080/jd/login">
用户名<input type="text" /><br>
密码<input type="password" /><br>
<input type="submit" value="登录" />
</form>
表单是以什么格式提交数据给服务器的?
http://localhost:8080/jd/login?username=abc&userpwd=111
格式:action?name=value&name=value&name=value&name=value&name=value...
其中name是input标签的name属性,value是input标签的value属性
W3C的HTTP协议规定的,必须以这种格式提交给服务器。
重点强调:表单项写了name属性的,一律会提交给服务器。不想提交这一项,就不要写name属性。
文本框和密码框的value不需要程序员指定,用户输入什么value就是什么。
当name没有写的时候,该项不会提交给服务器。
但是当value没有写的时候,value的默认值是空字符串"",会将空字符串提交给服务器。java代码得到的是:String username = ""(不是String username = null;);
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd" /></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录" />
<input type="reset" value="清空" />
</td>
</tr>
</table>
</form>
用户注册表单
业务需求:
用户注册:
用户名
姓名
密码
确认密码
性别
兴趣爱好
学历
简介
<form action="http://localhost:8080/jd/register">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="userpwd" />
<br>
确认密码
<input type="password"/>
<br>
性别<!--单选按钮的value必须手动指定-->
<input type="radio" name="gender" value="1" />男
<input type="radio" name="gender" value="0" checked/>女
<br>
兴趣爱好
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink" checked/>喝酒
<input type="checkbox" name="interest" value="fireHair" checked/>烫头
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option> <!--默认选中-->
<option value="ss">硕士</option>
</select>
<br>
简介 <!--文本域,文本域没有value属性,用户填写的内容就是value-->
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="清空" />
</form>
method属性
form表单method属性:
get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。
post:采用post方式提交的时候,用户提交的信息不会显示在浏览器地址栏上。
当用户提交的信息中含有敏感信息,例如:密码,建议采用post方式提交。
<form action="http://localhost:8080/jd/register" method="post">
...
</form>
method属性不指定,或者指定get,这种情况下都是get。
只有当method属性指定为post的时候才是post请求。
剩下所有的请求都是get请求。
post提交的时候提交的数据格式和get还是一样的,只不过不再地址栏上显示出来。
POST提交的数据还是:name=value&name=value&name=value.....
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
<!--超链接也可以提交数据给服务器,但是提交的数据都是固定不变的。-->
<!--超链接是get请求。不是post请求。-->
多选的下拉列表
(1)支持多选:multiple="multiple"
(2)显示多个条目:size="n"
<select multiple="multiple" size="3">
<option>河北省</option>
<option>河南省</option>
<option>山东省</option>
<option>山西省</option>
</select>
file部件
<!--file控件:文件上传专用。-->
<input type="file" />
(1)文件上传时使用
(2)<input type="file"/>
效果:
hidde部件
隐藏域控件,页面上看不到,但提交表单时会提交数据
<!--隐藏域:网页上看不到,但是表单提交的时候数据会自动提交给服务器。-->
<input type="hidden" name="userid" value="111" />
用户代码<input type="text" name="usercode" />
<input type="submit" value="提交" />
实际效果useid在网页上不显示,但实际上存在,并且已被提交(隐藏获取用户id等属性)
readonly and disabled
(1)readonly:只读,不能修改,提交表单时数据会提交
(2)disabled:只读,不能修改,提交表单时数据不会提交
<form action="http://localhost:8080/taobao/save">
用户代码<input type="text" name="usercode" value="110" readonly />
<br>
用户姓名<input type="text" name="username" value="zhangsan" disabled />
<br>
<input type="submit" value="提交数据" />
</form>
disable的数据实际上是废掉的,只是让用户看到,因此也可以不加name属性
maxlength部件
maxlength 属性规定输入字段的最大长度,以字符个数计。
<input type="text" maxlength="3" />
(最多输入三个字符)
HTML中元素的id属性
<form id="myform">
<input type="text" id="username" name="username"/>
<input type="password" id="userpwd" name="userpwd"/>
<!--id就是节点的身份证号码,不能重复。-->
<!--
<input type="text" id="username" />
-->
</form>
1、在HTML文档当中,任何元素(节点)都有id属性,id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2、注意:表单提交数据的时候,只和name有关系,和id无关。
3、id有什么用?
javascript语言:可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改,那么增删改之前需要先拿到这个节点,通常我们通过id来拿节点对象。
id的存在让我们获取元素(节点)更方便。
4、HTML文档是一棵树,树上有很多节点,每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。
DOM(Document)树。
HTML中的div和span
1、div和span是什么?有什么用?
* div和span都可以称为“图层”
* 图层的作用是为了保证页面可以灵活的布局。
* 图层就是一个一个的盒子,div嵌套div就是盒子套盒子。
* div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的,但是table不灵活,太死板。
现代的网页开发中div布局使用最多,几乎很少使用table进行布局了。
3、div和span的区别?
div独自占用一行(默认情况下)
span不会独自占用一行。
<div id="div1">我是一个DIV</div>
<div id="div2">我是一个DIV</div>
<span id="span1">我是一个SPAN标签</span>
<span id="span2">我是一个SPAN标签</span>
<div id="div3">
<div>
<div>test</div>
</div>
</div>