# html 基礎知識
[toc]
## 1. 網頁的組成部分
| 序號 | 內容 | 描述 |
| ---- | ------------------ | ------------------------------------- |
| 1 | **文本內容** | 用戶看到的網頁文本,例如新聞,電話等 |
| 2 | **其它文件的引用** | 如圖片,視頻,音頻,CSS 樣式表,JS 腳本等 |
| 3 | **標記** | 對文本以及引用文件的正確描述 |
- 每個頁面都是由這三部分組成的, 并且都是采用純文本進行描述
- 意味著任何能編寫純文本的編輯器都可以用來創建 HTML 頁面
- 現在主流 HTML 版本是 5.0,后面的教程默認就是 HTML5 版本
## 2. html 設計思想
- html 文檔中的一切,都是基于**標簽**實現的
- 標簽就類似于超市中玲瑯滿目的商品,你能通過一個標簽快速識別并找到它們
- 頁面中的每一塊內容,如果想識別出來,同樣也需要給他們貼上不同的標簽
- html 是超文本標記語言(_下表描述并不精準,但力求簡要易記_)
| 術語 | 描述 |
| ------ | ------------------------------------------ |
| 超文本 | 是指包含有超鏈接的文本 |
| 標記 | 就是用來描述內容的固定標簽 |
| 語言 | html 并不編程語言,只是書寫 html 文檔的工具 |
---
## 3. 基本的 html 頁面
### 3.1 html 結構源碼
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5頁面結構</title>
</head>
<body>
<!-- 頁面主體內容 -->
<h2>PHP中文網歡迎您...</h2>
</body>
</html>
```
### 3.2 源碼逐行分析
| 代碼 | 解析 |
| ---------------------------------------- | ----------------------------------------------------------------------------------- |
| `<!DOCTYPE html>` | 通知瀏覽器這是一個 HTML5 文檔,應始終寫在第一行 |
| `<html>...</html>` | 根標簽,或叫根元素,整個 hmtl 文檔內容都必須寫到這對標簽中 |
| `<html lang="en">` | 通知搜索引擎 html 文檔使用的編寫語言,如果是中文建議改成`<html lang="zh-CN">` |
| `<head>...</head>` | 供瀏覽器和搜索引擎使用,描述字符編碼集,視口與頁面標題,用戶并不感興趣 |
| `<meta>` | 設置頁面元素數據, 所謂元數據, 就是描述某種特定信息的數據 |
| `<meta charset="UTF-8">` | 通知瀏覽器 html 文檔編寫語言所屬的字符編碼集,最流行的是`UTF-8`,已成行業標準 |
| `<meta name="viewport" content="..." />` | 下面三行是對它的解讀 |
| `name="viewport"` | 設置視口(即可視區屏幕)如何顯示這個頁面, 例如是否允許縮放這個頁面 |
| `width=device-width` | 頁面寬度應該與顯示設備的寬度相匹配,類似還有`device-height` 表示設備的屏幕高度 |
| `initial-scale=1.0` | 設置頁面初始綻放比例,`1.0`表示原樣 1:1 顯示,不允許有任何綻放 |
| `<title>` | 顯示在瀏覽器標簽上的文本, 指定當前頁面的標題, 這個標簽對 SEO 非常重要 |
| `<body>...</body>` | 頁面主體內容,允許或希望用戶的內容都應該寫到這里,用戶也只對這里的內容感興趣 |
| `<!-- 注釋內容 ->` | 注釋用來描述標簽功能或用途,它的內容不要出現在顯示的網頁中, 只會出現在 html 源代碼中 |
| `<h2>PHP中文網歡迎您...</h2>` | 瀏覽器渲染這個 html 文檔時,最終只會呈現這個標題內容與效果,并不顯示標簽`<h2>` |
> 編寫 html 文檔的標簽字符不區分大小寫, 但是推薦全部使用小寫字母
---
## 4. 元素,屬性與值與其它
### 4.1 元素
| 元素 | 標簽 | 語法 | 描述 |
| -------- | ------ | ------------------------------- | ------------------------------- |
| 非空元素 | 雙標簽 | `<p>學習讓我變得更強大</p>` | `<起始標簽>元素內容</結束標簽>` |
| 空元素 | 單標簽 | `<img src="..." alt="">|<link>` | `<標簽>` |
> 空元素也有使用雙標簽描述的,如`<script>|<video>|<br>...`
### 4.2 屬性和值
#### 4.2.1 基本語法
- 屬性: 必須寫到元素的 "起始標簽" 中,由屬性名和屬性值二部分組成
- 語法: `屬性名="屬性值"`,屬性名推薦只使用小寫字母,屬性值推薦加上*雙引號*
- 案例: `<input type="password" maxlength="20" placeholder="至少8個字符" required>`
| 序號 | 值類型 | 描述 |
| ---- | -------- | ---------------------------------- |
| 1 | 字符串 | `<p class="active">...</p>` |
| 2 | 預定義值 | `<input type="text">` |
| 3 | 指定格式 | `<a href="https://php.cn">...</a>` |
| 4 | 數值 | `<table width="200">...</table>` |
| 5 | 布爾值 | `<input type="email" required>` |
> 布爾屬性的值是可選的, 只要元素中出現該屬性,表示它取**真**值
#### 4.2.2 三大通用屬性
| 序號 | 屬性名 | 描述 | 舉例 |
| ---- | ------- | ---------------- | ------------------------------------ |
| 1 | `id` | 元素的唯一標識 | `<div id="wrap">...</div>` |
| 2 | `class` | 給元素添加類樣式 | `<div class="box">...</div>` |
| 3 | `style` | 設置當前元素樣式 | `<div style="...">...</div>` |
> 這幾個屬性,幾乎可以添加到任何元素上
---
## 5. 層級關系
- 元素中允許包含另一個元素,被包含的元素叫做子元素, 子元素又可以繼承包含其它元素,依此類推
- 元素層級結構中, 必須保持正確的嵌套關系
- 詳見: `demo2.html`
```html
<!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>
<!-- 元素之間應該保持正確的嵌套 -->
<form action="">
<div>
<label for="email">郵箱:</label>
<!-- 元素值: 預定義值, 指定值, 布爾值,數值 -->
<input type="email" name="email" id="email" maxlength="100" required>
</div>
<div>
<label for="password">密碼:</label>
<inpu type="password" name="password" id="papassword" placeholder="至少8位" required>
</div>
<div>
<button>提交</button>
</div>
</form>
</body>
</html>
```
---
## 6. 網頁中的文本字符
- 多個空格,制表符,回車符,換行符,都會被壓縮為一個空格
- `<`,`>`,`&`等字符具有特殊意義,需要轉義后才允許添加到 html 文檔
- 轉義字符語法: `& + 字符實體名稱 + ;`, 如`<`,使用: `<`表示
- `Unicode`極大的緩解了特殊字符的問題,推薦將文檔編碼設置為`utf-8`
- 只需要在`<head> <mata charset="UTF-8"> </head>`
- 常用轉義字符表
| 序號 | 字符 | 描述 | 轉義字符 | 實體編號 |
| ---- | ----- | ---------- | ---------- | -------- |
| 1 | `' '` | 空格 | `nbsp;` | ` ` |
| 2 | `<` | 小于 | `<` | `<` |
| 3 | `>` | 大于 | `>` | `>` |
| 4 | `&` | `&符號` | `&` | `&` |
| 5 | `"` | 雙引號 | `"` | `"` |
| 6 | `?` | 版權 | `©` | `©` |
| 7 | `?` | 已注冊商標 | `®` | `®` |
| 8 | `×` | 乘號 | `×` | `×` |
| 9 | `÷` | 除號 | `÷` | `÷` |
---
## 7. 文件與文件夾名稱
- 全部使用小寫字母: `chapter1/demo1.html`
- 采用合適的擴展名: `.html`, 不要用`.htm`
- 堅持使用連接線`-`,而不是下劃線`_`分隔多個單詞
---
## 8. URL
### 8.1 語法
- URL: 統一資源定位符, 互聯網上任何一個文件都有一個唯一的 URL
- URL 語法: `http://模式/主機名/路徑/文件名`
| 序號 | 名稱 | 描述 | 舉例 |
| ---- | ------ | ----------------------------------- | --------------------------------------------- |
| 1 | 模式 | 也稱"協議",瀏覽器如何訪問這個文件 | `http`,`https`,`ftp`,`mailto`... |
| 2 | 主機名 | 使用"域名"或"IP"表示 | `https://www.php.cn/`,或者`http://127.0.0.1/` |
| 3 | 路徑 | 使用一個或多個正斜線分割的字符串 | `public/admin` |
| 4 | 文件名 | 最后一個路徑后面的,帶有擴展名的文檔 | `ablut.html` |
> 如果 URL 是以路徑分隔符`/`結尾, 則啟用默認文件名,如`index.html`
### 8.2 絕對 URL
| 序號 | 使用場景 | 舉例 |
| ---- | ------------------------ | -------------------------------- |
| 1 | 被引用目標與當前位置無關 | `http://php.cn/courses/123.html` |
| 2 | 引用其它服務器上的文件 | `https://www.php.net/manual/zh/` |
### 8.3 相對 URL
- 當有人向你問路時,你肯定不會從國家/省/市/縣/區開始,而是從他當前的位置給你指示
- 同樣, 相對 URL 是以包含 URL 本身的文件位置為參考點,描述目標文件的位置
| 序號 | 使用場景 | 舉例 |
| ---- | ------------------ | -------------------------------------------------------------------------------------- |
| 1 | 引用同一目錄下文件 | 直接寫文件名,如`demo2.html` |
| 2 | 引用子目錄下文件 | 目標文件前帶上子目錄名,使用目錄分隔符`/`連接,如`chapter2/demo2.html` |
| 3 | 引用上層目錄的文件 | 文件名前添加二個點,同樣使用目錄分隔符`/`連接,允許逐級向上查詢,如`../../demo2.html` |
| 4 | 根路徑`/` | 為防止過多層級的向上遞歸查詢,可以從當前服務器根目錄開始查詢,如`/admin/books/chapter2/` |
> 訪問同一個網站的文件,應該始終堅持使用*相對 URL 地址*
---
## 9. html 標簽的語義化的優勢
| 序號 | 優點 | 描述 |
| ---- | ---------- | --------------------------------------------------------------- |
| 1 | 更直觀 | 對于一篇文章`<article>`標簽,顯然要比使用`<div class="article">` |
| 2 | SEO 優化 | 搜索引擎更加喜歡你的網頁,有利于 SEO, 得升關鍵詞優化與排名 |
| 3 | 代碼更少 | 提高加載速度,也方便代碼維護與樣式控制 |
| 4 | 無障礙支持 | 例如視力受損使用的屏幕閱讀器, 語義化就非常重要了 |
---
## 10. html 元素的默認樣式
- 為什么同樣的內容,添加不同的標簽,在瀏覽器中呈現出不同的顯示效果呢?
- 原因是瀏覽器為這么元素預定了一張樣式表,即每個元素都有默認樣式
- 不幸的是, 不同瀏覽器廠商之間因為商業利益或競爭關系,這些元素在不同瀏覽器表現并不完全相同
- 所以,我們需要使用自定義的樣式表,來重置元素的樣式,讓它們在所有瀏覽器中看上去是完全一樣的
- 用戶自定義的樣式規則, 優先級要高于默認樣式, 這是應該的,也是合理的
- 教學大綱
- HTML5基礎
- 1-html基礎知識
- 2-語義化結構元素
- 3-語義化文本元素
- 4-鏈接/列表/圖像元素
- 5-表格元素
- 6-表單與控件元素[重點]
- CSS3基礎
- 1-css與html文檔
- 2-css選擇器
- 3-細說盒模型
- Flex布局[精簡版]
- 1-Flex概論
- 2-Flex布局是什么
- 3-Flex基本概念
- 4-Flex容器屬性
- 5-Flex項目屬性
- Flex布局[細說版]
- 1-flex 布局概述
- 2-flex 容器與項目
- 3-flex 容器主軸方向
- 4-flex 容器主軸項目換行
- 5-flex 容器主軸與項目換行簡寫
- 6-flex 容器主軸項目對齊
- 7-flex 容器交叉軸項目對齊
- 8-flex 多行容器交叉軸項目對齊
- 9-flex 項目主軸排列順序
- 10-flex 項目交叉軸單獨對齊
- 11-flex 項目放大因子
- 12-flex 項目收縮因子
- 13-flex 項目計算尺寸
- 14-flex 項目縮放的簡寫
- Flex布局[案例版]
- 1-調整項目順序
- Grid布局[精簡版]
- 1. 常用術語
- 2. 容器屬性
- 3. 項目屬性
- 4. 布局實例
- 1. 經典三列布局
- 2. 媒體查詢
- Grid布局[細說版]
- 1-必知術語
- 2-容器創建與行列劃分
- 3-單元格常用單位
- 4-項目填充到單元格
- 5-項目填充到網格區域
- 6-對齊容器中的所有項目
- 7-對齊單元格中所有項目
- 8-對齊單元格中某個項目
- 9-容器中行與列之間的間距