java web大纲

1. HTML

Hyper Text Markup Language(超文本标记语言)

p 段落标签，不嵌套其它标签，只允许

h1~h6 标题标签

a标签

① 超链接 

<a href="http://www.baidu.com">百度</a>

② 锚标记

<a name="top"></a>
......
<a href="#top">返回顶部</a>

div,span

<div>
    块状元素(block)，独占一行，可以设置宽高
</div>
<span>
    内联元素(inline)，根据内容大小自适应，不能设置宽高
</span>

img 图片

<!-- 内联块元素(inline-block) -->
<img src="img/plmm.jpg" width="400" height="300" alt="图片不存在" />

ul、ol、li

<ul>四大名捕
   <li>铁手</li>
   <li>冷血</li>
   <li>无情</li>
   <li>追命</li>
</ul>
<ol>要把大象装冰箱，总共分几步？
   <li>开箱</li>
   <li>装象</li>
   <li>关箱</li>
</ol>

表格

<table border="1">
    <tr>
        <td>第一行第一列</td>
        <td rowspan="2">第一行第二列</td>
        <td>第一行第三列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第三列</td>
    </tr>
    <tr>
        <td colspan="3">第三行第一列</td>
    </tr>
</table>

form表单

<form action="后台地址" method="post">
    <input type="text" name="user" placeholder="请输入用户名" readonly disabled />
    <input type="password" />
    <input type="radio" checked />
    <input type="checkbox" />
    <select>
        <option hidden>选项1</option>
        <option>选项2</option>
        <option selected>选项3</option>
        <option>选项4</option>
    </select>
    <textarea rows="8" cols="6" />
</form>

2. CSS

级联样式(Cascading Style Sheets)

① 选择器

html(标签)选择器、id选择器、类选择器、群组选择器，后代选择器，子选择器

② 盒子模型

width、height

padding、padding-top、padding-right、padding-bottom、padding-left

border: 1px solid red;

border-radius: 10px; 设置圆角

margin、margin-top、margin-right、margin-bottom、margin-left

margin: 0 auto; 块状元素水平居中

③ 背景

background-color: red;

background-image: url(img/plmm.jpg)

background-size: 100% 100%;

④ 文本、字体

font-size: 20px; 默认16px

font-weight: bold;

font-family: 楷体;

text-align: center;

line-height: 100px; 将行高设置为标签的高度，字体自动垂直居中

color: blue; 文本颜色

⑤ 颜色

英文单词： blue、red、pink、yellow、green、cyan

16进制： #FFFFFF 红绿蓝

rgb: rgb(0,255,255) 红绿蓝

rgba: rgba(255,0,0,0.5) 半透明的红色

透明色： transparent

透明度： opacity: 0.6;

⑥ 定位、浮动

position: absolute、relative、fixed

相对定位： 参考点为自己原来位置的左上角

绝对定位： 参考点为最近的有定位的祖先元素，直到body

fixed定位：参考点为窗体的左上角

float： left、right

浮动相当于标签脱离了普通的文档流

如果浮动标签后面的标签样式受到影响，增加clear： both，清除浮动

案例： 利用浮动将ul制作成导航栏

⑦ 其它常见样式

display: block/inline/inline-block/none

隐藏： visibility: hidden 隐藏占位 display: none 隐藏不占位

list-style: none;

cursor: pointer; 设置鼠标放上去之后的样式

div:hover{鼠标悬停样式}

3. JavaScript

js基础、DOM、BOM

① js基础

数据类型： undefined、null、boolean、number、string

数组 var a = [4,5,6,7]; push indexOf sort(function(a,b){return a-b;})

json： var json1 = {name:"scott",age:20,sex:"男"};

var json2 = [{},{},{}];

var json3 = {status: 200,data:[{},{},{}]};

正则： /^\d{5,10}\w*.+$/igm.test(str)

② DOM Document Object Model

• Document

Element document.getElementById()

HTMLCollection document.getElementsByName()

HTMLCollection document.getElementsByClassName()

HTMLCollection document.getElementsByTagName()

• Element

parentElement、children、nextElementSibling、previousElementSibling

innerHTML、innerText、value

box.style.color = "red";

box.style.backgroundColor = "yellow";

• Attribute

box.id a.href box.className

getAttribute(name) setAttribute(name,value) hasAttribute(name)

• Event事件

鼠标事件 onclick onmouseenter onmouseleave onscoll

键盘事件 onkeydown onkeypress onkeyup

表单事件 onfocus onblur onsubmit onchange

其它事件 window.onload 延时加载

③ BOM

alert() confirm() prompt()

timer = setInterval(fn,200) 每隔200ms调用fn一次 clearInterval(timer)

timeout = setTimeout(fn,200) 200ms之后调用fn一次 clearTimeout(timeout)

④ 案例

全选反选、菜单切换、抽奖、省市县联动、计算器

4. JSP

java server page

① scriptlet

<%
    // 局部变量  java语句
%>
<%=user %>

<!-- 判断 -->
<%
        Object obj = session.getAttribute("USERNAME");
        if(null==obj){
    %>
            <span>请登录或注册</span>
    <%
        }else{
    %>
            <span><%=obj %></span>
            <a href="loginout">退出</a>
    <%
        }
    %>

<!-- 循环 -->
<%
        for(int i=0;i<20;i++){
​
    %>
            <div></div>
    <%
        }
    %>

② 9大内置对象

page、out、request、response、session、application、pageContext、exception、config

5. servlet java后台

① 创建Servlet

@WebServlet("/login")
public class LoginServlet extends HttpServlet{
   
    protected void doGet(HttpServletRequest request,HttpServletResponse response){
        // 后台处理
        // 1. 获取页面传递的参数
        // 2. 调用service方法，连接数据库，获取相应结果
        // 3. 根据结果进行相应跳转
    }
    
    protected void doPost(HttpServletRequest request,HttpServletResponse response){
        doGet(request,response);
    }   
}

② HttpSession

③ ServletContext

④ Filter

⑤ Listener

⑥ Cookie

⑦ 文件上传下载

⑧ 跳转和传值

• 跳转

  jsp：超链接、form、location.href

  servlet: 请求转发、重定向、out.println()

• 传值

  • form表单中的标签添加name属性 request.getParameter(name)

  • login?name=scott&age=20 request.getParameter("age")

  • session.setAttribute(key,value)

    session.getAttribute(key)

                        哪里不懂了可以评论哦，很高兴为您解答