HTML簡單使用
標籤 ： 前端技術
HTML
HTML(Hypertext Marked Language), 即超文本標記語言,能夠獨立於各種操作系統平臺(如UNIX/Linux/Windows等)進行信息展示.HTML由WEB發明者Tim Berners-Lee和同事Daniel W.Connolly於1990年創立.
所謂超文本:是因爲它可以加入圖片/聲音/動畫/視頻等內容(超越了文本的範疇);
所謂標記:是因爲HTML所有的操作都是通過標記實現, 每一個HTML文檔都是靜態的網頁文件,這個文件裏面包含了HTML指令代碼,這些指令代碼並不是一種程序語言,它只是一種排版資料顯示位置的標記結構語言, 如:<標籤名稱>標籤內容</標籤名稱>
HTML規範
- 一個HTML文件必須有開始標籤和結束標籤
<html></html>; - HTML包含head/body兩部分內容:
<head>頁面設置信息</head><body>頁面顯示內容</body>
- HTML標籤要有始有終(如
<table></table>), 空元素標籤需要在標籤內結束(如<hr/><br/>); - HTML代碼不區分大小寫;
HTML操作思想
- 一個網頁中可能會有很多數據, 不同的數據需要不同的顯示效果,此時就使用標籤把需要展示的數據封裝起來,通過修改標籤屬性值以實現標籤內數據樣式的變化;
- 一個標籤相當於一個容器,想要修改容器內數據樣式,只需要修改容器屬性值.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>First Html</title>
</head>
<body>
<font size="5" color="red">Hello World !</font>
<hr/>
<font size="6" color="green">世界你好</font>
</body>
</html>HTML常用標籤
簡單標籤
註釋標籤
<!-- HTML的註釋 -->注意: 瀏覽器不展示,但查看源代碼時可看到.
文字標籤 : 修改文字樣式
<font></font>
| 屬性 | 描述 |
|---|---|
| size | 文字的大小(取值範圍1-7) |
| color | 文字顏色[兩種表示方式:英文單詞(red/green/blue)/十六進制數(#ffffff:RGB) |
標題標籤
<h1></h1>-><h6></h6>: 依次變小水平線標籤
<hr/>
| 屬性 | 描述 |
|---|---|
| size | 水平線粗細 取值範圍 1-7 |
| color | 顏色 |
- 特殊字符: 需要對特殊字符進行轉義才能在網頁上顯示:
| 字符 | 轉義 |
|---|---|
< |
< |
> |
> |
空格 |
|
& |
& |
註冊符® |
® |
版權符© |
© |
- 圖像標籤
<img src="圖片的路徑"/>
| 屬性 | 描述 |
|---|---|
| src | 圖片路徑 |
| width | 圖片寬度 |
| height | 圖片高度 |
| alt | 圖片出錯時顯示的文字 |
- 超鏈接標籤
<a href="資源地址">說明</a>
| 屬性 | 描述 |
|---|---|
| href | 鏈接資源地址,當超鏈接不需要跳轉時,設爲# |
| target | 設置打開的方式[_blank新窗口打開/_self當前頁打開(默認)] |
拓展:
定義錨點: `<a name="top">頂部</a>`
回到錨點: `<a href="#top">回到頂部</a>`
列表標籤
- 層次列表
<dl></dl>: 層次列表
<dt></dt>: 上層內容
<dd></dd>: 下層內容
<dl>
<dt>阿里巴巴集團</dt>
<dd>淘寶</dd>
<dd>阿里雲</dd>
<dd>阿里媽媽</dd>
</dl>
- 有序列表
<ol></ol>: 有序列表
| 屬性 | 描述 |
|---|---|
| type | 排序方式[1(默認)/a/i] |
<li></li>: 列表內容
<ol type="A">
<li>百度</li>
<li>阿里</li>
<li>騰訊</li>
</ol>- 無序列表
<ul></ul>: 無序列表
| 屬性 | 描述 |
|---|---|
| type | 實心圓disc(默認)/空心圓circle/實心方塊square |
<li></li>: 列表內容
<ul type="circle">
<li>百度</li>
<li>阿里</li>
<li>騰訊</li>
</ul>表格標籤
<table></table>: 用於對數據進行格式化, 使顯示更加清晰
| 屬性 | 描述 |
|---|---|
| border | 表格線 |
| bordercolor | 表格線顏色 |
| cellspacing | 單元格距離 |
| width | 表格寬度 |
| height | 表格高度 |
<caption></caption>: 表格標題<tr></tr>: 行
| 屬性 | 描述 |
|---|---|
| align | 設置內容對其方式[left/center/right] |
<th></th>: 表格首行列<td></td>: 表格內容列- 合併單元格
rowspan：跨行
<td rowspan="行數"></td>colspan：跨列
<td colspan="列數"></td>
<table border="1" bordercolor="aqua" cellspacing="0" width="400" height="150">
<caption>表格標題</caption>
<tr>
<td colspan="4" align="center">跨列標題</td>
</tr>
<tr>
<th>標題1</th>
<th>標題2</th>
<th>標題3</th>
<th>標題4</th>
</tr>
<tr align="center">
<td>內容</td>
<td>內容</td>
<td>內容</td>
<td rowspan="2">跨行內容</td>
</tr>
<tr align="center">
<td>內容</td>
<td>內容</td>
<td>內容</td>
</tr>
</table>如果單元格內沒有內容, 需要使用空格符
佔位.
表單標籤
<form></form>: 用於向服務端提交數據
| 屬性 | 描述 |
|---|---|
action |
提交地址,默認提交到當前頁面 |
method |
提交方式[GET/POST] |
enctype |
指定發送到服務器數據的編碼格式[application/x-www-form-urlencoded: 表單數據/ multipart/form-data: 文件上傳] |
表單輸入項
每個輸入項中必須要有一個
name屬性, 以標識該輸入項的key,服務端獲取表單數據時用.
- 文字輸入項：
<input type="text"/> - 密碼輸入項：
<input type="password"/> - 單選按鈕：
<input type="radio"/>
性別:
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女兩個按鈕name屬性值相同,且必須有value值,實現默認選中:checked="checked".
- 複選按鈕：
<input type="checkbox"/>
愛好
<input type="checkbox" name="hobby" value="checkbox"/>羽毛球
<input type="checkbox" name="hobby" value="basketball"/>籃球
<input type="checkbox" name="hobby" value="swim"/>游泳屬性描述同radio.
- 文件上傳:
<input type="file"/> - 下拉菜單:
<select name="birth">
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>默認選擇selected="selected"
- 文本域
<textarea cols="10" rows="10"></textarea> - 隱藏項
<input type="hidden" />
不會顯示在頁面上, 但會存在於HTML代碼裏面. - 提交按鈕
<input type="submit"/> - 圖片提交
<input type="image" src="圖片路徑"/> - 重置按鈕
<input type="reset"/> - 普通按鈕
<input type="button" value=""/>
需要同JS一起使用.
其他標籤
| 標籤 | 作用 |
|---|---|
<b/> |
加粗 |
<s/> |
|
<u/> |
下劃線 |
<i/> |
斜體 |
<pre/> |
原樣輸出 |
<sub/> |
下標下標 |
<sup/> |
上標上標 |
<p/> |
段落標籤(比br標籤多一行) |
<div/> |
自動換行(結合CSS) |
<span/> |
不自動換行(結合CSS) |
HTML頭標籤
<title>: 網頁顯示標題<meta>: 頁面設置
<meta name="keywords" content=""><meta http-equiv="refresh" content="3;url=current.html" />
<base/>: 設置當前頁面所有鏈接默認地址
<base target="_blank"/>: 統一設置超鏈接打開方式<link/>：引入外部文件,如CSS等