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预览效果
