1.前端認知
前端開發到底是做什么的？
-
我們是做什么的？
IT系統工程
負責信息化系統的設計、建設，包括設備、系統、數據庫、應用系統的建設
-
在公司中一個項目的開發流程是什么樣子的？
1. 產品需求
產品經理 需求文檔
Product Manager
1.1 第一次例會 去掉不合理的需求
2. 項目設計
視覺設計師 各種PSD文件
交互設計師
2.1 第二次例會 排工期
3. 前端開發
前端開發工程師（HTML 5 IOS Android Unity-3D）
4. 后臺開發
后臺開發工程師 配合處理
5. 測試
暴力測試 瘋狂點擊
打樁測試 給固定數值測試某一功能
6. 上線運營
公司運營人員
-
我們需要學會什么？
1. 軟件（2%）
瀏覽器 編譯器 PS 各種瀏覽器插件
2. 語言（98%）
HTML CSS JavaScript 其他一些語言（Ajax PHP Node.js）
2.前端開發核心語言
| 結構 | 樣式 | 行為 |
|---|---|---|
| HTML | CSS | JavaScript |
3. HTML
HTML基本結構.html
<!-- 注釋 -->
<!-- Ctrl + / -->
<!--
注釋主要是為了開發人員書寫方便，讓你在后期從新回顧代碼的時候，可以快速回想起來當時是如何處理的
總結就一句話：注釋是給人看的
-->
<!-- 保存：Ctrl + s -->
<!-- 新建：Ctrl + n -->
<!-- 文檔頭（類型）聲明 -->
<!-- 代表的是 HTML 5 的標準 -->
<!-- 文檔頭聲明 不是標簽 （面試） -->
<!DOCTYPE html>
<!-- 定義 HTML 的根元素 -->
<!-- 所有的 HTML 代碼全部是書寫在根元素當中的 -->
<html>
<!-- 頭部 -->
<!--
里面包含的絕大部分內容都是不可見的，里面的內容主要用于輔助頁面的展示
-->
<head>
<!--
title:雙標簽 用于定于頁面標題
-->
<title>Hello World！</title>
<!--
meta：單標簽 用于定義頁面的元數據
屬性：charset 針對搜索引擎和解析格式的屬性
-->
<meta charset="utf-8">
</head>
<!--
里面包含的絕大部分在頁面中都是可見的，主要用于搭建 HTML 結構
-->
<body>
<!-- 歷史上最最最常用的標簽 -->
<div></div>
<!--
div：雙標簽 無意義
-->
</body>
</html>
<!--
div 是 body 的子元素
body 是 div 的父元素
div 和 body 就是父子關系
head 和 body 是兄弟關系
如果是父子關系，一定要使用 tab 去進行標記
可以使用 Ctrl + [ 左移
Ctrl + ] 右移
-->
CSS的引入方式.html
<!DOCTYPE html>
<html>
<head>
<title>css的引入方式</title>
<meta charset = "utf-8">
<!--
內部樣式表
優點：相對于內聯樣式表代碼少、省略一些
速度快，而且沒有服務器的請求壓力
缺點：不易改版和維護
造成單個界面文件過大
代碼較亂，不易前后端交互
使用場景：一般用在大型網站的首頁
-->
<style type="text/css">
/*
CSS 選擇器存在優先級問題
內聯樣式表 1000
ID 選擇器 100
類選擇器 10
標簽名選擇器 1
*/
/*1.標簽名選擇器*/
/*作用范圍：直接針對當前這個標簽進行設置*/
div{
width: 100px;
height: 100px;
background-color: red;
}
/*CSS的注釋方式*/
/*2.類選擇器*/
/*
使用注意：使用的時候，必須要在對應的標簽內部有一個相同的 class 名稱，這樣才能一一對應
作用范圍：具有對應的 class 名稱的標簽
特殊之處：在一個頁面中，可以存在多次，因為它選擇的是一類內容
*/
.div_class{
width: 300px;
height: 300px;
background-color: green;
}
/*3. ID 選擇器*/
/*
作用范圍：具有對應的 id 名稱的標簽
特殊之處：在一個頁面中，只能使用一次
*/
#div_id{
width: 500px;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 第一種方式 -->
<!--
修改樣式：width 用于設置寬度
height 用于設置高度
background-color 用于設置背景顏色
px 像素（長度單位）
屬性名稱 ：屬性數值 ；
-->
<!-- <div style="width: 100px;height: 100px;background-color: red;"></div> -->
<!--
內聯樣式表（直接寫在標簽內部的這種方式，叫做內聯樣式表）
缺點：冗余代碼多、維護起來非常困難
優點：優先級非常高
使用場景：確定了的，不會在修改的單個樣式
-->
<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">
<!--
外部樣式表
優點：利于維護和改版
一個CSS文件控制多個頁面
減少代碼量，代碼簡潔，利于分工
缺點：相對于單個界面，有垃圾數據
會造成服務器的請求壓力
使用場景：用于大型網站的二三級頁面
-->
<!--
link:
專門用于引入外部文件的標簽
屬性：
rel 當前引入文件和本身文件的關系
type 當前引入文件的類型、編碼格式
href 用于書寫引入外部樣式所處位置
-->
</head>
<body>
<div></div>
</body>
</html>
style.css
div{
width: 500px;
height: 500px;
background-color: yellow;
}
引入方式的優先級差別.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;
}
/*
引入方式的優先級：
內聯>內部和外部
內部和外部誰生效 如果選擇器優先級相同 ，誰后引入誰生效
如果選擇器優先級不同，選擇器優先級高的生效
*/
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</style>
</head>
<body>
<div></div>
</body>
</html>
4. 小練習
test1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習</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預覽效果
test2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習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預覽效果
