html-綜合篇
點擊RSS訂閱查看大圖：
在幾個月前,本人寫過三篇關於html的文章.當我們講解到ASP.net,講到項目的時候發現學生在做網站的前端的時候，html學的怎一個爛字了得。所以，今天我們把html當中的重點內容做一個全面的回顧。
在很多企業面試的時候，尤其是在面試UI（界面層）的面試當中，很多時候要求我們手寫html。當然，這裏要求的是比如跟JavaScript或者是跟CSS結合着去寫。像登錄的界面，或者是寫個表單，表格。諸如此類的面試，主要考查的就是我們對這些基礎的東西，大家熟悉不熟悉。所以，當我們面試程序員或者是美工的時候，這些都是我們需要注意的地方。當然，只要我們靜下心，多敲幾遍，甚至是在紙上多寫幾遍，這樣的面試、筆試還是很容易通過的。
好下面我們先介紹下瀏覽器：
五大瀏覽器：IE【IE6及以下版本（IE7及以上）】、FF(FireFox)、Chrome、Opera、Safari(Apple)
搜狗、騰訊TT、遨遊（Maxthon） 、360瀏覽器、……(不是一個級別)
瀏覽器就是解釋和執行HTML源碼的工具。
同樣的一個IE瀏覽器，不同的版本也會展現出不同的效果，那麼在同一臺電腦上是不讓裝多個IE版本的。我們怎麼辦呢？
一、IETester
htm、html都是靜態頁面，asp、aspx、jsp、php等都是動態頁面。
二、注意的地方
開發工具：
記事本、高級記事本(Editplus、Notepad++、UltraEdit)（推薦）
其他工具：Dreamweaver、Expression Web(FrontPage的改頭換面版) 等快速開發工具，這些工具是給頁面美工用的。開發人員用VisualStudio寫html就夠了。
三、基本通用標籤
註釋使用的是：<!- - - - >
四、注意/title
五、運行時的快捷鍵
接下來介紹下顏色體系的內容：
六、背景顏色
自己搭配顏色：
七、自己調背景色
八、取色
接下來我們說下HTML和XML的聯繫、區別
html與xml相同點：
都是標記語言、註釋都是：<!-- 內容、內容 -->
都可以通過dom編程方式來訪問
都可以通過CSS來改變外觀
html與xml的不同點：
xml比html語法要求更嚴格。
有開始標籤必須有結束標籤、大小寫一致、屬性用雙引號等。
xml側重於數據存儲，html側重於數據展示。趨勢：數據存儲與數據表現相分離(html中只有要顯示的頁面內容，樣式都有CSS來控制,html頁面中不再有<font>等標籤，控制樣式都用CSS)。
xhtml：可擴展超文本置標語言（eXtensible HyperText Markup Language，XHTML），更符合xml語法規範的html。xhtml的出現主要是爲了向xml過度，通過xml+css也能實現很好的頁面。【xhtml要求：全部小寫、有開始結束標籤、屬性用雙引號】
dhtml： Dynamic HTML的簡稱，就是動態的html。 HTML、樣式表和JavaScript 的組合（現在都是dhtml）
接下來我們再來說下html常用標籤：
h標籤（標題），HTML定義了<h1></h1>到<h6></h6>六個h標籤，分別表示不同大小的字體。h1最大，h6最小。
當搜索引擎搜索的時候，用h標籤搜索的概率大於用css方法修飾標題的文章。
<br/>只是回車，<p>是分段。<p>前後會有比較大的空白，而<br/>則沒有。
建議大家把開始結束寫全<p> </p>
<center>川川是狗狗</center>居中顯示.
<b>a</b>粗體，推薦<strong>。<i>b</i>斜體。<u>c</u>帶下劃線。<em>強調，斜體</em>
當搜索引擎搜索的時候，它會認爲放在strong裏面的內容更重要。
<sub>2</sub>下標，如：H<sub>2</sub>O
<sup>2</sup>上標，如：10<sup>2</sup>
<font></font>字體標籤，<font color=“red“ size=“7” face=“隸書”>紅色</font>。color（設置顏色） size（1-7） face（設置字體,設置字體是注意用戶計算機中必須有該字體才能正常顯示）
<hr/> color size（厚度） width（長度） align=left/center/right （默認爲劇中顯示）
<pre> 預格式化 保持本色 （還記得牛逼的三個人麼？呵呵。）
九、讓分割線立起來
前面我們文章當中用過一些個水平線，但是很多時候我們用CSS來實現。
十、噹噹網中的事例
下面我們看下：html編碼（特殊字符）
十一、轉譯符
十二、搜狗拼音輸入法
© ©
® ®
² ²
¥ ¥
³ ³
Html編碼查詢：
http://www.htmlhelp.com/reference/charset/
十三、查字符集
請看下面一道題目：
十四、轉譯符2
接下來我們看下:超鏈接URL的相關內容。
蜘蛛爬蟲就是根據超鏈接爬的，
URL：URL表示資源在網絡中的地址，比如 http://127.0.0.1:80/html/pages/a.htm、ftp://192.168.88.128/b.zip。還有URI的概念，比URL大，有的類中使用URI這種說法，可以暫時看成和URL一樣就行。
超級鏈接：<a href="http：//www.">XXX </a>。
URL:統一資源定位符
URI:統一資源標識符。
十五、target
在新的選項卡中打開，需要設置：
十六、在新選項卡中打開
a標籤的一些常用屬性：href、title、target、name（錨記時用）
十七、title
<a>中還可以嵌套圖片，這樣就是點擊圖片打開連接
十八、點擊圖像到鏈接
十九、去掉邊框
現在要是鏈到內部自己的網站我該怎麼寫呢？
只要在同一個目錄下，可以直接寫文件名。
在a文件夾下的話就寫a文件夾下的文件名，如果要是在它父目錄下的話，就寫..文件名。
相對URL：相對URL表示相對於當前文檔的資源，“/”表示網站根目錄，“../”表示父目錄，“http://www.cnblogs.com/”表示父目錄的父目錄，“./”或者不寫任何斜線表示相對於當前路徑的目錄。站內引用最好用相對URL，這樣域名改變了、目錄改變了都不受影響。
接下來我們再說下錨這個作用：
第一步寫個錨：
第二步寫鏈接到錨：
二十、錨的使用
二十一、錨的使用演示
接着我們說說：圖片
在我們瀏覽網頁的時候，會看到很多的圖片：
二十二、圖片存儲的位置
二十三、圖片當中的兩個重要的屬性
還可以設置圖片的寬和高：
二十四、設置寬和高
那麼，設不設寬和高呢？當我們打開一個頁面的時候，圖片比較的大，一開始是一個小點，後面突然變大了。這種情況就是沒有設置高和寬。
當我們學習了JavaScript，操作圖片的時候，如果不設置圖片的高和寬。那麼，只有當頁面都下載完畢以後，纔可以通過客戶端寫代碼的方式來獲取圖片的高和寬。而如果一開始就設置了圖片的高和寬，則圖片還沒有下載完畢，圖片還沒有下載完畢也可以獲取圖片的高和寬。
下面我們說下：縮略圖
二十五、改變圖片的大小
當我們改變圖片的大小的時候，光該後綴名不行，必須在畫圖這樣的軟件裏面去改。
二十六、製作縮略圖
關於不同的圖片有什麼區別，請大家看下下面的鏈接：圖片格式
以後我們寫程序的時候，自動生成縮略圖，自動加水印，都是真正的把圖片改了。
px (Pixel)單位名稱爲像素，相對長度單位，像素（px）是相對於顯示器屏幕分辨率而言的（隨着屏幕分辨率而變化）,國內推薦； QQ截圖也是使用PX作爲長度寬度單位。
em單位名稱爲相對長度單位。相對於當前對象內文本的字體尺寸，國外使用比較多；如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
接下來我們再看下列表和表格:
dl→definition list(定義列表)，見備註1。
一般可用於名詞解釋之類。
ul→unordered list(無序列表)，注意多個ul嵌套時的寫法。見備註2
大家去一些個網站,找個有二級菜單的網站,用ul和li來實現的.通過CSS來控制。
二十七、具有二級菜單的網站
ol→ordered list(有序列表)，見備註3。
用嵌套ul或ol來模擬二級菜單。見備註4。
<ol>與<ul>都有一個type屬性，用來設置序列的顯示樣式。type的取值可以是：A、a、1、i、I、disc、circle、square。(可用CSS控制ul、ol的type樣式)
插入備註位置：
View
Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> New Document </title> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 </head> 10 11 <body> 12 <!-- 備註1：--> 13 <!--dl用來定義一個普通列表：--> 14 <dl> 15 <dt>河北</dt> 16 <dd>石家莊</dd> 17 <dd>秦皇島</dd> 18 <dt>山西</dt> 19 <dd>太原</dd> 20 <dd>大同</dd> 21 </dl> 22 23 24 <!--備註2--> 25 <ul> 26 <li>北京</li> 27 <li>上海</li> 28 <li>廣州</li> 29 </ul> 30 31 32 <!--備註3--> 33 <ol> 34 <li>北京</li> 35 <li>上海</li> 36 <li>廣州</li> 37 </ol> 38 39 40 <!--備註4--> 41 <ul> 42 <li>aaaaaa</li> 43 <li>bbbbbbb 44 <ol> 45 <li>ol test</li> 46 <li>ol test</li> 47 <li>ol test</li> 48 <li>ol test</li> 49 <li>ol test</li> 50 <li>ol test</li> 51 </ol> 52 </li> 53 <li>aaaaaa1</li> 54 <li>bbbbbbb1 55 <ol> 56 <li>ol test</li> 57 <li>ol test</li> 58 <li>ol test</li> 59 <li>ol test</li> 60 <li>ol test</li> 61 <li>ol test</li> 62 </ol> 63 </li> 64 </ul> 65 66 67 </body> 68 </html>
下面我們再說下表格，很久以前我們在網頁上面佈局都是使用的表格，但是現在使用的越來越少了。
二十八、tr與td
表格：<table></table>爲表格，在內部通過<tr>創建行，<tr>內部通過<td> 創建單元格。可以將table的border屬性設爲0來隱藏表格線。演示常規表格。
填充、間距cellpadding內容和表格邊線之間的距離 cellspacing單元格之間的間距。見備註1.
<tr>的屬性：align，水平對齊，可選值left、right、center；valign，垂直對齊，可選值top、middle、bottom。
<td>也有align和valign。<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>：子標籤默認繼承父標籤的屬性，如果自己單獨指定了屬性，則會覆蓋父標籤的屬性。
還可以使用rowspan(合併行)、colspan（和並列）進行單元格的合併。rowspan、colspan是td的屬性。
一個完整的表格。table、caption、thead、tbody、tfoot、tr、th、td。見備註2. (查找vs2008msdn(目錄-web開發-))
二十九、如何幹掉EditPlus3備份文件
看下下面的練習：
三十、練習1,2
插入練習1,2代碼位置：
View
Code
1 <html> 2 <head> 3 <title>表格練習1，2</title> 4 </head> 5 <body> 6 <ol type="a"> 7 <li>愛</li> 8 <li>水煮魚</li> 9 </ol> 10 11 <ul type="disc"> 12 <li>愛</li> 13 <li>水煮魚</li> 14 </ul> 15 16 <table border="1" width="300"> 17 <tr align="center"> 18 <td><b>姓名</b></td> 19 <td><b>性別</b></td> 20 <td><b>工資</b></td> 21 </tr> 22 <tr> 23 <td>張三</td> 24 <td>男</td> 25 <td>9000</td> 26 </tr> 27 <tr> 28 <td>張三</td> 29 <td>男</td> 30 <td>9000</td> 31 </tr> 32 <tr> 33 <td>張三</td> 34 <td>男</td> 35 <td>9000</td> 36 </tr> 37 <tr> 38 <td>張三</td> 39 <td>男</td> 40 <td>9000</td> 41 </tr> 42 43 </table> 44 45 </body> 46 </html>
三十一、練習3
練習3插入代碼位置：
View
Code
1 <html> 2 <head> 3 <title>表格練習3,4</title> 4 </head> 5 <body> 6 <table border="1"> 7 <tr> 8 <td colspan="3" align="center"><strong>學生成績表</strong></td> 9 </tr> 10 <tr> 11 <td>英語</td> 12 <td>數學</td> 13 <td>語文</td> 14 </tr> 15 <tr> 16 <td>100</td> 17 <td>100</td> 18 <td>100</td> 19 </tr> 20 </table> 21 22 <table border="1" width="400"> 23 <tr> 24 <td colspan="3" align="center"><b>學生基本情況</b></td> 25 </tr> 26 <tr align="center"> 27 <td><b>姓名</b></td> 28 <td><b>性別</b></td> 29 <td><b>專業</b></td> 30 </tr> 31 <tr> 32 <td>劉備</td> 33 <td>男</td> 34 <td rowspan="3">計算機</td> 35 </tr> 36 <tr> 37 <td>孫尚香</td> 38 <td>女</td> 39 </tr> 40 <tr> 41 <td>諸葛亮</td> 42 <td>男</td> 43 </tr> 44 </table> 45 46 47 </body> 48 </html>
三十二、表格當中的其它元素
三十三、控制顯示哪兒部分
三十四、網頁當中的具體的應用
三十五、tfoot標籤
下面我們講解下表單：
網站表單與填表。
<form>標籤爲表單標籤。如果要把數據提交到服務器，則需要將<input>、<textarea>、<select>等表單元素放到form中。
<input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox（複選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。<input type="file" />
下面我們寫個小的表單
三十六、自己寫個小的表單
三十七、只讀
三十八、讓按鈕變灰
三十九、單選按鈕
四十、下拉菜單當中的屬性
那麼，我們後面在JS中講解在客戶端寫省市聯動。
四十一、給下拉菜單分組
分組的大標題，只能看，不能選。
現在很多的網站都自己模擬做下拉菜單，原因就是select應用CSS的時候特別的不友好。但是，在後臺系統並不要求美觀的地方用它還是非常的方便的。
四十二、興趣愛好
四十三、頭像，協議功能
四十四、常用的提交功能
四十五、把常用的興趣愛好圈起來
在選擇性別的時候，點擊男或女周圍的地方也可以選中。
四十六、點擊其它的位置也能選中
四十七、marquee
<!--
direction:left、right、up、down
behavior:scroll、slide、alternate
scrolldelay:滾動的速度。單位爲毫秒數，默認爲85。
-->
四十八、播放音樂，播放視頻功能
具體能不能播放，以及播放器的效果如何，需要看瀏覽器安裝的是什麼插件。
四十九、練習1
練習1代碼演示：
View
Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <title>登錄</title> 5 </head> 6 <body> 7 <form action="" method="get"> 8 <table border="1"> 9 <tr> 10 <td><label for="userName">用戶名：</label></td> 11 <td><input type="text" id="userName"/></td> 12 </tr> 13 <tr> 14 <td>密碼：</td> 15 <td><input type="password"/></td> 16 </tr> 17 <tr> 18 <td>驗證碼：</td> 19 <td><input type="text" size="4" maxlength="4"/><img src="code.jpg"/></td> 20 </tr> 21 <tr> 22 <td> </td> 23 <td><input type="checkbox" id="rp"/><label for="rp">記住密碼</label></td> 24 </tr> 25 <tr> 26 <td> </td> 27 <td><input type="submit" value="登錄"/><input type="reset"/></td> 28 </tr> 29 </table> 30 </form> 31 </body> 32 </html>
五十、練習2
練習2中的性別的name應該一樣，職業的name應該一樣。
怎麼樣點擊按鈕就跳到第二個頁面呢？
Notepad++可以下載插件，使用起來很爽，大家有時間的時候可以研究一下子。
五十一、下載插件
補充一下剛纔沒講的內容：
五十二、默認屬性
五十三、登錄的html代碼
meta標籤包括在head標籤中。主要用來描述頁面自身信息,元信息。
五十四、在哪兒能見到meta
在我們做網站或者說是寫網頁的時候還是非常有必要在自己的網頁裏面加上meta的，如果是做網絡推廣的朋友，簡直是如獲至寶。這樣的話，就會給自己的網站得到非常好的用戶瀏覽。
解決亂碼問題，加上這句話
<meta http-equiv=”content-type” content=”text/html;charset=gb2312”/>
注意自己用的什麼編碼就寫什麼編碼。
作者近期文章列表:
| C#中級進階教程（完全免費，獻給代碼愛好者的最好禮物。注：本作者分享自己精心整理的C#中級進階教程，無任何商業目的。希望與更多的代碼愛好者交流心得，也請高手多多指點！！！） | |
| ASP.net項目 | 圖書商城項目總論 |
| 三層及其它內容 | 遞歸 |
| 三層（一） | |
| 三層相關案例（及常見的錯誤） | |
| 三層實例（內涵Sql CRUD） | |
| 手寫代碼生成器 | |
| SQL數據庫 ADO.net | 數據庫的應用圖解一 |
| 數據庫的應用詳解二 | |
| ADO.NET（內涵效率問題） | |
| ADO.NET實例教學一 | |
| ADO.NET（內含存儲過程講解） | |
| 面向過程，面向對象中高級 | 面向過程，面向對象的深入理解一 |
| 面向過程，面向對象的深入理解二 | |
| 面向對象的深入理解三 | |
| 無處不在的XML | |
| winform基礎 | Winform基礎 |
| winform中常用的控件 | |
| 面向過程 | 三種循環的比較 |
| C#中的方法（上） | |
| 我們常見的數組 | |
| 面向對象 | 思想的轉變 |
| C#中超級好用的類 | |
| C#中析構函數和命名空間的妙用 | |
| C#中超級好用的字符串 | |
| C#中如何快速處理字符串 | |
| 值類型和引用類型及其它 | |
| ArrayList和HashTable妙用一 | |
| ArrayList和HashTable妙用二 | |
| 文件管理File類 | |
| 多態 | |
| C#中其它一些問題的小節 | |
| GDI+ | 這些年我收集的GDI+代碼 |
| 這些年我收集的GDI+代碼2 | |
| HTML概述以及CSS | 你不能忽視的HTML語言 |
| 你不能忽視的HTML語言2精編篇 | |
| 你不能忽視的HTML語言3 | |
| CSS基本相關內容--中秋特別奉獻 | |
| CSS基本相關內容2 | |
| JavaScript基礎 | JavaScript基礎一 |
| javascript基礎二JavaScript DOM編程 | |
| jQuery | jQuery(內涵: jquery選擇器) |