HTML 簡介

HTML 簡介

1.Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示它們。覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容。

2.

My First Heading

My first paragraph.

My first paragraph.

之間的文字描述網頁

# 與

之間的文字是可見的頁面內容

# 與 之間的文字被顯示為標題

#

與 之間的文字被顯示為段落

透過

標籤進行定義的。

This is a link

HTML 影像

HTML 影像是透過 標籤進行定義的。

HTML 元素語法

HTML 元素以開始標籤起始

HTML 元素以結束標籤終止

元素的內容是開始標籤與結束標籤之間的內容

元素的內容是開始標籤與結束標籤之間的內容

empty content）

空元素在開始標籤中關閉（以開始標籤的結束而結束）

大多數HTML 元素可擁有屬性

 

空的HTML 元素

沒有內容的HTML 內容稱為空元素

元素。空元素是在開始標籤中關閉的。

 

就是沒有關閉標籤的空白元素（
標籤定義換行）。

 

在 XHTML、XML 以及未來版本的 HTML 中，所有元素必須關閉。

 

在開始標籤中加入斜杠，例如

，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。

即使

在所有瀏覽器中都是有效的，但使用
其實是更長遠的保障。

 

HTML 居中

擁有對齊方式的附加資訊。

擁有關於背景顏色的附加資訊。

HTML 水平線

標籤在 HTML 頁面中建立水平線。

---

hr 元素可用來分隔內容。

 

 

始終為屬性值加引號

屬性值應始終包含在引號內。雙引號是最常用的，不過使用單引號也沒問題。

在某些個別的情況下，例如屬性值本身就含有雙引號，那麼您必須使用單引號，例如：

name='Bill "HelloWorld" Gates'

 

使用空的段落標記

 
使用空的段落標記

去插入一個空白行是個壞習慣。用 標籤代替它！

如果您希望在不產生一個新段落的情況下進行換行（新行），請使用

標籤：

This is

a para

graph with line breaks

元素是一個空的 HTML 元素。由於關閉標籤沒有任何意義，因此它沒有結束標籤。

  

