HTML简单使用
HTML簡單使用
標(biāo)簽 ： 前端技術(shù)
HTML
HTML(Hypertext Marked Language), 即超文本標(biāo)記語言,能夠獨立于各種操作系統(tǒng)平臺(如UNIX/Linux/Windows等)進(jìn)行信息展示.HTML由WEB發(fā)明者Tim Berners-Lee和同事Daniel W.Connolly于1990年創(chuàng)立.
所謂超文本:是因為它可以加入圖片/聲音/動畫/視頻等內(nèi)容(超越了文本的范疇);
所謂標(biāo)記:是因為HTML所有的操作都是通過標(biāo)記實現(xiàn), 每一個HTML文檔都是靜態(tài)的網(wǎng)頁文件,這個文件里面包含了HTML指令代碼,這些指令代碼并不是一種程序語言,它只是一種排版資料顯示位置的標(biāo)記結(jié)構(gòu)語言, 如:<標(biāo)簽名稱>標(biāo)簽內(nèi)容</標(biāo)簽名稱>
HTML規(guī)范
- 一個HTML文件必須有開始標(biāo)簽和結(jié)束標(biāo)簽<html></html>;
- HTML包含head/body兩部分內(nèi)容:
- <head>頁面設(shè)置信息</head>
- <body>頁面顯示內(nèi)容</body>
- HTML標(biāo)簽要有始有終(如<table></table>), 空元素標(biāo)簽需要在標(biāo)簽內(nèi)結(jié)束(如<hr/> <br/>);
- HTML代碼不區(qū)分大小寫;
HTML操作思想
- 一個網(wǎng)頁中可能會有很多數(shù)據(jù), 不同的數(shù)據(jù)需要不同的顯示效果,此時就使用標(biāo)簽把需要展示的數(shù)據(jù)封裝起來,通過修改標(biāo)簽屬性值以實現(xiàn)標(biāo)簽內(nèi)數(shù)據(jù)樣式的變化;
- 一個標(biāo)簽相當(dāng)于一個容器,想要修改容器內(nèi)數(shù)據(jù)樣式,只需要修改容器屬性值.
HTML常用標(biāo)簽
簡單標(biāo)簽
注釋標(biāo)簽
<!-- HTML的注釋 -->注意: 瀏覽器不展示,但查看源代碼時可看到.
文字標(biāo)簽 : 修改文字樣式
<font></font>
| size | 文字的大小(取值范圍1-7) |
| color | 文字顏色[兩種表示方式:英文單詞(red/green/blue)/十六進(jìn)制數(shù)(#ffffff:RGB) |
標(biāo)題標(biāo)簽
<h1></h1> -> <h6></h6> : 依次變小水平線標(biāo)簽
<hr/>
| size | 水平線粗細(xì) 取值范圍 1-7 |
| color | 顏色 |
- 特殊字符: 需要對特殊字符進(jìn)行轉(zhuǎn)義才能在網(wǎng)頁上顯示:
| < | < |
| > | > |
| 空格 | |
| & | & |
| 注冊符? | ® |
| 版權(quán)符? | © |
- 圖像標(biāo)簽
<img src="圖片的路徑"/>
| src | 圖片路徑 |
| width | 圖片寬度 |
| height | 圖片高度 |
| alt | 圖片出錯時顯示的文字 |
- 超鏈接標(biāo)簽
<a href="資源地址">說明</a>
| href | 鏈接資源地址,當(dāng)超鏈接不需要跳轉(zhuǎn)時,設(shè)為# |
| target | 設(shè)置打開的方式[_blank新窗口打開/_self當(dāng)前頁打開(默認(rèn))] |
列表標(biāo)簽
- 層次列表
<dl></dl>: 層次列表
<dt></dt>: 上層內(nèi)容
<dd></dd>: 下層內(nèi)容
- 有序列表
<ol></ol>: 有序列表
| type | 排序方式[1(默認(rèn))/a/i] |
<li></li>: 列表內(nèi)容
<ol type="A"><li>百度</li><li>阿里</li><li>騰訊</li> </ol>- 無序列表
<ul></ul>: 無序列表
| type | 實心圓disc(默認(rèn))/空心圓circle/實心方塊square |
<li></li>: 列表內(nèi)容
<ul type="circle"><li>百度</li><li>阿里</li><li>騰訊</li> </ul>表格標(biāo)簽
- <table></table>: 用于對數(shù)據(jù)進(jìn)行格式化, 使顯示更加清晰
| border | 表格線 |
| bordercolor | 表格線顏色 |
| cellspacing | 單元格距離 |
| width | 表格寬度 |
| height | 表格高度 |
- <caption></caption>: 表格標(biāo)題
- <tr></tr>: 行
| align | 設(shè)置內(nèi)容對其方式[left/center/right] |
- <th></th>: 表格首行列
- <td></td>: 表格內(nèi)容列
- 合并單元格
- rowspan：跨行
<td rowspan="行數(shù)"></td> - colspan：跨列
<td colspan="列數(shù)"></td>
- rowspan：跨行
如果單元格內(nèi)沒有內(nèi)容, 需要使用空格符 占位.
表單標(biāo)簽
<form></form>: 用于向服務(wù)端提交數(shù)據(jù)
| action | 提交地址,默認(rèn)提交到當(dāng)前頁面 |
| method | 提交方式[GET/POST] |
| enctype | 指定發(fā)送到服務(wù)器數(shù)據(jù)的編碼格式[application/x-www-form-urlencoded: 表單數(shù)據(jù)/ multipart/form-data: 文件上傳] |
表單輸入項
每個輸入項中必須要有一個name屬性, 以標(biāo)識該輸入項的key,服務(wù)端獲取表單數(shù)據(jù)時用.
- 文字輸入項：<input type="text"/>
- 密碼輸入項：<input type="password"/>
- 單選按鈕：<input type="radio"/>
兩個按鈕name屬性值相同,且必須有value值,實現(xiàn)默認(rèn)選中:checked="checked".
- 復(fù)選按鈕：<input type="checkbox"/>
屬性描述同radio.
- 文件上傳: <input type="file"/>
- 下拉菜單:
默認(rèn)選擇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一起使用.
其他標(biāo)簽
| <b/> | 加粗 |
| <s/> | 刪除線 |
| <u/> | 下劃線 |
| <i/> | 斜體 |
| <pre/> | 原樣輸出 |
| <sub/> | 下標(biāo)下標(biāo) |
| <sup/> | 上標(biāo)上標(biāo) |
| <p/> | 段落標(biāo)簽(比br標(biāo)簽多一行) |
| <div/> | 自動換行(結(jié)合CSS) |
| <span/> | 不自動換行(結(jié)合CSS) |
HTML頭標(biāo)簽
- <title>: 網(wǎng)頁顯示標(biāo)題
- <meta>: 頁面設(shè)置
- <meta name="keywords" content="">
- <meta http-equiv="refresh" content="3;url=current.html" />
<base/>: 設(shè)置當(dāng)前頁面所有鏈接默認(rèn)地址
<base target="_blank"/>: 統(tǒng)一設(shè)置超鏈接打開方式<link/>：引入外部文件,如CSS等
總結(jié)
- 上一篇： centos5.5 内核升级记录
- 下一篇： 突袭HTML5之WebSocket入门3