前端學習路徑：https://blog.csdn.net/qq_42736179/article/details/104089798
第一天：https://blog.csdn.net/qq_42736179/article/details/104089202
第二天：https://blog.csdn.net/qq_42736179/article/details/104093694
目錄
推薦使用Notepad++
現在可以擺脫記事本，選擇智能的編程環境。
HTML使用樣式的三種方法
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表：
應用普遍性依次如下：
外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1> This is heading </h1>
<p> This is a paragraph </p>
</body>
</html>
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標籤定義內部樣式表。
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1> This is heading </h1>
<p> This is a paragraph </p>
</body>
</html>
內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
HTML表格
表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割爲若干單元格（由 <td> 標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1> 表格 </h1>
<table border="1">
<caption>
這是標題
</caption>
<tr>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td> </td>
<td> 800 </td>
</tr>
</table>
</body>
</html>
caption:標題
tr是行
td是單元格的內容
th是表頭,擁有屬性 rowspan 和 colspan ：跨幾行或跨幾列
跨行--rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>這是跨行實驗</h1>
<table border="1">
<tr>
<th> 姓名 </th>
<td> 張三 </td>
</tr>
<tr>
<th rowspan="3">
家人
</th>
<td>
妻子
</td>
</tr>
<tr>
<td> 兒子 </td>
</tr>
<tr>
<td> 父母 </td>
</tr>
</table>
</body>
</html>
跨列--colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>這是跨列實驗</h1>
<table border="1">
<caption>
信息表
</caption>
<tr>
<th> 姓名 </th>
<th colspan="3"> 家人 </th>
</tr>
<tr>
<td> 張三</td>
<td> 妻子</td>
<td> 兒子</td>
<td> 父母</td>
</tr>
</table>
</body>
</html>
HTML列表
無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點進行標記。
無序列表始於 <ul> 標籤。每個列表項始於 <li>。
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
定義列表
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>這是無序列表實驗</h1>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
<ol start="20">
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
<dl>
<dt>hi</dt>
<dd>1</dd>
<dt>hello</dt>
<dd>1</dd>
<dd>2</dd>
</dl>
</body>
</html>
前端入門之HTML告一段落，掌握了HTML基本的知識點。
