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="p_w_picpath" 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
如果在客戶端進行了增強型的校驗(只要有一個組件內容是錯誤的,就無法提交),比如兩次密碼輸入必須一致。
問,服務端收到數據後,還需要校驗嗎?
肯定需要。爲了安全性。不然客戶端直接在地址欄隨便輸都能完成註冊了,性別都可以隨便寫了。
如果服務端做了增強型校驗,客戶端還需要校驗嗎?
需要。因爲要提高用戶的上網體驗和效率,也是爲了減輕服務端的壓力。
標籤分爲兩大類:
1.塊級標籤:標籤結束後都有換行。比如div p dl table ol ul
2.行內標籤:標籤結束後沒有換行。比如font span img input select a