JavaWeb

访问Web网站原理

用户在浏览器输入域名，根服务器根据域名进行域名解析DNS解析为IP，再将IP传回服务器进行搜索（小科普：ipv4的根服务器全球13台，美国10台，日本欧洲3台，IPv6是中国主导但还没有全名普及，屏蔽根服务器就直接从互联网消失，为了避免这种制裁，各国比如俄罗斯使用了镜像服务器）

C/S和B/S

C/S（Client/Server）

常用的桌面软件结构，比如QQ、王者等

安全，不容易拿到源码
速度更快
每次升级都需要重新安装客户端

B/S （Browser/Server）（浏览器/服务器）

4399小游戏之类

不安全，在网页直接F12就能拿到源码
使用简便，只需要一个浏览器，不用软件更新

静态页面&动态页面

静态页面：静态页面一旦写好之后，页面的内容就不会改变了。如果要改变只有修改页面的代码才会发生改变。常见的静态页面开发技术：html；
动态网页：动态页面一旦写好之后，即使不改变页面的代码，页面的内容也可能会随着时间、环境或者数据库操作的结果而发生改变。常见的动态页面开发技术：JSP/Servlet、~~ASP、PHP~~等；

HTML（用的第五版本）

HTML文件可以直接通过浏览器打开

基本结构

xml 复制代码

<!- 文档声明 ->
<!DOCTYPE html>
<!- 语言类型 ->
<html lang="en">
<!- 网页的头部 ->
<head>
    <!- 字符集类型 ->
    <meta charset="UTF-8">
    <!- 网页标题 ->
    <title>Document</title>
</head>
 <!- 网页的主体内容 ->   
<body>
</body>
</html>

表格标签

普通表格

标签	表述
table	标题标签
tr	行标签
td	列标签
px	像素
th	表头标签（居中对齐加黑）

css 复制代码

<table width="200px" height="100px" border="2">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>万金油</td>
        <td>99</td>
        <td>未知</td>
    </tr>
</table>

列合并colspan 只能合并两个相邻具有相同值的列，合并后的单元格会占用合并之前所在值的空间，取值规则：合并n列，取值为n，同时删除当前tr下的n-1个单元格；

xml 复制代码

<table width="200px" height="100px" border="2">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>万金油</td>
        <td>99</td>
        <td colspan="2">未知</td>
    </tr>

行合并rowspan

取值规则：合并n行，取值为n，同时依次删除与当前行同级的n-1个tr下的一个单元格；

xml 复制代码

<table width="200px" height="100px" border="2">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>万金油</td>
        <td>99</td>
        <td >未知</td>
        <td rowspan="2">打篮球</td>
    </tr>
    <tr>
        <td>徐阶</td>
        <td>34</td>
        <td>男</td>
    </tr>
</table>

图片标签

标签属性	描述
alt	当图片无法显示的时候（路径错误）就会显示
src	指定图片的路径
width	指定图片的宽度
heigth	指定图片的高度

src相对路径

./本层级

../上一层级

../../上上层级

arduino 复制代码

<img src=".\img\dog.png" height="200" width="200" alt="柴犬"/>

src绝对路径

绝对路径要在磁盘中打开

ini 复制代码

<img src="file://C:\Users\19245\Desktop\img\4.png" />

超链接标签

属性	描述
href	指示超链接需要链接的位置
target	指示该超链接以什么样的方式进行跳转

target

_blank：在新的标签页打开；

_self：在当前标签页中打开，默认取值；

ini 复制代码

<a href="https://re.jd.com/" target="_blank">大哥进货了</a>

表单标签

form标签

和后端进行交互的标签

form的属性	描述
action	要提交的路径
method	要提交的方式

Input标签

ini 复制代码

<input type=""   name=""   value="" />

有name属性才能提交到服务器

type属性	描述
test	普通文本框
passsword	密码框
radio	单选框
File	文件上传
hidden	隐藏域，有些数据不想用户看到又需要处理
submit	提交按钮，按钮必须使用Value设置框内内容
button	普通按钮
reset	重置按钮
image	图片按钮

xml 复制代码

<form action="" method="">

    账号：<input type="test" name="name"><br>
    密码：<input type="password" name="pwd"><br>
    性别：男<input type="radio" name ="sex"/>女 <input type="radio" name ="sex"/><br>
    爱好：跑步<input type="checkbox" name="sing" />跳舞<input type="checkbox" />
    隐藏：<input type="hidden" /><br>
<!--    点击提交就会以method的方式提交到action的地址-->
    <input type="submit" value="提交"/><br>
    <input type="button" value="普通按钮" /><br>
    <input type="reset" value=" 重置按钮" />

</form>

textarea标签（多行文本框）

类似于写简介等不确定字数的文本

ini 复制代码

简介：<textarea cols="20" rows="10"></textarea >

select标签（下拉框）

使用还需要在select里面套一层option标签

xml 复制代码

地址：<select>
    <option>四川省</option>
    <option>浙江省</option>
    <option>云南省</option>
    <option>贵州省</option>
</select>
<select>
    <option>--请选择你的城市--</option>
    <option>绵阳市</option>
    <option>崇州市</option>
    <option>海南市</option>
    <option>成都市</option>
</select>

div&span标签

div是块级标签，独占一行 span是行内标签，内容占用多少就占用多少空间

less 复制代码

<div style="background-color: aqua">占用一行</div>
<div style="background-color: rebeccapurple">独占一行</div>
<span>span抱歉</span>
<span>span抱歉</span>
<span>span抱歉</span>

CSS

Cascading Style Sheets层叠样式表

语法

ini 复制代码

单个样式写法：

<标签名 style="样式属性:样式属性值;">内容</标签名>

多个样式写法：

<标签名 style="样式属性1:属性值;样式属性2:属性值;">蓉华教育</标签名>

CSS代码中的注释：

/* 注释内容 */

CSS对大小写敏感

三种写法

执行顺序是就近原则，比如行内样式离得近，就优先执行行内样式

行内样式

仅仅只是对当前行有效

xml 复制代码

<标签名 style="样式属性：样式属性值">内容</标签名>

内部样式

对整个HTML页面有效

xml 复制代码

<style type="text/css">
    input{
        样式属性1：样式属性值1；
        样式属性2：样式属性值2；
    }
</style>

ex:

xml 复制代码

<style type="text/css">
    input{
        border-radius: 10px;background-color: aqua
    }
</style>

外部样式

新建一个以.css结尾的文件，把需要设置的属性值全部写在里面-->标签连接之前的那个文件
语法：

ini 复制代码

<link rel="stylesheet" href="CSS文件路径" />

CSS选择器

标签选择器

就上面用的那个，就只对Input标签起作用

markdown 复制代码

标签名{
    样式
}

通用选择器

*{
样式
}
类选择器

arduino 复制代码

.class{
    样式
}

id选择器

用法和类选择器一致

markdown 复制代码

#id值{
    样式
}

HTML&CSS

JavaWeb

访问Web网站原理

C/S和B/S

C/S（Client/Server）

B/S （Browser/Server）（浏览器/服务器）

静态页面&动态页面

HTML（用的第五版本）

基本结构

表格标签

图片标签

超链接标签

表单标签

CSS

语法

三种写法

行内样式

内部样式

外部样式

CSS选择器