Html標簽簡明教程
我要評論概述
1、Html就是超文本標記語言的簡寫，是最基礎(chǔ)的網(wǎng)頁語言
2、Html是通過標簽來定義的語言，代碼都是由標簽所組成
3、Html代碼不用區(qū)分大小寫
4、Html代碼由<html>開始</html>結(jié)束。里面由頭部分<head></head>和體部分<body></body>兩部分組成
5、頭部分是給Html頁面增加一些輔助或者屬性信息
6、身體部分是真正存放頁面數(shù)據(jù)的地方
多數(shù)標簽都是有開始標簽和結(jié)束標簽，其中有個別標簽因為只有單一功能，或者沒有要修飾的內(nèi)容，可以在標簽內(nèi)結(jié)束。例如<br />
想要對被標簽修飾的內(nèi)容進行更豐富的操作，就用到了標簽中的屬性，通過對屬性的改變，增加了更多的效果選擇。
屬性與屬性值之間用”=”連接，屬性值可以用雙引號或單引號或者不用引號，一般都會用雙引號?；蛘吖疽?guī)定書寫規(guī)范
格式：
<標簽名 屬性名=“屬性值”>數(shù)據(jù)內(nèi)容</標簽名>
<標簽名 屬性名=“屬性值”/>
操作思想：
為了操作數(shù)據(jù)，都需要對數(shù)據(jù)進行不同的標簽封裝，通過標簽中的屬性對封裝的數(shù)據(jù)進行操作，標簽就相當于一個容器，對容器中的數(shù)據(jù)進行操作，就是在不斷的改變?nèi)萜鞯膶傩灾怠?/p>
字體標簽：<font>
例：<font size=5 color=red>字體標簽示例</font>
注：簡單顏色可以直接寫對應(yīng)的英文，復(fù)雜的顏色用16進制表示，表現(xiàn)形式#FF0000兩個數(shù)為一組，按紅、綠、藍排列，如：#00FF00表示綠色，建議用工具選取
標題標簽：<h1><h2>…<h6>
因為標題是文本中常用的內(nèi)容，為了方便操作而定義，使文章排版更加清晰。
特殊字符：
如果要在網(wǎng)頁上顯示一些特殊符號，比如< > &等，因為這些符號在代碼中會被瀏覽器識別并解釋，所以用一些特殊的方式來表示
列表標簽： <dl>
<dt>：上層標簽
<dd>：下層標簽
<dl>
<dt>上層項目</dt>
<dd>下層項目</dd>
<dd>下層項目</dd>
<dd>下層項目</dd>
</dl>
列表中項目符號對應(yīng)的標簽
<ol>：數(shù)字標簽(a A I i 1 )
<ul>：符號標簽(circle disc square)
<li>：具體項目內(nèi)容標簽：此標簽在<ol><ul>中有效
通過type屬性修改項目符號，如果想做出效果更好的列表，如：黑色圓點用圖片表示，就會用到CSS。
例：
<ol type="1">
<li>游戲名稱</li><code></code>
<ol type="a">
<li>War1</li>
<li>War2</li>
<li>War3</li>
</ol>
<li>游戲說明</li>
<ol type="a">
<li>War1INTRO</li>
<li>War2INTRO</li>
<li>War3INTRO</li>
</ol>
</ol>
圖像標簽： <img>
<img src=”../dir/file” alt=”說明文字" height width border/>
src屬性中可用兩個點（../）代表上層目錄
alt屬性中的說明文字在鼠標懸停和圖片加載失敗時顯示
圖像地圖：用<img>封裝好圖像后，切換到DW設(shè)計視圖，在屬性中選擇熱點區(qū)域形狀并在圖像上拖動出一塊熱點區(qū)域，用熱點區(qū)域鏈接某個資源。在頁面中點擊熱點區(qū)域就會跳轉(zhuǎn)到相應(yīng)資源。
表格標簽： <table>
組成：
標題標簽： <caption>給表格提供標題。
表頭標簽： <th> ，一般對表格的第一行或者第一列進行格式化，就是粗體顯示，并不常用。
行標簽： <tr>
單元格標簽： <td> ，加載行標簽的里面，可以簡單理解為，先有行，再在行中加入單元格。
格式：
<table border="10" width="40%">
<caption>表格標題</caption>
<tbody><!--為表格分體-->
<tr><!--第一行-->
<th colspan="2">姓名</th>
<th>年齡</th>
</tr>
</tbody>
<tbody>
<tr align="center"><!--第二行-->
<td>張三</td>
<td>李四</td>
</tr>
</tbody>
</table>
屬性：
<table>
cellpadding：規(guī)定單元邊沿與其內(nèi)容之間的空白。
cellspacing：規(guī)定單元格之間的空白。
<td>
rowspan：規(guī)定單元格可以橫跨的行數(shù)。
colspan：規(guī)定單元格可以橫跨的列數(shù)。
注：
table標簽中默認都有一個tbody標簽 thead、tbody、tfoot
瀏覽頁面時，瀏覽器解析由table標簽封裝的頁面數(shù)據(jù)時，讀到</table>表格結(jié)束標記才會顯示數(shù)據(jù)，若封裝頁面數(shù)據(jù)的表格很大，沒讀到結(jié)束標記就不顯示任何數(shù)據(jù)，用戶體驗不佳，所以將表格分為多個部分，讀一個</tbody>就顯示一部分。用tbody將表格分體
超鏈接標簽： <a>
兩種用法：
一、超鏈接 <a href=””>
<a href="<a target="_blank">新浪</a>
<!--href
屬性值可以是url，也可以是本地文件target屬性是指定在哪個窗口或者幀中打開.-->
二、定位標記 <a name=””>
一般在本頁面中使用，當網(wǎng)頁內(nèi)容過長，定位標記會比拖動滾動條方便快捷。
注：定位標記要和超鏈接結(jié)合使用才有效。使用標記時一定在href值的開始加入#標記名。
例：
<a name="target">標記位置</a>
<p>......
<!--很多空行制造網(wǎng)頁過長的效果-->
<a href="#target">返回標記</a>
郵件鏈接：
<a href="<a href="mailto:111@qq.comt">mailto:111@qq.comt</a>">聯(lián)系我們</a>
迅雷鏈接：
<a href="thunder://abcdef">妹子.wav</a>
屬性：
<table>
cellpadding：規(guī)定單元邊沿與其內(nèi)容之間的空白。
cellspacing：規(guī)定單元格之間的空白。
<td>
rowspan：規(guī)定單元格可以橫跨的行數(shù)。
colspan：規(guī)定單元格可以橫跨的列數(shù)。
注：
table標簽中默認都有一個tbody標簽 thead、tbody、tfoot
瀏覽頁面時，瀏覽器解析由table標簽封裝的頁面數(shù)據(jù)時，讀到</table>表格結(jié)束標記才會顯示數(shù)據(jù)，若封裝頁面數(shù)據(jù)的表格很大，沒讀到結(jié)束標記就不顯示任何數(shù)據(jù)，用戶體驗不佳，所以將表格分為多個部分，讀一個</tbody>就顯示一部分。用tbody將表格分體
超鏈接標簽： <a>
兩種用法：
一、超鏈接 <a href=””>
<a href="<a target="_blank">新浪</a>
<!--href
屬性值可以是url，也可以是本地文件target屬性是指定在哪個窗口或者幀中打開.-->
二、定位標記 <a name=””>
一般在本頁面中使用，當網(wǎng)頁內(nèi)容過長，定位標記會比拖動滾動條方便快捷。
注：定位標記要和超鏈接結(jié)合使用才有效。使用標記時一定在href值的開始加入#標記名。
例：
<a name="target">標記位置</a>
<p>......
<!--很多空行制造網(wǎng)頁過長的效果-->
<a href="#target">返回標記</a>
郵件鏈接：
<a href="<a href="mailto:111@qq.comt">mailto:111@qq.comt</a>">聯(lián)系我們</a>
迅雷鏈接：
<a href="thunder://abcdef">妹子.wav</a>
表單標簽： <form>
表單標簽是最常用的標簽，用于與服務(wù)器端的交互。
<input>：輸入標簽；接受用戶輸入信息
其中type屬性指定輸入標簽的類型
文本框 text：輸入的文本信息直接顯示在框中。
密碼框 password：輸入的文本以圓點或者型號的形式顯示。
單選框 radio：如：性別選擇。
復(fù)選框 checkbox：如：興趣選擇。
隱藏字段 hidden：在頁面上不顯示，但在提交的時候隨其他內(nèi)容一起提交。
提交按鈕 submit：用于提交表單中的內(nèi)容。
重置按鈕 reset：將表單中填寫的內(nèi)容設(shè)置為初始值
按鈕 button：可以為其自定義事件。
文件上傳 file ：后期擴展內(nèi)容，會自動生成一個文本框，和一個按鈕。
圖像 image 它可以替代 submit 按鈕
<select>：選擇標簽，提供用戶選擇內(nèi)容。如：用戶所在省份。size屬性為顯示項目個數(shù)。
<option>：子項標簽，屬性 selected 沒有屬性值，加在子項上，其中一個子項上，子項就變成默認被選項。
<textarea>：多行文本框，如：個人信息描述。
<label>：用于給各元素定義快捷鍵。
for 屬性：指定快捷鍵作用的表單元素。必須與要作用的表單元素的 id 值相同。
accesskey 屬性：指定快捷鍵，此快捷鍵需要和 alt 鍵組合使用。
表單提交：
1、先定義 form 表單中的 action屬性值，指定表單數(shù)據(jù)提交的目的地(服務(wù)端)。
2、明確提交方式，通過指定 method 屬性值。如果不定義，那么 method 的值默認是 get。
get和post這兩種最常用的提交方式的區(qū)別：
1、get提交將數(shù)據(jù)顯示在地址欄，對于敏感信息不安全。post提交不顯示在地址欄。
2、地址欄中存放的數(shù)據(jù)是有限的，所以 get 方式對提交的數(shù)據(jù)體積有限制。post可以提交大體積數(shù)據(jù)。
3、對提交數(shù)據(jù)的封裝方式不同：get：將提交數(shù)據(jù)封裝到了消息頭前面，請求行中。post：將提交的數(shù)據(jù)封裝到消息頭后，數(shù)據(jù)體中。
其他標簽
<pre></pre> ：此標簽內(nèi)封裝的文本數(shù)據(jù)格式將保持原樣，包括空格和縮進等格式。常用于頁面中顯示帶有縮進層次的代碼。
<p></p> ：段落標簽，兩個段落之間帶有空行
<b>加粗 <strong>加粗 <i>斜體 <u>下劃線 <sub>下標 <sup>上標
<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>此標簽內(nèi)可以讓內(nèi)容動起來，scroll滾動穿過/alternate來回彈/slide一下摔死： <form>
表單標簽是最常用的標簽，用于與服務(wù)器端的交互。
<input>：輸入標簽；接受用戶輸入信息
其中type屬性指定輸入標簽的類型
文本框 text：輸入的文本信息直接顯示在框中。
密碼框 password：輸入的文本以圓點或者型號的形式顯示。
單選框 radio：如：性別選擇。
復(fù)選框 checkbox：如：興趣選擇。
隱藏字段 hidden：在頁面上不顯示，但在提交的時候隨其他內(nèi)容一起提交。
提交按鈕 submit：用于提交表單中的內(nèi)容。
重置按鈕 reset：將表單中填寫的內(nèi)容設(shè)置為初始值
按鈕 button：可以為其自定義事件。
文件上傳 file ：后期擴展內(nèi)容，會自動生成一個文本框，和一個按鈕。
圖像 image 它可以替代 submit 按鈕
<select>：選擇標簽，提供用戶選擇內(nèi)容。如：用戶所在省份。size屬性為顯示項目個數(shù)。
<option>：子項標簽，屬性 selected 沒有屬性值，加在子項上，其中一個子項上，子項就變成默認被選項。
<textarea>：多行文本框，如：個人信息描述。
<label>：用于給各元素定義快捷鍵。
for 屬性：指定快捷鍵作用的表單元素。必須與要作用的表單元素的 id 值相同。
accesskey 屬性：指定快捷鍵，此快捷鍵需要和 alt 鍵組合使用。
表單提交：
1、先定義 form 表單中的 action屬性值，指定表單數(shù)據(jù)提交的目的地(服務(wù)端)。
2、明確提交方式，通過指定 method 屬性值。如果不定義，那么 method 的值默認是 get。
get和post這兩種最常用的提交方式的區(qū)別：
1、get提交將數(shù)據(jù)顯示在地址欄，對于敏感信息不安全。post提交不顯示在地址欄。
2、地址欄中存放的數(shù)據(jù)是有限的，所以 get 方式對提交的數(shù)據(jù)體積有限制。post可以提交大體積數(shù)據(jù)。
3、對提交數(shù)據(jù)的封裝方式不同：get：將提交數(shù)據(jù)封裝到了消息頭前面，請求行中。post：將提交的數(shù)據(jù)封裝到消息頭后，數(shù)據(jù)體中。
其他標簽
<pre></pre> ：此標簽內(nèi)封裝的文本數(shù)據(jù)格式將保持原樣，包括空格和縮進等格式。常用于頁面中顯示帶有縮進層次的代碼。
<p></p> ：段落標簽，兩個段落之間帶有空行
<b>加粗 <strong>加粗 <i>斜體 <u>下劃線 <sub>下標 <sup>上標
<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>此標簽內(nèi)可以讓內(nèi)容動起來，scroll滾動穿過/alternate來回彈/slide一下摔死
今天就寫到這，再有其它HTML標簽需要學(xué)習下回再加上，持續(xù)更新。
相關(guān)文章
html頁面實現(xiàn)過兩秒跳轉(zhuǎn)至其他頁面的方法
html頁面如何實現(xiàn)過兩秒跳轉(zhuǎn)至其他頁面，在本文主要是通過refresh及URL兩個屬性實現(xiàn)，具體示例代碼如下，感興趣的朋友可以參考下2013-10-22- 對HTML JS沒有影響?？梢詫憂多個屬性。只要定義的屬性名別跟原有默認屬性同名就行。這種自定義的屬性，瀏覽器不會去解析2013-10-22
- 雖然HTML5沒有完全顛覆HTML4，但是它們也有一些不同。本文整理了一些可以看得見的區(qū)別，先掌握一些即可，等全部支持后再細細研究也不遲，感興趣的朋友不要錯過2013-10-20
- html的基本使用包括鏈接、多視窗口FRAMES、樣式表、span和div等等，在本文已給出詳細的使用介紹，感興趣的朋友可以參考下，希望對大家有所幫助2013-10-18
html讓局部強制出現(xiàn)滾動條不破壞整體的樣式和布局
局部出現(xiàn)滾動條,這樣就不會破壞整體的樣式和布局了，下面有個不錯的示例，大家可以拷貝代碼到文本文檔修改文本后綴名,txt 為 .html 預(yù)覽效果2013-10-18- 用html5開發(fā)移動應(yīng)用是最好的選擇。然而，每一款手機有不同的分辨率，不同屏幕大小，如何使我們開發(fā)出來的應(yīng)用或頁面大小能適合各種高端手機使用呢2013-10-17
- 能在html文檔中遇到極大的ol列表可能性不大，本文只是純粹技術(shù)探討，感興趣的朋友可以了解下2013-10-14
HTML5 canvas畫矩形時出現(xiàn)邊框樣式不一致的解決方法
HTML5畫圖發(fā)現(xiàn)里面畫矩形的函數(shù)畫出來的邊框出現(xiàn)了樣式不一致的問題，下面把解決問題的思路分享給大家，感興趣的朋友不要錯過2013-10-14解決html 圖片img加超鏈接后產(chǎn)生難看的藍色邊框問題
html 圖片img加了超鏈接之后產(chǎn)生難看的藍色邊框該怎么解決呢？在接下來的文章中將為大家介紹下詳細的解決方法，感興趣的朋友可以參考下2013-10-14