typora-copy-images-to: ..\images
一、HTML
1. 基本結(jié)構(gòu)
<!--根標(biāo)簽-->
<html lang="en">
<!--文檔的頭部-->
<head>
<meta charset="UTF-8">
<!--（HTML文檔）網(wǎng)頁的標(biāo)題-->
<title>HelloWord</title>
</head>
<!--文檔的主體-->
<body>
content
</body>
</html>
<!DOCTYPE>：文檔類型聲明標(biāo)簽，告訴瀏覽器用的是哪種HTML版本顯示網(wǎng)頁
<html lang = >：定義網(wǎng)頁的語言，en表示英文，zh-CN表示中文，用于提示瀏覽器要不要翻譯語言
<meta charset = "UTF-8">：指定字符集
2. 常用標(biāo)簽
2.1. 標(biāo)題
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
2.2. 段落
<p></p> 一組標(biāo)簽是一個(gè)段落
<br/> 換行標(biāo)簽
2.3. 文本格式化
<strong></strong> 加粗
<em></em> 傾斜線
<ins></ins> 下劃線
<del></del> 刪除線
2.4. 盒子標(biāo)簽
<div> 分割、分區(qū)，一個(gè)大盒子，塊級元素，一行只能有一個(gè)<div>
<span> 一行可以有多個(gè)<span>，行級元素
2.5. 圖像
<img src = "圖片url"/> 圖片和html文件放在同一位置，就可以使用相對路徑（相對于html文件的路徑）
同一級路徑：image.jpg
下一級路徑：images/image.jpg
上一級路徑：../image.jpg
2.6. 超鏈接
<a></a>
①語法格式
<a href = "目標(biāo)url" target = "目標(biāo)打開方式">文本或圖像</a>
目標(biāo)打開方式默認(rèn)為_self：當(dāng)前tab打開
_blank：新tab打開
<a target="_self">Hello</a> //當(dāng)前窗口
<a target="_blank">Hello</a> //新窗口
②內(nèi)部鏈接
href="html文件名"
③空連接
href="#"
④下載鏈接
href = "exe或zip鏈接"
⑤錨點(diǎn)鏈接
<a href="#one">Hello</a><br/> #起名
<a id="one">鏈接跳轉(zhuǎn)到這里</a>#id引用
2.7. 特殊字符
空格字符，要加上分號
3. 表格標(biāo)簽
<!--一個(gè)表格-->
<table>
<!--一個(gè)tr是一行-->
<tr>
<!--一個(gè)th是一個(gè)表頭單元格-->
<th>姓名</th><th>年齡</th><th>性別</th>
</tr>
<tr>
<!--一個(gè)td是一個(gè)單元格-->
<td>aa</td><td>18</td><td>男</td>
</tr>
<tr>
<!--一個(gè)td是一個(gè)單元格-->
<td>bb</td><td>20</td><td>女</td>
</tr>
</table>
4. 列表標(biāo)簽
4.1 無序列表
<h4>無序列表</h4>
<ul>無序列表標(biāo)簽
<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. 表單標(biāo)簽
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都相同，則可實(shí)現(xiàn)單選或者復(fù)選-->
愛好：吃飯<input type="checkbox" name="hobby"/>睡覺<input type="checkbox" name="hobby"/><br/>
同意用戶隱私政策<input type="checkbox" checked="checked">
</form>
按鈕
<!--提交按鈕-->
<input type="submit" value="免費(fèi)注冊">
<!--重置表單元素-->
<input type="reset" value="重置"><br/>
<!--普通按鈕，不執(zhí)行提交-->
<input type="button" value="發(fā)送驗(yàn)證碼"><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 標(biāo)簽選擇器
以HTML標(biāo)簽名開頭的選擇器
缺點(diǎn)：所有同類的標(biāo)簽都會(huì)被選擇，無法選擇其中一個(gè)
2.2 類選擇器
可以單獨(dú)選擇一個(gè)或者某幾個(gè)標(biāo)簽
定義某個(gè)標(biāo)簽里面的class=“名稱”，通過.名稱來調(diào)用，可以有多個(gè)名稱，用空格隔開
<option class="red">山東</option>
.red {
color: red;
}
2.3 id選擇器
定義某個(gè)標(biāo)簽里面的id=“名稱”，通過#名稱來調(diào)用，可以有多個(gè)名稱，用空格隔開
#red {
background-color: red;
width: 100px;
height: 100px;
}
<div id="red"></div>
id是唯一的，所以id選擇器只能調(diào)用一次
2.4 通配符選擇器
表示選擇頁面中所有標(biāo)簽
* {
color: deeppink;
}
3. 字體屬性
3.1 樣式
h2 {
font-family: "JetBrains Mono";
}
3.2 大小
select{
font-size: 20px; //px像素大小
}
3.3 粗細(xì)
.cu {
font-weight: 700; //700相當(dāng)于加粗，400相當(dāng)于變細(xì)
}
4. 文本屬性
4.1 對齊
h2 {
text-align: center; //居中對齊，還有別的屬性
}
4.2 裝飾
h2 {
text-decoration: underline; //下劃線，還有很多別的屬性
}
<a id="baidu">百度一下</a>
#baidu {
text-decoration: none; //刪除百度一下的下劃線
}
5. 樣式
5.1 內(nèi)部樣式表
放在<style></style>標(biāo)簽內(nèi)部
5.2 行內(nèi)樣式表
在標(biāo)簽內(nèi)部寫style="屬性"
如：
<p style="color: green;font-family: 楷體" >前端入門</p><br/>
5.3 外部樣式表
在外部新建一個(gè).css文件，在這個(gè)文件里只有樣式，沒有標(biāo)簽，實(shí)際開發(fā)中最常使用
<link rel="stylesheet" href="../CSS/style.css"> //通過這個(gè)方式引用樣式文件到HTML文件中，第一個(gè)屬性表示被鏈接的文檔是一個(gè)鏈接表，第二個(gè)為路徑
6. Emmet語法
按tab自動(dòng)生成
①同等級標(biāo)簽：p+div
②父子級標(biāo)簽：ul>li
③.div，#div 生成包含class或id的標(biāo)簽
④生成多個(gè)標(biāo)簽：div5
⑤自增標(biāo)簽：div{$}5 表示生成內(nèi)容為1-5的5個(gè)div標(biāo)簽
7. 復(fù)合選擇器
7.1 后代選擇器
元素2要是元素1的后代（子標(biāo)簽），比如ul li元素1 元素2 { 樣式聲明 }
7.2 子選擇器
元素1 > 元素2 { 樣式聲明 }表示選擇元素1里所有元素2中最近的標(biāo)簽，就近原則（親兒子）
7.3 并集選擇器
div，p 元素1，元素2 { 樣式聲明 }逗號表示和的意思，用，分割
7.4 偽類選擇器
①鏈接偽類選擇器
/*a:link未被訪問的鏈接，設(shè)置為黑色，取消下劃線*/
a:link {
color: black;
text-decoration: none;
}
/*a:visited選擇點(diǎn)擊過的鏈接，設(shè)置為橘色*/
a:visited {
color: orange;
}
/*a:hover選擇鼠標(biāo)經(jīng)過的那個(gè)鏈接，設(shè)置為天藍(lán)色*/
a:hover {
color: skyblue;
}
/*a:active選擇鼠標(biāo)按下，但沒有松開的鏈接，設(shè)置為紅色*/
a:active {
color: red;
}
②:focus偽類選擇器
選取獲得焦點(diǎn)（光標(biāo)）的表單元素選取出來（高亮）
input:focus { 樣式聲明 }，主要是針對表單form input元素
三、JSP
1. 什么是JSP
JSP是Java server pages，Java的服務(wù)器頁面JSP的主要作用是代替Servlet程序回傳HTML頁面的數(shù)據(jù)。因?yàn)镾ervlet程序回傳HTML頁面數(shù)據(jù)是一件非常繁瑣的事情，開發(fā)成本和維護(hù)成本都極高。因此出了JSP解決這個(gè)問題。
JSP必須通過啟動(dòng)服務(wù)器，然后才能輸入網(wǎng)址訪問。
JSP本質(zhì)上是一個(gè)Servlet程序。JSP翻譯出來的Java類，間接的繼承了HttpServlet類，也就是說JSP翻譯出來的就是個(gè)Servlet程序。
2. 常用腳本
==聲明腳本==
<%!
int a = 10;
%>
==表達(dá)式腳本==
作用：在jsp頁面上輸出數(shù)據(jù)
<%="abc"%><br/>
==代碼腳本==
<%
java語句
%>
3. 常用標(biāo)簽
①JSP靜態(tài)包含
<%@include file="/demo.html"%>
②JSP動(dòng)態(tài)包含
<jsp:include page="demo.html"></jsp:include>
③JSP請求轉(zhuǎn)發(fā)
<jsp:forward page="demo.html"></jsp:forward>
4. EL表達(dá)式
${}
5. JSTL標(biāo)簽庫
<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/>
作用：往域中保存數(shù)據(jù)
域?qū)ο?setAttribute(key,value)
scope屬性設(shè)置保存到哪個(gè)區(qū)域，
page:PageContext域
session:Session域
appilication:ServletContext域
request:request域
var屬性設(shè)置key，value設(shè)置值--%>
<c:set scope="request" var="abc" value="1234"/>
${requestScope.abc}
c:if
做判斷
<c:if test="${1==1}">
${123}
</c:if>
c:choose
相當(dāng)于if elseif，從上往下執(zhí)行只要有一個(gè)滿足，其他的就都不執(zhí)行
<c:choose>
<c:when test="${1>2}">2</c:when> //when 標(biāo)簽的父標(biāo)簽必須是choose標(biāo)簽
<c:when test="${2>1}">1</c:when>
</c:choose>
<c:otherwise> //otherwise標(biāo)簽里面如果要有when標(biāo)簽，必須讓它父標(biāo)簽是choose標(biāo)簽
<c:choose>
<c:when test=""></c:when>
</c:choose>
</c:otherwise>
c:foreach
//包含begin和end,var既是遍歷的變量名，又是輸出內(nèi)容，step步長 items：遍歷的元素
<c:forEach begin="1" end="10" step="2" items="${requestScope.student}" var="i">
${i}
</c:forEach>
