HTML基本語法

學習目標：

掌握HTML 基礎知識

學習內容：

1、 HTML 標題
2、 HTML 段落
3、 HTML 空格
4、 HTML 換行
5、 HTML 表單
6、 HTML 表格

詳細例子：

1、HTML 標題

實體：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

瀏覽器顯示如下：

2、HTML 段落

實體：

<p>This is a paragraph</p>
<p>This is another paragraph</p>

瀏覽器顯示如下：

3、HTML 空格

知識點：

• 一個空格的鍵入
  在HTML網頁中一個空格，我們可以鍵入“空格”鍵即可實作

• 多個HTML空格字符
  如果子啊HTML中想實作多個空格間隙，如果是鍵入多個“空格鍵”，但最終也只顯示一個空格間隙，這個時候就需要真正的空格字符代碼 &nbsp；了，

實體：

好好學習,&nbsp&nbsp天天向上，&nbsp&nbsp&nbspJ.How.Lee

瀏覽器顯示如下：

4、HTML 換行

實體：

<p>This is<br/>a para<br/>graph with line breaks</p>

<br / >標簽在不產生一個新的段落的情況下進行換行，<br / >元素是一個空的 HTML元素，由于關閉標簽沒有任何意義，因此它沒有結束標簽，

區別：< br > 與 <br / >

你也許發現< br > 與 <br / > 很相似，

在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結束標簽（閉合標簽）的 HTML 元素，

即使 < br > 在所有瀏覽器中的顯示都沒有問題，使用 < br /> 也是更長遠的保障，

5、 HTML 表單

5.1 表單是一個包含表單元素的區域

表單元素是允許用戶在表單中（比如：文本域、下拉串列、單選框、復選框等等）輸入資訊的元素，

表單使用表單標簽（< form >）定義，

書寫格式：

<form>
...
	input 元素
...
</form>

5.2 文本域(Text Fields)

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域，

實體：

<form>
登錄名：<input type="text" name="loginname" /><br/>
密&nbsp&nbsp&nbsp碼：<input type="text" name="password" /></form>

瀏覽器顯示如下：

5.3 密碼框（ JPasswordField）

在 HTML 中，把 標簽的 type 屬性設定為 password 可以表示密碼框，

具體語法格式如下：

<input type="password" />

實體：

<form action="login.jsp" method="post" name="myForm">
       密碼:<input type="password" name="psd">
</form>

運行效果如圖所示：

5.4 單選按鈕（Radio Buttons）
當用戶從若干給定的選擇中選取其一時，就會用到單選框，

實體：

<form>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女">女
</form>

瀏覽器顯示如下：

5.5 復選框（Checkboxes）

當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復選框，

實體：

<form>
<input type="checkbox" name="basketball" />籃球<br/>
<input type="checkbox" name="football" />足球<br/>
<input type="checkbox" name="pingpong" />乒乓球<br/>
</form>

瀏覽器顯示如下：

5.6 表單的動作屬性（Action）和提交按鈕

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個檔案，表單的動作屬性定義了目的檔案的檔案名，由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理，

實體：

<form name="input" action="login.jsp" method="get">
用戶名：<input type="text" name="username"/>
提交<input type="submit" value="Submit"/> 
</form>

瀏覽器顯示如下：

6、HTML 表格

6.1 表格

表格由 < table > 標簽來定義，每個表格均有若干行（由< tr > 標簽定義），每行被分割為若干單元格（由 < td >標簽定義），字母 td 指的是表格資料（table data），即資料單元格的內容，資料單元格可以包含文本、圖片、串列、段落、表單、水平線、表格等，

實體：

<table border="1">
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr><td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>

瀏覽器顯示如下：

6.2 表格和邊框屬性

如果不頂用邊框屬性，表格將不顯示邊框，有時這很有用，但是大多數時候，我們希望顯示邊框，

使用邊框屬性來顯示一個帶有邊框的表格：

實體：

<table border="1">
<tr>
<td>Row 1,cell 1</td>
<td>Row 1,cell 2</td>
</tr>
</table>

瀏覽器顯示如下：

6.3 表格的表頭

表格的表頭使用< th > 標簽進行定義，

大多數瀏覽器會把表頭顯示為粗體居中的文本：

實體：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>  

瀏覽器顯示如下：

6.4 表格中的空單元格

在一些瀏覽器中，沒有內容的表格單元格顯示得不太好，如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框，

實體：

<table border="1">
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2,cell 2</td>
</tr>
</table>

瀏覽器顯示如下：

注意：

上例可以被正常顯示出來，但一些瀏覽器對于這個空的單元格的邊框沒有被顯示出來，為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來了，

實體：

<table border="1">
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2,cell 2</td>
</tr>
</table>

瀏覽器顯示如下：

6.5 表格標簽