------- Windows Phone 7手機開發、.Net培訓、期待與您交流！ ------

?

一、??????????常用HTML標簽及屬性：

body：bgcolor表示背景顏色

<img>：src指明圖片的鏈接地址，alt表示在圖片無法顯示的時候顯示的文字。注意圖片是鏈接的，不是插入的。border屬性指定邊框，border="0"不顯示邊框，width、height屬性知道圖片的顯示大小，如果不指定則是圖片的原始大小。（最好指定width、height，這樣即使圖片還未加載完，也會先占據位置）

縮略圖：如果要在網頁上顯示小圖（比如縮略圖），不要僅僅把大圖設定小的width、height來使圖片變小，因為這樣仍然會下載大圖，導致加載速度慢，增大服務器的壓力。

font：color文字顏色

<center>居中顯示

<h1>~<h6>標題大小

二、??????????常用特殊符號：

&lt; 小于號，less than

&gt; 大于號，greater than；

&nbsp; 空格,no-break space

為什么HTML中<>要用&lt;、&gt;代替？因為<>有特殊的含義

?

三、??????????<br/>和<p>的區別？

回車只是換行，p定義段落，前后會有空白行。

四、??????????URL：資源在網絡中的地址

相對URL：相對于當前文檔的資源，"/"表示網站根目錄，"../"表示父目錄,"../../"表示父目錄的父目錄，"./"或者不寫任何斜線，表示相對于當前路徑的目錄。站內引用最好用相對URL，這樣域名改變了、目錄改變了都不受影響。如：<ahref="a.html"><img src="a.jpg"/></a>

<a>的target屬性：值"_blank"就是在新窗口中打開超鏈接（國內網站大多采用這種方式）；

<a>的錨點：用name屬性給<a>起名字，<a name="last">這是是最后</a>?？梢酝ㄟ^<ahref="#last">轉到最后</a>來跳轉到超鏈接的部分。

?

五、??????????ul和ol

ul：unordered list，無序列表

<ul> ????<li>灌水區</li> ????<li>版務區</li> </ul>

ol：ordered list，有序列表，用的很少

?

table表格

<!--table的用法--> <table border="1"><tr><td>姓名</td><td>年齡</td></tr><tr><td>tom</td><td>20</td></tr><tr align="center"><td>Jim</td><td align="right">23</td></tr> </table>

在<table>內部通過<tr>創建一行，<td>創建單元格。默認table沒有邊框，屬性<table border="1">設置邊框的寬度為1。

<tr>的屬性：align（水平對齊方式），可選值left、righ、center；valign（垂直對齊方式），可選值top、middle、bottom。

<td>也有alig和valign

align對齊方式，如<tr align="center">整行中間對齊，<td align="right">單個單元格右對齊。

子標簽默認繼承父標簽的屬性，也可以單獨指定該屬性，將覆蓋父標簽的屬性。

?

六、??????????表單

表單的作用：將用戶輸入的內容提交到服務器。

<form>：如果要提交數據到服務器，需要把<input>、<textarea>、<select>等表單元素放到form中。

<input >是主要的表單元素，示例：<input type="submit" />。

type的可選值有：submit（提交按鈕）、button（普通按鈕）、checkbox（多選框）、radio（單選按鈕）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、reset（重置按鈕）、text（單行文本框）、textarea（多行文本框）

?

input表單詳解：

subit：點擊submit按鈕表單就會被提交到服務器，中午IE下默認按鈕文本是“提交查詢”，可以設置value屬性修改按鈕的顯示文本。

text：size設置寬度，value為值，maxlength為可以輸入的最大長度，readyonly只讀。推薦<input type="text" readonly="readonly"/>。

checkbox：checked屬性表是否被選中，推薦寫法：<inputtype="checkbox" checked="checked"/>。

radio：相同name屬性的為一組，不同readio設定不同的value值，這樣通過name屬性就知道誰被選中了，不用單獨判斷。

file：使用file，則form的enctype必須設置為multipart/form-data、method屬性為post。

image：src屬性指定圖片的地址，用來美化按鈕。

?

七、??????????select標簽

單行下拉列表框，示例代碼如下：

<select><option value="1">北京</option><option value="2">河南</option><option value="3">山東</option></select>

<option>：<option value="1">北京</option>，北京是顯示的文本，value是值。

將一個option選中：<option value="2"selected="selected">河南</option>

實現“不選擇”：<optionvalue="-1">--不選擇--</option>

實現“多選”：<selectsize="2" multiple="multiple">

<optgroup>：為選項分組，示例代碼如下：

<select><optgroup label="Swedish Cars"><option value ="volvo">Volvo</option><option value ="saab">Saab</option></optgroup> <optgroup label="German Cars"><option value ="mercedes">Mercedes</option><option value ="audi">Audi</option></optgroup></select>

八、??????????textarea

多行文本框，屬性rows、cols控制TextArea的行高和列寬。 給textarea默認值：<textarea>我是默認值</textarea>。

