一、學習路線 1.HTML5+CSS3 黑馬程式員pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動端前端視頻教程_嗶哩嗶哩_bilibili 2.JavaScript JavaScript基礎語法-dom-bom-js-es6新語法-jQuery-數據可視化echarts黑馬 ...
一、學習路線
1.HTML5+CSS3 黑馬程式員pink老師前端入門教程，零基礎必看的h5(html5)+css3+移動端前端視頻教程_嗶哩嗶哩_bilibili
2.JavaScript JavaScript基礎語法-dom-bom-js-es6新語法-jQuery-數據可視化echarts黑馬pink老師前端入門基礎視頻教程(500多集)持續_嗶哩嗶哩_bilibili
3.ES6 ES6 入門教程 - ECMAScript 6入門 (ruanyifeng.com)
4.Vue.js 【黑馬程式員】vue.js從入門到應用_嗶哩嗶哩_bilibili
最全最新Vue、Vuejs教程，從入門到精通_嗶哩嗶哩_bilibili
5.uni-app uni-app官網 (dcloud.net.cn)
二、基本概念
1.網頁
- 網頁是網站的一頁，通常是HTML格式的文件，通過瀏覽器來閱讀。
- HTML指的是超文本標記語言，是用來描述網頁的一種語言。
- 網頁是由網頁元素組成的，這些元素是通過html標簽描述出來，然後通過瀏覽器解析來顯示給用戶的。
2.常用瀏覽器及內核
- 瀏覽器是網頁顯示、運行的平臺。常用的瀏覽器由IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。
- 瀏覽器內核（渲染引擎）：負責讀取網頁內容，整理訊息，計算網頁的顯示方式並顯示網頁
-
瀏覽器 內核 備註 IE Trident IE、獵豹安全、360急速瀏覽器、百度瀏覽器 firefox Gecko 火狐瀏覽器內核 Safari Webkit 蘋果瀏覽器內核 chrome/Opera Blink chrome/opera瀏覽器內核。Blink其實是WebKit的分支。
3.Web標準
- Web標準是由W3C組織和其他標準化組織制定的一系列標準的集合。W3C（萬維網聯盟）是國際最著名的標準化組織。
- 因為瀏覽器不同，它們顯示頁面或者排版就有些許差異，所以需要Web標準。
- Web標準的構成包括結構、表現和行為三個方面。
-
標準 說明 結構 結構用於對網頁元素進行整理和分類，現階段主要學的是HTML。 表現 表現用於設置網頁元素的版式、顏色、大小等外觀樣式，主要是的是CSS。 行為 行為是指網頁模型的定義及交互的編寫，現階段主要學的是javascript。
三、HTML語法規範
1.基本語法概述
1.1基本語法概述
- HTML標簽是由尖括弧包圍的關鍵字，例如<html>。
- HTML標簽通常是成對出現的，例如<html>和</html>，我們稱為雙標簽。標簽中的第一個標簽是開始標簽，第二個是結束標簽。
- 有些特殊的標簽必須是單個標簽（極少情況），例如<br />，我們稱為單標簽。
1.2標簽關係
- 雙標簽關係可以分為兩類：包含關係和併列關係。
2.HTML基本結構標簽
2.1第一個HTML網頁
- 每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基礎標簽上書寫。HTML頁面也稱為HTML文檔。
-
標簽名 定義 說明 <html></html> HTML標簽 頁面中最大的標簽，我們稱為跟標簽 <head></head> 文檔的頭部 註意在head標簽中我們必須要設置的標簽是title <title></title> 文檔的標題 讓頁面擁有一個屬於自己的網頁標題 <body></body> 文檔的主體 元素包含文檔的所有 內容，頁面內容基本都是放到body裡面的
四、開發工具
1.VSCode
- 打開軟體。
- 新建文件。
- 保存為.html文件
- 生成頁面骨架結構：輸入！按下Tab鍵。
- 利用插件在瀏覽器中預覽頁面：單擊滑鼠右鍵，在彈出出口中點擊“Open In Default Browser”。
2.利用vscode創建第一個頁面
-
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>我利用vscode創建的第一個頁面</title> 8 </head> 9 <body> 10 寫代碼是一件非常快樂的事情 11 </body> 12 </html>
3.推薦安裝插件
-
插件 作用 Chinese 中文簡體語言包 Open in Browser 右擊選擇瀏覽器打開html文件 JS-CSS-HTML Formatter 每次保存，都會自動格式化js css 和html代碼 Auto Rename Tag 自動重命名配對的HTML/XML標簽 CSS Peek 追蹤至樣式
五、網頁開發工具
1文檔類型聲明標簽
- <!DOCTYPE>文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁。
- <!DOCTYPE>聲明位於文檔的最前位置，處於<html>標簽之前。
- <!DOCTYPE>不是一個HTML標簽，它就是文檔類型聲明標簽。
2.lang語言種類
- 用來定義當前文檔顯示的語言。
- en定義語言為英文。
- zh-CN定義語言為中文。
- 定義為en就是英文網頁，定義為zh-CN就是中文網頁。
- 就文檔來說，定義為en也可以顯示為中文，定義為zh-CN也可以顯示英文。
3.字元集
- 字元集是多個字元的集合，以便電腦能夠識別和儲存各種文字。
- 在<head>標簽內，可以通過<meta>標簽的charset屬性來規定HTML文檔應該使用哪種字元編碼。
- charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被稱為萬國碼，基本包括了全世界所有國家需要用到的字元。
-
<meta charset="UTF-8" /> //必須寫否則出現亂碼現象
六、HTML常用標簽
1.標簽語義
- 學習標簽是有技巧的，重點是記住每個標簽的語義，簡單理解就是指標簽的含義，即這個標簽是用來幹嘛的。
- 根據標簽的語義，在合適的地方給一個最為合理的標簽，可以讓頁面結構更清晰。
2.標題標簽<h1>-<h6>
-
<h1>我是一級標題</h1>
3.段落和換行標簽<p>
-
<p>我是一個段落標簽</p>
- 文本在段落中會根據瀏覽器視窗的大小自動換行。
- 段落和段落之間保有間隙。
-
<br /> //換行標簽
4.文本格式化標簽
- 設置粗體、斜體、下劃線等效果。
- 標簽語義：突出重要性。
-
語義 標簽 說明 加粗 <strong></strong>或者<b></b> 更推薦使用<strong>標簽加粗 語義更強烈 傾斜 <em></em>或者<i></i> 更推薦使用<em>標簽傾斜 語義更強烈 刪除線 <del></del>或者<s></s> 更推薦使用<del>標簽刪除線 語義更強烈 下劃線 <ins></ins>或者<u></u> 更推薦使用<ins>標簽下劃線 語義更強烈
5.<div>和<span>標簽
- <div>和<span>沒有語義，它們就是一個盒子，用來裝內容的。
- div表示分割；span表示跨度、跨距。
- div自己獨占一行，一行只能放一個div，大盒子。
- span一行可以有多個，小盒子。
6.圖像標簽和路徑
6.1圖像標簽<img>
-
<img src="圖像URL" /> //src是<img>標簽的必須屬性，它用於指定圖像文件的路徑和文件名
-
屬性 屬性值 說明 src 圖片路徑 必須屬性。 alt 文本 替換文字，圖像不能顯示的文字。 title 文本 提示文本，滑鼠放到圖像上，顯示的文字。 width 像素 設置圖像的寬度。 height 像素 設置圖像的高度。
border 像素 設置圖像的邊框粗細。
