HTML基礎教程上篇介紹了HTML的基礎知識及一些常用的標籤，本篇文章主要介紹HTML的樣式、表單、Table、框架等內容。下面我們就一起來了解吧！
01 HTML樣式
所有的HTML可以通過設置其style屬性來設置標籤的樣式，下面我們就來演示幾個常用的HTML樣式設置。
1）設置標籤寬度與高度
我們創建一個div標籤，然後設置其高度與寬度，但由於div標籤默認沒有顏色我們看不到效果，所以在設置其高度與寬度時，同時為其設置一個背景顏色，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- 給div寬度設置為一個長寬都為400px的正方形塊，同時背景色代碼塊為#46a6ff -->
9. <div style="width: 400px; height: 400px; background-color: #46a6ff;"></div>
10. </body>
11. </html> 
2）設置字體類型與大小
我們在上面div塊中加入文字，並給加入的文字設置字體類型與大小，同時為其加粗，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- font-family是設置字體類型；font-size是設置字體大小；font-weight是給字體加粗 -->
9. <div style="width: 400px; height: 400px;
10. background-color: #46a6ff; font-family: 'Microsoft YaHei'; font-size: 40px; font-weight: bold">
11. 我是div塊
12. </div>
13. </body>
14. </html> 
3）設置字體水平與垂直居中
上面我們給div加了字體樣式但並沒有居中，現在我們來看看怎麼設置字體居中
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- text-align給文字設置水平居中；line-height將其值設為與height一致，文字內容就可以垂直居中 -->
9. <div style="width: 400px; height: 400px;
10. background-color: #46a6ff; font-family: 'Microsoft YaHei';
11. font-size: 40px; font-weight: bold;
12. text-align: center; line-height: 400px">
13. 我是div塊
14. </div>
15. </body>
16. </html> 
02 HTML Table
在HTML頁面開發時我們經常會用到表格進行數據展示，HTML的表格是由標籤<table>來定義的，每個表格均有若干行（<tr> 標籤定義），每行被分割為若干單元格（由<td> 標籤定義）。表格中常用的標籤與樣式屬性如下：
下面我們創建兩個表格示列，分別設置上述屬性具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <!-- 表格示列1 -->
9. <table border="1" bordercolor="black" width="450" height="100">
10. <caption>表格示列1</caption>
11. <tr bgcolor="red" > <!-- tr為一行的起始與結束 -->
12. <th>Column 1</th> <!-- 表格頭 -->
13. <th>Column 2</th>
14. <th>Column 3</th>
15. </tr>
16.
17. <tr bgcolor="cyan"> <!-- 設置表格背景色 -->
18. <td>Data 1</td> <!-- td單元格 -->
19. <td>Data 2</td>
20. <td>Data 3</td>
21. </tr>
22.
23. <tr bgcolor="yellow">
24. <td colspan="2">New Data 1</td> <!-- 設置該單元格合併這一行上的兩列 -->
25. <td>New Data 2</td>
26. </tr>
27. </table>
28.
29. <!-- 表格示列2 -->
30. <table border="1" bordercolor="black" width="80%" height="100"> <!-- 設置單元格寬與高為百分比 -->
31. <caption> 表格示列2</caption>
32. <tr bgcolor="red" >
33. <th>Column 1</th>
34. <th>Column 2</th>
35. <th>Column 3</th>
36. </tr>
37.
38. <tr>
39. <td rowspan="2">Data 1</td> <!-- 設置該單元格合併這一列上的兩行 -->
40. <td>Data 2</td>
41. <td>Data 3</td>
42. </tr>
43.
44. <tr>
45. <td>Data 2</td>
46. <td>Data 3</td>
47. </tr>
48. </table>
49. </body>
50. </html> 
03 HTML表單
HTML 表單是一個包含表單元素的區域，用於搜集不同類型的用戶輸入。HTML表單在我們日常瀏覽網頁時很常見，比如各網站的登錄頁面，就是典型的HTML表單應用。HTML表單常用的標籤元素有如下幾種：
1）Text input：字符輸入框，一般賬戶與密碼輸入都是用的該標籤
2）Text area：文本輸入框，一般需要輸入較多文本內容使用
3）Radio button：單選框
4）Checkbox：多選框
5）Select box：選擇框
6）File select：文件選擇框
7）Buttons：按鈕
表單元素常用的屬性及值設置如下表所示：
結合上表我們創建一個表單示列，按照上表的屬性值進行設置，具體操作如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <form>
9. <h4>Input輸入框</h4>
10. 用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="10"><br>
11. 密碼 : <input type="password" name="user_pass" ><br>
12. <h4> Radio單選框:（name值設置時必須一致）</h4>
13. <input type="radio" name="r_gender"> Male
14. <input type="radio" name="r_gender"> Female
15. <input type="radio" name="r_gender" checked> Infant
16. <h4> Check box多選框 :（name值設置時必須不一樣）</h4>
17. <input type="checkbox" name="c_male" checked> Male
18. <input type="checkbox" name="c_female"> Female
19. <input type="checkbox" name="c_infant"> Infant
20. <h4> Select box :選擇框（單選）</h4>
21. <select name="s_box">
22. <option value="s_male">Male</option>
23. <option value="s_female" selected>Female</option>
24. <option value="s_infant">Infant</option>
25. </select>
26. <h4> Select box :擇框（多選）</h4>
27. <!-- 選擇項默認展示4個，其它的選擇內容需要通過鼠標滾動 -->
28. <select name="s_box" size="4" multiple>
29. <option value="s_male" selected>Male</option>
30. <option value="s_female" selected>Female</option>
31. <option value="s_infant">Infant 1</option>
32. <option value="s_infant" selected>Infant 2</option>
33. <option value="s_infant">Infant 3</option>
34. <option value="s_infant">Infant 4</option>
35. </select>
36. <h4> Text文本輸入框</h4>
37. <textarea rows="10" cols="80" name="txt_area">文本框
38. HTML基礎教程
39. 表單示列
40. </textarea>
41. </form>
42. </body>
43. </html>
下面我們再創建一個button的表單示列，具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 設置表單提交方式為get, 跳轉的url為"http://www.baidu.com" -->
10. <form method="get" action="http://www.baidu.com">
11. <h4> Buttons按鈕表單示列</h4>
12. 用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="16"><br>
13. 密碼 : <input type="password" name="user_pass" ><br>
14. <!-- 點擊在遊覽器上方顯示Say Hello -->
15. <input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello"/><br>
16. <!-- 點擊跳轉到百度 -->
17. <input type="submit" name="b_submit" value="百度走起"/>
18. <!-- 點擊重置會重置表單內輸入的內容 -->
19. <input type="reset" name="b_reset" value="重置"/><br>
20. </form>
21.
22. </body>
23. </html> 
04 HTML框架iframe
使用HTML框架可以在同一個瀏覽器窗口中顯示多個頁面，iframe的語法格式如下所示
1. <iframe src="URL">
2. <!-- URL指向不同的頁面 -->
3. </iframe>
我們現在創建一個iframe框架使用示列具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>iframe使用示列一(簡單的iframe使用)</h4>
10. <!-- 給iframe顯示區域設置寬度為800，高度為200，同時去掉其邊框 -->
11. <iframe src="http://www.baidu.com" width="800" height="200" frameborder="0"></iframe>
12.
13. <br/>
14. <br/>
15.
16. <h4>iframe使用示列二(通過點擊指定鏈接在iframe中顯示)</h4>
17. <!-- a標籤中的target名稱必須與iframe的name一致都為qq -->
18. <a href="http://www.qq.com" target="qq">點擊我在iframe中顯示qq頁面</a>
19. <iframe name="qq" width="800" height="200" frameborder="0"></iframe>
20. </body>
21. </html> 
05 總結
至此我們《HTML基礎教程》就全部講完了，有任何問題都可以在文章後面留言。最後如果喜歡本篇文章不要忘了點贊、關注與轉發哦！
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/269549.html
微信掃一掃 
支付寶掃一掃 