day01内容
- 回顾
-
网页重构
【根据设计师/产品经理绘制的原型效果（axure、psd）重构出兼容性良好网页】
HTML5 标签（结构）
1.块级标签
div 无意义的块元素
p 默认样式，在应用的时候一般都会被重置！纹眉
h1~h6
ul>li
ol>li
dl>dt,dd
H5新增了一系列的块级标签（语义化标签）- 与div表现效果是一样的
header、article、footer、nav、section、aside、address…
2.行内标签
span
装饰类标签
i strong b font em sub sup
3.功能性标签(行内标签)
a 超级连接
href target
img 图片
src alt
iframe 引入一个额外的网页
table
thead
tr>th
colspan
rowspan
tbody
tr>td
tfoot
form
input
type: text/password/file/checkbox/radio/reset/commit/button
type: date/mail/number 不建议使用！（样式不统一，兼容性较差）【组件！bootstrap】
placeholder
select>option
textarea
CSS3（修饰）
语法
注释 /**/
样式
选择器 {
规则;
规则;
…
}
如何在html中引用css
link
style标签
style属性
选择器
基本选择器
标签 div p
id #id
类 .class
或者 div,p
并且 div.one
层次选择器
后代 ul li{}
子代 ul>li{}
兄弟 + ~
属性选择器(过滤器)
selector[name]
selector[name=val]
selector[name*=val]
selector[name^=val]
selector[name$=val]
伪类选择器(过滤器)
:first-child
:last-child
:nth-child
:hover
:active
:visited
…
伪元素选择器(过滤器)
::before
::after
规则
文本
font-*
字体
text-*
网络字体
@font-face xxx {}
字体图标库 iconfont
背景
background-*
其他
opacity:
display:
overflow:
…
盒子模型
盒子元素：
margin
border
padding
width/ heightbox-sizing:content-box; // border-box
content-box: 内容盒子（默认盒子）
width:100px;
padding:10px;
border:5px solid #ccc;
margin:10;
实际宽度 = width + 2padding + 2border
border-box: 边框盒子（怪异盒子）
width:100px;
padding:10px;
border:5px solid #ccc;
margin:10;
实际宽度 = width
布局
让块元素在一行中显示，或者是在z轴上折叠
浮动布局（应用在pc端界面中）
float
clear
定位布局（应用在pc端界面中）
position:relative;
是否脱离文档流：否
相对点：自身
position:absolute;
是否脱离文档流：是
相对点：距离它最近的父定位元素
position:fixed;
是否脱离文档流：是
相对点：浏览器视口
position:sticky;
是否脱离文档流：否
相对点：相对定位与固定定位的结合（自身、视口）
伸缩盒布局(应用在手机端界面中)
主轴 row - x; column - y
交叉轴:与主轴垂直的轴
伸缩盒容器
display:flex; 定义当前容器为伸缩盒容器
flex-direction:row; 定义主轴的位置
justify-content: center; 元素在主轴上的排列方式
align-items: center; 元素在交叉轴的排列方式
伸缩盒元素
沿着主轴排列
flex-basis
flex-grow
flex-shrink
flex:
响应式布局-
pc端界面开发
yanxuan_pc.html
网易严选【非响应式】
不会随着设备的分辨率变化而进行变化
1280px - 1090px
1920px - 1090px
腾讯视频
会随着设备的分辨率变化而进行变化
1280px - 990px
1408px - 1200px
1620px - 1500px -
手机端界面开发
yanxuan_phone.html
适配所有的移动设备
1920px - 1920px
990px - 990px
无需进行更多编码，只需要利用块元素的默认特性即可
独占一行空间，宽度为100%
特点：
宽度自适应屏幕尺寸
永远不会产生横向的滚动条 -
全适应【适用于企业站】性价比
当用户通过pc访问的时候一种布局，使用pad访问的时候是一种布局，使用phone访问的时候是一种布局，但是这只是一个html
语法：
< link rel=“stylesheet” href="" media="(min-width:1020px)">
@media screen and (max-width:990px) {
.wrapper {
100%
}
}
动画
定义：
animation-*
应用：
过渡
transtion-*
变形
transfrom:
-
2) Javascript基础（dom驱动框架）
linux
云服务器的基本应用（购买，重置密码，防火墙，登录）- 阿里云
ubuntu16.04/ubuntu18.04
用户管理
sudoer
目录文件及权限
vim
软件安装
源码编译
在线安装 apt install
解压安装
进程管理
【在linux服务器中搭建个人站、在linux中部署看点资讯项目】
ECMAScript5
关键字保留字
变量
数据类型：
基本数据类型
应用数据类型
表达式
分支语句
循环语句
操作符
算术
逻辑
三目
位运算
比较
----------
数组
对象
函数
正则表达式
Math
Date
面向对象技术
DOM
利用javascript核心技术操作HTML的接口
Node
Document
Element
BOM
利用javascript核心技术操作浏览器的接口
window.xxx
ajax
XMLHttpRequest
jQuery(bs)
HTML5 API（JS api）
本地存储
3) 企业级框架（）
ECMAScript6
es6 新版本的javascript标准（兼容性差）
缩写形式
解构
模块化
类
promise
异步函数
es6 --nodejs (babel/webpack)–> es5 --运行–>浏览器
- 畅想
vue/react/angular (语法都是基于es6)
（看点资讯精选）案例：- 底层代码操作阶段 【10平米 - 扫把打扫（dom操作）】
组件、页面布局 - 完全自己比那些
交互 - ajax XMLHttpRequest
dom操作 - DOM - dom驱动框架操作阶段 【100平米 - 戴森吸尘器（jquery）】
组件、页面布局 - bootstrap
交互 - jquery
dom操作 - jquery - vue企业级开发阶段 【1000平米 - 佣人（dom操作）】
组件、页面布局 - bootstrap
交互 - jquery
vue 框架
0 dom操作
- 底层代码操作阶段 【10平米 - 扫把打扫（dom操作）】
-----思考-----
- 如何理解语义化标签
html标签具有语义，让程序员看到代码就知道该代码表示的是什么意思
< header>
< div class=“logo”>
< img src="">
</ div>
< nav>
< ul>
< li>< a>首页< /a>< /li>
< li>< a>首页< /a></ li>
< li>< a>首页</ a>< /li>
< li>< a>首页</ a>< /li>
</ ul>
</ nav>
</ header> - 一般在重构的时候，我们都会选择重置样式（reset），请问为什么？
body {
margin:0;
}
ul,ol {
margin:0;
padding:0;
list-style:none;
} - 布局目的？？
突破块元素的默认特性（独占一行、宽度为100%、高度由内容决定），布局就是为了让块在一行中并列显示，或者是在z轴上折叠显示