一个简单的html、css、js的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--设置css 一般设置在外部,或者最上面-->
<style type="text/css">
button{
color: red;
}
</style>
<!--也是一种引入方式-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<body>
<button οnclick="first()">点击</button>
</body>
<!--一般js代码都放在body之后-->
<!--务必要有</script> -->
<script type="text/javascript">
function first() {
alert("使用js");
}
</script>
<!--或者-->
<script src="01.js"></script>
</html>
使用jq,
其中text/javascript务必写上,有一次无法获取就是这个原因
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
dasdasdasdasdsa
<button οnclick="test()">点击</button>
<button id="test">id</button>
<button class="test2">class</button>
<!--别人的代码 都是放在body之间,但是又在所有代码之后,也就是html之后-->
<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// $("button").click(function () {
// alert("点击button后打开");
// });
$("#test").click(function () {
alert("id类型");
});
$(".test2").click(function () {
alert("class类型");
});
// $(document).ready(function () {
// alert("show ready");
// });
// $(document).click(function () 和$(function 和$(document).ready(function ()类似
// $(document).click(function () {
// alert("文件一打开自动加载");
// })
// $(function () {
// alert("加载了哦");
// });
function test() {
alert("测试先后顺序");
}
</script>
</body>
</html>
使用bootstrap,以下是bootstrap官网给出的使用方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
想要使用好bootstrap需要了解 它栅格系统 一般都是在class中设置对应的栅格,在bootstrap官网查看即可
jsp等部分代码
<%@ page isELIgnored="false" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<html>
<head>
<title>Title</title>
</head>
<body>
123
${param.id}
<%--${pageContext.page}--%>
${1+2}
${456}
${"abc"}
${abc}
${requestScope}
${pageContext.request}
${pageContext["request"]}
${initParam.password}
<hr>
<br/>
${1>2?1:2}
${1+2*3}
${!true}
${true or false}
${true && false}
${true || false}
${1==2}
${empty x}
${not empty x}
<hr style="color: red;"/>
<c:out value="1" default="557"></c:out>
<%--设置值之后可以让其被使用--%>
<c:set var="foo" value="the wisest fool"/>
${foo}
<%--移除某个属性--%>
${foo}
<%--scope代表范围--%>
<c:remove var="foo" scope="page"></c:remove>
${foo}
<hr>
<br/>
<c:set var="varName" value="good12"></c:set>
${varName}
${param.id==1}
<c:if test="${not empty varName}">
you is good
</c:if>
<hr>
<%--必须要加载choose中--%>
<c:choose>
<c:when test="${not empty varName}">
varName is not null
</c:when>
<c:otherwise>
x null
</c:otherwise>
</c:choose>
<hr>
<c:forEach var="x" begin="5" end="20">
<c:choose>
<c:when test="${x%2==0}">
<br><c:out value="${x}"></c:out>
</c:when>
<c:otherwise>
<c:out value="${x}"></c:out>
</c:otherwise>
</c:choose>
</c:forEach>
<hr>
<c:forEach var="x" begin="5" end="20" varStatus="status">
<%--varstatus必须对应到集合才可以使用 使用items指示--%>
${status}
<%--<c:choose>--%>
<%--<c:when test="${status%2==0}">--%>
<%--<br><c:out value="${x}"></c:out>--%>
<%--</c:when>--%>
<%--<c:otherwise>--%>
<%--1--%>
<%--</c:otherwise>--%>
<%--</c:choose>--%>
</c:forEach>
<%--forEach 的用法 包括嵌套 、遍历map集合 用var.key var.value遍历--%>
<hr>
<%--与url有关的一些行为--%>
<%--用来跳转界面--%>
<%--<c:redirect url="page/login.jsp"></c:redirect>--%>
<hr>
<%=getServletInfo() %>
<%--jsp中写java的三种方式--%>
<%--定义--%>
<%! String str = "你好啊";%>
<%--输出--%>
<%=str%>
<%--一般写法--%>
<%%>
</body>
</html>