一、學習路線
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 像素 設定影像的邊框粗細，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539126.html
標籤：Html/Css