java web学习笔记

红太狼 2022-01-19 04:21 231阅读 0赞

# 网页搭建入门 #

## 1. HTML入门 ##

### 1.1 简介 ###

*  HyperText Markup Language
    
    超文本 标记 语言
 *  文档结构组成
    
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>Page Title</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" type="text/css" media="screen" href="main.css">
            <script src="main.js"></script>
        </head>
        <body>
        </body>
        </html>
        复制代码

### 1.2 HTML语法 ###

*  语法
    
     *  <开始标签 \[...属性\]>标签内容<结束标签>

### 1.3 标题 ###

*  h1~h6

### 1.4 段落 ###

*  p

### 1.5 font(html5中弃用，请使用css调整) ###

*  font
    
     *  格式化文本
     *  size 调节数字来改变字号
     *  face 字体集，常用：Helvetica
     *  color 颜色
        
         *  color name：red
         *  16进制表示法：\#d8d8d8
         *  rgb表示方法：rgb(178,178,178)

### 1.6 链接 ###

*  标签：
 *  作用：文档内部锚点(href="\#要跳转的id")、跳转到外部文档、下载资源
 *  属性：href、target（\_blank, \_self）
 *  去除a标签的默认样式
    
        a{
            color:#333333;
            text-decoration: none;
            cursor:none;
        }
        
        a:visited{
            color:#333333;
        }
        复制代码

### 1.7 图像 ###

