前端是構建網頁的一部分，負責用戶在瀏覽器中看到和與之交互的內容。
網頁是在瀏覽器中呈現內容的文檔或頁面。
通常，網頁使用HTML、CSS、JavaScript(JS)組成。
HTML:定義了頁面的結構和內容。包括文本、圖像、鏈接等。
CSS：定義頁面的樣式和布局。
JS：用于添加交互性和動態功能作用。
---------------------------------------------------------------------------------------------------------------------------------
瀏覽器，建議使用谷歌瀏覽器，安裝步驟：
使用電腦自帶的瀏覽器，搜索“聯想應用商店”--->選擇安裝第一個穩定版本。具體步驟可參考B站大佬 up主“葡萄數碼筆記”。
---------------------------------------------------------------------------------------------------------------------------------
谷歌搜索，必須聯網。
---------------------------------------------------------------------------------------------------------------------------------
前端開發環境：
安裝VSCode，并安裝中文插件。
HTML CSS Support:寫CSS代碼的快捷工具。
Live Server:可以在瀏覽器中實時預覽頁面的變化。
Auto Rename Tage:在修改HTML標簽時，同步修改與之匹配的另一個標簽。
前端環境搭建完畢！
---------------------------------------------------------------------------------------------------------------------------------
HTML標簽：
? ? ? ?HTML(超文本標記語言)，為網頁提供結構。
? ? ? ?HTML告訴瀏覽器哪些部分是標題，哪些部分是段落，哪些是列表等。
? ? ? ?HTML標簽可以通過屬性來提供更多的信息。
? ? ? ?標簽通常是成對出現的，包括開始標簽和結束標簽。
? ? ? ?<p>這是一個段落</p>
? ? ? ?<h1>這是一個標題</h1>
? ? ? ?<a href="#">這是一個超鏈接。</a>
? ? ? ?單標簽，如下：
? ? ? ?<input type="text">
? ? ? ?<br>
? ? ? ?<hr>
? ? ? ?注意：單標簽用于沒有內容的元素，雙標簽用于有內容的元素。
---------------------------------------------------------------------------------------------------------------------------------
HTML 文件結構
? ? ? ?一個HTML文檔，通常由以下幾個部分組成：
? ? ? ? ? ? ? <!DOCTYPE html>? ? ?-----------------告訴瀏覽器這是一個HTML文件。
? ? ? ? ? ? ? <html>
? ? ? ? ? ? ? </html>? ?-------------------------------HTML標簽對，也是HTML文檔的根元素。HTML文檔起? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 始標志。也是文檔的最外層容器。
? ? ? ? ? ? ? ?<head>
? ? ? ? ? ? ? ?</head>-------------------------------head標簽對，包含文檔的元信息，比如，文檔的標題；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 文檔的編碼格式；一些CSS、js文件。
? ? ? ? ? ? ? ?<body>
? ? ? ? ? ? ?? </body>-------------------------------包含了，實際顯示在瀏覽器中的頁面內容。
---------------------------------------------------------------------------------------------------------------------------------
常用文本標簽
? ? ? ? ? ? ? ?1.標題標簽。HTML中有6個標題標簽，分別用 h1 到 h6 表示。
? ? ? ? ? ? ? ?2.段落標簽。<p> </p>
? ? ? ? ? ? ? ?3.HTML的文本格式化標簽。<b></b>;<i></i>;<u></u>;<s></s>
? ? ? ? ? ? ? ?4.一個外部的<ul></ul>,包裹著幾個<li></li>
? ? ? ? ? ? ? ?5.一個外部的<ol></ol>,包裹著幾個<li></li>
? ? ? ? ? ? ? ?6.一個外部的<table></table>,行標簽<tr></tr>,行標簽中包裹著列標簽<td></td>
? ? ? ? ? ? ? ?7.表格列標題：<tr><th>此處為表格列標題</th></tr>
---------------------------------------------------------------------------------------------------------------------------------
舉例：<p>更改文本樣式：<b>字體加粗</b>,<i>斜體</i>、<u>下劃線</u>,<s>刪除線</s></p>
效果：更改文本樣式：字體加粗,斜體、下劃線,刪除線
---------------------------------------------------------------------------------------------------------------------------------
舉例：
?<ul>
? ? ? ? <li>無序列表元素1</li><li>無序列表元素2</li><li>無序列表元素3</li>
? ? </ul>
效果：
- 無序列表元素1
- 無序列表元素2
- 無序列表元素3
---------------------------------------------------------------------------------------------------------------------------------
舉例：
?<ol>
? ? ? ? <li>有序列表元素1</li><li>有序列表元素2</li><li>有序列表元素3</li>
? ? </ol>
效果：
- 有序列表元素1
- 有序列表元素2
- 有序列表元素3
---------------------------------------------------------------------------------------------------------------------------------
舉例：
?<table>
? ? ? ? <tr>
? ? ? ? ? ? <th> 列標題1</th>
? ? ? ? ? ? <th> 列標題2</th>
? ? ? ? ? ? <th> 列標題3</th>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td>元素1</td>
? ? ? ? ? ? <td>元素2</td>
? ? ? ? ? ? <td>元素3</td>
? ? ? ? </tr>
? ? </table>
效果：
列標題1列標題2列標題3
元素1元素2元素3
---------------------------------------------------------------------------------------------------------------------------------
后續內容見《Web前端基礎知識（二）》
? ? ? ? ? ? ? ?
)