九、??????????label

作用：修飾元素A，就相當于將焦點聚焦到A。代碼示例： ??? <label?for="isMarried">婚否</label>?<input?id="isMarried"?type="checkbox"?/>

點擊“婚否”，等于點擊了id為isMarried的input。

十、??????????filedset

相當于WinForm中的Groupbox效果，將一些控件劃分為一個區域，看起來更規整。

十一、??div

層：<div></div>將內容放到層中，就可以將這些內容當作一個整體進行處理，比如整體隱藏、整體移動。

十二、??span

div是將內容放到一個矩形的區塊中，會影響布局，而span只是將一段內容定義成一個整體進行操作，但不會影響布局顯示。

十三、??練習（登錄頁面）

<form action="index.htm" method="post"><table><tr><td colspan="2" align="center">登錄</td></tr><tr><td>用戶名</td><td><input type="text"/></td></tr><tr><td>密碼</td><td><input type="password"/></td></tr><tr><td colspan="2"><input id="remember" type="checkbox" /><label for="remember">記住我？</label></td></tr><tr><td colspan="2" align="center"><input type="submit" value="登 錄" /></td></tr></table> </form>

十四、??練習（注冊頁面）

<form action="index.htm" method="post"> <table><tr><td colspan="2" align="center">注冊</td></tr><tr><td>用戶名</td><td><input type="text" /></td></tr><tr><td>密碼</td><td><input type="password" /></td></tr><tr><td>重復密碼</td><td><input type="password" /></td></tr><tr><td>省份</td><td><select><option>北京</option><option>重慶</option><option>河南</option></select></td></tr><tr><td>性別</td><td><input type="radio" name="gender" checked="checked" />男<input type="radio" name="gender" />女<inputtype="radio" name="gender" />保密</td></tr><tr><td>職業</td><td><input type="radio" name="job" checked="checked" />學生<input type="radio" name="job" />公司職員<inputtype="radio" name="job" />其他</td></tr><tr><td>愛好</td><td><input type="checkbox" />登山<input type="checkbox" />籃球<input type="checkbox" />足球<inputtype="checkbox" />讀書<input type="checkbox" />游泳</td></tr><tr><td colspan="2" align="center"><input type="submit" value="注冊" /></td></tr> </table> </form>

十五、??CSS

層疊樣式表，用來美化頁面。

三種使用方式：

1.元素內聯，直接將樣式寫在元素的style屬性中，如 <a href="#"style="text-decoration:none;">新浪</a>。

????? 2.頁面嵌入： 在head中加入<styletype="text/css"> a{text-decoration:none;} </style>表示頁面中所有的a都采用指定樣式，適用于樣式復用，減小頁面體積。

3.外部引用：將css內容寫入css后綴的文件，然后在頁面中引用，在head中加入<linktype="text/css" rel="stylesheet"href="style.css"/>，適用于多個頁面共享css。

?

1．常見樣式：

計量單位：px（像素）、百分比、em（相對單位）；

background-color： 背景顏色；

color：文本顏色；

border-style：邊框風格，值：solid（實線）、dotted（點線）等。

border-color：邊框顏色；

border-width：邊框寬度；

實例：style="border-color:red; border-width:1px;border-style:dotted"，它的簡寫形式是：style="border:1pxdotted red"。

display：是否顯示，none(不顯示）、block（顯示為塊元素）、inline（顯示為內聯元素）等。

cursor：鼠標樣式，可選：pointer（手）、text（輸入bean）、wait（忙）、help（幫助）等。

取出li的原點：list-style-type:none;

?

2．CSS選擇器：

（1）class選擇器：

定義一個命名樣式，然后在元素的class屬性指定該名稱，一個元素可以指定多個class名稱，之間以空格隔開。

如：

.hey{color:red;font-size:x-large;} <span class="hey">hello，哈嘍</span>

（2）標簽+class選擇器

針對不同的標簽，可以使用相同樣式名，但是樣式內容可以不一樣。代碼示例：

input.uname{color:Red;}label.uname{text-decoration:underline;} <input type="text" class="uname" /><labelclass="uname">用戶名：甄子丹</label>?

（3）ID選擇器

為指定ID的元素設定樣式，id前加#

?

（4）更多選擇器

1. 關聯選擇器

p strong{background-color:yellow;}?表示p標簽內的strong子標簽使用的樣式，應用如下：

<p><strong>白日依山盡</strong></p>

2．組合選擇器

同時為多個標簽設定同一個樣式

h1,h2,input{border:1px dotted red;}

3．偽選擇器

為標簽的不同的狀態設定不同的樣式

常用的有：

A:visited 超鏈接被訪問過的樣式

A:hover，鼠標停留在超鏈接上時的樣式

A:link 超鏈接未被訪問時的樣式

a:active超鏈接點擊后的樣式

?-------?Windows Phone 7手機開發、.Net培訓、期待與您交流！ ------

總結

以上是生活随笔為你收集整理的黑马程序员 HTML基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。