第十二篇：HTML基礎
本篇內容
- HTML概述
- HTML常用基本標簽
- CSS格式引入
一、 HTML概述
1.定義：
HTML，超文本標記語言，寫給瀏覽器的語言，目前網絡上應用最廣泛的語言。HTML也在不斷的更新，最新版本已經出現了HTML5。在HTML5中出現了許多新特性，也遺棄了一些舊元素。我們寫好html文件後，在瀏覽器中打開。主流的瀏覽器包括IE、Firefox、Chrome、Goole等。
2.標簽元素：
HTML元素由開始標簽和結束標簽組成。如<p>/<p>,<h1><h1/>。雖然現在我們還不知道具體標簽代表的意思，但標簽一定是這樣的格式：有一對開始<>和結束</>。一般標簽名推薦用小寫。標簽具有屬性，屬性用來表示標簽的特征。比如，我們用大小這個屬性，來衡量一個蘋果。所以，大小可以用來表示蘋果的特征。屬性時寫在標簽裏面的，而且是開始標簽內。
3.基本架構：
結構由網頁的頭部和網頁的身體組成。如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>這裏是標題</title>
</head>
<body>
這裏是內容
</body>
</html>
在上面的例子中，第一個標簽<html>是告訴瀏覽器這是html文檔的開始。Html文檔的最後一個標簽是</html>，是告訴瀏覽器這是html的終止。標簽<head></head>之間的文本是頭部信息，在<title></title>之間的文本是文檔標題，會顯示在瀏覽器的窗口的標題欄。<body></body>之間的文本是正文。
二、 HTML常用基本標簽
1.h標簽：
HTML 標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hellow World</h1>
<h2>Hellow World</h2>
<h3>Hellow World</h3>
<h4>Hellow World</h4>
<h5>Hellow World</h5>
<h6>Hellow World</h6>
</body>
</html>
2.p標簽：
HTML 段落是通過 <p> 標簽進行定義的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>That‘s the first paragraph.</p>
<p>This is the second paragraph.</p>
</body>
</html>
3.a標簽：
HTML 鏈接是通過 <a> 標簽進行定義的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
4.img標簽：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="海賊王.jpg" width="500px" height="600px">
</body>
</html>
5.hr標簽：
<hr /> 標簽在 HTML 頁面中創建水平線。
hr 元素可用於分隔內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>test</h1>
<hr>
<h2>test</h2>
<hr>
</body>
</html>
6.ul標簽：
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始於 <ul> 標簽。每個列表項始於 <li>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
</ul>
</body>
</html>
7.ol標簽：
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始於 <ol> 標簽。每個列表項始於 <li> 標簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>111</li>
<li>222</li>
</ol>
</body>
</html>
8.dl標簽：
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>北京市</dt>
<dd>海澱區</dd>
<dd>東城區</dd>
<dd>西城區</dd>
</dl>
</body>
</html>
9.table標簽：
表格由 <table> 標簽來定義。每個表格均有若幹行（由 <tr> 標簽定義），每行被分割為若幹單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
</body>
</html>
10.form表單：
（1）text：
<input type="text"> 定義用於文本輸入的單行輸入字段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
用戶名：<input type="text" name="username">
</form>
</body>
</html>
（2）password：
<input type="password"> 定義用於密碼輸入的單行輸入字段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
密碼：<input type="password" name="password">
</form>
</body>
</html>
（3）radio：
<input type="radio"> 定義用於單選按鈕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
</form>
</body>
</html>
（4）checkbox：
<input type="checkbox"> 定義用於復選按鈕。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<input type="checkbox" name="hobby" value="1">足球
<input type="checkbox" name="hobby" value="2">籃球
<input type="checkbox" name="hobby" value="3">排球
</form>
</body>
</html>
（5）submit：
<input type="submit"> 定義用於向表單處理程序（form-handler）提交表單的按鈕。
表單處理程序通常是包含用來處理輸入數據的腳本的服務器頁面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<input type="submit" value="提交">
</form>
</body>
</html>
三、 CSS格式引入
css三種引用方式：
1.標簽引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
h1{
color: red;
}
</style>
<body>
<h1>
這是一個標題
</h1>
</body>
</html>
2.id引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#c1{
color: red;
}
</style>
<body>
<h1 id="c1">
這是一個標題
</h1>
</body>
</html>
3.類引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.c1{
color: red;
}
</style>
<body>
<h1 class="c1">
這是一個標題
</h1>
</body>
</html>
第十二篇：HTML基礎