本博文大綱
什麼是HTML、CSS?css
宇宙第一編輯器 VS Codehtml
chrome瀏覽器？前端
深刻了解網站開發web
Web前端的三大核心技術：chrome
html+css+js 舉例說明數據庫
什麼是HTML、CSS?
是作網站的編程語言。編程
瀏覽器把代碼解析後的樣子就是咱們看到的網站。如何看到網站的原始代碼呢？經過鼠標右鍵選擇查看網頁源代碼。後端
如何去寫代碼？寫到哪裏呢？瀏覽器
一個網站就是由N多個網頁組成的。每個網頁都是一個 .html文件編程語言
舉例：電視劇40集，每集都是一個.mp4文件
宇宙第一編輯器 VS Code
VS Code,全稱 Visual Studio Code,來自微軟，是一個開源的、基於 Electron 的輕量代碼編輯器。
下載 VS Code：https://code.visualstudio.com
安裝好了的 vscode 是英文的。
安裝插件？
點擊 extensions 圖標 -- > 搜索關鍵字 -- > 找到對應的 -- > 安裝
關鍵字：Chinese (Simplified) Language、open in browser、View In Browser
怎樣寫一個html文件呢？怎樣在瀏覽器中運行 html 文件呢？
打開 VS Code
點擊菜單 文件 --> 打開文件夾 --> 選擇想要的文件夾 ==》就可將想要的文件夾加到了資源管理器中
就能夠在想要的文件夾下建立 html 文件了
編輯 相應的 html 文件
保存
右鍵 --> open in default browser | open in other browser
編輯器的基本使用？
ctrl + s 保存
建立文件、文件夾，重命名、刪除
ctrl + a
ctrl + x
ctrl + c
ctrl + v
ctrl + z
ctrl + y
文字橫向到了邊界自動折行？
文件 --> 首選項 --> 設置 --> 搜索 word --> word wrap 設置爲 on
設置 編輯器 字體大小？
文件 --> 首選項 --> 設置 --> 搜索 font --> font size 設置爲 本身想要的大小
還能夠設置不少
選中到行尾 shift + end
選中到行首 shift + home
快速複製一行 shift + alt + 光標上、下鍵
快速移動一行 alt + 光標上、下鍵
向後縮進 tab
向前縮進 shift + tab
alt + 左鍵 多光標
選中(一個單詞)+ ctrl + d 選中多個相同的單詞
點擊 搜索 --> 關鍵字 能夠搜索到被打開的文件夾下全部文件中的內容所包含的關鍵字 --> 替換
chrome瀏覽器？
chrome 下載地址： https://www.google.cn/intl/zh-CN/chrome/
百度統計瀏覽器市場份額： https://tongji.baidu.com/data/browser
深刻了解網站開發
UI設計師: 設計稿
web前端開發工程師(H5開發)
設計稿 --> 代碼
數據庫裏的數據 --> 顯示到頁面
HTML + CSS
HTML: 結構
CSS： 樣式
web後端開發工程師
Web前端的三大核心技術：
HTML: 結構
CSS: 樣式
Javascript： 行爲
怎樣關閉 chrome 瀏覽器的 js 功能
打開谷歌瀏覽器，點擊右上方菜單欄 - 選擇「設置」 - 選擇「隱私設置」 - 選項「內容設置」 - 選擇「JavaScript」 - 選擇「不容許任何網站運行JavaScript」。
ctrl + 鼠標滾輪 放大/縮小頁面的顯示內容
ctrl + 0 還原成原始大小
html+css+js 舉例說明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
div{ color: red; font-style: italic;}
</style>
<title>Document</title>
</head>
<body>
<div>HTML+CSS課程系列</div>
</body>
<script>
let div = document.querySelector('div');
let timer = null;
let flag = true;
div.onmouseover = function(){
timer = setInterval(()=>{
if (flag) {
div.style.color = 'blue';
div.style.fontStyle = 'normal';
} else {
div.style.color = 'red';
div.style.fontStyle = 'italic';
}
flag = !flag;
},500);
};
div.onmouseout = function(){
clearInterval(timer);
};
</script>
</html>