java學習day27--HTML
1. 什麼是html
hyper 超級 text 文字 markup 標記 language 語言
超文字標記語言，俗稱網頁
2. html 檔案結構
以 *.html 或 *.htm 結尾的文字檔案
1) 標籤一般成對出現：`<標籤名> </標籤名>`
2) 最外層的標籤`<html></html>
<!DOCTYPE html>
版本是html4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
3) `<html>` 標籤由 `<head>` 和 `<body>` 子標籤組成
<html>
<head></head>
<body></body>
</html>
3.5 特殊轉義字元（實體）
< 表示 <
> 表示 >
3.6 圖片標籤 img
src 屬性代表圖片路徑
更多註釋內容
alt 是圖片訪問不到時的提示文字
width 表示寬度（單位是畫素）
height 表示高度（單位是畫素）
注意：路徑建議使用相對路徑，不要使用絕對路徑（e:\... c:\...)
3.7 超連結 a 【重點】
href 屬性 表示跳轉的目標
方式1:兩個網頁之間跳轉：
<a href="目標網頁的地址">超連結提示文字</a>
方式2：網頁內跳轉 (錨點)
<a href="#另一個標籤的id值">超連結提示文字</a>
方式3：圖片作為超連結
<a href=""> <img src="圖片路徑"> </a>
3.8 列表
有序列表 (order)
<ol>
<li>列表項</li>
</ol>
無序列表 (unorder)
<ul>
<li>列表項</li>
</ul>
3.9 表格【重點】
<table>
<thead></thead> 頭
<tbody></tbody> 體
<tfoot></tfoot> 腳
</table>
其中 thead, tbody, tfoot 裡又可以分為行與列
`<tr>` 表示行 '<td>' 表示列
比如要在tbody再分兩行兩列
<tbody>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
</tbody>
例：
<table border="1" width="100%">
<!--標題-->
<thead>
<tr>
<td>編號</td><td>姓名</td>
</tr>
</thead>
<!--內容-->
<tbody>
<tr>
<td>1</td><td>張三</td>
</tr>
<tr>
<td>2</td><td>李四</td>
</tr>
</tbody>
</table>
<hr>
<table border="1" width="100%">
<tr>
<td>第一列</td><td>第二列</td>
</tr>
<tr>
<td>第一列</td><td>第二列</td>
</tr>
</table>
<hr>
生成表格的父子關係，4行3列
table>tbody>tr*4>td*3
同時生成thead和tbody 需要用() 把他們分組，平級的用+連在一起
table>(thead>tr>td*3)+(tbody>tr*4>td*3)
給table加屬性的快捷寫法
table[border=1][width=100%]>tbody>tr*2>td*2
<!-- 合併列 -->
<table border="1" width="100%">
<tbody>
<tr>
<!--colspan=2 將兩個td合併為一個-->
<td colspan="2">行1列1</td>
<td>ss</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
</tbody>
</table>
<!-- 合併行 -->
<table border="1" width="100%">
<tbody>
<tr>
<td rowspan="2">行1列1</td>
<td>行1列2</td>
</tr>
<tr>
<td>行2列2</td>
</tr>
</tbody>
</table>與`<td>`類似的'<th>'，他們都是代表一列，但'<th>'其中的文字預設是居中並加粗
3.10 表單【重點】
都是用來收集使用者錄入的資訊
`<input type="text">` 文字框標籤
`<input type="password">` 密碼框
`<input type="radio">` 單選按鈕例子：
<!-- name取值相同的單選按鈕視為同一組
checked 表示是否預設選中， 對於這種取值只有“是否”這兩種情況的屬性， 有兩種寫法：一種是隻寫屬性名，另一種是名="值"
-->
<p>男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"></p>
<p>未婚<input type="radio" name="married"> 已婚<input type="radio" name="married" checked> 離婚<input type="radio" name="married"></p>`<input type="checkbox">` 複選按鈕
```
<!-- name取值相同的複選按鈕視為同一組, 同樣可以用checked表示是否預設選中-->
<p>
讀書<input type="checkbox" name="hobby">
玩遊戲<input type="checkbox" name="hobby">
聽音樂<input type="checkbox" name="hobby">
敲程式碼<input type="checkbox" name="hobby" checked>
</p>
`<input type="email">` 輸入郵件地址
`<input type="date" value="日期初始值">` 日期選擇標籤
`<input type="time" value="時間初始值">` 時間選擇標籤
`<input type="file">` 檔案選擇框
`<input type="button" value="按鈕文字">` 按鈕
`<input type="reset" value="重置">` 重置按鈕 把頁面所有填寫的內容重置到初始狀態
`<input type="submit" value="提交">` 提交按鈕 把表單填好的資訊傳送給伺服器
`<button type="button|reset|submit">按鈕文字</button>`
下拉列表標籤
```
<select>
<option>值1</option>
<option>值2</option>
....
<option>值n</option>
</select>
```
如果希望某個option預設被選中，在option上新增屬性selected
寫法1： selected
寫法2： selected="selected"
文字域標籤 適合輸入多行文字內容
<textarea cols="寬" rows="高"></textarea>
3.11 取值是布林值的屬性
checked 配合單選按鈕、複選按鈕使用
selected 配合option標籤使用
readonly 表示只讀，可以配合大部分表單標籤使用
disabled 表示禁用，跟只讀類似，不能修改，
而且在表單提交時，不會發送disabled屬性的資料
加在按鈕上，禁用這個按鈕
required 是否必填，如果空值，不允許提交表單