學習鏈接：黑馬程序員pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動端前端視頻教程_嗶哩嗶哩_bilibili
學習文檔：
Web 開發技術 | MDN (mozilla.org)
一、前后端工作流程
WEB模型：前端用于采集和展示信息，中間的數據請求由后端負責
CS架構：客服端-服務器，通過APP/軟件訪問
BS架構：瀏覽器-服務器，通過網站訪問
瀏覽器內核用來解析前端代碼
二、HTML5+CSS+JS
1.語言功能
HTML用來搭建頁面內容和結構
CSS用來添加樣式，比如字體顏色大小、背景顏色、字體間距等
JS用來實現網頁的行為，讓頁面動起來
2.前端開發工具
常用vscode來開發
3.插件
vscode中可安裝一些插件：Auto Rename Tag（自動修改尾標簽），會了吧（翻譯單詞）
Live Server插件工作原理：html文件要放到文件夾里，用vscode打開文件夾，右鍵
可以在vscode中打開頁面，修改內容之后保存會在頁面實時更新
三、HTML5
1.HTML和XHTML
具有根結構、頭結構、體結構標簽
HTML的語法較松散，可以沒有根結構，XHTML的語法很嚴格，現有絕大多數還是用HTML
2.注釋：快捷鍵ctrl+/
<!--注釋-->3.標簽
（1）語法
所有的指令都需要標簽（開始標簽，內容/標簽體，結束標簽，元素），標簽不區分大小寫，推薦使用小寫
（2）分類
按照標簽的結構來分：①圍堵標簽，如段落<p></p>②自閉合標簽，如水平分割線<hr>
按照標簽效果來分：①行內（內聯）標簽：不會獨占一行，會和其他標簽共享一行。表示斜體
我是<em>第一名</em>②塊級標簽：會獨立成為一行，不和其他標簽共享一行。
（3）嵌套
一個標簽中可以寫另一個標簽：行內嵌套行內，塊級嵌套行內，塊級嵌套塊級
行內不可以嵌套塊級，行內會失效
<!--行內嵌套行內-->
我是<em><strong>第一名<strong/></em>（4）常見標簽
標題標簽：<h1></h1>??<h2></h2>.........字體大小不同
段落標簽：<p></p>
4.常規屬性（有值）
（1）單引號/雙引號
屬性是作用在標簽上的，屬性不會直接作用在內容上，屬性值的引號可以省略，但不建議
屬性的值可以用單引號或者雙引號，但同類型的引號是不能嵌套的
（2）以超鏈接標簽為例
href屬性：表示跳轉到哪個網址
title屬性：給元素添加提示信息，鼠標懸停時可以提示內容
target屬性：_blank 讓頁面在新的窗口打開，_self在當前頁面加載（默認）
可以給圖片、標題添加超鏈接
<a href="https://developer.mozilla.org/zh-CN/docs/Web" title="這是web開發文檔" target="_blank">這是鏈接</a>5. 布爾屬性（無值）
是屬性的一種簡化寫法，常見于表單標簽中，沒有值，比如下面的disabled
<!--表示輸入框不可用-->
<input type="text" disabled> 請輸入名字6.實體字符
如何表示html語法中的字符
7.空格的處理
無論寫多個空格，都會只展示一個空格，所以需要用實體字符
<p>My cat is very grumpy</p>8.HTML結構
<!--<!DOCTYPE html> 是最短的有效文檔聲明-->
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>我的測試站點</title></head><body><p>這是我的頁面</p></body>
</html>meta標簽（元標簽）：用于指定元數據，即網頁的描述，關鍵詞，文件的最后修改時間，作者及其他元數據，不會顯示在客戶端。
字符集：字符和二進制在計算機中的存儲關系，英文用ascii，中文用gbk，通用用utf-8
9.列表（可以嵌套）
（1）無序列表
通過屬性可以更換前面圓圈的樣式，嵌套時自動更換圖標
（2）有序列表
通過屬性可以更換前面序號的樣式，嵌套時不會自動更換圖標
10.語義化
語義：表示該標簽的意義，比如h1表示一級標題
標簽效果：給用戶看到的效果，可以通過css控制樣式
任何效果都可以通過控制標簽實現，所以語義是最重要的
<em>和<i>標簽都可以表示斜體，更推薦使用<em>，因為不止有斜體效果
<strong>和<b>標簽都可以表示加粗，更推薦使用<strong>，因為不止有加粗效果
11.插入圖片
插入本地圖片或鏈接指向的圖片，推薦本地圖片
一般不會直接修改圖片的大小，會糊
12.相對路徑和絕對路徑
./當前路徑? 可省略
../上一級路徑
13.表格
（1）結構
（2）屬性與樣式
cellspacing：設置每個數據邊框之間的距離
cellpadding：設置數據與邊框之間的距離
表頭改為<th>：對數據加粗居中
align屬性：數據居中
bgcolor屬性：設置背景顏色
（3）跨行跨列（單元格合并）
跨列操作
跨行操作
14.表單
作用：采集信息
![[數據結構] 基于交換的排序 冒泡排序快速排序](http://pic.xiahunao.cn/[數據結構] 基于交換的排序 冒泡排序快速排序)