預格式文字<p></p>此例示範如何使用 pre 標籤對空白行和空格進行控制。 <p></p> <p></p><p></p><p>這是                             >>>>>>>>>>> 預格式文字。 </p><p>它保留了      空格              且保留了      空格</p><p>和換行。                        且有轉換。 </p><p> </p><p>pre 標籤很適合顯示電腦程式碼</p><p> </p><p>位址</p><p></p>此例示範如何在 HTML 檔案中寫位址。 <p> </p><address>
<p>唐老鴨的地址：<br></p>
<p><br></p>
<p>Donald Duck<br></p>
<p>BOX 555<br>阿</p>
<p> </p>
</address> <p></p><p><br> </p><p></p>W3School 的地址： <p></p><p></p><p></p><address>  用戶服務信箱<p><a href="mailto:service@w3school.com.cn"></a><br>  上海贏科投資有限公司</p>
<p><br>  金橋開發989 號地址</p>
<p> <br></p>Donald Duck <p></p>
</address>BOX 555<p>Disneyland</p><p>USA</p><p> </p><p>用戶服務信箱</p><p>上海贏科投資有限公司</p> UN<p></p><p></p>WWW <p></p><p> </p><p>文字方向</p><p></p><p></p>Here is some Hebrew text<p></p><p>text<abbr title="United Nations"></abbr>Hereis text</p> <p>這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。 <acronym title="World Wide Web"></acronym></p><p></p><p>使用 blockquote 元素的話，瀏覽器會插入換行和外邊距，而 q 元素不會有任何特殊的呈現。 </p><p><br></p><p>HTML 樣式實例- 背景顏色</p><p>background-color 屬性為元素定義了背景顏色：</p><p></p><p></p><h2 style="background-color:red">This is a </h2><p></p><p style="background-color:green"> </p><p>font -family、color 以及font-size 屬性分別定義元素中文字的字體系列、顏色和字體尺寸：</p><p>A heading</p><p></p><h1 style="font-family:verdana"></h1>A paragraph.<p></p><p style="font-family:arial;color:red;font-size:20px;">text-align 屬性規定了元素中文本的水平對齊方式：</p><p>This is a heading</p><p></p><h1 style="text-align:center"> </h1>將圖像作為連結<p></p><p></p><p><a href="../example/html/lastpage.html" tppabs="http://www.w3school.com.cn/example/html/lastpage.html"></a></p> <p> 標籤進行定義。 <img  border="0" src="../i/eg_buttonnext.gif" tppabs="http://www.w3school.com.cn/i/eg_buttonnext.gif" alt="HTML 簡介" ></p><p></p><p></p><p></p>Heading<p>           >>>>>>>>注意</p><th>
<p> </p>
<table border="1">row 1, cell 1<p></p>
<tr>
<p>row 1, cell 2</p>
<th> </th>
<p></p>
<th></th>
<p></p>
</tr>row 2, cell 1<p></p>
<tr>
<p>row 2, cell 2</p>
<td></td> <p>table border="1"></p>
<td> </td>
<p></p>
</tr>row 1, cell 1<p></p>
<tr>
<p>row 1, cell 2</p>
<td></td>
<p></p>
<td></td> <p></p>
</tr>
<p></p>
</table>
<p> </p>
<p>無序列表:</p>
<p></p>
<h4>一個無序列表：</h4>
<p></p>
<ul>
<p>  </p>
<li>咖啡</li> <p> </p>
<li> </li>
<p></p>
<li> </li>有序列表:<p></p>
</ul>一個有序列表：<p></p>
<p></p>
<p></p>
<h4>  </h4>咖啡<p></p>
<ol>  茶<p></p>
<li>  <p></p>
<li>茶</li>
<p> </p>
<li>
<p>Coffee</p>
</ol>
<p></p>Black hot drink<p></p>
<p></p>
<dl> Milk<p></p>
<dt></dt>White cold drink<p></p>
<dd></dd>
<p></p>
<dt></dt>表單<p></p>
<dd>表單是一個包含表單元素的區域。 </dd>表單元素是允許使用者在表單中（例如：文字域、下拉清單、單選框、複選框等等）輸入資訊的元素。 <p></p>
</dl>表單使用表單標籤（）定義。 <p><br>輸入</p>
<p>多數情況下被用到的表單標籤是輸入標籤（</p>）。輸入類型是由類型屬性（type）定義的。 <p></p>文字域<p></p>當使用者要在表單中鍵入字母、數字等內容時，就會用到文字域。 <p></p>
<form> <p></p>
<p><input>First name:</p>
<p></p>
<p></p>
<p></p>
<p>Last </p>
</form>
<form>
<p></p>
<p><input type="text" name="firstname"> Male    name和value什麼意思？ </p>
<p><br></p>
<p></p> Female<p><input type="text" name="lastname"></p>
<p></p>
</form>複選框<p><br></p>
<p> ave a car</p>
<p></p>
<form>
<p>表單的動作屬性（Action                         什麼意思？ <input type="radio" name="sex" value="male"></p>Username:<p><br></p>
<p><input type="radio" name="sex" value="female"></p>          value是什麼意思？ <p></p>
</form>
<p></p> <p></p>
<form>實例：<p>簡單的下拉清單<input type="checkbox" name="bike"></p>本例示範如何在 HTML 頁面中建立簡單的下拉列錶框。下拉列錶框是一個可選清單。 <p></p>
<p><br></p>
<p><input type="checkbox" name="car"></p>
<p>Volvo</p>
<p></p>
</form>Saab<p></p>
<p></p>
<form name="input" action="html_form_action.asp" method="get">FiatSaab<p></p>
<p> <input type="text" name="user"></p>
<p><input type="submit" value="Submit">文本域</p>
<p>本例示範如何建立文本域（多行文字輸入控制項）。使用者可在文字網域中寫入文字。可寫入字元的字數不受限制。 </p>
</form>
<p></p>
<p>This example cannot be edited</p>
<p>because our editor uses a textarea</p>
<p>for input,</p> <p></p>
<form> <p><select name="cars"></select></p>
<p><option value="volvo">The cat was playing in the garden.</option></p>創建按鈕<p><option value="saab"></option></p>
<p><option value="fiat" selected></option></p>
<p><option value="audi"></option>創建框</p>
<p></p>
<p></p>
</form> 身高：<p></p>
<p></p>
<p>體重： </p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p> <p></p>帶有輸入框和確認按鈕的表單<p></p>
<p> : </p>
<p><textarea rows="10" cols="30"></textarea></p>  <p></p>
<p></p>
<p></p>
<form>帶有複選框的表單<p><input type="button" value="Hello world!"></p>
<p>I have a bike:</p>
</form>
<p></p>
<p></p>
<fieldset>
<p>I have a car:<legend> </legend></p>
<p></p>
<form>
<p><label> <input type="text"></label></p>
<p><label><input type="text">帶有單選按鈕的表單</label></p>
<p></p>
</form>Male:<p>有單選按鈕的表單</p>
</fieldset>
<p> </p>
<p></p>
<p></p>
<form action="http://www.w3school.com.cn/example/html/form_action.asp" method="get">
<p></p>
<p>垂直的表頭： <input type="text" name="fname"></p>
<p></p>
<p><input type="text" name="lname"></p>
<p>  <input type="submit" value="Submit">姓名</p>
<p></p>
</form>  Bill Gates<p></p>
<p></p>
<form name="input" action="http://www.w3school.com.cn/html/html_form_action.asp" method="get">  Bill Gates<p></p>
<p>  <input type="checkbox" name="vehicle" value="Bike" checked>555 77 854</p>
<p><br></p>
<p></p>
<p><input type="checkbox" name="vehicle" value="Car"></p>
<p>  </p>
<th>電話</th>
<p>  </p>
<td>555 77 855</td>
<p></p>
<p> 54</p>
<p>      電話555 77 855</p>
<p></p>
<p></p>有標題的表格<p></p>本例示範一個有標題(caption) 的表格<p><br></p>
<p></p>
<p>我的標題</p>
<p></p>
<table border="6">橫跨兩列的單元格：<p></p>
<caption></caption>
<p></p>
<h4></h4> 電話<p></p>
<table border="1"> <p></p>
<tr>
<p>橫跨兩行的儲存格：</p>
<th></th>
<p></p>
<th colspan="2"></th>  電話<p></p>
</tr> </table>
</table>
</form>
</th>