🏀 JavaWeb

使用Java语言开发基于互联网的项目

软件的架构

B/S(Browser/Server) *

在本地打开一个浏览器，通过输入的URL(网址)，就可以访问到对应的服务器(请求的过程)，
服务器会给出响应的反馈，浏览器就可以就可以接受到反馈，在浏览器上呈现出页面

举例子：百度，淘宝，京东，B站
优点：开发，安装，部署，维护等都非常的简单
缺点：用户体验差一些

C/S(Client/Server)

在本地有一个客户端，打开该软件，可以连接到远程的服务器

举例子：QQ，百度云盘，微信客户端
优点：用户体验好
缺点：开发，安装，部署，维护等都非常的麻烦

网站和网页

网站：网站就是由很多网页组成的一个集合体
网页：一个网站有很多个页面，每一个页面都称为一个网页，每一个网页都是一个html文件

常见的浏览器

IE，谷歌浏览器，火狐浏览器，360浏览器，QQ浏览器，苹果浏览器

浏览器的内核

内核也称为渲染引擎，是浏览器中最为重要的一个东西

内核有什么用

它可以读取到网页中的内容，进行解析，可以呈现出各种炫酷的效果给我们在浏览器上展示出来，所以我们才能在浏览器上看到各种漂亮的页面。

常见的内核有哪些

gecko 火狐浏览器内核
trident IE浏览器内核
webkit 苹果浏览器内核
blink 谷歌浏览器内核

国产的浏览器的内核大部分使用的是webkit和blink内核

资源的分类

资源指的就是文件

静态资源

静态资源是指文件中的数据是写死的，变化不了

比如说一个文本文件，我们在里面写了一些内容，过了100年之后，你打开这个文件，里面的内容没有发生任何的改变。

常见的静态资源有哪些？

文本文件，图片，视频，音频，html，css，js … …

静态资源三兄弟：

html：写网页的
css：美化页面的
js：让页面具有动态效果的

注意：当我们通过浏览器访问一个静态资源的时候，就会将请求发送给服务器，服务器接收到以后就会将静态资源给我们响应回来，响应回来的静态资源，就会被浏览器的内核进行解析，然后通过浏览器给我们呈现出来。

动态资源

动态资源是指文件中的数据是活的，可以发生改变的

比如说我们通过浏览器访问天猫，上午10点访问天猫和下午10点访问天猫的页面的内容都不一定一样
比如说A用户登录的天猫，上面显示欢迎A用户到来，如果B用户登录的天猫，上面显示欢迎B用户

常见的动态资源有哪些？

jsp, servlet… …

注意：当我们通过浏览器访问一个动态资源的时候，就会将请求发送给服务器，服务器接收到了请求之后，会将动态资源先转换为静态资源，然后我们响应回来，浏览器的内核会进行解析，然后给我们呈现出来。

浏览器只能解析静态资源。
2022-4-14 20-37-55.JPG

🏈 HTML(静态资源)

html是超文本标记语言(Hypertext Markup Language)

超文本

普通文本就是文本文件，里面只可以写东西，可以设置一些大小写，字体的样式
超级文本，区别于普通文本的，超文本里面除了可以写文字，可以嵌套一些其他的东西，比如说放图片，动态图片，可以放视频，音频等等炫酷的东西。

标记语言

就是指代码是由标签组成的

标签长什么样？
由一对箭头组成的：

html是用来写网页的

html的语法格式

html代码要写在html文件中，html文件的后缀名是以.html或者.htm为结尾的
html中的代码都是由标签组成

html的组成格式

格式一：围堵标签(有头有尾)

<html></html>
<div></div>

格式二：自闭合标签

<input/>
<hr/>

html中的嵌套规则

html中的标签是可以互相嵌套的
注意：不能瞎嵌套

不能你中有我，我中有你

<aaa><bbb></aaa></bbb> 错误的嵌套
<aaa><bbb></bbb></aaa> 正确的嵌套
<aaa><bbb/></aaa>       正确的嵌套

html中是不区分大小写的

<HTML>
</html>  //可以正常使用

html中的标签也是可以写东西的(属性)

<input name="" id=""/>
<a name="" id=""></a>

属性值要用单引号或者双引号括起来

html的基本结构

<html>
  <head>
    <title>helloworld</title>
  </head>
  <body>
    约吗
  </body>
</html>

🏏 常见的标签

结构体标签

<!DOCTYPE html>：声明该html文件是一个html5标准的标签文件

html标签：是html文件结构体的根标签，一个html文件只有一个根标签
head标签：头标签，里面一般写的标签都是针对页面的属性的设置
meta标签：设置页面的属性

属性：charset=’utf-8’ ：告诉浏览器用什么编码方法打开此文件

title标签：设置页面标题的标签
body标签：体标签，里面一般写页面展示的标签

文本标签

注释标签
```

```
标题标签
```
<h数字></h数字>
```
数字范围：1~6
超过范围失效
段落标签
```

```
水平线标签
```
<hr/>
```
常见的属性：

color：设置水平线颜色
width：设置水平线宽度，单位是像素(px)
size：设置水平线粗细
align：设置水平线的位置
- left：居左
- right：居右
- center：居中

换行标签
```
 
```
加粗标签
```

 推荐
```
斜体标签
```

 推荐
```
删除线标签
```
<s></s>
<del></del> 推荐
```
下划线标签
```

<ins></ins>
```
字体标签
```

```
常见的属性：

color：设置字体的颜色
size：设置字体的大小1~7范围，超出7后还是显示7
face：设置字体的字体格式

