HTML、JSP基础介绍

typora-copy-images-to: ..\images

一、HTML

1. 基本结构

<!--根标签-->
<html lang="en">
    <!--文档的头部-->
    <head>
        <meta charset="UTF-8">
        <!--（HTML文档）网页的标题-->
        <title>HelloWord</title>
    </head>

    <!--文档的主体-->
    <body>
        content
    </body>
</html>

<!DOCTYPE>：文档类型声明标签，告诉浏览器用的是哪种HTML版本显示网页
<html lang = >：定义网页的语言，en表示英文，zh-CN表示中文，用于提示浏览器要不要翻译语言
<meta charset = "UTF-8">：指定字符集

2. 常用标签

2.1. 标题

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

2.2. 段落

<p></p> 一组标签是一个段落
<br/> 换行标签

2.3. 文本格式化

<strong></strong> 加粗
<em></em> 倾斜线
<ins></ins> 下划线 
<del></del> 删除线

2.4. 盒子标签

<div> 分割、分区，一个大盒子，块级元素，一行只能有一个<div>
<span> 一行可以有多个<span>，行级元素

2.5. 图像

<img src = "图片url"/> 图片和html文件放在同一位置，就可以使用相对路径（相对于html文件的路径）
同一级路径：image.jpg
下一级路径：images/image.jpg
上一级路径：../image.jpg

2.6. 超链接

<a></a>
①语法格式
<a href = "目标url" target = "目标打开方式">文本或图像</a>
目标打开方式默认为_self：当前tab打开
_blank：新tab打开
<a href="http://www.baidu.com" target="_self">Hello</a>  //当前窗口
<a href="http://www.baidu.com" target="_blank">Hello</a> //新窗口
②内部链接
href="html文件名"
③空连接
href="#"
④下载链接
href = "exe或zip链接"
⑤锚点链接
<a href="#one">Hello</a><br/>  #起名
<a id="one">链接跳转到这里</a>#id引用

2.7. 特殊字符

&nbsp;空格字符，要加上分号

3. 表格标签

<!--一个表格-->
<table>

    <!--一个tr是一行-->
    <tr>
        <!--一个th是一个表头单元格-->
        <th>姓名</th><th>年龄</th><th>性别</th>
    </tr>

    <tr>
        <!--一个td是一个单元格-->
        <td>aa</td><td>18</td><td>男</td>
    </tr>
    <tr>
        <!--一个td是一个单元格-->
        <td>bb</td><td>20</td><td>女</td>
    </tr>

</table>

4. 列表标签

4.1 无序列表

<h4>无序列表</h4>
<ul>无序列表标签
<li>一</li>元素，必须为<li>但里面元素可以是任意类型
<li>二</li>
<li>三</li>
</ul>

4.2 有序列表

<ol>
<li>e</li>
<li>a</li>
<li>f</li>
</ol>

4.3 自定义列表

<dl>
<dt>一</dt> //dt主属性
<dd>二</dd> //dd子属性并列
<dd>三</dd>
<dd>四</dd>
</dl>

5. 表单标签

5.1 输入表单

<form action="xxx.php" method="post">
账户:<input type="text" name="username" value="请输入用户名"/><br/>
密码:<input type="password"/><br/>
<!--单选按钮radio-->
性别:男<input type="radio" name="gender"/>女<input type="radio" name="gender"/><br/>
<!--多选按钮checkbox-->
<!--name都相同，则可实现单选或者复选-->
爱好：吃饭<input type="checkbox" name="hobby"/>睡觉<input type="checkbox" name="hobby"/><br/>
同意用户隐私政策<input type="checkbox" checked="checked">
</form>

按钮

<!--提交按钮-->
<input type="submit" value="免费注册">
<!--重置表单元素-->
<input type="reset" value="重置"><br/>
<!--普通按钮，不执行提交-->
<input type="button" value="发送验证码"><br/>
<!--文件按钮-->
<input type="file" value="上传文件"><br/>

5.2 下拉表单

<select>
<option>山东</option>   //至少包含一堆option
<option>北京</option>
<option>重庆</option>
<option>四川</option>
</select>

5.3 文本域

<form>
<textarea cols="30" rows="10">
abcdefg
</textarea>
</form>

二、CSS

1. 基本样式

<head>
<meta charset="UTF-8">
<title>Title</title>
    <style>
        /*选择器{样式}*/
        select{
        color: aquamarine;
        font-size: 20px;  //px像素大小
        }
    </style>
</head>

2. 选择器

2.1 标签选择器

以HTML标签名开头的选择器
缺点：所有同类的标签都会被选择，无法选择其中一个

2.2 类选择器

可以单独选择一个或者某几个标签

定义某个标签里面的class=“名称”，通过.名称来调用，可以有多个名称，用空格隔开

<option class="red">山东</option>

.red {
color: red;
}

2.3 id选择器

定义某个标签里面的id=“名称”，通过#名称来调用，可以有多个名称，用空格隔开

#red {
background-color: red;
width: 100px;
height: 100px;
}
<div id="red"></div>
id是唯一的，所以id选择器只能调用一次

