黑马程序员 HTML基础
------- Windows Phone 7手機開發、.Net培訓、期待與您交流！ ------
?
一、??????????常用HTML標簽及屬性：
body：bgcolor表示背景顏色
<img>：src指明圖片的鏈接地址，alt表示在圖片無法顯示的時候顯示的文字。注意圖片是鏈接的，不是插入的。border屬性指定邊框，border="0"不顯示邊框，width、height屬性知道圖片的顯示大小，如果不指定則是圖片的原始大小。（最好指定width、height，這樣即使圖片還未加載完，也會先占據位置）
縮略圖：如果要在網頁上顯示小圖（比如縮略圖），不要僅僅把大圖設定小的width、height來使圖片變小，因為這樣仍然會下載大圖，導致加載速度慢，增大服務器的壓力。
font：color文字顏色
<center>居中顯示
<h1>~<h6>標題大小
二、??????????常用特殊符號：
< 小于號，less than
> 大于號，greater than；
空格,no-break space
為什么HTML中<>要用<、>代替？因為<>有特殊的含義
?
三、??????????<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基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [html]html实现页面跳转都有哪些
- 下一篇： 前端学习（2934）：上午回顾