color属性设置方式：

通过设置颜色的英文单词：约吗
通过十六进制表示法：约吗。范围：00~FF
通过红绿蓝数字设置：约吗

width属性设置方式：

使用具体像素：
使用百分比：

图片标签

<img />

常见的属性：

src：设置图片的路径
alt：加载失败的时候的图片的说明
width：设置图片的宽度
height：设置图片的高度

注意：一般只会给图片增加单个设置宽或者单个设置高的属性，不会同时设置高和宽

align：设置图片的位置
- left：居左
- right：居右
title：设置图片的说明(鼠标移动到图片上)
border：设置图片的边框

路径的分类

绝对路径：以盘符开始，src=”D:\图片2\1.jpg”
相对路径：
1. ./：相对于当前目录注意：./可以省略不写
2. ../：相对于上一级目录

列表标签

有序标签
```
<ol>
<li></li>
</ol>
```
常见的属性：

type：设置序号的样式

无序标签
```
<ul>
<li></li>
</ul>
```
常见的属性：

type：设置序号的样式

无符号无序号
```
<dl>
<dt></dt>
<dd></dd>
</dl>
```

特殊的符号

块级标签

div标签
```
<div></div>
```
div块默认占一整行
span标签：
```

```
span块默认根据内容设置块的长和宽，不会占一行

div + css针对页面进行布局

语义化标签

<header></header>头部
<footer></footer>尾部

超链接标签

<a></a>

常见的属性：
href：链接

外部链接

href="http://www.baidu.com"
href="http://www.woniuxy.com"

内部链接

href="./demo02.html"
<a href="C:\Users\apple\Documents\HBuilderProjects\day35\html\demo01.html">
  到demo1.html
</a>
<a href="../img/10.jpg">看大美女</a>

空链接

href="#"

下载链接

<a href="1.jpg" download>下载图片</a>
<a href="demo01.html" download>下载文件</a>

锚点链接

<div id="top">约吗</div>
<a href="#top">返回到顶部</a>

图片链接

<a href=""><img src=""/></a>

超链接的常用属性

target：

_self：在当前页面
_blank：打开一个新的页面

表格标签

<table> //表格标签
   <tr>
     <td></td>
     <td></td>
  </tr>
</table>

表格的行标签

<tr></tr>

表格的列标签

<td></td>
<th></th>

嵌套关系：table > tr > td

常见的属性：

border：设置表格的边框
align：设置位置

left、right、center

cellspacing：设置外边线和内边线之间的距离
cellpadding：设置内边线和内容之间的距离
width：设置宽
height：设置高
bgcolor：设置背景颜色
rowspan：合并行，合并在语义化标签中无效
colspan：合并列

表格的标题标签

<caption></caption>

语义化标签

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<!-- 标签位置不会影响显示效果 -->

注意：如果涉及到表格的嵌套

<table>
  <tr>
    <td>
      <table></table>
    </td>
  </tr>
<table>

表单标签

表单是用来采集用户输入的各种信息，用于和服务器进行数据的交互

<form></form>

注意：表单是一个虚拟的，我们看不到的一个东西

常见的属性：

action属性：设置表单所要提交的路径
method属性：提交方式
- get：不写method属性，默认就为method=”get” 。表单项的数据会在地址上显示
- post：表单项的数据不会在地址上显示。推荐使用post，因为安全

表单常与表单项结合使用

常见的表单项

文本框标签

<input type="text" checked="checked" placeholder="请输入用户名"/>

常见的属性：

type属性：
- type=”text” 普通文本框
- type=”password” 密码框
- type=”radio” 单选框，可通过设置相同的name来设定单选
- type=”checkbox” 复选框
- type=”date” 日期框高版本浏览器才支持
- type=”email” 邮箱框
- type=”file” 文件框
- type=”number” 数字框
- type=”color” 颜色框
- type=”hidden” 隐藏框
- type=”submit” 提交按钮自带提交功能
- type=”button” 普通按钮
- type=”reset” 重置按钮自带重置功能
checked属性
- checked=”checked” 默认选中

注意：只会应用到单选框和复选框上

placehoder属性
- placeholder=”请输入用户名” 文本框占位符

下拉框标签

<select></select>
<select>
  <option>-请选择所在省份-</option>
  <option>广西</option>
  <option>广东</option>
</select>

常见的属性：

selected=”selected”

区域文本框

<textarea></textarea>

label标签

<label></label>

常见的属性：

for属性：

for=”其他标签的id属性值” 将label和表单控件绑定在一起，用于快速获取焦点

表单项通用的属性

id属性：

代表该标签的唯一标识

name属性：表示标签的名字

后台服务器会根据name属性来获取数据

value属性：表示文本框的值

后台服务器所获取到数据

17-HTML

🏀 JavaWeb

软件的架构

网站和网页

常见的浏览器

浏览器的内核

内核有什么用

常见的内核有哪些

资源的分类

静态资源

动态资源

🏈 HTML(静态资源)

超文本

标记语言

html的语法格式

html的组成格式

html中的嵌套规则

html中是不区分大小写的

html中的标签也是可以写东西的(属性)

html的基本结构

🏏 常见的标签

结构体标签

文本标签

图片标签

列表标签

特殊的符号

块级标签

语义化标签

超链接标签

外部链接

内部链接

空链接

下载链接

锚点链接

图片链接

超链接的常用属性

表格标签

表格的行标签

表格的列标签

表格的标题标签

语义化标签

表单标签

常见的表单项

文本框标签

下拉框标签

区域文本框

label标签

表单项通用的属性