知識點: HTML、HTML文本排版、表格、超級鏈接、表單和框架
-
HTML元素語法：
- HTML元素以開始標籤起始(<標籤名>)，以結束標籤終止</標籤名>；
- 元素內容是開始標籤與結束標籤之間的內容，某些標籤具有空內容，如：
<p></p>； - 空元素在開始標籤中進行關閉，大多數HTML元素可擁有屬性，如
<p id="test"></p>。
-
HTML屬性：
- HTML標籤可以擁有屬性，屬性提供了有關HTML元素的更多信息
- 屬性總是以名稱/值對的形式出現，比如：name=“value”
- 屬性總是在HTML元素的開始標籤中規定，屬性和屬性值對大小寫不敏感
- 元素的屬性可以改變其文本內容的樣式與佈局
-
HTML的style樣式：
- style屬性提供了一種改變所有HTML元素的樣式的通用方法，樣式是一種新的首選的改變HTML樣式的方式。
- 通過HTML樣式，能夠通過使用style屬性直接將樣式添加到HTML元素，如：
<p style="background-color:red"></p>，或是在頭部引入，如：<style type="text/css">樣式內容</style>，或者間接地引入獨立的樣式表中（CSS文件）的樣式，如：<link href="引入的文件路徑" rel="stylesheet">。
-
HTML常用標籤：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
<style>用於定義內部樣式</style>
<h1~h6>標題標籤</h1~h6>
<hr /> <!--(註釋標籤)生成一條水平線-->
<br /> <!--換行標籤-->
<p>段落標籤</p>
<a href="url">超鏈接，用於跳轉到其它網站</a>
<i>斜體字樣</i>
<b>粗體字樣</b>
<s>刪除線</s>
<u>下劃線</u>
<sup>上標</sup>
<sub>下標</sub>
<div>塊分區</div>
<span>行內分區</span>
<label>常與input一起使用</label>
<img src="url"> <!--引入圖片-->
<table>定義表格</table>
<tr>定義錶行</tr>
<th>定義表頭<th>
<td>定義單元格</td>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<ul>
<li>無序列表1</li>
<li>無序列表2</li>
</ul>
<input> <!--文本輸入框-->
<form>將用戶輸入的數據提交給後臺</from>
</body>
</html>
- 一個完整的表格:
<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
</tr>
</tbody>
</table>
表單
form： HTML表單用於蒐集用戶的輸入，可以指定不同類型的input元素、複選框、單選框、提交按鈕等等。
表單屬性（form）：
- action：定義在提交表單時執行的動作，若省略則默認提交到當前頁面；
- method：規定表單提交時所使用的的HTTP方法（post、get）；
input： 最重要的表單元素，根據不同的type值有不同的形態：text–》文本、radio–》單選框、checkbox–》複選框、submit–》提交
- name屬性：如果要被正確的提交，每一個提交的字段必須設置一個name屬性
<!DOCTYPE html>
<html>
<body>
<form action="index.php" method="post"> <!--使用post方法提交到index.php文件-->
<label>姓名：<!--文本-->
<input type="text" name="username">
</label>
<br />
<label>性別：<!--單選框-->
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</label>
<br />
<label>愛好：<!--複選框-->
<input type="checkbox" name="sing" value="sing">唱歌
<input type="checkbox" name="playgames" value="playgames">電競
<input type="checkbox" name="basketball" value="basketball">籃球
<input type="checkbox" name="swimming" value="swimming">游泳
</label>
<br />
<input type="submit" value="提交"> <!--提交-->
</form>
</body>
</html>
select： 元素定義下拉列表
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<!--option元素定義帶選擇的選項-->
</select>
button： 定義可以點擊的按鈕
<!--點擊之後彈出“hello world!”-->
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
定義框架： frameset
- 通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱爲一個框架，並且每個框架都獨立於其他的框架。在下面的這個例子中，我們設置了一個兩列的框架集。第一列被設置爲佔據瀏覽器窗口的 25%。第二列被設置爲佔據瀏覽器窗口的 75%。HTML 文檔 “frame_a.htm” 被置於第一個列中，而 HTML 文檔 “frame_b.htm” 被置於第二個列中：
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
結構標記： HTML5所提供的結構標記，專門用於表示常見的網頁結構（即製作佈局），提升佈局代碼的語義性和可讀性
<header></header>：定義文檔的頁眉即頁面頂部信息
<nav></nav>：定義頁面的導航鏈接部分
<section></section>：定義文檔中的節，文檔中主體內容
<article></article> ：定義獨立於文檔的其他部分內容(章、節等)
<footer></footer>：定義某區域的腳註信息，頁面底部內容等
<aside></aside>：多用於側邊欄和相關引用信息等
