前端html---1
前端課程 ：HTML CSS JavaScript
1. WEB
1. 什麼是Web
其實就是網頁，網頁是一種基於B/S模式的應用程式
B/S :
瀏覽器與伺服器互動模式（Browser / Server）
C/S :
客戶端與伺服器互動模式（Client / Server）
2. Web 的組成
1. 瀏覽器 : 代替使用者向伺服器傳送請求，解析資料並呈現
2. 伺服器 ：接收使用者請求並響應
3. 通訊協議 ：http / https / ftp / file...
規範資料在網路中是如何打包和傳遞的
http : 超文字傳輸協議
https : 加密的超文字傳輸協議
3. Web 伺服器
1. 作用 ：
1. 儲存資料
2. 接收請求並響應
3. 具備安全性功能
2. 產品 ：
1. Apache
2. Tomcat
3. IIS - Internet Information Service
4. Nginx
...
3. 技術
1. JSP - Java Server Pages (Java 伺服器頁面)
2. PHP
3. ASP.net
4. Python Web (Flask Django...)
4. 瀏覽器
1. 作用 ：
1. 代替使用者向伺服器發請求，也叫使用者代理user agent
2. 作為響應資料的解釋引擎，向用戶呈現圖形化介面
2. 產品 ：
1. Google Chrome - webkit(核心)
2. Opera Opera
3. Mozilla FireFox
4. Apple Safari - webkit(核心)
5. Microsoft IE 、Edge
瀏覽器核心（引擎）：
1. 渲染引擎：解析 HTML CSS，控制頁面的渲染效果
2. JS引擎：解析JS指令碼
3. 技術
1. HTML
2. CSS
3. JS
4. 前端框架（Angular Vue Node.js React...）
2. HTML 概述
1. 什麼是HTML
HyperText Markup Language
超文字 標記 語言
1. 超文字 ：
網頁中一切的內容：文字 ，圖片，音視訊等都是超文字
2. 標記 ：
也叫標籤/元素，主要用來標記網頁中的內容，結合CSS實現
網頁的佈局和排版
2. HTML 在計算機中的表現
所有的網頁都是HTML格式的檔案
檔案字尾使用.html / .htm 表示
3. 執行工具
使用瀏覽器開啟html檔案，使用chrome作為預設瀏覽器
4. 除錯工具
瀏覽器自帶的除錯工具（開發者工具），使用F12開啟，或者
右鍵檢查
3. HTML的基礎語法
1. HTML是標籤語法，標籤以<>為標誌
分類 ：
1. 雙標籤
有開始標籤，有結束標籤，成對出現
<標籤名> 標籤內容 </標籤名>
2. 單標籤
只有開始標籤，沒有結束標籤
1. <標籤名>
2. <標籤名/>
例項 ：
<html>
<head>
<title>第一個網頁</title>
</head>
<body></body>
</html>
2. 標籤的巢狀
1. 在雙標籤中巢狀使用其他標籤，都是巢狀結構
2. 外層元素成為父元素，內層元素成為子元素
3. 多層巢狀結構中，外層元素稱為祖先元素，內層元素
稱為後代元素
3. 文件基本結構
1. 最外層<html></html>標籤，表示文件的開始和結束，
網頁中所有的內容都必須寫在html標籤中
2. <head></head>標籤，表示網頁的頭部，可以設定網頁的
標題，字符集，引入外部檔案等。
3. <body></body>標籤，表示網頁的主體，所有呈現在
網頁視窗中的內容，都應該寫在body標籤中
4. 標籤屬性
標籤屬性用來修飾或補充當前的標籤內容
語法 ：
<標籤名 屬性名="屬性值"></標籤名>
每個標籤中都可以新增一個或多個標籤屬性，多個屬性之間
使用空格隔開
<標籤名 屬性1="屬性值" 屬性2="屬性值">
5. HTML 語法規範
1. HTML 標籤不區分大小寫的，BODY Body body 標籤名
可以使用大寫，但是推薦使用純小寫字母
2. 在涉及標籤巢狀時，保持內部標籤適當縮排，增加
程式碼可讀性
3. 新增適量註釋
6. HTML的註釋
語法 ：
<!--
註釋內容
-->
注意 ：
1. HTML的註釋不能巢狀
2. 標籤名中不能巢狀使用註釋
練習 ：
建立html檔案
在head中設定網頁標題和字符集
在body中新增網頁內容，內容不限
在不同的瀏覽器中檢視執行效果
4. HTML 常用標籤
1. 文件型別宣告
使用<!doctype html>,對當前的文件型別及版本做出指定
這種宣告方式是HTML5使用的宣告方式
關係到頁面元素的渲染效果
書寫在<html>之前，文件開篇
2. 文件基本結構
3. 設定網頁標題，字符集，和選項卡圖示
<link rel="shortcut icon" href="" type="image/x-icon">
4. 標題標籤
<h1>一級標題</h1>
...
<h6>六級標題</h6>
標題標籤的內容，與普通文字相比，自帶文字加粗效果，
從h1 ~ h6 字型大小逐漸減小
5. 常用文字標籤
1. 段落標籤
<p>標籤內容</p>
2. <span></span> 行分割槽標籤
3. <label></label> 文字標籤
4. <b></b> <strong></strong> 加粗標籤
h5之後推薦使用有語義標籤 strong 表示強調
5. <s></s> 刪除線
6. <i></i> 斜體顯示
7. <u></u> 為文字新增下劃線
8. 上下標 標籤
上標 ：
x<sup>2</sup>
下標 ：
x<sub>1</sub>
6. 字元實體
1. HTML文件中會忽略多餘的空格和換行，只顯示為一個空格
2. 針對HTML文件的特殊性，比如對空格，<>的處理，需要
採用特殊的語法表示空格和<>等其他符號
3. 字元實體 ：
1. 表示一個空格
2. < less than表示 <
3. > greater than 表示 >
4. © 表示版權符號
5. ¥ 表示人民幣符號￥
7. 格式標籤
1. 換行標籤 <br>
2. 水平線標籤 <hr>
8. 標籤分類
1. 行內元素：
可以與其他元素共行顯示 ： span b strong label i s
u sub sup...
2. 塊級元素：
獨佔一行，不與其他元素共行
h1 ~ h6 p div
div ：是容器標籤，一般用於網頁結構劃分
5. 列表標籤
列表 ：一種結構，將資料按照從上到下進行排列顯示
分類 ：
1. 有序列表
按照數字或字母依次標識每一條資料
語法 ：
1. 有序列表(ordered list)
<ol></ol>
2. 列表項標籤(list item)
<li></li>
每一組li元素都標識一條列表項
et :
<ol>
<li></li>
</ol>
標籤屬性 ：
有序列表預設使用數字標識列表項，從1開始
也可以在ol標籤中新增屬性進行設定
1. type 屬性
指定專案符號的型別
可取的值 ：1 a A i I
希臘數字 ：i ii iii iv v vi..
2. start 屬性
指定從第幾個專案符號開始標識資料
取值 ：無單位的數值
2. 無序列表 (unordered list)
語法 ：
<ul>
<li></li>
</ul>
屬性 ：
預設情況下，無序列表以實心原點標識列表項
可以通過屬性修改
type 屬性，指定專案符號型別
取值 ：disc(預設) square(實心正方形) circle(
空心圓) none
3. 自定義列表
語法 ：
<dl>
<dt>訂單跟蹤</dt>
<dd>物流查詢</dd>
<dd>聯絡客服</dd>
<dt>加入我們</dt>
<dd>門店查詢</dd>
<dd>聯絡客服</dd>
</dl>
4. 列表的巢狀
列表標籤 ol / ul 中除了可以巢狀li元素，也可以巢狀
其他元素
下拉選單 ：
結構 ：
我的電腦
桌面
資料夾1
資料夾2
C盤
練習 ：
1. 使用列表標籤顯示四大名著中的1~2部
2. 外部列表寫名稱
3. 內部巢狀列表，列出當前名著中三個主要人物
水滸傳
1. 宋江
2. 大郎
3. 蓮蓮
6. 影象與超連結
1. URL
Uniform Resource Locator 統一資源定位符
俗稱路徑，有本地路徑，有網路路徑
組成 ：
完整的URL 由 協議 域名 檔案目錄 檔名組成
分類 ：
1. 絕對路徑
從根目錄開始逐級查詢，直到找到檔名
通常用於網路資原始檔
C:/Users/Python/Desktop/Day01/day01.txt
windows 作業系統上絕對路徑以碟符開頭
mac os 作業系統上絕對路徑以/開頭
2. 相對路徑
是從當前所在的目錄資料夾開始查詢
2. 圖片標籤
1. 語法 ：
<img src="url">
在網頁中插入一張圖片,預設按照原始尺寸顯示
使用相對路徑時，一定要注意 ：
1. 從當前所在目錄資料夾開始查詢
2. 可以使用../返回上一級目錄
3. 必要時，../可以多次使用