一、 標簽的簡單使用
1. 基本構成
<html><head><meta /><title><script><body>，例如：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>無標題文檔</title>
<script></script>
</head>
<body>
</body>
</html>
2.<h1>到<h6>，<!--注釋-->，<p>段落</p>，<br />換行，<hr />水平線
<body>
<!--這是注釋-->
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<p>段落一</p>
<p>段落二，下面將換行</p>
<br />
<p>段落三，下面有一條水平線</p>
<hr />
<p>段落四</p>
</body>
顯示效果如圖：
3. <a>鏈接</a>，<input type="button" />按鈕
<body>
<p>下面是一個命名錨（named anchors）</p>
<p> <a href="#mybtton">鏈接到按鈕</a> </p>
<br />
<p>下面是一個URL（網(wǎng)址）鏈接</p>
<p>
<h2><a href="http://hao.#/?src=bm">點擊我將鏈接到“http://hao.#/?src=bm”</a></h2>
</p>
<br /><br /><br /><br />
<p>下面是一個按鈕</p>
<p>
<input name="mybtton" type="button" value="按鈕名稱">
</p>
</body>
效果如圖：
4. 表單標簽
|
標簽 |
描述 |
|
<form> |
定義供用戶輸入的表單 |
|
<input> |
定義輸入域 |
|
<textarea> |
定義文本域 (一個多行的輸入控件) |
|
<label> |
定義一個控制的標簽 |
|
<fieldset> |
定義域 |
|
<legend> |
定義域的標題 |
|
<select> |
定義一個選擇列表 |
|
<optgroup> |
定義選項組 |
|
<option> |
定義下拉列表中的選項 |
|
<button> |
定義一個按鈕 |
例1：<intput type="text" />定義簡單兩個文本輸入域，及<input type="submit" />提交按鈕：
<form action="/example/html/form_action.asp" method="get">
<p>First name:
<input type="text" name="fname" />
</p>
<p>Last name:
<input type="text" name="lname" />
</p>
<input type="submit" value="Submit" />
</form>
效果如圖：（寬度是默認的，貌似是24字符）
注意：input標簽還包括密碼域、文件域等等。
例2：<textarea>多行的文本框</textarea>
<body>
<textarea style="height:100px; background-color:#CCE8CF; width:50%">
1. 文本區(qū)中可容納無限數(shù)量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。
2. 可以通過cols和rows屬性來規(guī)定textarea的尺寸，不過更好的辦法是使用CSS的height和width屬性。
3. 注釋：在文本輸入?yún)^(qū)內的文本行間，用"%OD%OA"（回車/換行）進行分隔。
4. 提示：可以通過標簽的 wrap 屬性設置文本輸入?yún)^(qū)內的換行模式。
</textarea>
</body>
顯示效果如圖：
注意：
（1）<textarea>里面其他標簽都是無效的，比如<br />。
（2）有一個問題，如果把<textarea>放在<form>表單之中，提交其內容，換行效果就會丟失。因為form表單中提交的內容會被編碼：空格轉換成(+)，非字母轉換成%后面跟ASCⅡ碼，回車換行符轉義為(%OD%OA)。
例3：<lable>鼠標點擊文字激活控件</lable>
<body>
<p>請點擊文本標記之一，就可以觸發(fā)相關控件：</p>
<form>
<label for="dog">A.我喜歡小貓 B</label>
<input type="radio" name="opt" id="cat" />
<br /><br />
<label for="cat">B.我喜歡小狗 A</label>
<input type="radio" name="opt" id="dog" />
</form>
</body>
效果如圖：
注意：label中的for屬性值要和按鈕對應，上例我就是特別將A按鈕放在下面一行的。
例4：<fieldset>域集</fieldset>，<legend>域的標題</legend>
<body>
<fieldset>
<legend>健康信息：</legend>
<form>
<label>身高：
<input type="text" />
</label>
<label>體重：
<input type="text" />
</label>
</form>
</fieldset>
</body>
顯示效果如圖：
例5：<select>多選下拉菜單<option>選項</option></select>
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
效果如圖：
例6：<optgroup>標簽定義選項組<option>選項</option></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>
顯示效果如圖：
例7：<input type="checkbox" />復選框
<form>
<p>
<h2>請選擇你喜歡的水果</h2>
</p>
<p>
<input type="checkbox" name="banana" />
香蕉
<input type="checkbox" name="grape" />
葡萄</p>
<p>
<input type="checkbox" name="Litchi_chinensis" />
荔枝
<input type="checkbox" name="red_bayberry" />
楊梅</p>
</form>
顯示效果如圖：
5. 列表標簽
例子：
<body>
<p>有序列表：</p>
<ol>
<li>打開冰箱門</li>
<li>把大象放進去</li>
</ol>
<p>無序列表：</p>
<ul type="circle">
<li>雪碧</li>
<li>可樂</li>
</ul>
<p>定義列表：</p>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ...（首字符會自動縮進）</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... </dd>
</dl>
</body>
顯示效果如圖：
6. 表格標簽
首先說明：瀏覽器對thead, tbody, tfoot和colgroup, col的支持不好，所以很少用，希望未來的XHTML版本會提供更好的支持。
例1：
<table border="1"><!--細邊框-->
<caption>表的標題</caption>
<thead style="color:green"><!--頁眉部分，其實有表頭就夠了，頁眉是個多余的東西-->
<tr>
<th>Month</th><!--表頭-->
<th>Savings</th>
</tr>
</thead>
<tbody style="color:blue; height:100px"><!--表的主體部分,fixfox中height無效-->
<tr> <!--一行-->
<td>January</td><!--一列-->
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot style="color:red"><!--頁腳部分-->
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
在IE中的效果（height：150px設定無效）：
在Firfox中的效果（邊框也變了顏色）：
例2：<colgroup>和<col>
<table width="380px" border="1">
<colgroup span="2" width="40%">
<col style="background:green">
<col style="background:gray">
</colgroup>
<colgroup width="10%" style="background-color:#F6F">
</colgroup>
<colgroup width="10%">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Auther</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>Zollty</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>Duby2</td>
<td>$47</td>
</tr>
</table>
注意：瀏覽器對<colgroup>和<col>的支持不好，大概只支持width, span, 以及style中的background和background-color屬性。效果如圖：
7. 使用CSS和JavaScript
在HTML里面，有3種方式加入CSS：
（1）內嵌（Inline Style）
（2）內部樣式（Internal Style Sheet）
（3）外部樣式表（Extenal Style Sheet）
舉例如下：
<html>
<head>
<STYLE type="text/css"> <!-- 內嵌樣式 -->
H1.s2 {border-width:1; border:solid; text-align:center; color:blue}
</STYLE>
<link href="test.css" rel="stylesheet" type="text/css"> <!-- 外部樣式 -->
</head>
<body style="background-color:#F6F"> <!-- 內嵌樣式 -->
<p class="s1">說大話基金漢鼎</p> <!-- 外部樣式 -->
<H1 class="s2">減肥的驚魂稍定個</H1> <!-- 內部樣式 -->
<H1>科技大廈分接開關</H1>
</body>
</html>
在HTML中使用JavaScript，舉例如下：
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
免費注冊
發(fā)表于 2011-12-23 01:02