java（十五）
HTML
1.html是超文本標記語言的簡寫，是最基礎的網頁語言。
2.html是通過標簽來定義的語言，代碼都是由標簽所組成。
3.html代碼不用區分大小寫。
4.html代碼由<html>開始，</html>結束。裏面由頭部分<head></head>和體部分<body></body>組成。
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<body>
這是我的<br /><hr />
<font color=‘red‘ size=‘5‘>網頁內容</font>。
</body>
</html> 這些尖括號裏的就是標簽，比如標題標簽，字體標簽,換行標簽，水平分割線標簽。
5.頭部分是給Html頁面增加一些輔助或者屬性信息，它裏面的內容會首先加載。
6.體部分是真正存放頁面數據的地方。
多數標簽都是有開始標簽和結束標簽的，但有個別標簽因為只有單一功能，或者沒有修飾的內容，
可以直接在標簽內結束。 比如：換行標簽<br /> 水平分割線標簽<hr />
想要對標簽修飾的內容進行更豐富的操作，就要用到了標簽中的屬性。屬性與屬性值用“=”連接。屬性值用雙引號或單引號引導。
格式：<標簽名 屬性名=‘屬性值’>數據內容</標簽名>
<標簽名 屬性名=‘屬性值’ />
操作思想：
為了操作數據，都需要對數據進行不同標簽的封裝，通過標簽中的屬性對封裝的數據進行不同的操作。
標簽就相當於一個容器，對容器中的數據進行操作，就是在不斷的改變容器的屬性值。
html語言中要用到大於號和小於號時，就要加上轉義字符了。比如： 大於號 <； 小於號>；
列表標簽：<dl>
上層項目：<dt></dt>
下層項目：<dd></dd> 封裝的內容是會被縮進的，有自動縮進效果。
<!--有序和無序的項目列表（這就是html中的註釋，也是用標簽來體現的）-->
有序：<ol> 無序：<ul> 無論有序和無序，條目的封裝用的都是<li>，而且他們都有縮進效果。
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<body>
這是我的<br /><hr />
<font color=‘red‘ size=‘5‘>網頁內容</font>。
<ul>
<li>無序項目列表</li>
<li>無序項目列表</li>
<li>無序項目列表</li>
</ul>
<ol type="a">
<li>有序項目列表</li>
<li>有序項目列表</li>
<li>有序項目列表</li>
</ol>
</body>
</html>
圖像標簽：<img />
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<body>
這是我的<br /><hr />
<font color=‘red‘ size=‘5‘>網頁內容</font>。
<img src="圖片位置" height=500 width=200 border=10 alt="wa" />
<!--上面依次為圖片高和寬，邊框寬度，圖片說明文字。-->
</body>
</html>
表格標簽<table>
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<body>
這是我的<br /><hr />
<font color=‘red‘ size=‘5‘>網頁內容</font>。
<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
<caption>表格標題</caption>
<tr>
<td>姓名：</td>
<td>張三</td>
</tr>
<tr>
<td>年齡：</td>
<td>39</td>
</tr>
</table>
不規則的表格<hr />
<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
<tr>
<th colspan=2>個人信息</th> <!--th標簽就居中並加粗了，colspan=2是合並兩個單元格-->
</tr>
<tr>
<td>張三</td>
<td>30</td>
</tr>
</table>
<br />
<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
<tr>
<th rowspan=2>個人信息</th>
<th>張三</th>
</tr>
<tr>
<th>30</th>
</tr>
</table>
</body>
</html>
註意：表格的下一級標簽是tbody，不定義也存在，默認就是這個。
超鏈接標簽<a>
兩種用法：
一：超鏈接。用於鏈接資源。
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<body>
<a href="http：//www.baidu.com" target="_blank">百度</a>
<!--當有了href屬性，才有了點擊的效果。他的值不同，解析的方式也不同，解析時，默認按照file協議-->
<!--這裏的http是指定的協議，後面的target="_blank"表示在一個新窗口打開此網頁。-->
<hr/>
<a href="imgs/1.jpg">圖片</a>
<hr/>
<a href="javascript:void(0)" onclick="alert(‘haha‘)">這是個超鏈接</a>
<!--啟用javascript協議，void(0)表示去掉超鏈接默認的點擊效果，onclick是自定義了一個點擊效果-->
</body>
</html>
二：定位標記。專業術語叫錨
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<body>
<a name=top>頂部位置</a>
<hr/>
<img src="111.jpg" height=900 width=400 border=10/>
<hr/>
<a name=center>中間位置</a>
<hr/>
<img src="111.jpg" height=900 width=400 border=10/>
<a href="#top">回到頂部位置</a>
<a href="#center">回到中間位置</a>
</body>
</html>
框架標簽<frameset>：
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<!--定義框架：使用標簽frameset
-->
<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="30%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
<body>
</body>
</html>
畫中畫標簽<iframe>
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<body>
<iframe src="table.html">這是畫中畫標簽,如果你看到這行字，說明你的瀏覽器不支持該標簽</iframe>
</body>
</html>
***************重點掌握
表單標簽<form>：
表單標簽是最常用的標簽，用於與服務端的交互。
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<body>
<form>
<!--要向服務端提交數據的話就得明確name和value屬性，類似於鍵值對，否則無法解析。-->
輸入名稱<input type="text" name="user" value=""/><br/>
輸入密碼<input type="password" name="psw" value=""/><br/>
選擇性別：<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv" checked="checked"/>女<br/>
<!--都在sex這個組別中才能是單選, checked="checked"就讓女變成了默認選項。-->
選擇技術：<input type="checkbox" name="tech" value="java"/>JAVA
<input type="checkbox" name="tech" value="html"/>HTML
<input type="checkbox" name="tech" value="css"/>CSS
<br/>
<!--這個是多選。-->
選擇文件：<input type="file" name="file"/><br/>
一個圖片：<input type="image" src="111.jpg"/><br/>
隱藏組件：<input type="hidden" name="mike" value="123"/><br/>
<!--當數據不需要客戶端知道，但是需要提交到服務端時，就放在這裏面。-->
一個按鈕：<input type="button" value="這是個按鈕" onclick="alert(‘xixi!‘)"/>
<br/>
<select name="country">
<option value="none">--選擇國家--</option>
<option value="cn" selected="selected">中國</option>
<option value="en">英國</option>
<option value="usa">美國</option>
</select>
<br/>
<textarea name="text"></textarea>
<br/>
<input type="reset" value="清除數據"/>
<input type="submit" value="提交數據"/>
</form>
</body>
</html>
綜合練習：
<html>
<head>
<title>這是一個網頁的標題。</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!--action指定了服務端，post是一種提交的方式，還有一種叫get-->
<!--
get提交和post提交的區別：
1：get提交的信息都顯示在地址欄中，而post提交不顯示在地址欄中。
2：get提交對於敏感的數據信息不安全，post比較安全。
3：get提交對於大數據不行，因為地址欄存儲體積有限，而post可以提交大體積數據。
4：get提交將信息封裝到了請求消息的請求行中，而post封裝到了請求體中。
在服務端還有一個小區別：
如果將中文提交到tomcat服務器，服務器默認會用iso8859-1解碼，會出現亂碼，
這時，通過iso8859-1先編碼，再通過指定的中文碼表進行解碼即可，這種方式對兩種提交方式都有效。
但是對於post提交的中文，也可以直接使用服務端的一個對象request的setCharacterEncoding方法直接設置指定的碼表解碼。
這個方法只對請求體中的數據進行解碼。所以只能post提交方法可以用。
綜上所述，表單提交時，建議使用post提交方法。
-->
<table border="1" bordercolor="#00ffff" cellpadding=10 cellspacing=0 width=800>
<tr>
<th colspan="2">註冊表單</th>
</tr>
<tr>
<td>用戶名稱</td>
<td><input type="text" name="user" value=""/></td>
</tr>
<tr>
<td>輸入密碼：</td>
<td><input type="password" name="psw" value=""/></td>
</tr>
<tr>
<td>確認密碼：</td>
<td><input type="password" name="psw" value=""/></td>
</tr>
<tr>
<td>選擇性別：</td>
<td>
<input type="radio" name="sex" value="nan"/>男
<input type="radio" name="sex" value="nv"/>女
</td>
</tr>
<tr>
<td>選擇技術：</td>
<td>
<input type="checkbox" name="tech" value="java"/>JAVA
<input type="checkbox" name="tech" value="html"/>HTML
<input type="checkbox" name="tech" value="css"/>CSS
</td>
</tr>
<tr>
<td>選擇國家：</td>
<td>
<select name="country">
<option value="none">--選擇國家--</option>
<option value="cn">中國</option>
<option value="en">英國</option>
<option value="usa">美國</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="清除數據"/>
<input type="submit" value="提交數據"/>
</th>
</tr>
</table>
</form>
</body>
</html>
和服務端交互的三種方式：
1.地址欄輸入url地址。 get
2.超鏈接。 get
3.表單。 get和post
如果在客戶端進行了增強型的校驗（只要有一個組件內容是錯誤的，就無法提交），比如兩次密碼輸入必須一致。
問，服務端收到數據後，還需要校驗嗎？
肯定需要。為了安全性。不然客戶端直接在地址欄隨便輸都能完成註冊了，性別都可以隨便寫了。
如果服務端做了增強型校驗，客戶端還需要校驗嗎？
需要。因為要提高用戶的上網體驗和效率，也是為了減輕服務端的壓力。