day-1
what why how when where who
一、什么是web前端
（1）什么是web：使用浏览器去访问的 一种B/S结构的 应用程序，俗称网站网页。
网站细分为：电商网站，门户网站（官网），应用类型的网站（OA，CRM）
1.B/S程序：
B：Browser 浏览器
S：Server 服务器
代表：各类型的网站
2.C/S程序：
C：Client 客户端
S：Server 服务器
代表：QQ，网络游戏。
（2）什么是前端：
代码分两种：一种运行在客户端的，一种运行在服务器端
运行在服务端：又称后端代码（后台代码）
运行在客户端：就是在浏览器端运行的（前端代码）
（3）完整的优秀的web程序
必须有前端和后端组成。
二、都需要学习什么。
1.由数据来驱动项目–设计数据库，编写后端程序
技术：Server，mysql，Node.js，javascript（js）
2.静态页面编写—开发网页
技术：HTML（5），CSS（3），Bootstrap，ajax
3.添加页面功能：动态特效，页面交互，数据交互
技术：javascript，jQuery，DOM，BOM，Vue.js
4.复杂开发
HTML5高级，框架技术（vue.js，Angular.js，React），移动端开发，
微信小程序等。
三、how？
如何来学习web前端
1.手写代码
打下扎实的代码功底
打字速度（350次/分）
2.增加代码量（10万）
今日目标：
1.web基础知识
2.HTML概述
3.文本标记
一、web基础知识
1.web
即各类型的网站。
作用：可以把全世界的各种信息和服务无缝的连接并且提供生动形象的用户界面。
工作原理：在internet环境之上基于浏览器和服务器还有通信协议来实现的数据的传输和展示。
通信协议：http/https 规范数据是如何打包和传输的。
浏览器：
IE，Chrome，Firefox，Safari，Opera
浏览器的作用：提交请求
解析网页代码，以图文化界面展示给用户
浏览器端技术：HTML，CSS，Javascript
服务器：
服务器产品：Apache、Tomcat、IIS
服务器作用：接受前端的请求
响应结果
保证数据的安全
服务端技术：java、php、phthon、.NET、Node.js
二、HTML概述
1.什么是HTML？
HTML：Hyper Text Markup Language （超文本标记语言）
超文本：超出普通文本的功能
标记：带有尖括号<>的符号
语言：具有一定的语法规则
2.HTML特点
1.以 .html 或者 .htm 为文件的后缀
2.用带有尖括号的标记来标识内容
3.由浏览器来解析执行
4.嵌套脚本语言
3.标记
1.什么是标记？
在网页中我们用于去描叙功能的符号，称之为标记。
标记在使用时，必须带有尖括号。
2.标记语法
封闭类型：<标记>内容</标记>
又称之为双标记。
ex：百度
双标记必须有开始有结束
非封闭类型：<标记>
又称单标记。
ex：
4.元素
元素即标记，也可以称作标签。
元素的嵌套：元素之间是可以相互嵌套，来形成更为复杂的页面结构，也是为了功能的叠加。
嵌套的语法：在一对标记中去嵌套另外的标记。
<标记1>
<标记2></标记2>
</标记1>
注意：按顺序嵌套，并换行缩进。
5.属性和值
作用：修饰元素
语法：<标记 属性=“值” ></标记>
ex：
一级标题
标准属性（通用属性）：
id：元素在网页中的唯一标识
title：鼠标移入到元素上时，所提示的文字
class：在css中引入类选择器
style：在css中定义行内样式
6.注释
语法：
注意：注释本身不能嵌套，也不能嵌套在标题中
三、HTML标准结构
1.首先声明文档类型
<!doctype html> 告诉浏览器当前文档类型和版本风格
2.页面结构
页面由一对根标记组成：
在根标签中包含两部分：
网页头： 定义一些全局的信息：标题，编码方式，css样式，js脚本等。
网页主体： 展示内容：文字，图片，视频，音频
3.head元素
head是其他头元素的容器，包含：
4.body元素
显示主要内容：用户所看见的内容。
day-2
一、文本标记
1.标题元素
语法：
h后面的数字表示的是级别，从1~6依次为 从大到小；
ctrl + shift + n ：新建一个网页模版。
ctrl + b 在浏览器上面查看网页
特点：
1.字体加粗显示（醒目）
2.字体有大小变化
3.上下文之间有空白间距
属性：align 设置该元素在水平方向的对齐方式
取值：left（左）；
center（中）；
right（右）；
2.段落元素
语法：
内容
特点：字体正常显示，但是上下文之间有空白间距。
属性：align 设置该元素在水平方向的对齐方式
取值：left（左）；
center（中）；
right（右）；
3.换行
语法：
或
(是一个单标签)
4.水平线
语法：
或
(是一个单标签)
5.文本样式标记
:加粗
:下划线
:斜体
6.特殊字符
表示一个空格
© 版权符号 （一个圆圈里面一个c）
<: < 小于号
>: > 大于号
¥: ￥ 人民币
7.div和span
语法：
作用：用于网页布局
特点：元素独占一行
语法：内容
作用：用于包裹文本，自定义样式
特点：多个元素在一行中显示，从左到右排序。
将元素分成两大类：
块级元素：默认块级元素独占一行，从上往下排列
例如：div、p、h1-h6
行内元素：默认多个行内元素在一行中显示，从左往右排列。
例如：b、u、i、s、span、img、a等等
嵌套：一般来说都是用块级元素去嵌套行内元素，
块级元素之间可以互相嵌套，但是p标记不能嵌套p自己，
行内元素也可以互相嵌套。
二、图像和链接
1.URl
URL：Uniform Resource Locater 统一资源定位器，俗称路径。
路径表现形式：
1.绝对路径
2.相对路径
同级目录：直接引用资源
3.根相对路径
2.图像
语法：
属性：src ，指定图片的路径
alt ，当图片加载出错时，提示的文字。
width，设置图片的宽度，取值以px为单位的数字
height，设置图片的高度，取值以px为单位的数字
3.链接
语法：内容
属性：href，指定链接的路径的。
target，打开新网页的一个方式。
取值：_blank 从新的标签页开页面
_self 默认效果，从自己页面打开
三、列表
列表将据有相似特征或具有先后顺序的内容按照从上到下（从左到右）的顺序排列。
列表的组成：有列表类型和列表项组成
列表类型：
有序列表：
无序列表：
列表项：
- list item 列表的子项目
1.有序列表
语法： - 内容
- 内容
- ...... 属性：type，定义有序；列表排序方式 取值：1 数字，默认值 A 大写字母排序 a 小写字母排序 i 小写罗马数字 I 大写罗马数字 2.无序列表 语法：
- 内容
- 内容
- ......
day-04
一、选择器-伪类选择器
1.伪类选择器
作用：匹配元素不同状态的样式。
语法：选择器：伪类选择器 { 样式声明 }
伪类选择器的分类：链接伪类和动态伪类
链接伪类：
：link 匹配尚未访问的超级链接的状态
：visited 匹配访问过的超级链接的状态
动态伪类：
：hover 匹配鼠标悬停在元素上时的状态
：active 匹配被激活时的状态
：focus 匹配元素获取焦点时的状态
二、尺寸与边框
1.尺寸
1.尺寸单位
px：像素
%：百分比（相对于父元素的占比）
pt：磅 （1/72 英寸）标识字体大小
in：英寸 1in=2.54cm
em：相对于元素字体大小乘以倍数
rem：相对于根元素（html）字体大小乘以倍数
12px 10rem =10*12=>120px2.颜色单位
1.英文单词
red，yellow，blue，green，orange等。
2.rgb（r，g，b）
r：red
g：green
b：blue
r，g，b：取值范围0-255.
rgb（0，0，0）
3.#rrggbb
取值范围：0-9和a-f （十六进制）
#000000：黑色
#ffffff：白色
#dddddd：灰色
3.尺寸属性
用于设置元素的宽度和高度。
默认尺寸：
块级元素：
宽度：占据父元素的100%
高度：自适应
行内元素：
宽度：自适应（内容宽度）
高度：自适应（内容高度）
尺寸属性：
width：设置宽度，取值以px或%为单位的数字
height：设置高度，取值以px或%为单位的数字
哪些元素允许修改尺寸？
1.块级元素允许修改尺寸
2.非块级元素中本身具备width和height属性的元素（img，table）是可以修改尺寸的，其他的不具备width和height属性的行内元素是（span，a，b，u，s，i），不允许修改尺寸的。2.边框
1.什么是边框
就是围绕在元素内容和内边距外的线条
2.边框属性-简写方式
border：width style color；
width：边框的宽度（粗细）
style：边框的样式
取值：solid 实线条
dotted 虚线（圆点）
dashed 虚线（线条）
color：边框的颜色
合法的颜色值：transparent透明色
单边设置：
border-方向：width style color；
方向：left（左）、right（右）、top（上）、bottom（下）。3.边框倒角
倒角：将元素的直角倒成圆角。
属性：border-radius
取值： 1.具体数字+px；
2.百分比 50%（圆形）
单角设置：
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角三、框模型
1.什么事框模型
凡是元素皆为框。
框模型：box model，又称盒子模型。它定义了元素框处理元素内容，内边距，外边距以及边框的计算方式。
默认计算方式：
实际占地宽度=左右外边距+左右边框+左右内边距+width
实际占地高度=上下外边距+上下边框+上下内边距+height
2.外边距
外边距：边框外的空白间距，一般用于指元素与元素之间的间距。
属性：margin
取值：
1.以px或%为单位的数字
2.auto 本身是自动的意思，控制块级元素在水平方向居中对齐。
3.负数，元素向着相反的方向移动。
单边设置：
margin-top：上外边距
margin-bottom：下外边距
margin-left：左外边距
margin-right：右外边距
不同数量值得设置：
margin：value；表示四个方向的外边距
margin：v1 v2；表示上下 和 左右 的 外边距
margin：v1 v2 v3；表示 上、 左右 、 下 三个的外边距
margin：v1 v2 v3 v4；表示 上、右、下、左、四个的外边距3.内边距
内边距：边框与内容区域之间的空白间距。
特点：增加内边距会扩大边框所包含的范围。
属性：padding
取值：以px或%为单位的数字。单边设置：
padding-top：上内边距
padding-bottom：下内边距
padding-left：左内边距
padding-right：右内边距
设置不同数量值：
padding：value；表示四个方向的内边距
padding：v1 v2；表示上下 和 左右 的 内边距
padding：v1 v2 v3；表示 上、 左右 、 下 三个的内边距
padding：v1 v2 v3 v4；表示 上、右、下、左、四个的内边距
text-decoration：none 取消超链接的下划线。day-05
一、定位
1.定位
定位：页面上的元素，应该出现的位置。
2.定位分类
普通流定位
浮动定位
相对定位
绝对定位
固定定位
3.定位详情
1.普通流定位
又称文档流定位，就是页面中元素默认的显示方式。
文档规范：
所有的元素默认都是从父元素的左上角开始显示。
如果是块级元素，那么元素会独占一行，从上往下去排列。如果是行内元素，那么多个元素会在一行中从左往右去排列。
2.浮动定位
解决问题：能够让多个块级元素在一行中显示。
浮动特点：
1.元素一旦浮动起来将不占页面空间，脱离了文档流。
2.元素浮动起来后，会停靠在父元素的左边或者是右边，或者停靠在其他已经浮动的元素的边缘上。
属性：float
取值：left 、左浮动
right、右浮动
none。无浮动二、列表
1.列表项标识
属性：list-style-type、
取值：
disc，实心圆
circle，空心圆
square，实心方块
none，不显示标识
2.列表项图像
属性：list-style-image
取值：url（图像路径）
3.列表项位置
属性：list-style-position
取值：outside 标识位于内容区域之外，默认值。
inside 标识位于内容区域之内。
4.列表简写方式
属性：list-style
取值：type image position
常用方式：list-style：none；
三、定位-绝对定位
1.定位属性
position 作用规定元素的定位类型。
取值：
static，静态，默认显示方式，即文档流定位。
relative，相对定位
absolute，绝对定位
fixed，固定定位
只要元素设定了 position属性值为 relative、absolute、fixed 这三种值得都是已定位元素。2.偏移属性
作用：配合上面三种定位方式来实现元素的位置的移动。
top：从上向下偏移，值越大偏移距离越大
bottom：从下向上偏移，值越大偏移距离越大
left：从左向右偏移，值越大偏移距离越大
right：从右向左偏移，值越大偏移距离越大
3.绝对定位
特点：
1.绝对定位的元素默认是相对于body实现位置的偏移，但如果离他最近的祖先元素是已定位元素时，那么该元素将相对于其已定位的祖先元素去实现位置的偏移。
2.绝对定位的元素会脱离文档流，不占页面空间。
语法：position：absolute；
必须配合偏移属性使用。
使用场合：
1.有堆叠效果；
2.弹出菜单day-06
成亮 chengliang@tedu.cn
一、网络
1.1 IP地址、
用来区分网络中不同的设备（手机、打印机、电脑…）；
分为两种：互联网中的IP地址、局域网中的IP地址
1.2 查看IP地址
互联网：打开百度 --> 搜索IP
局域网：开始位置（单击右键） -》运行–》cmd–》ipconfig–》以太网适配器–》IPv4地址
1.3 查看设备之间能否通信
ping IP地址
1.4 关闭防火墙
此电脑–》网络–》打开网络共享中心–》window防火墙
依次关闭三个防火墙。
二、服务器
提供多种服务的计算机
访问服务器：域名/IP地址
使用不同服务：端口
每种服务器还要有对应的：协议
2.1 举例：浏览百度的网页。
访问百度的服务器：www.baidu.com
网页服务的端口：443
使用网页服务协议：http/https
完整：
https://www.baidu.com:443
访问学子商城：
http://172.163.0.224:80
三、xampp
服务器端软件（套装），包含有多款软件。
下载地址：https://www.apachefriends.org/download.html四、FTP服务
FTP是一种协议，用于文件传输
4.1 启动服务
点击xampp中的 FileZilla 的start，启动服务
4.2 进入服务面板
点击xampp中FileZilla的Admin
4.3 添加用户并设置下载目录
点击菜单栏 Edit–》 Users，进入用户面板
点击右侧Users 下的add，添加一个用户名，可以自定义
点击添加用户–》Shared Folders–》点击中间的add ，设置下载的目录
点击添加的用户—》General–》勾选 password，设置密码4.4 链接FTP
ftp://176.212.34.166:21五、MySQL服务
是一款数据库软件，用于存储项目中的数据
①启动：点击xampp中MySQL否的start
②使用界面化管理MySQL数据库，需要启动Apache服务。
启动Apache：点击xampp中Apache后的start。
③点击MySQL后的Admin，进入到界面化管理。
5.1 数据库逻辑结构
服务器软件 -》多个数据库仓库 -》每个库中有多个数据库（不同类型数据） -》每个表中保存数据
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