*  标签：
 *  作用：插入图像
 *  属性：src, alt(替换文本)
 *  替换：非标签方式：使用background的css属性
    
        background: url(http://www.xxx/test.png);
        复制代码

### 1.8 列表 ###

*  标签
    
     *  无序列表
        
         *   *  
     *  有序列表
        
         *  1.  
     *  定义列表
        
         *  
 *  作用
    
     *  插入列表

### 1.9 万能标签div ###

*  标签
    
     *  
 *  作用
    
     *  布局
 *  无语义的块标签

### 1.10 HTML的块级元素与行内元素 ###

*  块级元素
    
     *  垂直方向的布局
 *  行内元素
    
     *  水平方向的布局

### 1.11 注释 ###

*  行注释
    
     *  ``
 *  段落注释
    
     *  没有哦
 *  条件注释
    
        
        复制代码

### 1.12 带格式化的标签（一般不会使用） ###

*  文本格式化
    
     *  `<b>`
        
         *  加粗字体
     *  `<strong>`
        
         *  另外一个加粗字体
     *  `<em><i>`
        
         *  强调字体
     *  `<big>`
        
         *  大号字体
     *  `<small>`
        
         *  小号字体
     *  `<sub>`
        
         *  下标
     *  `<sup>`
        
         *  上标
 *  预格式标签
    
     *  `<pre>`
 *  删除线
    
     *  `<del>`
 *  下划线
    
     *  `<ins>`

### 1.13 表格 ###

*  标签
    
     *  `<table>...完整代码</table>`
 *  属性
    
     *  边框：border
     *  单元格间距（外）：cellspacing
     *  单元格边距（内）：cellpadding
     *  单元格跨列：colspan
     *  单元格跨行：rowspan
     *  内容对齐：align
 *  作用
    
     *  布局
 *  贴士
    
     *  表格标签是块级元素
     *  全页布局的作用已经退出历史舞台了（div可以实现）
     *  专注于自己应该专注的布局领域
     *  表格样式
 *  demo
    
     *  表格头【可选】
     *  表格尾【可选】
     *  表格行【必须】
     *  单元格【必须】
    
        <table border="1">
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>总分</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>123</td>
                        <td>徐文涛</td>
                        <td>630</td>
                    </tr>
                    <tr>
                        <td>124</td>
                        <td>文涛</td>
                        <td>630</td>
                    </tr>
                </tbody>
            </table>
        复制代码
 *  注意
    
     *  一般也不会直接使用表格头和表格尾，直接使用css定义自己的样式即可。

### 1.14 表单元素 ###

*  标签
    
     *  `<form>...</form>`
 *  作用
    
     *  收集用户输入的内容（文本、文件）
 *  属性
    
     *  action：提交到的服务器地址
     *  method：指定提交时用哪种HTTP方法：POST/GET
     *  name：标识
     *  autocomplete：浏览器是否可以自动填充
     *  enctype：指定表单内容编码，默认是utf-8
 *  表单元素
    
     *  input
        
         *  文本、密码、单选、多选、按钮、数字、日期(因为每个浏览器表现不一样，一般使用第三方的类库)、颜色、范围、邮件、URL、文件
        
            <form action="">
                    <input type="text" value="我是一段文本" maxlength="10"/>
                    <br/>
                    <input type="password" />
                    <br/>
                    <input type="radio" name="gender" id="" value="0" checked>男</input>
                    <input type="radio" name="gender" id="" value="1">女</input>
                    <br/>
                    <input type="checkbox" name="aihao" id="" checked>电影
                    <input type="checkbox" name="aihao" id="">音乐
                    <input type="checkbox" name="aihao" id="">美术
                    <br/>
                    <input type="button" value="我是按钮">
                    <br/>
                    <input type="number" name="" id="">
                    <br/>
                    <input type="date" name="" id="">
                    <br/>
                    <input type="color" name="" id="">
                    <br/>
                    <input type="range" name="" id="" min="10" max="50">
                    <br/>
                    <input type="email" name="" id="">
                    <br/>
                    <input type="url" name="" id="">
                    <br/>
                    <input type="file" name="" id="" multiple>
                    <br/>
                    <input type="submit" value="提交">
                </form>
            复制代码
     *  select
        
         *  下拉列表
            
                <form action="">
                        <select name="" id="">
                            <option value="">苹果</option>
                            <option selected value="">梨子</option>
                            <option value="">香蕉</option>
                        </select>
                    </form>
                复制代码
     *  textarea
        
         *  文本域
         *  关注：cols和rows属性
        
            <style> textarea { resize: none; } </style>
                <form action="">
                    <textarea name="" id="" cols="30" rows="10"></textarea>
                </form>
            复制代码
     *  button
        
         *  按钮
         *  关注：type和form属性
        
            <form action="" id="button">
                    <input type="email" name="" id="">
                </form>
                <button type="submit" form="button">提交</button>
                <button type="reset" form="button">重置</button>
            复制代码

### 1.15 表单和表格混合使用 ###

<form action="http://www.baidu.com">
            <table border="1">
                <tr>
                    <td>姓名</td>
                    <td><input type="text" name="" id=""></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="" id=""></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="gender" id="">男
                        <input type="radio" name="gender" id="">女
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2">                
                        <input type="submit" value="提交">
                    </td>
                </tr>
            </table>
        </form>
    复制代码

## 2. CSS入门 ##

### 2.1 什么是css ###

*  层叠样式表
 *  样式通常存储在样式表中

### 2.2 为什么要使用css ###

*  样式定义如何显示HTML元素
 *  是为了解决内容和表现分离的问题
    
     *  内容是指HTML中的元素
     *  表现是内容在浏览器中呈现的样式

### 2.3 css声明 ###

*  样式属性
    
     *  `background-color`
 *  操作符
    
     *  `:`
 *  样式值
    
     *  `#FFFFFF`
 *  分隔符
    
     *  `;`
 *  声明块
    
     *      选择器 {
                background: #FFFFFF;
                color:#000000;
            }
            复制代码

### 2.4 css的内联样式 ###

*  demo
    
        <p style="color: lightcoral; font-weight: bolder;">这是一个段落内容。</p>
        复制代码
 *  这个方式不推荐使用
    
     *  只对当前的元素起作用
     *  混合在html内容中，耦合性太高

### 2.5 css的外联样式 ###

*  页面内外联
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>css的外联样式</title>
            <style> p { color: lightcoral; font-weight: bolder; } </style>
        </head>
        <body>
            <p>这是一个段落内容。</p>
        </body>
        </html>
        复制代码
 *  页面外外联
    
     *  html
        
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <link rel="stylesheet" href="css的外联样式-外页面.css">
            </head>
            <body>
                <p>这是一个段落。</p>
            </body>
            </html>
            复制代码
     *  css
        
            p {
                color: lightcyan;
                font-weight: bolder;
            }
            复制代码

### 2.6 css使用方式的优先级别 ###

*  内联样式>外联样式

### 2.7 css选择器 ###

*  ID选择器
    
     *  `#id`
 *  元素选择器
    
     *  `span`
 *  类选择器
    
     *  `.class`
 *  属性选择器
    
     *  `[属性名]`
     *  还有很多高级的语法

### 2.8 css的元素选择 ###

*  A E
    
     *  **祖先元素和后代元素**
     *  元素A的任一后代元素E（后代节点指A的子节点，子节点的子节点，以此类推）
 *  A > E
    
     *  **父元素和子元素**
     *  元素A的任一子元素E（也就是直系后代）
 *  B + E
    
     *  **兄弟元素**
     *  元素B的任一下一个兄弟元素E

### 2.9 css的伪类 ###

*  `:link`
    
     *  向未访问的链接添加样式
 *  `:hover`
    
     *  当鼠标悬浮在元素上方时，向元素添加的样式
 *  `:active`
    
     *  向被激活的元素添加样式
 *  `:visited`
    
     *  向已访问的链接添加的样式

### 2.10 css的伪元素 ###

f12看，并非是真正的元素。

*  `::before`
    
     *  会为当前元素创建一个子元素作为伪元素
 *  `::after`
    
     *  用来匹配已选中元素的一个虚拟的最后子元素

### 2.11 选择器的优先级 ###

*  ID选择器>类选择器>元素选择器和伪类
 *  内联样式>外联样式
 *  !important升级为最大的优先级

### 2.12 css设置背景样式 ###

*  background
    
     *  简写属性，作用是将背景属性设置在一个声明中
 *  background-color
    
     *  设置元素的背景颜色
 *  background-image
    
     *  设置图像
 *  background-position
    
     *  设置背景图像的起始位置
     *  作用：用来显示大图中的某个位置
 *  background-repeat
    
     *  设置背景图像是否及如何重复

### 2.13 css设置文本样式 ###

*  color
    
     *  设置文本颜色
 *  text-align
    
     *  对齐元素中的文本
 *  text-decoration
    
     *  向文本添加修饰
     *  比如下划线等
 *  text-indent
    
     *  缩进元素中文本的首行
 *  vertical-align
    
     *  设置元素的垂直对齐

### 2.14 css设置字体样式 ###

*  font
    
     *  在一个声明中设置所有的字体属性
 *  font-family
    
     *  指定文本的字体系列
 *  font-size
    
     *  指定文本的字体大小
 *  font-style
    
     *  指定文本的字体样式
 *  font-weight
    
     *  指定文本的粗细

### 2.15 css设置列表样式 ###

*  list-style
    
     *  用于把所有用于列表的属性设置于一个声明中
 *  list-style-image
    
     *  将图像设置为列表项标志
 *  list-style-type
    
     *  设置列表项标志的类型

### 2.16 css的常见布局 ###

*  两行三列布局
    
     *  注意：下边的demo中使用了float，会出现内容格式叠加的问题。
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style> html, body{ margin: 0px; } header { background-color: red; height: 200px; } .container { background-color: lightblue; height: 500px; } nav { background-color: lightcoral; height: 100%; width: 20%; float: left; } aside { background-color: lightskyblue; height: 100%; width: 20%; float: right; } article { background-color: lightgreen; height: 100%; margin-left: 20%; margin-right: 20%; } </style>
        </head>
        <body>
            <header></header>
            <div class="container">
                <nav></nav>
                <aside></aside>
                <article></article>
            </div>
        </body>
        </html>
        复制代码
 *  三行两列布局
    
    同上

### 2.17 css的盒子模型 ###

*  边框
    
     *  boder
        
         *  简写属性
     *  border-style
        
         *  边框样式
     *  border-width
        
         *  边框宽度
     *  border-color
        
         *  边框颜色
 *  内边距
    
     *  padding
        
         *  简写属性
     *  padding-bottom
     *  padding-left
     *  padding-top
     *  padding-right
 *  外边距
    
     *  margin
        
         *  简写属性
     *  margin-bottom
     *  margin-left
     *  margin-top
     *  margin-right

## 3. Float浮动 ##

**float浮动使得元素脱离正常文档流布局，会对正常文档流进行覆盖，但是文本空间会被占用。**

### 3.1 float基本参数 ###

*  `float:left`
    
     *  左浮动
 *  `float:right`
    
     *  右浮动
 *  `float:none`
    
     *  不浮动
 *  `float:inherit`
    
     *  继承父元素的浮动属性
 *  demo
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style> * { margin: 0px; padding: 0px; } .float { height: 100px; width: 100px; background-color: red; float: right; margin-left: 10px; } </style>
        </head>
        <body>
            <div class="float">1</div>
            <div class="float">2</div>
            <div class="float">3</div>
        </body>
        </html>
        复制代码

### 3.2 float文字环绕图片 ###

*  很简单，只需要对图片设置float属性即可实现。

### 3.3 float引起塌陷 ###

*  现象
    
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style> * { margin: 0px; padding:0px; } .per { width: 600px; height: auto; border: 1px solid #000; } .test { width: 100px; height: 100px; background-color: red; float: left; } .bro { width: 200px; height: 200px; background-color: blue; } </style>
        </head>
        
        <body>
            <div class="per">
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
            </div>
            <div class="bro"></div>
        
        </body>
        
        </html>
        复制代码

*  父元素由于height设置为auto，检测不到float的子元素，所以高度为0.

### 3.4 float塌陷问题的解决方案 ###

*  手动给父元素添加高度
    
     *  适配性太差，一般不要使用
 *  使用css中的clear属性
    
     *  清除元素配置位置的float效果
 *  使用overflow和zoom属性
    
        .per {
                    width: 600px;
                    height: auto;
                    border: 1px solid #000;
                    overflow: hidden;
                    zoom: 1;
                }
        复制代码
    
     *  overflow属性：一般是处理子元素显示范围大于父元素的情况下
     *  zoom属性：是IE的一个特殊属性
 *  将父元素也设置为float属性，以毒攻毒

## 4. CSS定位 ##

### 4.1 static ###

*  作用
    
     *  使元素定位于 **常规/自然流** 中
 *  特点
    
     *  忽略`top`,`bottom`,`left`,`right`或者`z-index`声明
        
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Document</title>
                <style> .block { position: relative; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid blue; box-sizing: border-box; top: 20px; } .block:nth-child(2) { border: 1px solid red; position: static; top: 20px; } </style>
            </head>
            <body>
                <div class="block">A</div>
                <div class="block">B</div>
                <div class="block">C</div>
                <div class="block">D</div>
            </body>
            </html>
            复制代码
        
        其中B设置为static，top属性被忽略

*  两个相邻的元素如果都设置了外边距，**那么最终的外边距=两个外边距中最大的**。两个的margin会出现重叠的情况。
 *  具有固定width和height值得元素，如果把左右外边距设置为auto，则左右外边距会自动扩大沾满剩余的宽度，效果就是**块水平居中。**
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style> .block { position: static; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid blue; box-sizing: border-box; top: 20px; } .block:nth-child(2) { border: 1px solid red; margin: 0px auto; } </style>
        </head>
        <body>
            <div class="block">A</div>
            <div class="block">B</div>
            <div class="block">C</div>
            <div class="block">D</div>
        </body>
        </html>
        复制代码
    
    设置B块左右margin为auto

### 4.2 relative ###

*  作用
    
     *  可以使得自己成为**可定位的参照物元素。**
 *  特点
    
     *  可以使用top/right/bottom/left/z-index进行相对定位，注意：**该相对定位相对的是该元素在常规流中的位置。**
     *  相对定位的元素不会离开常规流。就是他原本在常规流中的位置也会空在那边，不会被其他的元素占领。**【这个跟absolute有区别。】**
     *  【**超级好用**】任何元素都可设置为relative，他的绝对定位的后代可以相对于他进行定位。
     *  可以使浮动元素发生偏移，并控制他们的堆叠顺序。
        
         *  想改变浮动元素的位置，只能把元素设置为relative的position才可以。

### 4.3 absolute ###

*  作用
    
     *  使得元素脱离常规流
 *  特点
    
     *  脱离常规流，下边把块B设置为absolute

*  设置尺寸要注意：百分比比的是谁？——— **是最近的relative的祖先元素。**
 *  lrtb（left/right/top/bottom）如果设置为0，他将对齐到最近定位祖先元素的各边。——— 衍生出一个居中妙计
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style> .per { width: 200px; height: 200px; background-color: red; position: relative; } .child { width: 50px; height: 50px; background-color: blue; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style>
        </head>
        <body>
            <div class="per">
        
                <div class="child">
        
                </div>
            </div>
        </body>
        </html>
        复制代码

*  lrtb如果都设置为auto，则会被打回到常规流。
 *  如果没有最近定位的祖先元素，会认`<body>`做爹爹。

### 4.4 fixed ###

*  作用
    
     *  同absolute是一样的，除了以下几点
 *  特点
    
     *  相对于谁做绝对定位，是相对与视口做定位。

### 4.5 sticky ###

*  作用
    
     *  relative+fixed的完美结合，制造出吸附效果
 *  特点
    
     *  如果产生偏移，原位置还是会在常规流中，一亩三分地留着
     *  如果他的最近祖先元素有滚动，那么他的偏移标尺就是最近的祖先元素。
     *  如果祖先元素没有滚动，那么他的偏移标尺就是视口

### 4.6 导航实战 ###

*  效果

*  代码
    
        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style> * { margin: 0px; padding: 0px; } .page { width: 100%; height: 4043px; background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557045618&di=db82c3194d819704c70aba1835a8ab97&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.th7.cn%2Fd%2Ffile%2Fp%2F2014%2F09%2F05%2F22827e6cb6de149bce145bc1379b4386.png) center top repeat; } .nav { width: 160px; height: auto; position: fixed; left: 0px; top: 50%; margin-top: -103px; font-family: 'Courier New', Courier, monospace; } .nav-li { width: 160px; height: auto; border-bottom: 1px solid #fff; background: #333; text-align: center; line-height: 40px; color: #fff; font-size: 16px; cursor: pointer; } .tit { width: 160px; height: 40px; } .nav-li ul { width: 160px; height: auto; background-color: #fff; display: none; } .nav-li ul li { width: 160px; height: 40px; border-bottom: 1px dashed #666; color: #333; text-align: center; line-height: 40px; font-size: 14px; position: relative; } .nav-li:hover ul { display: block; } .list3 { width: 160px; height: auto; position: absolute; left: 160px; top: 0; display: none; } .list3dom { width: 160px; height: 40px; background: #444; border-bottom: 1px solid #FFF; text-align: center; line-height: 40px; color: #FFF; } .nav-li ul li:hover .list3 { display: block; } </style>
        </head>
        
        <body>
            <div class="page">
                <div class="nav">
                    <div class="nav-li">
                        <div class="tit">标题1</div>
                        <ul>
                            <li>
                                二级栏目
                                <div class="list3">
                                    <div class="list3dom">三级栏目</div>
                                    <div class="list3dom">三级栏目</div>
                                    <div class="list3dom">三级栏目</div>
                                </div>
                            </li>
                            <li>
                                二级栏目
                                <div class="list3">
                                    <div class="list3dom">三级栏目</div>
                                    <div class="list3dom">三级栏目</div>
                                    <div class="list3dom">三级栏目</div>
                                </div>
                            </li>
                            <li>
                                二级栏目
                                <div class="list3">
                                    <div class="list3dom">三级栏目</div>
                                    <div class="list3dom">三级栏目</div>
                                    <div class="list3dom">三级栏目</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="nav-li">
                        <div class="tit">标题1</div>
                        <ul>
                            <li>
                                二级栏目
                            </li>
                            <li>
                                二级栏目
                            </li>
                            <li>
                                二级栏目
                            </li>
                        </ul>
                    </div>
                    <div class="nav-li">
                        <div class="tit">标题1</div>
                        <ul>
                            <li>
                                二级栏目
                            </li>
                            <li>
                                二级栏目
                            </li>
                            <li>
                                二级栏目
                            </li>
                        </ul>
                    </div>
                    <div class="nav-li">
                        <div class="tit">标题1</div>
                        <ul>
                            <li>
                                二级栏目
                            </li>
                            <li>
                                二级栏目
                            </li>
                            <li>
                                二级栏目
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </body>
        
        </html>
        复制代码

## 5. 网页布局案例 ##

## 6. JavaScript入门 ##

## 7. JavaScript实现轮播特效 ##

# JavaWeb基础入门 #

## 1. JSP入门 ##

## 2. JSP内置对象 ##

## 3. XML入门 ##

## 4. Servlet入门 ##

## 5. web实现登录注册功能 ##

# JavaWeb基础进阶 #

## 1. JSTL和EL表达式 ##

## 2. Ajax入门 ##