第一講：WEB前端開發(fā)是做什么的及需要學習那些內(nèi)容
?WEB前端開發(fā)工程師要做什么？
答：做PC端和移動端的網(wǎng)頁并解決用戶體驗的問題获诈。
?WEB前端開發(fā)工程師具體要學習什么內(nèi)容及必備條件该肴？
答：必備條件：（1）能上網(wǎng)、會打字已艰、懂得互聯(lián)網(wǎng)逞盆、用過搜索引擎券勺。
（2）有濃厚的興趣绪钥。
（3）肯做聯(lián)系，勤敲代碼关炼。
學習內(nèi)容：（1）軟件：
瀏覽器[谷歌程腹、IE、火狐儒拂、蘋果]
瀏覽器插件
用來寫代碼的編輯器：記事本寸潦、DW、Sublime···
用來處理圖片的工具：PhotoShop
※（2）語言：
HTML
CSS
JavaScript
第二講：HTML語言是什么
?HTML超文本標記語言
超：超出文本社痛。一個網(wǎng)頁不只有文本還有聲音有圖片有視頻见转。
文本：文本形式。
語言：和瀏覽器打交道的蒜哀，與瀏覽器進行溝通斩箫。
標記、標簽：<html> <不能出現(xiàn)漢字>
標簽對：<html>（標簽頭）
<head>（頭部頭）
<title>標題-title（可以出現(xiàn)漢字）</title>（標題）
</head>（頭部尾）
<body>（主體頭）
內(nèi)容-content
</body>（主體尾）
</html>（標簽尾）
單標簽：<meta /> <img /> /:表示結(jié)束撵儿。
<!doctype html>：寫一個文檔乘客，類型是html。寫在<html>前淀歇，大小寫都可易核。
<meta charset=”UTF-8”/>：文檔的翻譯器，識別各國語言浪默，防止出現(xiàn)亂碼牡直。
記事本編輯器使用此語句時：保存時把編碼換至UTF-8缀匕。
寫在<head>后。
?DW井氢、Sublime等編輯器自帶文本格式弦追。
DW：自帶文本格式岳链。
Sublime：先打出“花竞！”，再按ctrl+E掸哑，自動生成文本格式约急。
第三講：CSS語言和JS語言介紹及演示
?CSS：層疊樣式表
<body>寫在主體內(nèi)</body>
<div>aaaa</div>（把內(nèi)容包起來，給內(nèi)容加外觀）
加樣式：<div style=”width : 200px; height : 200px; background:red;border:8px solid red;”>（英文輸入法）
樣式=屬性名稱：值 苗分；
width:寬 height:高 px：像素 background：背景顏色
border：邊框 solid：實線 font-size：字體
加圖片：瀏覽器中的圖片：右鍵--復制圖片網(wǎng)址
background:url(圖片地址);
加過渡時間：transition : 1s（時間1秒）結(jié)合JavaScript使用厌蔽。
?JavaScript：腳本語言 （行為，網(wǎng)頁做動態(tài)變化）
<div onclick=”this.style.width = ‘800px’;this.style.height = ‘400px’;” style=”width : 100px; height : 100px; background:red;border:8px solid red;”>
onclick=”this.style.width = ‘800px’;”
點擊時發(fā)生=”這個圖片.樣式.屬性名稱=’變化后的量’;”
與樣式不同的是：樣式：屬性名稱：值
JavaScript：屬性名稱=’ 值 ‘
第四講：記事本摔癣、sublime奴饮、DW介紹
?記事本 打碼時無提示
代碼生成：自行打碼
<!doctype html>
<html>
<head>
<meta charset=”UTF-8”/>
<title></title>
</head>
<body>
</body>
</html>
字體放大：格式--字體
折疊代碼：無法實現(xiàn)
效果呈現(xiàn)：保存.html文件，雙擊桌面文件择浊。
?Sublime 打碼時有提示
代碼生成：先打出“戴卜！”，再按ctrl+E琢岩，自動生成文本格式投剥。
字體放大：ctrl+滾動滑輪
折疊代碼：點擊標簽前面數(shù)字的箭頭
效果呈現(xiàn)：保存.html文件，右鍵代碼--在瀏覽器中打開担孔。
?DW： 打碼時有提示
代碼生成：點擊“代碼”自動生成
效果呈現(xiàn)：拆分：所見即所得江锨。不用保存，立即呈現(xiàn)效果糕篇。
第五講：id選擇符啄育、樣式出現(xiàn)的位置（行間、內(nèi)部拌消、外部）
前提步驟：新建html文件--點擊代碼--桌面新建文件夾--把創(chuàng)建文件保存進去
?行間樣式表 ：html注釋挑豌，電腦不識別。
```
<body>
<div style=”width:100px;height:100px;background:red;font-size:30px;”>aaa</div>
<div style=”width:100px;height:100px;background:red;font-size:30px;”>bbb</div>
<div style=”width:100px;height:100px;background:red;font-size:30px;”>ccc</div>
</body>
行間樣式表：代碼在一行拼坎，比較直觀簡單浮毯，命令只作用在一個元素上。
?內(nèi)部樣式表
```
<head>
<meta charset=”UTF-8”/>
<title></title>
<style>（樣式標簽）#是id的意思
#div1{
width:100px;
height:100px;
background:red;
}
#div2{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div id=”div1（英文開頭）”>aaa</div>
<div id=”div2（英文開頭）”>bbb</div>
</body>
?外部樣式表
```
<head>
<meta charset=”UTF-8”/>
<title></title>
<link rel=”stylesheet” href=”（此處點擊連接泰鸡，選擇要連接的樣式表）”>（創(chuàng)建連接）
</head>
<body>
<div id=”div1”>aaa</div>
<div id=”div2”>bbb</div>
</body>
用記事本寫樣式：
#div1{
width:100px;
height:100px;
background:red;
}
保存到桌面的文件夾中 樣式表的后綴.css 名字不可以是中文
通過改變外部樣式表债蓝，改變頁面樣式。
第六講：常用樣式：單位值種類盛龄、顏色值模式饰迹、背景圖片芳誓、平鋪、背景定位
?常用樣式 /**/CSS注釋
<head>
<meta charset=”UTF-8”/>
<title></title>
<style>
#div1{
width:200px;（單位值種類：px 像素 % 百分比 mm 毫米）
height:200px;
background-color:red;（顏色值模式：英文單詞啊鸭，16進制--#锹淌，rgb()）
background-image:url(img/1.jpg（路徑）);（背景圖片默認狀態(tài)下是平鋪）
background-repeat:no-repeat;（不平鋪）
background-repeat:repeat-x;（x軸平鋪）
background-repeat:repeat-y;（y軸平鋪）
background-position:100px 30px;（背景定位：x y 不寫項為居中）
background-position:10% 30%;
（英文方式：x : left center right y : top center bottom）
（background-repeat:repeat-x;
background-position:40px 0px; 平鋪x軸，右移40像素赠制，左邊不會留空白）
（background-repeat:no-repeat;
background-position:-40px -30px; 可以設負值赂摆，圖片縮進）
}
</style>
</head>
<body>
<div id=”div1”></div>
</body>
第七講：背景中scroll的設置、復合樣式（簡化單一樣式）
?scroll的設置 <br/>換行符
<head>
<meta charset=”UTF-8”/>
<title></title>
<style>（不加名字可以直接寫body）
body{
height:3000px;
background-image:url(img/1.jpg);
background-repeat:no-repeat;（如果是0钟些，px可恃毯拧）
background-attachment:fixed;（固定定位）
background-attachment:scroll;（可滾動，不加此句默認滾動）
}
</style>
</head>
<body>
</body>
?單一樣式
background-image:url(img/1.jpg);
background-repeat:no-repeat;
background-position:center 0px;
background-attachment:fixed;
?復合樣式
background:url(img/1.jpg) no-repeat center 0px fixed;（位置可以隨意換）
第八講：邊框
<head>
<meta charset=”UTF-8”/>
<title></title>
<style>
#div1{
width:400px;
height:400px;
border:1px dashed #033;（粗細1像素政恍，虛線汪拥，顏色）
background:red;
}
</style>
</head>
<body>
<div id=”div1”></div>
</body>
樣式：solid 實線 dashed 虛線 dotted 點畫線（像素過高在不同瀏覽器中會出現(xiàn)兼容問題）
border-top:10px solid red;（上部）
border-bottom:10px solid yellow;（下部）
border-left:10px solid blue;（左部）
border-right:10px solid green;（右部）
第九講：PS切圖快捷鍵操作、印屏幕篙耗、瀏覽器插件獲取WEB圖片
?PS技術：切圖（摳圖）迫筑、測量、圖片簡單的處理
如何得到一張圖片：（1）設計師給的PS圖片宗弯，格式（.psd）
（2）印屏幕：PrtSc
打開PhotoShop--新建ctrl+n--粘貼ctrl+v
放大 ctrl++ 雙擊放大鏡還原 縮小ctrl+- 拖拽 ：空格
摳圖：選框工具+添加選取+從選取中減去+與選取交叉
保存：ctrl+c 新建 ctrl+n 尺寸不變 背景內(nèi)容：透明
存儲為WEB 和設備所用格式 選擇gif
拾色器：填充顏色 選中--油漆工具（alt+del）前景色
（ctrl+del）背景色
拉伸：ctrl+t 漸變
（3）瀏覽器的插件F12 移動鼠標 右鍵圖片地址
第十講：網(wǎng)易新聞小結(jié)構(gòu)實例
反選 ctrl+shift+i
嵌套包含關系
```
<div id=”box”>
<div id=”title”></div>（縮進 TAB）
<div id=”content-1”></div>
<div id=”content-2”></div>
</div>
```
切換模式 f 可拖拽
測量 選中--F8
漸變 取小像素 平鋪
驗證方法：100%的狀態(tài)下進行比較 印屏幕