標籤：style http io ar os 使用 sp java for
html基礎
（1）什麼是html？超文字標記語言 (HTML)
用於開發網頁的語言，由瀏覽器解釋執行
（2）html檔案的基本結構
<html>
<head>
<title></title>
<!--用於類比http訊息頭-->
<!--比如以下訊息頭的作用，是告訴瀏覽器，返回的是一個html，並應該以utf-8的編碼來顯示該頁面-->
<!--html檔案儲存的編碼應該與meta聲明的編碼一致-->
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--引入指令碼-->
<script>
<!--定義樣式-->
<style>
<!--引入外部樣式-->
<link>
</head>
<body>
<!--頁面顯示的資料-->
</body>
</html>
（3）web開發標準
w3c建議，開發一個頁面，應該這樣設計：頁面的結構（包括了資料），由html文檔來負責；
頁面的外觀，由css文檔來負責；
頁面的行為，由javascript文檔來負責。
（4）連結
a、基本使用：<a href="url地址" target="_blank">連結的描述</a>
target="_blank"在一個新的空白的頁面開啟
target="_self"在當前視窗開啟（預設的）
b、使用圖片作為連結
<img src="圖片地址" width="" height="" border=""/>
c、使用熱點
<img XXXX usemap="#Map">
<map name="Map">
<area shape="rect" coords="1,1,1,1",href="url地址">
</map>
當shape=“rect”（矩形）時，coords的值為左右個頂點的值，當shape=“circle” 圓形時，一個座標一個半徑長度
d、使用錨點:再用一個頁面內部跳轉
<a name="top"></a>
舉例:
<a name="top">some data...</a>
<div style="height:900px;"></div>
<a href="#top">to Top</a>
e、發送郵件
<a href="mailto:郵箱地址?subject=hello"></a>
f、連結中的偽樣式（css中再講）
（5）列表
a、無序列表
<ul>
<li><a href="test.html">1</a></li>
<li><a href="#">2</a></li>
<!--#表示當前頁面-->
<li>3</li>
</ul>
b、有序列表
<ol>
<li><a href="test.html">1</a></li>
<li><a href="#">2</a></li>
<li>3</li>
</ol>
c、列表嵌套
<ul>
<li><a href="test.html">item1</a></li>
<ul>
<li><a href="#">item2</a></li>
<li>item3</li>
</ul>
<li>item3</li>
</ul>
（6）表格
a、基本使用：<tr>:行 <td>；列
<table border="3px" width="40%" cellpadding="3" cellspacing="10">
<tr>
<td align="center">id</td>
<td>name</td>
<td>sal</td>
</tr>
<tr>
<td>001</td>
<td>java</td>
<td>20.00</td>
</tr>
</table>
border:邊框的寬度
cellpadding：儲存格裡面的資料與儲存格邊框之間的距離
cellspacing：儲存格之間的距離
width：50%或者500，寬度
align:left、center、right,水平位置
valign：top、middle、bottom ，垂直位置
b、不規則的表格
cospan：跨列合并
rowspan：跨行合并
舉例：
<table border="3px" width="40%" cellpadding="3" cellspacing="0">
<tr>
<td colspan="2" align="center">儲存格1</td>
</tr>
<tr>
<td rowspan="2" align="center" valign="top">儲存格2</td>
<td>儲存格3</td>
</tr>
<tr>
<td>儲存格4</td>
</tr>
</table>
c、表格的另一種寫法：
<table>
<caption>標題</caption>
<thead></thead>
<tfoot></tfoot>
<tbody></tbody>
<tbody></tbody>
</table>
thead：表頭，0/1
tfoot:表腳，0/1
fbody：表體，1/n
d、表格可以嵌套
<table border="3px" width="40%" cellpadding="3" cellspacing="0">
<tr>
<td>abc</td>
<td>abc2</td>
</tr>
<tr>
<td>abc3</td>
<td>
<table border="1" width="80% cellpadding="3" cellspacing="0">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</td>
</tr>
</table>
（7）表單：用於收集使用者的資訊，比如登陸表單，可以讓使用者輸入使用者名稱、密碼，這些資訊會提交給伺服器做驗證
<form>
<input type="text"/>
</form>
input標記：
type="text":文本輸入框
type="submit":提交按鈕
type="reset":重設按鈕
type="password":密碼輸入框
type="radio":單選
type="checkbox":多選
type="file":上傳檔案(給form添加一個屬性 enctype=”multipart/form-data“)
type="hidden":隱藏欄位
非input標記：
<textarea>:多行文本輸入框
<select>:下拉式清單/多選框
（8）架構
什麼是架構：用來將一個視窗劃分成多個子視窗
a、<frameset>,<frame>
注意：frameset不能寫在<body>裡，可以嵌套使用。
b、<iframe>
可以使用在<body>裡，表示嵌入一個子視窗
（9）其他標記
<h1>...<h6>:標題
行內標記：不單獨佔一行的標記----<span></span>、<strong></strong>
塊級標記：另起一行的標記----<h1>...<h6>、<table>、<form>、<p></p>、<div>
（10）實體
在html頁面中，出現了空格、>、<、"、& 應該用實體來代替
空格
> >
< <
" "
& &
（11）html/xhtml：
xhtml：擴充的超文字標記語言 (HTML)
HTML基礎筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
