技術標籤：JavaWeb期末複習htmlhtml5java

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 表格標籤