1.前端認(rèn)知
前端開(kāi)發(fā)到底是做什么的怒竿？
-
我們是做什么的？
IT系統(tǒng)工程
負(fù)責(zé)信息化系統(tǒng)的設(shè)計(jì)稳其、建設(shè)驶赏，包括設(shè)備、系統(tǒng)既鞠、數(shù)據(jù)庫(kù)煤傍、應(yīng)用系統(tǒng)的建設(shè)
-
在公司中一個(gè)項(xiàng)目的開(kāi)發(fā)流程是什么樣子的？
1. 產(chǎn)品需求
產(chǎn)品經(jīng)理 需求文檔
Product Manager
1.1 第一次例會(huì) 去掉不合理的需求
2. 項(xiàng)目設(shè)計(jì)
視覺(jué)設(shè)計(jì)師 各種PSD文件
交互設(shè)計(jì)師
2.1 第二次例會(huì) 排工期
3. 前端開(kāi)發(fā)
前端開(kāi)發(fā)工程師（HTML 5 IOS Android Unity-3D）
4. 后臺(tái)開(kāi)發(fā)
后臺(tái)開(kāi)發(fā)工程師 配合處理
5. 測(cè)試
暴力測(cè)試 瘋狂點(diǎn)擊
打樁測(cè)試 給固定數(shù)值測(cè)試某一功能
6. 上線運(yùn)營(yíng)
公司運(yùn)營(yíng)人員
-
我們需要學(xué)會(huì)什么嘱蛋？
1. 軟件（2%）
瀏覽器 編譯器 PS 各種瀏覽器插件
2. 語(yǔ)言（98%）
HTML CSS JavaScript 其他一些語(yǔ)言（Ajax PHP Node.js）
2.前端開(kāi)發(fā)核心語(yǔ)言
| 結(jié)構(gòu) | 樣式 | 行為 |
|---|---|---|
| HTML | CSS | JavaScript |
3. HTML
HTML基本結(jié)構(gòu).html
<!-- 注釋 -->
<!-- Ctrl + / -->
<!--
注釋主要是為了開(kāi)發(fā)人員書(shū)寫(xiě)方便蚯姆，讓你在后期從新回顧代碼的時(shí)候，可以快速回想起來(lái)當(dāng)時(shí)是如何處理的
總結(jié)就一句話：注釋是給人看的
-->
<!-- 保存：Ctrl + s -->
<!-- 新建：Ctrl + n -->
<!-- 文檔頭（類型）聲明 -->
<!-- 代表的是 HTML 5 的標(biāo)準(zhǔn) -->
<!-- 文檔頭聲明 不是標(biāo)簽 （面試） -->
<!DOCTYPE html>
<!-- 定義 HTML 的根元素 -->
<!-- 所有的 HTML 代碼全部是書(shū)寫(xiě)在根元素當(dāng)中的 -->
<html>
<!-- 頭部 -->
<!--
里面包含的絕大部分內(nèi)容都是不可見(jiàn)的洒敏，里面的內(nèi)容主要用于輔助頁(yè)面的展示
-->
<head>
<!--
title:雙標(biāo)簽 用于定于頁(yè)面標(biāo)題
-->
<title>Hello World龄恋！</title>
<!--
meta：?jiǎn)螛?biāo)簽 用于定義頁(yè)面的元數(shù)據(jù)
屬性：charset 針對(duì)搜索引擎和解析格式的屬性
-->
<meta charset="utf-8">
</head>
<!--
里面包含的絕大部分在頁(yè)面中都是可見(jiàn)的，主要用于搭建 HTML 結(jié)構(gòu)
-->
<body>
<!-- 歷史上最最最常用的標(biāo)簽 -->
<div></div>
<!--
div：雙標(biāo)簽 無(wú)意義
-->
</body>
</html>
<!--
div 是 body 的子元素
body 是 div 的父元素
div 和 body 就是父子關(guān)系
head 和 body 是兄弟關(guān)系
如果是父子關(guān)系凶伙，一定要使用 tab 去進(jìn)行標(biāo)記
可以使用 Ctrl + [ 左移
Ctrl + ] 右移
-->
CSS的引入方式.html
<!DOCTYPE html>
<html>
<head>
<title>css的引入方式</title>
<meta charset = "utf-8">
<!--
內(nèi)部樣式表
優(yōu)點(diǎn)：相對(duì)于內(nèi)聯(lián)樣式表代碼少郭毕、省略一些
速度快，而且沒(méi)有服務(wù)器的請(qǐng)求壓力
缺點(diǎn)：不易改版和維護(hù)
造成單個(gè)界面文件過(guò)大
代碼較亂镊靴，不易前后端交互
使用場(chǎng)景：一般用在大型網(wǎng)站的首頁(yè)
-->
<style type="text/css">
/*
CSS 選擇器存在優(yōu)先級(jí)問(wèn)題
內(nèi)聯(lián)樣式表 1000
ID 選擇器 100
類選擇器 10
標(biāo)簽名選擇器 1
*/
/*1.標(biāo)簽名選擇器*/
/*作用范圍：直接針對(duì)當(dāng)前這個(gè)標(biāo)簽進(jìn)行設(shè)置*/
div{
width: 100px;
height: 100px;
background-color: red;
}
/*CSS的注釋方式*/
/*2.類選擇器*/
/*
使用注意：使用的時(shí)候铣卡，必須要在對(duì)應(yīng)的標(biāo)簽內(nèi)部有一個(gè)相同的 class 名稱，這樣才能一一對(duì)應(yīng)
作用范圍：具有對(duì)應(yīng)的 class 名稱的標(biāo)簽
特殊之處：在一個(gè)頁(yè)面中偏竟，可以存在多次煮落，因?yàn)樗x擇的是一類內(nèi)容
*/
.div_class{
width: 300px;
height: 300px;
background-color: green;
}
/*3. ID 選擇器*/
/*
作用范圍：具有對(duì)應(yīng)的 id 名稱的標(biāo)簽
特殊之處：在一個(gè)頁(yè)面中，只能使用一次
*/
#div_id{
width: 500px;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 第一種方式 -->
<!--
修改樣式：width 用于設(shè)置寬度
height 用于設(shè)置高度
background-color 用于設(shè)置背景顏色
px 像素（長(zhǎng)度單位）
屬性名稱 ：屬性數(shù)值 踊谋；
-->
<!-- <div style="width: 100px;height: 100px;background-color: red;"></div> -->
<!--
內(nèi)聯(lián)樣式表（直接寫(xiě)在標(biāo)簽內(nèi)部的這種方式蝉仇，叫做內(nèi)聯(lián)樣式表）
缺點(diǎn)：冗余代碼多、維護(hù)起來(lái)非常困難
優(yōu)點(diǎn)：優(yōu)先級(jí)非常高
使用場(chǎng)景：確定了的殖蚕，不會(huì)在修改的單個(gè)樣式
-->
<div class="div_class" id="div_id"></div>
</body>
</html>
外部樣式表.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<!--
外部樣式表
優(yōu)點(diǎn)：利于維護(hù)和改版
一個(gè)CSS文件控制多個(gè)頁(yè)面
減少代碼量轿衔，代碼簡(jiǎn)潔，利于分工
缺點(diǎn)：相對(duì)于單個(gè)界面睦疫，有垃圾數(shù)據(jù)
會(huì)造成服務(wù)器的請(qǐng)求壓力
使用場(chǎng)景：用于大型網(wǎng)站的二三級(jí)頁(yè)面
-->
<!--
link:
專門(mén)用于引入外部文件的標(biāo)簽
屬性：
rel 當(dāng)前引入文件和本身文件的關(guān)系
type 當(dāng)前引入文件的類型害驹、編碼格式
href 用于書(shū)寫(xiě)引入外部樣式所處位置
-->
</head>
<body>
<div></div>
</body>
</html>
style.css
div{
width: 500px;
height: 500px;
background-color: yellow;
}
引入方式的優(yōu)先級(jí)差別.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: red;
}
/*
引入方式的優(yōu)先級(jí)：
內(nèi)聯(lián)>內(nèi)部和外部
內(nèi)部和外部誰(shuí)生效 如果選擇器優(yōu)先級(jí)相同 ，誰(shuí)后引入誰(shuí)生效
如果選擇器優(yōu)先級(jí)不同蛤育，選擇器優(yōu)先級(jí)高的生效
*/
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</style>
</head>
<body>
<div></div>
</body>
</html>
4. 小練習(xí)
test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習(xí)</title>
<style type="text/css">
.div_class{
width: 300px;
height: 300px;
background-color: blue;
}
</style>
<link rel="stylesheet" type="text/css" href="CSS/test1.css">
</head>
<body>
<!-- .div_$*3 -->
<div style="width:100px;height:100px;background-color:red;"></div>
<div class="div_class"></div>
<div id="div_id"></div>
</body>
</html>
test1.css
#div_id{
width: 500px;
height: 500px;
background-color: green;
}
test1預(yù)覽效果
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習(xí)2</title>
<link rel="stylesheet" type="text/css" href="CSS/test2.css">
</head>
<body>
<div id="p1">
<div id="p2">
<div id="p3">
<div id="p4">
<div id="p5">
<div id="p6">
<div id="p7"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
test2.css
#p1{
width: 700px;
height: 700px;
background-color: red;
}
#p2{
width: 600px;
height: 600px;
background-color: orange;
}
#p3{
width: 500px;
height: 500px;
background-color: yellow;
}
#p4{
width: 400px;
height: 400px;
background-color: green;
}
#p5{
width: 300px;
height: 300px;
background-color: cyan;
}
#p6{
width: 200px;
height: 200px;
background-color: blue;
}
#p7{
width: 100px;
height: 100px;
background-color: purple;
}
test1預(yù)覽效果
