record1
1. 什麼是HTML、CSS?
是作網站的編程語言。
瀏覽器把代碼解析後的樣子就是咱們看到的網站，如何看到網站的原始代碼呢？經過鼠標右鍵選擇查看網頁源代碼。css
如何去寫代碼？寫到哪裏呢？html
一個網站是由N多個網頁組成的。 每個網頁 .html文件
電視劇，40集。 .mp4 文件前端
2. VSCode編輯器？html5
VS code下載地址：https://code.visualstudio.com/web
如何安裝插件？ 語言包、 open in browser view in borwserchrome
學習編輯器基本使用？數據庫
設置：文件-> 首選項 -> 設置 ( 大小、是否換行 word wrap )編程
建立文件、建立文件夾、重命名和刪除、搜索後端
ctrl + s : 保存
ctrl + a : 全選
ctrl + x、ctrl + c、ctrl + v : 剪切、複製、粘貼
ctrl + z、ctrl + y : 撤銷、前進
shift + end : 從頭選中一行
shift + home : 從尾部選中一行
shift + alt + ↓ : 快速複製一行
alt + ↑或↓ : 快速移動一行瀏覽器
tab : 向後縮進
tab + shift : 向前縮進
多光標 : alt + 鼠標左鍵
ctrl + d : 選則相同元素的下一個
3. chrome瀏覽器？
Chrome下載地址： https://www.google.cn/intl/zh-CN/chrome/
百度統計瀏覽器市場份額： https://tongji.baidu.com/data/browser chrome : 68.88%
4. 深刻了解網站開發？
UI設計師 : 設計稿
web前端開發工程師(H5開發)
設計稿 -> 代碼
數據庫裏的數據 -> 顯示到頁面
HTML + CSS
HTML : 結構
CSS : 樣式
web後端開發工程師
5. web三大核心技術？
HTML
CSS
JavaScript
6. HTML基本結構和屬性？
HTML ： 超文本 標記 語言
超文本 : 文本內容 + 非文本內容 ( 圖片、視頻、音頻等 )
標記 : <單詞>
語言 : 編程語言
標記也叫作標籤：
<header>
<footer>
寫法分紅兩種：
單標籤 <header>
雙標籤 <header></header>
建立標籤的快捷鍵：單詞 + tab鍵 -> <單詞>
標籤是能夠上下排列，也能夠組合嵌套。
HTML常見標籤：http://www.html5star.com/manual/html5label-meaning/
標籤的屬性：來修飾標籤的，設置當前標籤的一些功能。
<標籤 屬性="值" 屬性2="值2">
7. HTML初始代碼？
每一個.html文件都有的代碼叫作初始代碼 ， 要複合html文件的規範寫法。
! + tab鍵 : 快速的建立html的初始代碼
<!DOCTYPE html> 文檔聲明 : 告訴瀏覽器這是一個html文件
<html lang="en"> html文件的最外層標籤：包裹着全部html標籤代碼 lang="en"表示是一個英文網站 lang="zh-CN"表示一箇中文網站
<head>
<meta charset="UTF-8"> 元信息：是編寫網頁中的一些輔助信息 charset="UTF-8"國際編碼，讓網頁不出現亂碼的狀況
<title>Document</title> 設置網頁的標題
</head>
<body>
顯示網頁內容的區域
</body>
</html>
8. HTML註釋？
寫法：<!-- 註釋的內容 --> 在瀏覽器中看不到，只能在代碼中看到註釋的內容。
意義：
1. 把暫時不用的代碼註釋起來，方便之後使用。
2. 對開發人員進行提示。
快捷添加註釋與刪除註釋：
1. ctrl + /
2. shift + alt + a
9. 標題與段落？
標題 -> 雙標籤 : <h1></h1> ... <h6></h6>
在一個網頁中，h1標題最重要，而且一個.html文件中只能出現一次h1標籤。
h五、h6標籤在網頁中不常常使用。
段落 -> 雙標籤 : <p></p>
10. 文本修飾標籤？
強調 -> 雙標籤 : <strong></strong>、<em></em>
區別：
1. 寫法和展現效果是有區別的，一個加粗、一個斜體
2. strong的強調性更強，em的強調性稍弱。
下標 : <sub></sub>
上標 : <sup></sup>
刪除文本 : <del></del>
插入文本 : <ins></ins>
注：通常狀況下，刪除文本都是和插入文本配合使用的。
11. 圖片標籤？
img -> 單標籤
src : 引入圖片的地址。
alt : 當圖片出現問題的時候，能夠顯示一段友好的提示文字。
title : 提示信息
width、height : 圖片的大小
12. 路徑的引入？
相對路徑
絕對路徑
13. 連接標籤？
a -> 雙標籤 <a></a>
href屬性 : 連接的地址
target屬性 : 能夠改變連接打開的方式，默認狀況下：在當前頁面打開 _self 新窗口打開 _blank
base -> 單標籤 ：做用就是改變連接的默認行爲的。
14. 錨點？
兩種作法
1. #號 + id屬性
2. #號 + name屬性（注意name屬性加給的是a標籤）
15. 特殊字符？
1. & + 字符
2. 解決衝突啊 左右尖括號、添加多個空格的實現
3. < >
16. 列表標籤？
1. 無序列表 -> ul li 符合嵌套的規範
2. 有序列表 -> ol li 通常用的比較少，能夠用無序列表來實現
3. 定義列表 -> dl dt dd 列表項須要添加標題和對標題進行描述的內容
注：列表之間能夠互相嵌套，造成多層級的列表。
17. 表格標籤？
table、tr、th、td、caption 等
注：以前是有嵌套關係的，要符合嵌套規範。
語義化標籤：tHead、tBody、tFood
注：在一個table中，tBody是能夠出現屢次的，可是tHead、tFood只能出現一次。
align : left、center、right
valign : top、middle、bottom
18. 表單標籤？
form、input、textarea、select、label ..
input(單標籤)標籤有一個type屬性，決定是什麼控件。
還有一些常見的屬性：
checked、disabled、name、for ...
19. div和span？
div : 作一個區域劃分的塊
span : 對文字進行修飾的內聯
20. CSS基礎語法？
選擇器 { 屬性1 : 值1 ; 屬性2 : 值2 }
width : 寬
height : 高
background-color : 背景色
長度單位 :
1. px -> 像素
2. % -> 百分比
外容器1 -> 600px 當前容器 50% -> 300px
外容器2 -> 400px 當前容器 50% -> 200px
21. CSS樣式的引入方式？
1. 內聯樣式
style屬性
2. 內部樣式
style標籤
區別：
內部樣式的代碼能夠複用、複合W3C的規範標準，進行讓結構和樣式分開處理。
3. 外部樣式
引入一個單獨的CSS文件，name.css
經過link標籤引入外部資源，rel屬性指定資源跟頁面的關係，href屬性資源的地址。
經過@import方式引入外部樣式 ( 這種方式有不少問題，不建議使用 )
22. CSS中的顏色表示法？
1. 單詞表示法 : red blue green yellow ...
2. 十六進制表示法：#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1
0 1 2 3 4 5 6 7 8 9 a b c d e f
3. rgb三原色表示法：rgb(255,255,255);
取值範圍 0 ~ 255
獲取顏色的工具： 提取顏色的下載地址：https://www.baidufe.com/fehelper photoshop工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。