标题标题标题
Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....
Web前端统整笔记
HTML
HTML三层架构
网站前端三层（重要！！！）
html 结构层 --html结构
css 表现层 --决定html的样式
javascript 动作层(逻辑层、行为层) --决定html如何交互
我们追求的不是完全最新的版本 而是适应 符合当前的 主流的版本
HTML规则
在做一个正式的网页或者是项目的时候
1.任何时候 文件 文件夹 图片 都不能有任何的中文，铁律，必须遵守
2.任何文件名称 或者类名 或者id名称，或者任何的变量，都必须是语义化
3.一个网站中必须有一个文件名称是“inedx.html”同时此文件需要放置在根目录
4.路径文件夹的命名不可以有大写
<> 标签
块级元素与行级元素
块级元素
块级元素 可以设置宽高 独占一块区域 display:block;
块级元素可以改变上下的, margin-top/bottom,padding-top/bottom,同时能改变height和line-height
ul、li、p、h、div、hr、
行级元素
不可以设置宽高 但是默认宽度是auto(100%) display:inline;
行内元素只能改变左右的边距，margin-left/right,padding-left/right
行内块级元素
display:inline-block; 即是行内元素也是块级元素
占行内元素的位置，却可以实现块级元素的效果
特殊的行内元素
*行内块级元素 input标签 img标签
*内联元素 a标签
单标签
![]()
...
*单标签需要闭合 结尾要有单杠
img标签
插入图片
*说明:路径分为：
相对路径（从当前文档路径开始）
绝对路径（从盘符开始）-少用
*src 图片的路径
1.返回上级 ../***/名称
2.打开下级 **/***/名称
*alt 图片无法显示时，显示的文本
*align 对齐方式
1.left 左对齐（默认）
2.center 居中对齐
3.right 右对齐
*width 宽度 可以用像素/百分比表示大小
*height 高度 可以用像素/百分比表示大小
*清除图片之间的间隙
1.img标签放在一排写(适用于少量的img)
2.图片的父级设置font-size=0
3.图片左浮动
4.图片display:block
5.vertical-align:bottom (最好使用这一条解决)
embed 标签
多媒体标签
插入多媒体--插入音频.mp3 .midi 插入视频.avi
要求:会用插入音频即可
input标签
表单表单域
[onchange]: 当值改变时检查输入字段，属性适用于：、 以及 元素。
autocomplete 开启/关闭 提示下拉框
novalidate 写在form标签中的域对象，使emal在提交时不需要验证
lable 可以用for来绑定email的id，再直接获取信息
type：
1.text (文本)
2.password (密码)
3.submit (提交)
4.file (文件 )
5.hidden (隐藏域)
6.radio (单选按钮)
7.checkbox (多选按钮)
8.button (按钮)
9.reset (重置)
10.image (将图片作为提交按钮)
---H5下面是新添加的表单---
11.email (验证不完全，@后面有值就能过，不建议使用)
12.url (只要有http就能通过，http:/https: 也是坑)
13.number (用于选择数量 max min step value)
14.range (滑动条 max min step value)
15.Date Pickers (Date month week time datetime-local 兼容差)
16.search (搜索域 和text的区别就在于鼠标上移又X，能清空文本)
17.color (调色板)
18.date (定义 date 控件(包括年、月、日，不包括时间))
19.datetime (定义 date 和 time 控件包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区)
20.datetime-local (定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒，不带时区))
21.month (定义 month 和 year 控件(不带时区))
22.week (定义 week 和 year 控件(不带时区))
23.tel (定义用于输入电话号码的字段)
type 选择input标签的样式
placeholder 默认提示信息 输入信息时消失 即文本框默认值
value 也是默认提示信息，但是需要手动删除提示信息再输入（不常用）
readonly 只读 不可修改信息/disabled 禁用 不可修改信息 有灰色背景色
size 输入框的长度
iframe标签
链接一个网页在现在的页面里(内联框架)
src填写想要链接的网页
width 宽度
height 高度
frameborder 边框
name 自己定义该网页的名字
(通过a标签的target等于该网页的名字来实现跳跃)
hr标签
一条横线
br标签
强制换行 非常不允许出现在制作的页面中 一般是由非程序员在‘不懂行’的情况下才大概率会出现
embed标签
标签定义嵌入的内容 比如插件 可以设置宽高 嵌入内容的类型 还有src
双标签
等等
*双标签有同样的标签名，同时标签名前加上单杠，表示为结束标签
div标签
div 俗称盒子
现在的页面中出现最多的标签 经常用于各种布局
span标签
没有任何实际作用,而语义也是表示一段普通文本 我们经常用它来进行css操作
一个‘成熟的’‘好的’网页 基本都是有span和div完成所有的布局
p标签
文本
*一个p相当于一个回车换行，/p相当于一个回车换行
select标签
下拉菜单
[onchange]: 当值改变时检查输入字段，属性适用于：、 以及 元素。
ul标签
无序列表
[恢复列表项]: list-style-position:inside;与list-style-type:(任意);搭配使用。 原因：通配符将padding和margin清空所以不能够恢复或者使用简写list-style:disc(任意) inside(或者outside);同样能达到该效果
[改变符号颜色 ]: 可以在li标签中单独写个style例如：style=color: #fc6396
- 列表项
disc : 默认值。实心圆
circle : 空心圆
square : 实心方块
decimal : 阿拉伯数字
lower-roman : 小写罗马数字
upper-roman : 大写罗马数字
lower-alpha : 小写英文字母
list-style-position:inside(占位)\outside(不占位)
ol标签
有序列表
[恢复列表项]: list-style-position:inside;与list-style-type:(任意);搭配使用。 原因：通配符将padding和margin清空所以不能够恢复或者使用简写list-style:disc(任意) inside;同样能达到该效果
dl标签
自定义列表
- 定义
- 解释1
- 解释2
- 解释3
textarea标签
文本域
table标签
表格
[cellpadding失效]: 在通配符选择器中的 padding:0; 会使th,td继承到的padding失效，所以此时需要在通配符清除padding中，使用not(th):not(td)排除th,td的padding清空效果。从而使cellpadding生效
（1）.表格的功能:
--显示行列式数据（举例:课程表、成绩表、工资表、出勤表等等）
--布局（定位，把你想定位的标记放到单元格 ]）
（2）.表格标记:
表名
标题行 //默认居中并且字体加粗
（3）.表格中的行:
表名
标题行 //默认居中并且字体加粗
*thead 表示标题行 页眉
*tbody 表示主题
*tfoot 表示表格页脚
(限制某一部分的区域 写动态生成的时候一定要写 虽然tbody不写会自动出现，但是会出现多个，会浪费浏览器启动的时间，所以是不合理的，一定要自己写 动态添加信息时在JS中添加，用到$符号)
*border 边框大小 (px(粗细)/solid(直线)/dashed(虚线)/颜色
*width 宽度
*height 高度
*bgcolor 背景颜色 可以用英文/RGB
*background 背景图片 需要用路径表示出图片所在 类似与url/src
*cellspacing 表格里单元格之间的间距
*cellpadding 表格里单元格边框与内容的距离
*align 水平对齐方式 用在table标签时表示表格的对齐方式，用在tr标签里时表示当前行的对齐方式 用在td标签时标签该单元格的对齐方式 left（默认）/center/right
*valign 垂直对齐方式 top（通常）/middle/bottom
*colspan 跨列合并单元格 几个
*rowspan 跨行合并单元格 几个
*padding 内边距 有上下左右四面
*margin 外边距 有上下左右四面 也可为负值
*col 表示一列
*colgroup 表示一组列
*caption 表示表格标题
pre标签
预格式化
文章段落格式化
保留源代码中空格以及换行符，不忽略源代码中的空格，与P标签相反，不怎么使用此标签
a标签
超链接
href是必须的 否则就是空元素 如果值是以http://开头的地址,就以为着点击跳跃
*url 链接的资源
有相对路径和绝对路径 相对路径就是相对于链接页面的另一个页面路径 而绝对路径则是从磁盘符开始的完整链接属性(而绝对路径一旦发生改变,就会失效,所以一般不适用)
*name 定义的名字
*title 鼠标上移时提示的信息
*target 进入、打开链接的方式
1._self 在当前窗口打开
2._blank 在新的窗口打开 根据浏览器的不同 可能会出现新建一个浏览器的效果
3._top _parent 都是给予框架集页面的 _parent表示在父窗口打开文档 _top表示在顶层窗口打开文档(在h5中被废弃.只能使一个新的 iframe元素)
b、Strong标签
加粗文本 突出重点 是H5之前的元素 而H5为了更好的语义化 推出了Strong标签 两者同义
i、em、cite标签
文本斜体，但是em更加语义化 所以推荐在代码过程中是使用
cite实际作用也是倾斜 语义化来说是表示引用其他作品的标题
s、del标签
s标签处于在中间的删除线，从语义化来说表示不准确的删除 是h5之前的版本
del从语义上来说表示删除相关文字 h5的版本，更加语义化，推荐使用
u、ins标签
下划线 从语义上来说ins标签更加强调文本，所以推荐使用
small标签
相对父级字体较小
sub、sup标签
实际作用是数字中的上标(sup)和下标(sub)
code、var、samp、kdb标签
code表示计算机代码片段
var表示编程语言中的变量
samp表示程序或计算机的输出
kdb在当前的页面是不起作用的 属于英文范畴 哪天当它实现效果时 顶端一定是
abbr标签
表示缩写 没有什么实际的作用 就是简单的一段文本缩写
dfn标签
表示定义术语 就是一般的倾斜 从语义上来说就是一个词或者短语的文本
ruby、rp、rt标签
ruby是一个语言元素
rp包括rt包括拼音 而拼音中可以带音标 可以在页面上出现 当你需要使用的时候 就这一个方法 用来为非西方的语言提供支持
dbo标签
设置文字的方向 默认为横向从左至右显示 当dir="rtl"时从右至左显示 一般是做古文网站时才使用
mark标签
给文本加上一个黄色的背景 而且字体为黑色 从语义上来说上下文相关而突出的文本 用于记号 相当于你看书时用一个记号笔做记号
time标签
表示日期和时间 语义化标签
q标签
引用来自别的地方的内容 实际作用就是加上 双引号
marquee标签
移动标签（知道有这个就行，一般用不到）
su
重点抓取想要知道的内容 同样是一个标签，更加语义化更加被强调的文本更容易被看到 所以推荐使用更加语义化更加强调文本的标签写代码
语义化标签
main标签
主要的
section标签
定义文档中的节（section）。 章节、页眉、页脚或文档中的其他部分。 主要用于对网站或应用 程序中页面上的内容进行分块。
文档头部
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
article标签
该标签表示文档、页面、应用程序或站点中的自包含成分所构成的一个页面的一部分，并且这部分专门用于独立的分类或复用。例如:一个博客的帖子、一篇文章、一个视频文件等。
address标签
标签用来在文档中呈现联系信息，包括文档或文档维护者的名字、邮箱、电话号码等。一般包含版权数据、导航信息、备案信息、联系方式等内容
浙江省杭州市下城区
nav标签
最好用来包含导航栏
说明:nav标签适用的板块包括普通的导航、侧边栏的导航、页内导航。
hgroup标签
标签是将标题及其子标题进行分组的标签，通常用于对网页或区段（section）的标题进行组合。常用于标题类组合，比如文章的标题与副标题。
主标题
副标题
header标签
包头部
标签定义文档的页眉（介绍信息）、标题、logo等。网页中不限制header标签的个数；header标签中可以包含多个”h1-h6”标签、hgroup标签、nav标签、form标签、table标签等。
主标题
副标题
fotter标签
标签包含了与页面、文章或是部分内容有关的信息，可以作为其上层父级内容区块或是一个根区块的脚注，通常包括其相关区块的脚注信息，比如说文章的作者或是日期。作为页面的页脚，其有可能包含了版权或其他重要的法律信息。使用次数无限制。
cite标签
倾斜 同
但是兼容性没其他的好Html5新增标签
figure标签
类似与div，但是比div多个上下18左右40个外边距，同时兼容性不好，不建议使用
figcaption标签
和figure配合使用
details标签
配合summary使用，类似于单击显示其简介、内容，兼容性一般，不常见
mark标签
用于定义带记号的文本，文本背景颜色可以设置为黄色(不能有别的颜色)，兼容性也不是很好
progress
项目进度(类似进度条)，有max，value两个值
max:最大值
value:当前值
meter标签
同样类似于进度条，表示范围已知，有min，max两个值
HTML5内容模型
HTML元素所能表达内容的描述以及这些元素如何相互关联的描述称为内容模型。（表达内容的描述指某个元素中间应该包含什么内容，互相作用则指的是该元素的前后或者里面能出现什么子或后代元素）内容模型分为大致分为七类
元数据式内容
元数据内容通常是指在head元素里面常常出现的那些元素，包括base、command、link、meta、noscript、script、style和title。
通常用于描述当前文档相关信息或描述当前文档和其他文档之间的关系。
流式内容
文档主体部分使用的大部分元素都是流式内容，几乎所有元素都是流式元素，只有部分元数据式元素不属于流式，它们是base和title
章节式内容
章节式内容可以成为区块式内容，它是用于定义标题及页脚范围的内容，包含article 、aside、nav和section
标题式内容
定义标题的元素h1-h6、hgroup
段落式内容
段落式内容不是用来描述段落的内容，而是描述段落内的内容，常见的a、abbr、img，而表示段落的p不属于段落式内容属于流式内容。
嵌入式内容
嵌入式内容是描述当前文档引用到的其他资源的内容，或者被插入到本文档中的其他伺候内容。例如,音频、视频等。audio、canvas、embed、iframe、img、math、object、svg、video
交互式内容
与用户发生交互的元素，例如，表单、菜单等
盒模型
IE盒模型 W3C盒模型(默认的)
外边距+外边框+内边距+内容
Html5插入音频视频
audio标签
音频
video标签
视频
preload=‘none’ 表示什么都不加载
preload=‘metadata’ 表示播放之前只能加载元数据 宽高 第一帧的画面
preload=‘auto’ 表示尽快下载整个视频
HTML命名规范
https://www.cnblogs.com/ipoplar/p/4539415.html
【布局】
文档 doc
头部 header(hd)
主体 body
尾部 footer(ft)
主栏 main
侧栏 side
容器 box/container
【通用部件】
列表 list
列表项 item
表格 table
表单 form
链接 link
标题 caption/heading/title
菜单 menu
集合 group
条 bar
内容 content
结果 result
【组件】
按钮 button(btn)
字体 icon
下拉菜单 dropdown
工具栏 toolbar
分页 page
缩略图 thumbnail
警告框 alert
进度条 progress
导航条 navbar
导航 nav
子导航 subnav
面包屑 breadcrumb(crumb)
标签 label
徽章 badge
巨幕 jumbotron
面板 panel
洼地 well
标签页 tab
提示框 tooltip
弹出框 popover
轮播图 carousel
手风琴 collapse
定位浮标 affix
【语义化小部件】
品牌 brand
标志 logo
额外部件 addon
版权 copyright
注册 regist(reg)
登录 login
搜索 search
热点 hot
帮助 help
信息 info
提示 tips
开关 toggle
新闻 news
广告 advertise(ad)
排行 top
下载 download
【功能部件】
左浮动 fl
右浮动 fr
清浮动 clear
【状态】
前一个 previous
后一个 next
当前的 current
显示的 show
隐藏的 hide
打开的 open
关闭的 close
选中的 selected
有效的 active
默认的 default
反转的 toggle
禁用的 disabled
危险的 danger
主要的 primary
成功的 success
提醒的 info
警告的 warning
出错的 error
大型的 lg
小型的 sm
超小的 xs
【通用】
最小宽度 warp
Html细节
*谷歌浏览器最小字体大小12px
HTML规范
*标记和属性全部小写
*属性值必须加""
*双标记必须双着用
*单标记必须关闭 ![]()
*标记只能嵌套不能交叉
*文字修饰标记
1.加粗
2.倾斜
3.下划线
4.删除线CSS
权重
标签选择器=1
class=10
id=100
行内=1000
!important; //写在cssStyle里 分号里
在需要最大权重的后面，加上！important就可以权重最大化。(通常用于顶掉别人那拿来的的css)
多列式布局
p{
columns:width count;
column-gap:列间距 像素;
column-rule:列边线 相当于边框线
column-span:all全部跨列 none不跨列
}
*width 宽度
*count 列数
CSS3布局
响应式布局
媒体查询
IE9+
media=’print’ 打印机 speech=‘屏幕阅读器’
all 所有
screen 电脑 平板 手机等
speech 屏幕阅读器等发生设备
建议先从移动端页面开始写
@media all and (min-width:1000px){
body{
background:skyblue;
}
}
多列式布局
p{
columns:width count;
column-gap:列间距 像素;
column-rule:列边线 相当于边框线
column-span:all全部跨列 none不跨列
}
*width 宽度
*count 列数
表格布局
04 05年时代的布局方式 一般是后台数据渲染的时候使用 因为在打开浏览器的时候 会等个3s~5s的时间 用户的体验不好所以被淘汰了
弹性布局
IE10-不兼容
旧版本
火狐4–火狐9/谷歌4–谷歌31
display:inline-box/box/flex/;
box-orient:horizontal(从左向右 旧版)/vertical(垂直 旧版)/inline-axis(沿着内联轴排列显示)/block-axis(沿着块级轴显示)
box-direction:normal(默认)/reverse(逆序)
box-pack:start(起点)/end(结束点)/center(中间)/justify(平均分布)
box-align:start(以顶部为基准，清楚下方的额外空间)/end(以底部为基准)/center(以中部为基准)/baseline(以项目为基准)/stretch(默认，即还原真实高度)
box-flex:1/2/3/...(设置每个项目的比例，可以单独给某一个写上)
box-ordinal-grop:给项目排位置(需要给每一个项目都写)
*旧版的排版里不会换行 即使有box-lines属性 原因是不支持
*box-pack:justify; 会使内容不够的盒子把高度撑开至同类中的最高高度 可以用box-align:stretch来清理
新版本
垂直布局方式 display:flex(块级)/inline-flex(内联级);
flex-direction(排列方式):column(垂直)/column-reverse(从下向上)/row(从左向右 默认)/row-reverse(从右向左);
flex-wrap(换行):wrap(当父容器无法容缩时 换行)/nowrap(不换行 默认)/wrap-reverse(换行 相反);
flex-flow(复合属性):排列方式和换行的简写方式
juslity-content(分列方式):center(中心点靠齐)/flex-start(以起点靠齐)/flex-end(以结束点靠齐)/space-between(两端对齐)/space-around(平均分布 但是两端保留一半空间)/space-evenly(平均分布 新增的);
align-items:flex-start(以顶部为基准，清理下部空间)/flex-end(以底部为基准)/center(清楚额外空间,以中间为基准)/baseline(以基准线清理额外空间)/stretch(默认 填充整个容器)
*给元素写flex:1/2/3...时为给元素分配所占的比例
*给元素写order:1/2/3...时为给元素排序(和旧版一样 排序时需要给每个元素都写)
*当需要单独清楚一个子元素的额外空间时 align-self:center(属性和父元素的一样)
*display:inline-box 作为行内块级盒子
*display:box 把容器作为块级弹性盒子显示 09年07月 面向群体是早期浏览器的一些弹性布局方案 属于旧版 谷歌不启用
*盒块布局方式
带前缀的兼容写上面 不带前缀的写最下面，因为上面的代码会覆盖下面的，所以带前缀的兼容写最上面。
*火狐 -moz-
*谷歌 -webkit-
CSS边框样式设置
box-sizing
border
border-radius
设置一个值:
border-radius:值;
设置两个值:
border-radius:top-left/bottom-right top-right/bottom-left
设置三个值:
border-radius:top-left top-right/bottom-left bottom-right
设置四个值:
border-radius:top-left top-right bottom-right bottom-left
border-shadows
inset:阴影类型，可选值。如果不设置默认是外部阴影，设置为inset为内阴影。
x-offset:阴影水平偏移量
y-offset:阴影垂直偏移量
blur-radius:阴影模糊半径,可选值
color:阴影颜色，可选值
box-shadow: [inset][blur-radius][color];
border-width 设置边框粗细
border-color 设置边框颜色
name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
border-style 设置边框样式：
dashed: 定义一个虚线边框
solid: 定义实线边框
dotted: 定义一个点线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
CSS背景样式设置
[bcakground]: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
background-position:可以有px % left center right为值
background-attachment:默认scroll，即原始状态 fixed只有这个值，可以使背景图片固定在页面上，同background-fixed
background-color:设置背景颜色
background-image:url("")设置背景图片 双引号可有可无
background-repeat:设置图片是否平铺有repeat-x repeat-y no-repeat
图片精灵
background:url() px(纵坐标) px(横坐标) no-repeat;
取个小图标时用..两个px类似于取坐标
CSS新增
background-size:auto，length，percentage，cover，contain，
background-origin有border-box,padding-box,content-box三个值
背景远点属性指定绘制背景图片的起点，兼容性没有background-position好
background-clip背景裁切属性 border-box,padding-box,content-box
auto:默认值
length:以px为单位 可以自己设定背景图片大小，也可以设置为100%
cover:平铺图片，相当于100%，但是容易导致图片失真
contain:将背景图自适应放大到容器大小，但是不会铺满
border-box从border的外边缘开始显示背景图片
padding-box从内边框处开始显示，以外的全部裁剪
content-box从内容处开始显示，以外的全部裁剪
CSS文本溢出设置
文本溢出：
clip不显示省略标记
ellipsis文本溢出省略标记
文本换行：
word-wrap:break-word将内容在边界内换行(不截断英文单词换行)(不省空间)
word-break:break-all强行截断英文单词换行(达到词内换行效果)(省空间)
CSS空白符
while-space属性用于处理空白符
normal:默认值 空白符会被浏览器忽略(成为一个空格)
pre:空白符会被浏览器保留，类似于html中的标记
nowrap:文本不会换行，文本会在同一行显示，直到碰到
为止
CSS定位元素
float:left(左)/right(右)
z-index:0(默认)/1++
position: absolute绝对定位/relative相对定位/fixed固定定位/static默认值/inherit
*float浮动 为left时左浮动，为right时右浮动
*z-index层叠顺序 数值越大，显示优先级越高
*relative 相对于自己位置进行定位，原来的位置依然占用（不脱离文档流）
*fixed 将目标固定在页面中的位置，即使滚轮滚动，也不会改变位置
*absolute 相对于最近的父级进行定位 用margin/padding移动目标，原来位置不占用（脱离文档流）
CSS过渡
transition 过度属性 过渡时间 过渡函数 过渡动画(延迟)
1.transition-property 设置对象中参与过渡的属性(可同时写多个或all)
2.transition-duration 设置对象中过渡的时间(s)
3.transition-timing-function 设置对象中过渡的动画类型(过渡函数)
1)ease 由快到慢，再逐渐变慢(默认)
2)linear 匀速
3)ease-in 加速
4)ease-out 减速
5)ease-in-out 先加速后减速
4.transition-delay 设置对象延迟过渡的时间
CSS动画
animation共有8个子属性
animation-name:设置对象所应用的动画名称
animation-duration:设置对象动画的持续时间 默认为none,还有time值，为一次动画从0%到100%持续的时间
animation-timing-function:设置对象动画的过渡类型
animation-delay :设置对象动画延迟的时间
animation-iteration-count :设置对象动画的循环次数
animation-direction:设置对象动画在循环中是否反向运动
animation-fill-mode:设置对象动画时间之外的状态
animation-play-state:设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式
animation-name
设置对象所应用的动画名称 默认为none，使用时的值就是由@keyframes name创建的动画名称(名称最好不要语义化)
@keyframes a{
0%{width:200px;height:200px}
30%{width:500px;height:500px}
(可以有0%~100%的动画过程效果设定)
(同样可以设定某一个值的效果同上一步的效果，以此达到动画过程中的暂停效果 )
}
animation-duration
设置对象动画的持续时间
默认值 none
time(s) 为一次动画从0%到100%持续的时间
animation-timing-function
设置对象动画的过渡类型 规定动画的速度曲线。默认是 "ease"。
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
animation-delay
设置对象动画延迟的时间
默认值 0s
animation-iteration-count
设置对象动画的循环次数
默认值 1
正整数 播放次数
infinite 无限次循环播放
animation-direction
设置对象动画在循环中是否反向运动
normal：默认值,向前播放
reverse 动画反向播放。
alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
animation-play-state
设置对象动画时间之外的状态
running：默认值,播放
paused 暂停
animation-fill-mode
设置对象动画的状态
none：默认值
forwards 动画在结束后，继续应用最后关键字的位置
backwards 动画在结束后，继续应用初始关键字的位置
transform
transform自身的变化
translate:改变自身位置(x,y) 相对定位，分为translate(X,Y,Z)
rotate:改变自身角度，旋转(±deg)
scale:改变自身大小，分为scale(X,Y)
skew:改变自身倾斜角度(Xdeg,Ydeg)
CSS3选择器
基本选择器
[指定标签类选择器]: css中在.class前加上标签，例如 p.box
[id选择器]: 在标签中用id定义，id是独特的，不可重复，但是可以有相同字符
[通用选择器]: 使用通配符*对所有的标签进行css样式设置，一般用于清除原有的内外边框
[伪类选择器]: a:hover（所有标签可用）a:link/a:active/a:visited
关系选择器
CSS3新增选择器
伪类选择器
伪元素
伪元素一种存在，在CSS2.1中看到的:first-line、first-letter、:before和:after。CSS3中对伪元素进行了一些调整，在一起的基础上增加了一个冒号就变成了::first-line、::first-letter、::before、::after,另外伪元素新增加一个::selection。
after和before默认是行内元素，直接加上宽高是不生效的，content=“”是必要的（也可以不为空，自己赋值），可以用绝对定位，且它的父级自动是添加的匹配元素
结构化伪类
子元素伪类选择器
p:nth-child(1) :必须要是p标签，且p标签排在1的位置，只要前面有标签，就会计数
UI元素状态伪类选择器
E:hover 鼠标指针移动到某个文本框控件上的样式；
E:active 元素被激活(鼠标在元素上按下还没有松开)时使用的样式；
E:focus 元素获得光标焦点时使用的样式，主要是在文本框控件获得焦点并进行文字输入的时候使用(配合input使用)；
例如1: UI元素状态伪类选择器.html
例如2: UI元素状态伪类选择器.html
E:enabled 指定当元素处于可用状态时的样式；
E:disabled 指定当元素处于不可用状态时的样式；
E:read-only 指定当元素处于只读状态时的样式；
E:read-write 指定当元素处于非只读状态时的样式；
E:default 指定当页面打开时默认处于选取状态的样式；
E::selection 指定当元素处于选中状态时的样式；
CSS细节
首行缩进 text-indent:2em 2em代表的是2×font-size 相对于父级的文字大小
加粗文字 font-weight: bold
文本行高 line-height:
字符间距 letter-spacing：
字体斜体 font-style:italic;
取消斜体 font-style:normal;
边框圆角 border-radius:
目标定位 position:
最小宽度 min-width：
行内转块 display:inline-block
转为块级 display:block
伪类样式 transition:
按钮边框 outline:none(去除)
鼠标上移 标签:hover{}
css隐藏 display:none
css显示 display:block
阴影效果 box-shadow:(px(横坐标),px(纵坐标),px(模糊度),px(阴影宽度),颜色,inset(内阴影))
透明度 opecity
根元素(大小) rem(写移动端时可以设置html的字体大小，再设置body的字体大小单位为rem，则可根据手机分辨率，更改html的字体大小，从而body的字体大小在每部不同分辨率的手机上字体不同)
旋转角度 transform:rotate(0deg)
更改位置 transform-origin: rem rem;
改变边距 border-width:
线性渐变 background:linear-garident(rgba(0,0,0,0),rgba(0,0,0,0)for(),to())
CSS3渐变 background: -webkit-linear-gradient(left, red, blue);
背景图不重复 background:url("")no-repeat
背景图大小拉伸 background-size: 100% 100%;
保留空格 white-space:pre
边框内减 box-sizing:border-box (自动计算因css改变的盒子大小，并进行修改，不会因改变padding\border而改变原来设置的盒子大小)
清楚额外空间 align-items:center;
鼠标变小手 cursor: pointer;
黑白图片 filter:grayscale(100%);
全透明速记 transparent;
JavaScript
JavaScript由三个部分组成：{
核心ECMAScript，由ECMA-262定义，提供核心语言功能
文档对象型DOM，提供访问和操作网页内容的方法和接口
浏览器对象型BOM，提供与浏览器交互的方法和接口
}
通过 对象名.innerHTML = ‘’ 改变该对象的文本
通过 this.src来获取当前对象的src路径
鼠标交互细节
onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触发
onMouseLeave 鼠标指针移除触发
onMouseEnter 鼠标指针移动到对象内时触发
placeholder 占位符
检测类型
typeof
typeof 检测返回基本类型 弱检测 检测对象时只会返回Object
instanceof
检测引用类型 检测会返回当前实例是否是属于某个构造函数 不可用于检测基本类型给(检测不到)
执行环境及作用域
及某个变量的能够起到作用的区域 即全局变量或局部变量
[window]: 所有的全局变量都属于window的变量和方法 全局变量可以在函数内被访问到 且一直保留到浏览器、网页关闭时才销毁;而局部变量则是在调用使用完后,立即销毁; 局部变量可以在当前区域中访问获取变量并且可以替换全局变量,但是全局变量不可以访问获取局部变量
JavaScript细节
1.var a = document.documentElement.scrollTop || document.body.scrollTop; //通过此方法获取浏览器中滚动条向下移动的距离 键盘按键'↑''↓',按一次都是移动40的值,鼠标滚轮向上向下滚动一次是100的值,这个值不是像素,就是个数值。 可通过判断这个值是否达到某个数值点,从而实现滚动条下滑至某个节点的时候实现某个功能 ———— scroll-test.html
2.document.body.innerHTML = 'xxx' 与 document.write('xxx') 之间的区别: 前者是给body的内容中添加xxx 后者是覆盖整个文档中的东西
3.
*任何时候都不要设置全局变量 唯独排除和团队沟通过之后 整个项目拥有的几个全局变量
*一般函数之间的嵌套有3层就够了 如果到了3、4、5层还实现不了 那大概就是思路、想法出了问题
*当一个函数被调用时加上'()'的话 会是被直接调用其结果执行,而不会经过过程 不写括号是个函数体,有过程
*return break 之后写的代码都不生效 因为会终端循环 如果需要 则写在它们之前
*不论做什么事情 接收参数时一定要做参数判断 否则难免有别的参数通过隐式转换之后也能成功通过验证
*arguments 类数组 大多用来针对同个方法多处调用并且传递参数个数不一样时进行使用。根据arguments的索引来判断执行的方法。
*对象下的函数名称 称作'方法' 生命周期直到网页关闭; 而通过 var 出来的变量 使用完之后立即销毁 但是它还是能够是使用方法 引用类型 值相等
*虽然变量有 基本类型 和 引用类型的区分 但是传参都是按值传递的 不会按引用传递 但是如果两个变量引用的是同一个对象 也能达到类似于引用传值的 因为这个变量是全局变量;php中可以按引用传递
*所有的全局变量都属于window的变量和方法 全局变量可以在函数内被访问到 且一直保留到浏览器、网页关闭时才销毁;而局部变量则是在调用使用完后,立即销毁; 局部变量可以在当前区域中访问获取变量并且可以替换全局变量,但是全局变量不可以访问获取局部变量; 在局部变量中的变量如果没有用var、let声明 那么系统会自动将这个变量给'升级'至全局变量
*虽然JS的内存是自动清除的,但是之后的闭包确实需要一点自己来清除的功能 可以给对象赋值一个 null 来解除占用
矢量图标
iconfont
方法一：下载至本地
载入iconfont项目包的时候，需要link引入
同时需要用到标签，i标签的i正好类似于icon，所以一般用i标签
i标签中 class定义iconfont这是一定要有的
而iconfont中下载的iconfont字体，则由class定义icon-xiaomi(xxx为字体的名称)
当需要hover改变其颜色时，css样式代码如下：
.icon-xiaomi:hover:before{
transition: all ,3s;
color:red;(鼠标上移时改变颜色)
font-size:20px(鼠标上移时改变大小)
bcakground-color:skyblue(改变背景颜色)
}
方法二：在线链接
link的目标改为网站里下载来的链接，剩余操作同方法一，不过免去了下载
轮播图框架
链接：轮播图框架
下载swiper 里面的demo
使用时复制js、css文件夹 并且删除里面的.map文件
loop:true 设置无限循环属性 属于js