javaweb學習筆記（六）：HTML
目錄
1.HTML相關概念
軟體的結構：
①C/S(Client Server)結構的軟體： 比如：QQ
優點： 減輕服務端的壓力，而且可以大量儲存資料在客戶端。
缺點：更新的時候需要使用者下載更新包然後再安裝，程式設計師則需要開發客戶端與服務端。
②B/S（Browser Server）結構的軟體：比如： 微博 、 webQQ
優點：軟體版本升級的時候不需要使用者下載更新包，直接更新伺服器的程式即可。程式設計師則只需要開發服務端。
缺點：增加了服務端的壓力，bs結構的軟體不能儲存大量的資料在使用者機上。
網站的類別:
靜態網站: 靜態網頁中的資料都是寫死的，如果需要修改網頁的內容是需要直接修改網頁的程式碼。沒有資料庫提供資料給它。
動態網站: 動態網站的資料來自於資料庫，背後有一個後臺程式管理頁面中的資料。
html(Hyper Text Markup Language超文字標記語言)，用來編寫靜態網站的技術。
1. html語言是與平臺無關的，任何平臺只需要安裝了瀏覽器都可以執行。
2.html不區分大小寫。
html語言的結構：
<html>
<!-- 註釋的內容 -->.
<head></head> 網頁的頭資訊
<body></body> 網頁的體部分
</html>2.主要標籤
2.1頭資訊
1. 設定網頁的標題。
2. 通知瀏覽器使用指定的碼錶解釋html頁面.
3. 設定關鍵字搜素（一般為3-4個）
2.2文字標籤
標籤：帶有特殊含義的網頁的標記元素
帶標籤體的標籤 如： <p> XX </p>
不帶標籤體的標籤 如： <br/>
屬性：寫在開始標籤上的 名=“值”對 如：<font color=“red”></font>
一個標籤可以有多個屬性，多個屬性之間使用空格隔開。
標題 <h1>到<h6>
水平線 <hr/>
段落 <p>
短文字引用 <q> 自動新增雙引號
長文字引用 <blockquote> 沒有雙引號效果，但預設會有縮排。
上下標 <sup> <sub>
換行 <br/>
地址（預設斜體）<address>
原樣標籤 <pre> (會保留空格和換行符)
有序列表：
<ol>
<li></li>
......
<ol>無序列表：
<ul>
<li></li>
......
</ul>專案列表：
<dl>
<dt>
<dd></dd>
</dt>
<dl>行內標籤 <span> （ <span> 標籤沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。如果不對 <span> 應用樣式，那麼 <span> 元素中的文字與其他文字不會任何視覺上的差異。<span> 標籤提供了一種將文字的一部分或者文件的一部分獨立出來的方式。）
塊標籤 <div> (標籤內容獨佔一行)
<b>粗體效果</b>
b是bold的縮寫，僅僅表示該文字是粗體的，並不暗示這段文字的重要性
<strong>粗體效果</strong>
strong雖然也是粗體，但是更多的是強調語義上的加重，提醒使用者該文字的重要性。
<i>斜體效果</i>
i是italic的縮寫，僅僅表示該文字是斜體的，並不暗示這段文字的重要性
<em>斜體效果</em>
em 是 emphasized的縮寫，雖然也是斜體，但是更多的是強調語義上的加重，提醒使用者該文字的重要性。 常常用於引入新的術語的時候使用。
<del>使用del標籤實現的刪除效果</del>
<ins>使用ins標籤實現的下劃線效果</ins>
2.3字元實體
一些字元在 HTML 中擁有特殊的含義，比如小於號 (<) 用於定義 HTML 標籤的開始如果希望瀏覽器正確地顯示這些字元，必須在 HTML 原始碼中插入字元實體。
2.4媒體標籤
音視訊 <embed>
hidden ： 設定隱藏外掛是否隱藏。
src ：用於指定音視訊的路徑
飄動標籤 <marquee>
direction : 指定飄動的方向
scrollamount : 指定飄動的速度。
loop :指定飄動的次數
2.5連結標籤
<a>
href : 指定連結的資源
target: 設定開啟新資源的目標。( _Blank 在獨立的視窗上開啟新資源;
_self 在當前視窗開啟新資源)
</a>
郵件協議：mailTo 迅雷協議：thunder file協議（主要搜尋本地機器的資原始檔）
1. a標籤的href屬性值如果是以http開頭的，那麼瀏覽器會馬上啟動http直譯器去解釋該網址，首先會在本地機器去找一個hosts檔案， 如果在hosts檔案上該域名沒有對應的主機，瀏覽器就去到對應的dns伺服器去尋找該域名對應的主機號。如果找到了對應的主機，該請求就會發給對應的主機。
2. a標籤的href屬性值並不是以http開始，而是其他的一些協議，這時候瀏覽器就會到本地的登錄檔中去查詢是否有處理這種協議的應用程式，如果有，馬上啟動該應用程式處理該協議。
3. a標籤的href屬性值沒有以任何協議開頭，瀏覽就會啟動file協議直譯器去解釋該資源路徑
超連結標籤的作用：
- 用於連結資源。
- 錨點點位.
1) 首先編寫一個錨點 錨點的格式： <a name="錨點名字"> 資料</a>
2)使用a標籤 的herf屬性連線到錨點出。 href=”#錨點名字”
例：
<a name="top">頂部</a>
<a href="http://www.baidu.com">百度</a>
<a target="_blank" href="常用的標籤.html">標籤.html</a><br/>
如果有需要請傳送郵件至：<a href="mailTo:[email protected]">[email protected]</a><br/>
<a href="#top">回到頂部</a> 2.6影象標籤
<img>
Src: 指定圖片路徑
width： 設定圖片寬度
Height: 設定圖片高度
alt: 如果圖片資源無法找到，就顯示對應的文字對圖片進行說明。
熱點圖（在設計模式下，屬性欄進行設定超連結）
<img src="11.jpg" alt="這是張三" width="400" height="300"><br/>
2.7表格標籤
<table> 表格
<caption> 表格的標題
<tr> 行
<th> 表頭（預設居中、加粗）
<td> 單元格
常用屬性：
border 設定表格的邊框
bordercolor：設定表格邊框顏色
width : 設定表格的寬度
height: 設定表格的高度
colspan: 設定單元格佔據指定的列數
rowspan : 設定單元格佔據指定的行數
align: 設定對齊方式
注：瀏覽器一旦遇到了table標籤的開始標籤，就必須等到table標籤的結束標籤，才會在網頁中顯示一個表格的完整內容。為提高效率，將表格分成三部分：
<thead> 表頭（可以沒有）
<tbody> 表體（一個表格至少要有一個表體）
<tfoot> 表尾（可以沒有）
此時，瀏覽器只要遇到一個完整的tbody 標籤，就可先顯示當前頁面的資訊。
例：
<table align="center" border="1px" bordercolor="#0066CC" width="400px" height="300px">
<caption>期末考試成績表</caption>
<thead>
<tr>
<th>姓名</th>
<th>分數</th>
<th>等級</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">小華</td>
<td>98</td>
<td>優</td>
</tr>
<tr>
<td>100</td>
<td>優</td>
</tr>
<tr>
<td>李四</td>
<td>99</td>
<td>非常好</td>
</tr>
<tr align="center">
<td>綜合測評</td>
<td colspan="2">非常好</td>
</tr>
</tbody>
</table>2.8框架標籤
frameset：按照行或者列把一個頁面分成幾份。不能用於body標籤體內。
frame：位於frameset ,不能被切割。
iframe: 在一個網頁中分割一部分的位置顯示另外一個網頁的的資訊。
注：frameset標籤不能用於body標籤體內。 例：
<frameset rows="20%, 70%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="center" src="center.html" />
</frameset>
<frame src="foot.html" />
</frameset>2.9表單標籤
表單：在網頁中主要負責資料採集的功能
表單標籤： <form action=“” method=“”></form>
action: 提交資料的地址。
method：表單的提交方式。（get : 預設使用的提交方式,提交的資料會顯示在位址列上,資料大小受位址列限制； post：提交的資料不會顯示在位址列上，無資料大小限制）
下拉列表 ：
<select size=”” >
<option> </option>
</select>multiple:多選
size:一次可以選擇的選項數量
disabled:禁用
表單域 ： <input type=“” name=“”value=“”/>
type:決定輸入的型別
name:提交的鍵
size:文字輸入框的顯示長度
maxlength:輸入文字的最大長度
readonly：只讀，不可修改文字內容（會提交）
disabled:禁用表單項（不會被提交）
常見的表單域
提交按鈕： type="submit"
重置按鈕 type=”reset”
文字欄位 type=“text”
密碼欄位 type = "password" （隱藏欄位)
單選按鈕 type=”radio” 單選按鈕必需要分組，給name屬性相同的值,即為一組。
多選按鈕 type =”checkbox”，給name屬性相同的值,即為一組。
檔案選擇框 type=“file”
文字輸入域 <textarea name=”” cols=”” rows=””> </textarea>
注：表單域的資料如果需要提交到伺服器，必須要name屬性值（作為鍵）（使用者填入的文字域等資料或者value的值作為值）,以構成鍵值對。
例：
<form action="http://www.baidu.com" method="post">
使用者名稱：<input name="userName" type="text"/><br/>
密碼：<input name="password" type="password"/><br/>
<!--單選框 checked="checked"代表預設選中-->
男<input checked="checked" value="man" name="sex" type="radio"/> 女<input name="sex" value="woman" type="radio"/><br/>
<!-selected=”selected” 代表預設選中--->
來自城市：<select name="city">
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="GZ">廣州</option>
<option value="SZ">深圳</option>
</select><br/>
興趣愛好：java<input value="java" name="hobit" checked="checked" type="checkbox"/>
javascripe<input value="javascripe" name="hobit" type="checkbox"/>
c<input value="c" name="hobit" type="checkbox"/><br/>
大頭照：<input name="image" type="file" /><br/>
個人簡介：<textarea name="intro" rows="10" cols="30">這裡放預設顯示的字：小華真帥，2018-10-25</textarea><br/>
<input type="submit" value="註冊"/>
<input type="reset" value="重置"/>
</form>瀏覽器開啟的效果：
