NTML文檔結構
HTML文檔由4個主要標記組成，包括<html>、<head>、<title>、<body>.這4個標記構成了HTML頁面最基本的元素。
1.<html>標記
<html>標記是HTML文件的開頭。- 所有的HTML文件都以標記開頭，以標記結束，即HTML頁面的所有標記都要放置在與標記中。
- 標記雖然沒有實質性的功能，但卻是HTML必不可少的部分。
2.<head>標記
<head>標記是HTML文件的頭標記，用於存放HTML文件的信息，如定義CSS樣式的代碼可放置在與標記之中。
3.<title>標記
<title>標記爲標題標記。- 可將網頁的標題定義在
與 標記之中。
4.<body>標記
- 是HTML頁面的主體標記。
- 頁面中的所有內容都定義在標記中。
- 標記本身也具有控制頁面的一些特性，如控制頁面的背景圖片和顏色等。
HTML常用標記
1.換行標記
在HTML中，換行標記是<br>
例：創建一個HTML頁面，在頁面中輸入一首古詩。
<html>
<head>
<title>應用換行標記實現頁面文字換行</title>
</head>
<body>
<b>
靜夜思
</b><br>
舉頭望明月<br>
低頭思故鄉
</body>
</html>
2.段落標記
- 段落標記以
<p>標記開頭，以</p>標記結束。 - 段落標記在段前和段後各添加一個空行，而定義在段落標記中的內容不受該標記的影響。
3.標題標記
- 在HTML標記中設定了6個標題標記，分別爲
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。 - 數字越小，表示級別越高，文字的字體也就越大。
4.居中標記
- 居中標記以
<center>標記開頭，以</center>結尾。 - 標記之中的內容居中顯示。
5.文字列表標記
- 無序列表
無序標記是在每一個列表項的前面添加一個圓點符號。
通過符號<ul>可以創建一組無序列表，其中每個列表項以<li>表示
<html>
<head>
<title>無序列表標記</title>
</head>
<body>
編程詞典有以下幾種品牌
<p>
<ul>
<li>Java
<li>C
<li>C++
<li>C#
</ul>
</body>
</html>
- 有序列表
有序列表的標記爲<ol>，每一個列表項前使用<li>。有序列表中的項目是有一定順序的。
<html>
<head>
<title>無序列表標記</title>
</head>
<body>
編程詞典有以下幾種品牌
<p>
<ol>
<li>Java
<li>C
<li>C++
<li>C#
</ol>
</body>
</html>
表格標記
表格標記<table>
<table>……</table>標記表示整個表格。
<table>中有很多屬性，例如width表示表格的寬度；border屬性用來設置表格的邊框，align屬性設置表格的對齊方式，bgcolor屬性用來設置表格的背景色等。
標題標記<caption>
標題標記以<caption>開頭，以</caption>結束，它也有一些屬性，例如align,valign等屬性。
表頭標記<th>
表頭標記是<th>開頭，以</th>結尾也可以通過align,background,colspan,valian等屬性來設置表頭。
表格行標記<tr>
表格行標記以<tr>開頭，一組<tr>標記表示表格的一行。
<tr>標記要嵌套在<table>標記中使用，該標記也具有align,background等屬性。
單元格標記<td>
單元格標記<td>又稱爲列標記，一個<tr>標記中可以嵌入若干個<td>標記。該標記也具有align,background，valign等屬性。
例：
<html>
<body>
<table width="318" height="167" border="1" align="center" bgcolor="blue">
<caption>學生考試成績表</caption>
<tr>
<td align="center" valign="middle">姓名</td>
<td align="center" valign="middle">語文</td>
<td align="center" valign="middle">數學</td>
<td align="center" valign="middle">英語</td>
</tr>
<tr>
<td align="center" valign="middle">張三</td>
<td align="center" valign="middle">90</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">84</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">99</td>
<td align="center" valign="middle">100</td>
</tr>
</table>
</body>
</html>
HTML表單標記
1.<form>…</form>表單標記
表單標記以<form>標記開頭，以</form>標記結尾。在表單標記中可以定義處理表單數據程序的URL地址等信息。標記的基本語法如下：
<form action = "url" method = "get"|"post" name = "name" onSubmit = "" target = "">
</form>
<form>標記的各屬性說明如下。
- action屬性
action屬性用來指定處理表單數據程序的URL地址。 - method屬性
method屬性用來指定數據傳輸到副武器的方式。該屬性有兩種屬性值，分別爲get與post。【1）get屬性值表示將輸入的數據追加在action指定的地址後邊，並傳送到服務器。2）當屬性值爲post時，會將輸入的數據按照HTTP中的post傳輸方式傳送到服務器中。】 - name屬性
name屬性用於指定表單的名稱，該屬性值可以由程序員自定義。 - onSubmit屬性
onSubmit屬性用於指定當用戶單擊提交按鈕時觸發的事件。 - target屬性
target屬性用於指定輸入數據結果顯示在哪個窗口中，該屬性的屬性值可以設置爲“_blank”、“_self”、“_parent”、“_top”。【_blank表示在新窗口中打開目標文件、_self表示在同一窗口上打開這項一般不用配置、_parent表示在上一級窗口中打開，一般使用框架頁時經常使用、_top表示在瀏覽器的整個窗口中打開，忽略任何框架】
2.<input>表單輸入標記
表單輸入標記是使用最頻繁的表單標記，通過這個標記可以向頁面中添加單行文本、多行文本、按鈕等。標準語法格式如下：
<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox" value="checkbox">
標記的屬性如下圖所示：
| 屬性 | 描述 |
|---|---|
| type | 用於指定添加的是哪種類型的輸入字段，共有10個可選值 |
| disabled | 用於指定輸入字段不可用，即字段變成灰色。其屬性值可以爲空，也可以指定爲disabled |
| checked | 用於指定輸入字段是否處於被選中狀態，用type屬性值爲radio和checkbox的情況下，其屬性值可以爲空值，也可以指定爲checkbox |
| width | 用於指定輸入字段的寬度，用於type屬性爲image的情況下 |
| height | 用於指定輸入字段的高度，用於type屬性爲image的情況下 |
| maxlength | 用於指定輸入字段可輸入文字的個數，用於type屬性值爲text和password的情況下，默認沒有字數限制 |
| readonly | 用於指定輸入字段是否爲只讀。其屬性值可以爲空值，也可以指定爲readonly |
| size | 用於指定輸入字段的寬度，當type屬性爲text和password時，以文字個數爲單位，當type屬性爲其他值時，以像素爲單位 |
| src | 用於指定圖片的來源，只有當type屬性爲image時有效 |
| usemap | 爲圖片設置熱點地圖，只有當type爲image時有效。屬性值爲URI，URI格式爲“#+ |
| alt | 用於指定當圖片無法顯示時顯示的文字，只有當type屬性爲image時纔有效 |
| name | 用於指定輸入字段的名稱 |
| value | 用於指定輸入字段默認的數據值，當type屬性爲checkbox和radio時，不可省略此屬性，爲其他值時可以省略。當type屬性爲button、reset和submit時，指定的是按鈕上的顯示文字；當type屬性爲checkbox和radio時，指定的是數據項選定時的值 |
type屬性是標記中非常重要的內容，決定輸入數據的類型。該屬性值的可選項如下所示：
| 可選值 | 描述 | 可選值 | 描述 |
|---|---|---|---|
| text | 文本框 | submit | 提交按鈕 |
| password | 密碼域 | reset | 重置按鈕 |
| file | 文件域 | button | 普通按鈕 |
| radio | 單選選項 | hidden | 隱藏域 |
| checkbox | 複選框 | image | 圖像域 |
例：創建一個index.html的文件，在該文件的標記中添加一個表單，並且在該表單中應用標記中添加文本框、密碼域、單選選項、複選框、文本域、隱藏域、提交按鈕、重置按鈕、普通按鈕和圖像域共10個輸入字段。
<html>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1">
文本框：<input name="user" type="text" id="user" size="39" maxlength="39"><br>
密碼域：<input name="password" type="password" id="password" size="40" maxlength="40"><br>
單選按鈕：
<input name="sex" type="radio" value="男" checked>男
<input name="sex" type="radio" value="女">女<br>
複選框：
<input name="checkbox" type="checkbox" value="1" checked>1
<input name="checkbox" type="checkbox" id="checkbox" value="2">2<br>
文件域：<input type="file" name="file"><br>
隱藏域：<input type="hidden" name="hiddenField"><br>
提交按鈕：<input type="submit" name="Submit1" value="提交"><br>
重置按鈕：<input type="reset" name="Submit2" value="重置"><br>
普通按鈕：<input type="button" name="Submit3" value="按鈕"><br>
圖像域：<input type="image" name="imageField" src="C:\Users\lenovo\Pictures\1577379103973.png" width="108" height="61">
</form>
</body>
</html>
3.<select>…</select>下拉列表標記
<select>標記可以在頁面中創建下拉列表，此時的下拉列表是一個空的列表，要使用<option>標記向列表中添加內容。<select>標記的語法格式如下：
<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>
<select>標記的屬性說明如下表所示：
| 屬性 | 描述 |
|---|---|
| name | 用於指定下拉列表框的名稱 |
| size | 用於指定下拉列表框中顯示的選項數量，超出該數量的選項可以拖動滾動條查看 |
| disabled | 用於指定當前下拉列表框不可使用（變成灰色） |
| multiple | 用於讓多行列表框支持多選 |
例：
<html>
<body>
<select name="select">
<option>C</option>
<option>C++</option>
<option>C#</option>
<option>Java</option>
</select>
多行列表框（不可多選）：
<select name="select2" size="2">
<option>C</option>
<option>C++</option>
<option>C#</option>
<option>Java</option>
</select>
多行列表框（可多選）：
<select name="selec3" size="3" multiple>
<option>C</option>
<option>C++</option>
<option>C#</option>
<option>Java</option>
</select>
</body>
</html>
<textarea>多行文本標記
爲多行文本標記。與單行文本標記相比，多行文本可以輸入更多的內容。通常情況下，標記出現在標記的標記內容中。標記的語法格式如下：
<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默認值</textarea>
標記的屬性說明如下表所示：
| 屬性 | 描述 |
|---|---|
| name | 用於指定多行文本框的名稱，當表單提交後，在服務端獲取表單數據時應用 |
| cols | 用於指定多行文本框顯示的列數（寬度） |
| rows | 用於指定多行文本框顯示的行數（高度） |
| disabled | 用於指定當前多行文本框不可使用（變爲灰色） |
| readonly | 用於指定多行文本框爲只讀 |
| wrap | 用於設置多行文本中的文字是否自動換行 |
warp屬性的可選值如下表
| 可選值 | 描述 |
|---|---|
| hard | 默認值，表示自動換行，如果文字超過cols屬性所指的列數就自動換行，並且提交到服務器時，換行符被提交 |
| soft | 表示自動換行，如果文字超過cols屬性所指的列數就自動換行，並且提交到服務器時，換行符不被提交 |
| off | 表示不自動換行，如果想讓文字換行，只能按下Enter鍵強制換行 |
超鏈接與圖片標記
1.超鏈接標記
超鏈接標記是頁面中非常重要的元素，用於實現在網站中從一個頁面跳轉到另一個頁面。超鏈接標記的語法非常簡單，語法如下：
<a href = ""></a>
屬性href用來設定連接到哪個頁面中
2.圖像標記
在頁面中添加圖片是通過<img>標記來實現的。<img>標記的語法格式如下：
<img src="uri" width="value" height="value" border="value" alt="提示文字">
<img>標記的屬性說明如下表所示：
| 屬性 | 描述 |
|---|---|
| src | 用於指定圖片的來源 |
| width | 用於指定圖片的寬度 |
| height | 用於指定圖片的高度 |
| border | 用於指定圖片外邊框的寬度，默認值爲0 |
| alt | 用於指定當圖片無法顯示是顯示的文字 |