專欄：JavaEE 進階躍遷營
個人主頁：手握風云
一、HTML基礎
1.1. 什么是HTML
????????HTML(Hyper Text Markup Language)，超文本標記語言。
????????超文本：比文本要強大，通過鏈接和交互式方式來組織和呈現信息的文本形式。不僅僅有文本，還可能包含圖片，音頻，或者自已經審閱過它的學者所加的評注、補充或腳注等等。
????????標記語言：由標簽構成的語言?。HTML的標簽都是提前定義好的，使用不同的標簽，表示不同的內容。比如在Word文檔中的正文、一級標題、二級標題等，提前定義好的格式。
? ? ? ? 我們在任意路徑下，新建一個文本文檔，然后將“txt”后綴改為“html”。推薦大家下載文本編輯器：VS Code、Sublime Text、Notepad++都可以。
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>? ? ? ? 經過瀏覽器(Chrome、Edge、Firefox都可以)的解析，就會產生如下效果：
1.2. HTML標簽
? ? ? ? HTML的代碼是由標簽構成的，形如：
<h3>三級標題</h3>? ? ? ? 標簽名(body)放到<>中；大部分標簽成對出現，<h3>是開始標簽，</h3>為結束標簽；少數標簽只有開始標簽，稱為單標簽；開始標簽和結束標簽之間寫的是標簽的內容。
1.3. HTML文件基本結構
<html><head><title>第一個頁面</title></head><body><h1>一級標題</h1><h2>二級標題</h2></body>
</html>? ? ? ? html里面分為兩部分：head和body。head里面是頁面的整體內容，，比如標題、編碼。body里面是頁面顯示的內容。
1.4. 標簽層次結構
- 父子關系
? ? ? ? head和title、html和head、html和body。
- 兄弟關系
? ? ? ? head和body。
二、HTML快速入門
2.1. 開發工具
????????HTML可以使用系統自帶的記事本來編寫，但是非常不方便，我們課程中使用前端專業的開發工具：VS Code或者Trae都可以。
2.2. 快速開發
? ? ? ? 在Trae中創建文件"Demo1.html"，! + tab / enter，就可以直接生成html的結構。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
? ? ? ? 我們可以點擊右鍵，查看網頁源代碼。我們也可以按F12，打開開發者工具，就可以查看整個網頁的結構。
? ? ? ? 如果使用注釋，直接快捷鍵 ctrl + /。按一次，添加注釋，再按一次，取消注釋。
三、HTML常見標簽頁
3.1. 標題標簽
? ? ? ? 6個，從h1到h6，數字越大，字體越小。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>標題標簽</title>
</head>
<body><h1>111</h1><h2>222</h2><h3>333</h3><h4>444</h4><h5>555</h5><h6>666</h6>
</body>
</html>
3.2. 段落標簽
? ? ? ? 在HTML中，段落、換行符、空格都會失效，如果需要分成段落，需要使用專門的標簽。p標簽就可以表示一個段落。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>段落標簽</title>
</head>
<body><p>這是第一個段落</p><p>這是第二個段落</p><p>這是第三個段落</p>
</body>
</html>
