# HTML 概述
# 第一個 HTML 頁面
# 結構
!doctype 聲明
<!DOCTYPE html>告訴瀏覽器當前 html 頁面的版本html 基本結構
<html> <!-- 根元素，包含其他所有HTML元素 -->
<head></head> <!-- 定義頭部基本信息：標題，關鍵字，作者等 -->
<body></body><!-- 表示當前HTML的主體，定義最終在瀏覽器窗口顯示的內容 -->
</html>
# HTML 標簽
- 元素（Element）：是用來包含文字、圖片或者音視頻的內容，一般是由標簽和內容組成。
- 標簽（Tag）：是元素的組成部分，一般分為開始標簽和結束標簽。
:::note info
html 標簽對大小寫不敏感，但 W3C 組織強制元素名使用小寫
:::
# 開始標簽與結束標簽
# 元素的屬性
- 屬性名（attribute name）：其數量和作用都是 HTML 給定的。
- 屬性值（attribute value）：屬性對應的值，建議使用一對雙引號進行包裹。
同一元素允許多個不同屬性。
# HTML 頭部
定義頁面標題
<title>Document</title>定義所有相對 URL 的根 URL
一個 HTML 頁面只能定義一個 base 元素，如果定義一個，則只有第一個生效<base target="_blank" href="http://www.example.com/">定義 HTML 頁面引入外部資源
<link href="link-element-example.css" rel="stylesheet">
引入外部圖標文件<link rel="icon" href="favicon.ico">定義元數據信息
<meta charset="UTF-8">css 樣式，一般稱為內嵌樣式表
<style type="text/css"> | |
body { | |
color:red; | |
} | |
</style> |
- 可執行腳本
<script type="text/javascript"> | |
console.log('打印一個測試信息.'); | |
</script> |
為搜索引擎定義關鍵詞：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">為網頁定義描述內容：
<meta name="description" content="Free Web tutorials on HTML and CSS">定義網頁作者：
<meta name="author" content="KingJ">每 30 秒中刷新當前頁：
<meta http-equiv="refresh" content="30">HTML5 版本定義編碼格式：
<meta charset="UTF-8">定義 HTML 頁面的視口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
# 注釋
<!-- 我就是註解 --> |
# CSS 概述
CSS 是個縮寫形式，其全稱為 Cascading Style Sheets，翻譯成中文的含義為層疊樣式表。
# 如何使用
# 內聯樣式 (我超討厭)
<div style="color: lightcoral;">這是測試內容.</div>
| 優點 | 缺點 |
|---|---|
| 簡單、直接 | 強耦合，不能實現網頁的內容和樣式的有效分離 |
| 不同元素設置相同 css，導致冗餘代碼 |
# 內嵌樣式表 (不推薦)
<style type="text/css">
p {
color: lightcoral;
font-size: 24px;
}
</style>
| 優點 | 缺點 |
|---|---|
| 使網頁的內容和樣式有效的分離 | 如果存在大量樣式，導致 HTML 文件很大 |
| 為不同元素設置相同樣式，只需要定義一次代碼 |
# 外聯樣式表 (推到爆！！)
引入外部 css 文件
<link rel="stylesheet" href="style/demo.css">
- rel 屬性：用來定義引入文件與當前 HTML 頁面的關系，該屬性值必須是鏈接類型值。
- href 屬性：用來定義引入文件的 URL。
一個 HTML 頁面允許引入多個 CSS 文件，多個 CSS 文件的加載順序按照 HTML 頁面引入的順序進行加載。
加載過程
- 加載 HTML 並解析
- 析到
<link>元素引入的 CSS 文件，並通過 href 屬性讀取到 CSS 文件的路徑。 - 根據讀取的路徑，開始加載 CSS 文件並進行解析。
# 語法
# 注釋
