閱讀目錄 介紹 "網頁標題、文章標題、文章段落" 介紹 "字體大小、字體顏色、字體類型、字體位置、背景顏色" 介紹 "插入圖片" 介紹 "網頁內的超鏈接、網頁間的超鏈接" 介紹 "有序列表、無序列表" 介紹 "表格製作" 介紹 "其他一些常用元素" 一、網頁標題、文章標題、文章段落 代碼： 運行結果 ...
閱讀目錄
- 介紹 網頁標題、文章標題、文章段落
- 介紹 字體大小、字體顏色、字體類型、字體位置、背景顏色
- 介紹 插入圖片
- 介紹 網頁內的超鏈接、網頁間的超鏈接
- 介紹 有序列表、無序列表
- 介紹 表格製作
- 介紹 其他一些常用元素
一、網頁標題、文章標題、文章段落
代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<h1>這是文章標題</h1>
<h3>這是文章的標題</h3>
<p>這是一個段落</p>
</body>
</html>
運行結果為：
這是文章標題
這是文章的標題
這是一個段落
註意：
- 這裡看不到網頁標題，網頁標題會顯示在瀏覽器的網頁標簽上
- 文章的標題有 h1-h6 一共6種不同的表示，上面只演示了其中的兩種
二、字體大小、字體顏色、字體類型、字體位置、背景顏色
代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<p style="font-size:50px">改變字體的大小</p>
<p style="color:green">改變字體的顏色</p>
<p style="font-family:楷體">改變字體的類型</p>
<p style="text-align:right">改變字體的位置</p>
<p style="background-color:yellow">改變這段文字的背景顏色</p>
<p style="font-size:30px; color:#008000">改變字體的大小和字體的顏色</p>
</body>
</html>
運行結果為：
改變字體的大小
改變字體的顏色
改變字體的類型
改變字體的位置
改變這段文字的背景顏色
改變字體的大小和字體的顏色
註意：
- 顏色可以用英文字母表示，也可以用十六進位碼表示
- style 屬性也可以用於標題，例如：< h1 style="color:blue" > 改變文章標題的顏色 < /h1 >
三、插入圖片
代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" width="245px" height="185px"/>
</body>
</html>
運行結果為：
註意：
- < img > 是一個空元素，沒有關閉標簽
- title 屬性：當你把滑鼠放在圖片上方時，會出現提示信息
- 如何獲得圖片：在網路上找到一張圖片，滑鼠右鍵圖片，選擇複製圖片地址，然後粘貼到 src 屬性中即可
四、網頁內的超鏈接、網頁間的超鏈接
代碼1：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<a href="#head1">點擊跳轉到大標題</a>
<a href="#head3">點解跳轉到小標題</a>
<h1 id="head1">這是網頁內的超鏈接</h1>
<h3 id="head3">這是網頁內的超鏈接</h3>
</body>
</html>
運行結果為：
這是網頁內的超鏈接
這是網頁內的超鏈接
註意：
- 註意 href 屬性的值和 id 屬性的值，除了 # 這個符號外，其他要相匹配
代碼2：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<h3>這是文字鏈接-點擊文字跳轉到百度</h3>
<a href="http://www.baidu.com">百度</a>
<h3>這是圖片鏈接-點擊圖片跳轉到百度</h3>
<a href="http://www.baidu.com"><img src="http://p1.s.hjfile.cn/thread/201201/2012011451648781_800_o.jpg" width="245" height="185"/></a>
</body>
</html>
運行結果為：
這是文字鏈接-點擊文字跳轉到百度
這是圖片鏈接-點擊圖片跳轉到百度
五、有序列表、無序列表
代碼1：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<p>這是有序列表：</p>
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>梨</li>
</ol>
<p>這是無序列表：</p>
<ul>
<li>狗</li>
<li>貓</li>
<li>老鼠</li>
</ul>
</body>
</html>
運行結果為：
這是有序列表：
- 蘋果
- 香蕉
- 梨
這是無序列表：
- 狗
- 貓
- 老鼠
代碼2：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<p>這是嵌套列表：</p>
<ol>
<li>
<p>花</P>
<ul>
<li>玫瑰</li>
<li>百合</li>
</ul>
</li>
<li>
<p>樹木</p>
<ul>
<li>柳樹</li>
<li>榕樹</li>
</ul>
</li>
</ol>
</body>
</html>
運行結果為：
這是嵌套列表：
花
- 玫瑰
- 百合
樹木
- 柳樹
- 榕樹
註意：
- ol 的全稱為 order list(有序列表)
- ul 的全稱為 unorder list(無序列表)
- li 的全稱為 list(列表)
六、表格製作
代碼1：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<table border="1px" width="50%">
<thead style="color:red">
<tr>
<td>頭部</td>
<td>頭部</td>
<td>頭部</td>
</tr>
</thead>
<tbody style="color:blue">
<tr>
<td>內容</td>
<td>內容</td>
<td>內容</td>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
<td>內容</td>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
<td>內容</td>
</tr>
</tbody>
<tfoot style="color:green">
<tr>
<td>腳註</td>
<td>腳註</td>
<td>腳註</td>
</tr>
</tfoot>
</table>
</body>
</html>
運行結果為：
| 頭部 | 頭部 | 頭部 |
| 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 |
| 內容 | 內容 | 內容 |
| 腳註 | 腳註 | 腳註 |
註意：
- thead 的全稱為 table head(表格頭部)
- tbody 的全稱為 table body(表格內容)
- tfoot 的全稱為 table foot(表格腳註)
- tr 的全稱為 table row(表格行)
- td 的全稱為 table data(表格數據)
- table 標簽裡面有三個部分，頭部(thead)、身體(tbody)、腳部(tfoot)，而這三個部分裡面都可以有 表格行(tr)，表格行裡面有 表格數據(td)
- 我們可以註意到，table 標簽裡面只有規定行的元素，沒有規定列的元素，列只能由 表格數據(td) 規定
代碼2：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<td>學號</td>
<td>性別</td>
<td>姓名</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>男</td>
<td>張三</td>
</tr>
<tr>
<td>102</td>
<td>男</td>
<td>李四</td>
</tr>
<tr>
<td>103</td>
<td>男</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>
運行結果為：
| 學號 | 性別 | 姓名 |
| 101 | 男 | 張三 |
| 102 | 男 | 李四 |
| 103 | 男 | 王五 |
註意：
- width 屬性表示表格占比屏幕寬度的 50%
代碼3：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<!--這裡是新添加的代碼-->
<tr>
<td colspan="3" style="text-align:center">學生檔案</td>
</tr>
<tr>
<td>學號</td>
<td>姓名</td>
<td>性別</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>張三</td>
<td>男</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
運行結果為：
| 學生檔案 | ||
| 學號 | 性別 | 姓名 |
| 101 | 男 | 張三 |
| 102 | 男 | 李四 |
| 103 | 男 | 王五 |
註意：
- colspan 的全稱為 column span(跨列)
- colspan 的屬性表示讓表格中 “學生檔案” 這一行的內容橫跨3列
代碼4：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<td>學號</td>
<td>姓名</td>
<td>性別</td>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>張三</td>
<td rowspan="3">男</td>
</tr>
<tr>
<td>102</td>
<td>李四</td>
</tr>
<tr>
<td>103</td>
<td>王五</td>
</tr>
</tbody>
</table>
</body>
</html>
運行結果為：
| 學號 | 姓名 | 性別 |
| 101 | 張三 | 男 |
| 102 | 李四 | |
| 103 | 王五 |
註意：
- rowspan 屬性表示讓表格中的內容跨3行
七、其他一些常用元素
代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>這是網頁標題</title>
</head>
<body>
<!--這裡是註釋，不會顯示在文章中-->
<p><b>這裡顯示粗體</b></p>
<p><i>這裡顯示斜體</i></p>
<p><u>這裡顯示下劃線</u></p>
<p>這裡可以<br/>換行</p>
<p>這裡是水平線</p>
<hr/>
</body>
</html>
運行結果為：
這裡顯示粗體
這裡顯示斜體
這裡顯示下劃線
這裡可以
換行
這裡是水平線
