HTML概念
- HTML（Hypertext Markup Language）即超文本標(biāo)記語(yǔ)言
HTML發(fā)展史
- 1993年（IETE）HTML1.0
- 1995年（W3C）HTML2.0
- 1996年（W3C）HTML3.2
- 1997年（W3C）HTML4.0（SGML）
- 1999年（W3C）HTML4.01——分化點(diǎn)——2004年（WHWHATWG）HTML5草案
- 2000年（W3C）XHTML1.0
- 2001年（W3C）XHTML1.1——分歧——XHTML2.0？
- 2008年（合并）HTML5正式版
- 2014年HTML5定稿
HTML特點(diǎn)
- HTML不需要編譯，直接有瀏覽器執(zhí)行
- HTML史一個(gè)文本文件
- HTMl文件必須使用html或xml為文件名后綴
- HTML大小寫不敏感，HTML和html一樣
HTML基本機(jī)構(gòu)
image.png
HTML標(biāo)簽
- 語(yǔ)法：<標(biāo)簽名></標(biāo)簽名>
- 例子:<html></html>
- 規(guī)范 : 1、一般成對(duì)出現(xiàn)，結(jié)束標(biāo)簽比開始標(biāo)簽多了一個(gè)/
??????????2、單標(biāo)簽：沒有結(jié)束標(biāo)簽，如<img /> 、<hr />
HTML標(biāo)簽屬性
- 語(yǔ)法：< 標(biāo)簽名 屬性名1=‘值’ 屬性名2=‘值’>......</標(biāo)簽名>
HTML注釋
- 注釋在網(wǎng)頁(yè)中不顯示
Documnet文檔類型聲明
- <!document>聲明必須放在HTML文檔第一行
- <!document>聲明不是HTML標(biāo)簽
網(wǎng)頁(yè)編碼設(shè)置
-
當(dāng)網(wǎng)頁(yè)顯示出現(xiàn)亂碼時(shí)，在<head></head>標(biāo)簽之間添加：
<meta http-equiv='Content' content='text/html;charset=uth-8'></meta>
image.png
文字和段落標(biāo)簽
- 標(biāo)題標(biāo)簽<h1~ h6></h1~ h6>
- 段落標(biāo)簽 <p></p>
- 換行標(biāo)簽<br />
- 水平線<hr />
- 文字斜體： <i></i>、<em></em>
- 加粗：<b></b>、<strong></strong>
- 下標(biāo)：
- 上標(biāo)：
- 插入內(nèi)容：<ins>
- 刪除內(nèi)容：<del>
特殊符號(hào)
| 屬性 | 顯示結(jié)果 | 描述 |
|---|---|---|
| <； | < | 小于號(hào)或顯示標(biāo)記 |
| >； | > | 大于號(hào)或顯示標(biāo)記 |
| ®； | ? | 已注冊(cè) |
| ©； | ? | 版權(quán) |
| &trade； | ? | 商標(biāo) |
|  ； | space | 不斷行的空白 |
列表標(biāo)簽
- 無(wú)序列表
<ul>
<li></li>
<ul/>
- 有序列表
<ol>
<li></li>
<ol/>
- 定義列表
<dl>
<dt>定義列表項(xiàng)</dt>
<dd>列表項(xiàng)描述</dd>
<dd>列表項(xiàng)描述</dd>
</dl>
圖像標(biāo)簽
- <img src='圖片路徑' alt='圖片無(wú)法正常加載的顯示的文本' heght='圖片高' width='圖片寬'>
超鏈接標(biāo)簽
- <a href='鏈接' name='鏈接命名' target='打開窗口方式' title='鼠標(biāo)劃過(guò)顯示的文字'></a>
- <a href='mailto:郵件地址'></a>
HTML表格
-
語(yǔ)法與結(jié)構(gòu)
image.png -
表格屬性
image.png
image.png
image.png
-
<td>和<th>標(biāo)簽屬性
image.png 跨列屬性colspan
<table>
<tr>
<td colspan='2'>..</td>
<td>..</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
</table>
- 跨行屬性rowspan
<table>
<tr>
<td>..</td>
<td rowspan='2'>..</td>
<td>..</td>
</tr>
<tr>
<td>..</td>
<td>..</td>
</tr>
</table>
image.png
HTML表單
image.png
-
表單的工作原理
image.png -
form標(biāo)簽
image.png
- input標(biāo)簽：<input type='類型屬性' name='名稱' placeholder='用戶填入字段提示' value='文本框默認(rèn)值' >
| type屬性 | 描述 |
|---|---|
| text | 文字域 |
| password | 密碼域 |
| file | 文件域 |
| checkbox | 復(fù)選框 |
| radio | 單選框 |
| button | 按鈕 |
| submit | 提交按鈕 |
| reset | 重置按鈕 |
| hidden | 隱藏域 |
| image | 圖像域 |
- 下拉菜單
<select>
<option value="定義送往服務(wù)器的選項(xiàng)值" selected="設(shè)置初始選中狀態(tài)">...</option>
</select>
| 屬性 | 描述 |
|---|---|
| name | 設(shè)置下拉菜單和列表名稱 |
| multiple | 設(shè)置可選擇多個(gè)選項(xiàng) |
| size | 設(shè)置列表中可見選項(xiàng)的數(shù)目 |
- 分組下拉菜單
<select>
<optgroup label='組1'>
<option value="定義送往服務(wù)器的選項(xiàng)值" selected="設(shè)置初始選中狀態(tài)">...</option>
</optgroup>
<optgroup label='組2'>
<option value="定義送往服務(wù)器的選項(xiàng)值" selected="設(shè)置初始選中狀態(tài)">...</option>
</optgroup>
</select>
-
多行文本域 <textarea>
image.png
-
HTML重要標(biāo)簽
image.png - button里的按鈕在表單里才會(huì)有意義
- label和input的屬性進(jìn)行關(guān)聯(lián)
image.png
注：文章內(nèi)容借鑒慕課網(wǎng)
