JavaWeb新手入門——HTML常用標籤
阿新 • • 發佈：2021-01-09
1. HTML的書寫規範
<html>
<head>
<title>test-2021-1-8</title>
</head>
<body>
<!-- 裡面寫內容-->
</body>
</html>
標籤總的來說有兩個屬性：基本屬性和事件屬性
基本屬性可以修改簡單的樣式效果；事件屬性可以直接設定事件響應後的程式碼。
2. body裡面的常用標籤
1.font
字型標籤，有三個基本屬性，分別修改文字的顏色color、字型face、大小size
<font color="red" face="宋體" size="2">我是陸億行</font>
2. h1到h6
標題標籤，h1最大，h6最小，有基本屬性align，有三個不同的取值：
left 左對齊；center 居中；right 右對齊
< 3. a
超連結，有兩個基本屬性：href 和 target
href屬性設定跳轉的地址
target屬性決定是在本頁面跳轉還是開啟新頁面跳轉，對應的取值為_self和_blank，預設取值_self
<a href="http://www.baidu.com">我是超連結，犧牲我自己</a> <br/>
<a href="http://www.baidu.com" target="_blank">我是超連結，新開網頁</a>
4.ul ol
列表標籤
ul——unorder list 無序列表
ol——order list 有序列表
其中ul列表有type屬性，可以修改列表項前面的符號。
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ol>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
5.img
圖片標籤，是個單標籤
src屬性設定圖片的路徑，相對路徑和絕對路徑
width height 分別設定圖片的寬度和高度
border設定圖片的黑色邊框的粗細
絕對路徑要使用 http://ip:port/工程名/資源路徑 這樣的形式，避免換電腦後找不到檔案，而不能使用碟符:/目錄/檔名
<img src="./桌布1.jpg" width="300" height="260" border="1" alt="NotFound"/>
6. table
表格標籤
tr是行標籤，td是單元格標籤，表示該行的一個個單元格
有border、width、height、align已經見過的屬性，還有cellspacing標籤，設定單元格間距，即表示單元格和單元格之間的距離。
<table width="300" height="300" border="1" align="center" cellspacing="2">
<tr>
<td align="center"><b>字母</b></td>
<td align="center"><b>數字</b></td>
<td align="center"><b>字元</b></td>
</tr> <!--表頭作用-->
<tr> <td>a</td> <td>1</td> <td>!</td> </tr>
<tr> <td>b</td> <td>2</td> <td>?</td> </tr>
</table>
所以設定一個th標籤，簡化< td align=“center” >< b >，作為表頭標籤：
<table width="300" height="300" border="1" align="center" cellspacing="0">
<tr>
<th>字母</th>
<th>數字</th>
<th>字元</th>
</tr>
<tr> <td>a</td> <td>1</td> <td>!</td> </tr>
<tr> <td>b</td> <td>2</td> <td>?</td> </tr>
</table>
跨行跨列表格
對於M×N的表格，其中一個單元格可以不僅僅佔一行一列，而是m行n列，這裡m和n還要受限於M和N
colspan屬性和rowspan屬性
<table width="300" height="300" border="1" align="center" cellspacing="0">
<tr>
<th>小字</th>
<th>數字</th>
<th>字元</th>
<th>大字</th>
</tr>
<tr> <td colspan="2" rowspan="3">a1</td> <td>!</td> <td>A</td></tr>
<tr> <td>?</td> <td>B</td></tr>
<tr> <td>@</td> <td>C</td></tr>
<tr> <td>d</td> <td>4</td> <td>#</td> <td>D</td></tr>
</table>
7. form
表單標籤
| input標籤 ：單行文字框輸入，單標籤 | |
|---|---|
| type=“text” 文字輸入框 | value=" ×××" 預設顯示內容 |
| type=“password” 密碼輸入框 | value=" ×××" 預設顯示內容 |
| type=“radio” 單選框(同一組內的只能進行單選） | name=" ×" 以×為單位分組,防止多選 checked=“checked” 表示預設選中××取值 |
| type=“checkbox” 複選框 | checked=“checked” 表示預設選中×× |
| type=“reset” 重置按鈕 | value=" ××" 在重置按鈕上顯示的內容 |
| type=“submit” 提交按鈕 | value=" ××" 在提交按鈕上顯示的內容 |
| type=“button” 按鈕 | value=" ××" 在按鈕上顯示的內容 |
| *type=“file” 檔案上傳域 | |
| *type=“hidden” 隱藏域 | 當要傳送某些資訊，且資訊不需要使用者參與時，就可以使用隱藏域，提交的同時傳送給伺服器 |
| textarea標籤： 多行文字輸入框 | |
|---|---|
| < textarea > 我是預設值< /textarea> | 文字框中的內容是預設值 |
| 屬性rows | 設定文字框最多顯示的行數 |
| 屬性cols | 設定文字框最多顯示的列數(字元個數) |
| select標籤：下拉列表框 | |
|---|---|
| option標籤：< option > < /option > | 列出每一個待選項 |
| option標籤的屬性：selected=“selected” | 預設選中 |
<form>
使用者名稱稱：<input type="text" value="default"/> <br/>
使用者密碼：<input type="password"/> <br/>
確認密碼：<input type="password"/> <br/>
性別：<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked"/>女 <br/>
興趣愛好：<input type="checkbox" checked="checked"/>Java
<input type="checkbox" checked="checked"/>C++
<input type="checkbox"/>Linux
<input type="checkbox"/>JSP <br/>
國籍：<select>
<option selected="selected">----請選擇國籍-----</option>
<option>美國</option>
<option>中國</option>
<option>法國</option>
</select> <br/>
<br/>
自我評價：<textarea rows="10" cols="20"> 我是預設值</textarea> <br/>
<br/>
<input type="reset" value="重置按鈕"/>
<input type="submit" value="提交按鈕"/>
</form>