2.4 通配符选择器

表示选择页面中所有标签
* {
color: deeppink;
}

3. 字体属性

3.1 样式

h2 {
font-family: "JetBrains Mono";
}

3.2 大小

select{
font-size: 20px;  //px像素大小
}

3.3 粗细

.cu {
font-weight: 700; //700相当于加粗，400相当于变细
}

4. 文本属性

4.1 对齐

h2 {
text-align: center; //居中对齐，还有别的属性 
}

4.2 装饰

h2 {
text-decoration: underline; //下划线，还有很多别的属性
}

<a href="http://www.baidu.com" id="baidu">百度一下</a>
#baidu {
text-decoration: none;  //删除百度一下的下划线
}

5. 样式

5.1 内部样式表

放在<style></style>标签内部

5.2 行内样式表

在标签内部写style="属性"
如：
<p style="color: green;font-family: 楷体" >前端入门</p><br/>

5.3 外部样式表

在外部新建一个.css文件，在这个文件里只有样式，没有标签，实际开发中最常使用
<link rel="stylesheet" href="../CSS/style.css">  //通过这个方式引用样式文件到HTML文件中，第一个属性表示被链接的文档是一个链接表，第二个为路径

6. Emmet语法

按tab自动生成

①同等级标签：p+div

②父子级标签：ul>li

③.div，#div 生成包含class或id的标签

④生成多个标签：div5

⑤自增标签：div{$}5 表示生成内容为1-5的5个div标签

7. 复合选择器

7.1 后代选择器

元素2要是元素1的后代（子标签），比如ul li元素1 元素2 { 样式声明 }

7.2 子选择器

元素1 > 元素2 { 样式声明 }表示选择元素1里所有元素2中最近的标签，就近原则（亲儿子）

7.3 并集选择器

div，p 元素1，元素2 { 样式声明 }逗号表示和的意思，用，分割

7.4 伪类选择器

①链接伪类选择器

/*a:link未被访问的链接，设置为黑色，取消下划线*/
a:link {
color: black;
text-decoration: none;
}

/*a:visited选择点击过的链接，设置为橘色*/
a:visited {
color: orange;
}

/*a:hover选择鼠标经过的那个链接，设置为天蓝色*/
a:hover {
color: skyblue;
}

/*a:active选择鼠标按下，但没有松开的链接，设置为红色*/
a:active {
color: red;
}

②:focus伪类选择器

选取获得焦点（光标）的表单元素选取出来（高亮）

input:focus { 样式声明 }，主要是针对表单form input元素

三、JSP

1. 什么是JSP

JSP是Java server pages，Java的服务器页面JSP的主要作用是代替Servlet程序回传HTML页面的数据。因为Servlet程序回传HTML页面数据是一件非常繁琐的事情，开发成本和维护成本都极高。因此出了JSP解决这个问题。

JSP必须通过启动服务器，然后才能输入网址访问。

JSP本质上是一个Servlet程序。JSP翻译出来的Java类，间接的继承了HttpServlet类，也就是说JSP翻译出来的就是个Servlet程序。

2. 常用脚本

==声明脚本==

<%!
int a = 10;
%>

==表达式脚本==

作用：在jsp页面上输出数据
<%="abc"%><br/>

==代码脚本==

<%
java语句
%>

3. 常用标签

①JSP静态包含
<%@include file="/demo.html"%>
②JSP动态包含
<jsp:include page="demo.html"></jsp:include>
③JSP请求转发
<jsp:forward page="demo.html"></jsp:forward>

4. EL表达式

${}

5. JSTL标签库

<dependency>
    <groupId>org.apache.taglibs</groupId>
    <artifactId>taglibs-standard-spec</artifactId>
    <version>1.2.5</version>
</dependency>
<dependency>
    <groupId>org.apache.taglibs</groupId>
    <artifactId>taglibs-standard-impl</artifactId>
    <version>1.2.5</version>
</dependency>

c:set

<%--<c:set/>
作用：往域中保存数据
域对象.setAttribute(key,value)
scope属性设置保存到哪个区域，
page:PageContext域
session:Session域
appilication:ServletContext域
request:request域
var属性设置key，value设置值--%>
<c:set scope="request" var="abc" value="1234"/>
${requestScope.abc}

c:if

做判断
<c:if test="${1==1}">
${123}
</c:if>

c:choose

相当于if elseif，从上往下执行只要有一个满足，其他的就都不执行
<c:choose>
    <c:when test="${1>2}">2</c:when>  //when 标签的父标签必须是choose标签
    <c:when test="${2>1}">1</c:when>
</c:choose>

<c:otherwise>   //otherwise标签里面如果要有when标签，必须让它父标签是choose标签
    <c:choose>
    <c:when test=""></c:when>
    </c:choose>
</c:otherwise>

c:foreach

//包含begin和end,var既是遍历的变量名，又是输出内容，step步长  items：遍历的元素
<c:forEach begin="1" end="10" step="2" items="${requestScope.student}" var="i">  
${i}                                   
</c:forEach>