自學html的回顧（1/1）
- HTML概述
- 基本結構
- 基本标簽
- 表格
- 超連結
- 背景
- 清單
- 表單
- id屬性、div和span的重要性
HTML概述
html是超文本編輯語言，由大量标簽組成，每個标簽都有開始和結束，語句較為松散，這套語言是由W3C（世界網際網路聯盟）定制的一套規範。
基本結構
普遍的系統結構分為兩種：
1、B/S結構：
浏覽器/伺服器的結構
優點：更新快
缺點：速度慢、使用者體驗不好、界面不美觀
2、C/S結構：
用戶端/伺服器的結構
優點：速度快、界面好
缺點：更新麻煩，維護成本高
基本标簽
一個基本的html代碼組成是由html、head、body、title标簽組成，以html開始和結束，頭部主要寫标題，身體部分主要寫網頁的内容。而标簽就是幫助建構網頁的重要組成部分。
<html>
<head>
<title>我的首頁</title>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<h1>第一标題</h1>
<h2>第二标題</h2>
<h3>第三标題</h3>
<h4>第四标題</h4>
<h5>第五标題</h5>
<h6>第六标題</h6>
<br>換行
<pre>預留文本格式</pre>
<br>
<hr color="green" width="20%"></hr>
<del>删除字</del>
<ins>插入字</ins>
<b>粗體字</b>
<i>斜體字<i/>
10<sup>2</sup>
10<sub>2</sub>
<font color='red'>紅色字</font>
b<a>c<!--實體符号以&開始,以;結束。lt是<,gt是>,nbsp是空格-->
</body>
</html>
表格
關鍵字：table、tr（行）、td（每一個單元格）
table中有幾個常用的屬性：
1、border：邊框
2、width：寬度
3、height：長度
4、align：所處布局位置
td的合并單元格：
1、rowspan：向下合并單元格。
2、colspan：向左右合并單元格
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="1px" width="50%" height="50%" align="center">
<tr align="center">
<td>1</td>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr align="center">
<td>4</td>
<td>6</td>
</tr>
<tr align="center">
<td>7</td>
<td colspan="2">8</td>
</tr>
</table>
</body>
</html>
超連結
關鍵字：a
a标簽中的重要屬性：
1、href：代表url，即連接配接到的位址，對位址發送請求。
2、target：
擷取連結後顯示的方式
（1）blank：新的頁面
（2）_self：目前視窗
（3）_top：頂級視窗
（4）_parent：父視窗
超連結可以是文字，也可以是圖檔，也可以是其他各種樣式
<html>
<head>
<title>超連結</title>
</head>
<body>
<a href="http://wwww.baidu.com" target="blank">
百度
</a>
</body>
</html>
背景
關鍵字：bgcolor（背景顔色）、background（背景圖檔）、img（圖檔）
img有幾個常用的屬性：
1、title：
滑鼠懸停在圖檔上顯示的文字
2、alt：
找不到這個圖檔資源的時候會顯示
<html>
<head>
<title>背景</title>
</head>
<body bgcolor="green" background="1.png">
<img src="2.jpg" title="圖檔" alt="圖檔找不到"></img>
</body>
</html>
清單
關鍵字：ol（有序清單）、ul（無序清單）、li（清單的元素）,
清單可以嵌套。
<html>
<head>
<title>清單</title>
</head>
<body>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
表單
關鍵字：form、input
表單中的資料是要送出給指定的url，需要送出的帶上name和value，如果是手寫的文本就可以不用指定value，如果是滑鼠點選的就必須要指定value，格式是action?name=value&name=value。
input中有幾個常用的屬性：
1、type：
指定類型：
（1）text：文本框
（2）radio：單選按鈕，如果想讓多個單選按鈕隻有一個能被選中，就多個單選按鈕為同一name。
（3）checkbox：勾選框。
（4）select：下拉清單，其中option代表選項，屬性multiple代表可多選，屬性size代表可顯示的選項個數。
（5）file：指定上傳檔案
（6）hidden：指隐藏，資料照常上傳，但是使用者不可見
（7）submit：送出表單中資料的按鈕
（8）reset：重置表單中的資料
2、name：送出資料不可缺少的部分
3、value：指定name的上傳資料
form中有幾個常用的屬性：
1、action：和href相同，表示目标位址。
2、method：post和get，post代表送出的資料在位址欄中不可見，get表示可見，預設是可見。
<html>
<head>
<title>表單</title>
</head>
<body>
<!--表單往伺服器上送出的是value格式是：action?name=value-->
<form action="背景.html" >
<input type="text" name="1"></input>
<input type="radio" name="2" value="1">男</input>
<input type="radio" name="2" value="0">女</input>
<input type="checkbox" name="3" value="1" checked>是否成年</input>
<select name="4" multiple="multiple" size="2">
<option value="0">大學</option>
<option value="1">碩士</option>
<option value="0">高中</option>
<option value="1">專科</option>
</select>
<br>
<input type="file"></input>
<input type="hidden" name="5" value="6" />
<textarea rows="10" cols="60" name="6"></textarea>
<input type="submit" value="送出"></input>
<input type="reset"></input>
</form>
</body>
</html>
id屬性、div和span的重要性
id屬性：每一個元素都有id屬性，類似于身份證，不可重複，javaScript通過id屬性進行增删改。
div和span：是一個塊級元素，類似于一個空的盒子，在網頁制作的時候會經常用到。
div占用的位置是一行，
span占用的是内容有多寬就占用多寬的空間距離。