新增的主体结构元素（类似div，使div分类使用）
新增的非主体结构元素
html4与html5的区别
基本结构区别
1，简化了文档申明语句<!doctype html>
2，简化了设置字符编码
语法区别：
1，省略一些标签
全部省略：html head body tbody
省略结束标签：area base br hr img input link meta track
可以不闭合的标签：li dt dd p option thead tbody tfoot tr td th
2，具有boolean值得属性：disabled readonly
3，省略引号（不建议，但是可以省略）
4，忽略大小写
让ie浏览器一最新的内核渲染页面
<meta name=”format-detection” content=”talephone=no”/>
<meta name=”format-datection” content=”email=no”/>
SASS
Css处理器，用 一种专门的编程语言，进行网页样式设计，然后再编译成正常的css文件
扩展名：.less .scss（常用）
1，继承 @extend 继承的选择器
2，变量 定义：
变
量
名
：
值
；
使
用
：
变量名：值； 使用：
变量名：值；使用：变量名
3，在字符串应用变量：#{$变量名} KaTeX parse error: Expected 'EOF', got '#' at position 41: … #̲{w}px;
%百分号可以用于公共函数调用
注意，在sass编译中写注释 前面要加 @charset “UTF-8” 识别文字
Body默认文字，无衬线字体 ios系统
Body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
函数（复合宏）
定义：@mixin函数名（[参数，可以省略]）{样式}
调用：@include函数名（）
@mixin pos（$s）
{
Position:$s;
}
Img {@include pos（absolute）}
&代表父选择器
A{
Background：red
&span{background：blue}
}
编译代码 a span{background：blue}
新增表单控件
number 专门用于输入数字的文本框
属性：最小值min 最大值max 步长step=’2’增值减值每次为2）
Email 用于email格式的地址
Url 专门用于url的网址地址（必须有http：//）
Tel 专门用于电话
Search 用于搜索框与text文本框类似
File 上传文件 h5可以上传多个 只需加multiple属性
Range 以滑动条显示数值范围
Color 颜色文本框 拾色器
Date month week time datetime-local 各种日期时间输入的文本框
Output 定义不同类型的输出
Contain 将背景图像等比例缩放到宽度或高度与容器的宽度和高度相等，背景图像始终包含在容器里。
表单新增属性
Placeholder 显示提示文本
List结合datalist元素可以制作一个带有列表的输入框，该属性的值为datalist的id名
<input type="text" Placeholder="输入酒店名称" list="jd" />
<datalist id="jd">
<option>如家</option>
<option>七天</option>
</datalist>
Autofocus 自动获得焦点 （只能针对一个元素获取焦点）一个文档只能使用一次
e：focus {Outline： 设置聚焦边框}
Autocomplete 自动完成功能 配合name属性使用（记忆功能）
Form 通过可以将不再表单内的表单元素归为表单内
Formaction 设置不同的提交地址 (重点)
Formmethod 设置不同的提交方式
具有验证功能的属性
Required 必填属性
Pattern 正则属性，它的值为正则表达式
checkValidity 返回boolean，true表示没有通过验证
setcustomValidity（“显示的文字内容”）设置默认的验证的提示文字
取消验证
Novalidate 用于form
Formnovalidate 用于submit
有序列表lo新增的属性（行内）
Start 起始序号
Reversed 可以让序号倒叙的排列
盒模型
兼容浏览器 内核前缀
-Webkit- chrom 谷歌
-moz-FF火狐
-o- oprea
-ms- IE （8以下浏览器不支持）
Css：新增属性
Box-sizing:;content-box（默认）/border-box 自动减去padding的值和border的值
Overflow-y：scroll 滚动条
Background-size ：contain 等比例缩放
Background-Rgba（0,0,0,0.5）透明颜色
Background-clip背景裁剪 设置背景图像外裁剪的区域
padding-box： 从padding区域（不含padding）开始向外裁剪背景。
border-box： 从border区域（不含border）开始向外裁剪背景。
content-box： 从content区域开始向外裁剪背景。
text： 实现使用背景作为填充色之类的遮罩效果 配合
color:transparent;颜色默认颜色取消 填充颜色使用
Background-origin：背景图原点
border-box:开始向显示背景 不包括边框
border-padding:开始显示背景 不包括padding
Content-box：开始显示背景
white-space：设置或检索对象内空格的处理方式。
normal： 默认处理方式。
pre： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象
nowrap： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
pre-wrap： 用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line： 保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。
word-break设置或检索对象内文本的字内换行行为。
normal： 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
keep-all： 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。
break-all： 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行。
Opacity：设置透明度0-1
Box-shadow：设置阴影(水平x 垂直y 阴影模糊度 阴影延伸值 阴影颜色)
inset 内阴影 text-shadow文字阴影
Hsla hsl颜色 h色调0-360 s饱和度0%-100% l亮度 0%-100% a透明度 0-1
Appearance：none; input的所有默认样式全部清除
Border-image边框背景
border-image-source：url置或检索对象的边框是否用图像定义样式或图像来源路径。
border-image-slice 设置或检索对象的边框背景图的分割方式。
border-image-width 设置或检索对象的边框厚度。
border-image-outset 设置或检索对象的边框背景图的扩展。
border-image-repeat 设置或检索对象的边框图像的平铺方式。
stretch： 指定用拉伸方式来填充边框背景图。
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
省略号：
1，White-space：当前文字不换行 空白/空格处理方式 nowrap 不换行 强制在一行显示
2，overflow：hidden
3，text-overflow：clip 超出的裁剪ellipsis 超出的文字显示为三个点…
linear-gradient()背景渐变
： 用角度值指定渐变的方向（或角度）。
to left： 设置渐变为从右到左。相当于: 270deg
to right： 设置渐变从左到右。相当于: 90deg
to top： 设置渐变从下到上。相当于: 0deg
to bottom： 设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。 用于指定渐变的起止颜色：
： 指定颜色。
： 用长度值指定起止色位置。不允许负值
： 用百分比指定起止色位置。
background: linear-gradient(45deg, #000, #f00 50%, #090);
Counter-increment：计数器名[step增长] 定义计数器 counter：a；
Counter(计数器名 [list-style-type]) 使用计数器 Counter：‘（’Counter（a）‘）’
Web Font 使用安装在服务器端的字体
语法：；
Font-face{
Font-family：<;字体名称>
Src:url（路径）四个路径分别写；eot单独写一行，其他的可以用，号隔开
}
Ttf truetype
Woff woff
Svf svg
Eof emvedded-ofentype
Even偶数 arr属性 odd奇数
弹性（伸缩）盒布局
Display：Box>flexbox>flex 父元素称为弹性容器 子元素为弹性项目
加上弹性盒后的默认样式：
子元素排列方式为按行排列（从左到右）
子元素宽为内容的宽度，高度为父元素的高
Flex-grow：数值（分配多少份） 值默认为0，该值不能为赋值
功能：设置弹性盒子元素分配父元素剩余空间
Flex-basis：数值 默认是auto 弹性盒的基准值
flex-direction属性决定主轴的方向（即项目的排列方向）
属性值： row：从左到右排列
row-reverse：从右到左
Column：从上向下
column-reverse：从下向上
老的弹性盒：
Box-pack设置子元素的对其方式
Start 从开始位置对其（左对齐）默认
Justify两端对齐 平均分配
Center 居中
End 从结束位置对其（右对齐）
Box-align设置子元素的对齐方式（垂直 居中 按列）
Start 开始位置对其 顶
Center 居中对齐
End 结束为止对其 底
Baseline 子元素基线对齐
Stretch 自适应父元素尺寸 默认
Box-orient 设置子元素的排列方式
Horizontal 水平排列
Vertical 垂直排列
box-ordinal-group：设置子元素显示顺序 （加在子元素上）值越小越靠前显示
动画变换
Transform
Translate（x，y）偏移，位置的变化，左负右正，上负下正
Translate3d（x，y，z）首选
Translatey（）
Translatex（）
Translatez（）
Rotate（角度deg）旋转，角度的变化
Rotate3d（x，y，z）首选
Rotatey（）
Rotatex（）
Rotatez（）
Scale（0-1数值）大小比例的变化 1以上放大
scale3d() = scale3d(,,)
scalex() = scalex()
scaley() = scaley()
scalez() = scalez()
Skew（数值deg）倾斜的角度
skewx() = skewx()
skewy() = skewy()
transform-origin：先水平后垂直 设置变形原点进行转换
过渡动画：
transition 给元素佳过渡的效果
transition-property： 检索或设置对象中的参与过渡的属性
transition-duration ： 检索或设置对象过渡的持续时间
transition-timing-function ： 检索或设置对象中过渡的动画类型
transition-delay ： 检索或设置对象延迟过渡的时间
动画效果：
Animation 动画 不需要通过实践区触发
定义动画：@-wbekit-keyframes 函数名{
from { opacity: 1; }//透明度 1
to { opacity: 0; }//透明度 0
}
@-wbekit-keyframes 函数名{
from { transform: translate(0, 0); }
20% { transform: translate(20px, 20px); }
to { transform: translate(100px, 20px); }
}
<’ animation-name ‘>： 检索或设置对象所应用的动画名称
<’ animation-duration ‘>： 检索或设置对象动画的持续时间
<’ animation-timing-function ‘>： 检索或设置对象动画的过渡类型
linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
<’ animation-delay ‘>： 检索或设置对象动画延迟的时间
<’ animation-iteration-count ‘>： 检索或设置对象动画的循环次数
infinite：无限循环
数字： 指定对象动画的具体循环次数
<’ animation-direction ‘>： 检索或设置对象动画在循环中是否反向运动
normal： 正常方向
reverse： 反方向运行
alternate： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse： 动画先反运行再正方向运行，并持续交替运行
<’ animation-fill-mode ‘>： 检索或设置对象动画时间之外的状态
none： 默认值。不设置对象动画之外的状态 返回初始状态
forwards： 设置对象状态为动画结束时的状态
backwards： 设置对象状态为动画开始时的状态 返回初始状态
both： 设置对象状态为动画结束或开始的状态
<’ animation-play-state '>： 检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式
running： 运动
paused： 暂停
Svg 网页支持矢量图格式
E：after/E：：after 设置对象之前的内容
E：before/E：：before 设置对象之后的内容
都必须配合content属性一起使用
Content ：
string（字符串）/attribute（属性）
images（图片路径）/counter 该元素内联元素
绘图
Canvas 画布标签 300 150(默认)
此浏览器不支持Canvas标签（必加）
绘制图形通过js原生脚本来实现
getContext（”2d”） 创建上下文绘图环境
画线：moveTo（x，y）起点
lineTo（x，y） 下一个点
stroke（）描边，开始绘制线条
样式要写在描边之前
strokeStyle=’color’ 设置线条的颜色
lineWidth=’number’设置线条宽度
beginPath（）开始
closePath（）结束
画矩形
strokeRect（x，y，w，h）描边矩形，空心
fillRect（x，y，w，h）填充矩形，实心
fillStyle=‘color’填充颜色
说明
x y起始坐标
w宽
h高
画弧线
arc（x，y ，radius ，starAngle ，endAngle， anticlockwise（ture/faess））
说明：
x，y 坐标
Radius 半径
starAngle 起始角度（2*Math.PI）2π
endAngle 结束角度
anticlockwise 顺时针(可写可不写)
fill（） 填充（先填充，后描边）
绘制字体
fillText（text，x，y）实心字
strokText（text，x，y）空心字
设置字体样式font=”大小 字体”
音视频
视频格式的简单介绍
支持格式：Avi rmb wnv mpeg4 ogg webm
Audio 音频 Video 视频 标签
常用行内属性
Controls 显示控制条（默认不播放）
Autoplay 自动播放 （二选一）
Preload 缓存none不缓存/auto自动加载/metadata第一帧 播放字节数
Loop 循环播放
Error 当音视频错误的时候就有内容
视频独有属性：width height poster当视频不能正常播放 用一张图片代替
Sorce媒体介质 不同的媒体介质
功能：指定为一个媒体数据指定多种播放格式及编码方式
Src 媒体 文件路径
Type 媒体的类型（ogv/ogg mov/quicktime）
Source src=“ss.ogv” type=“voideo.ogg”>
Js事件
Loadeddate 当浏览器加载完媒体数据后准备播放时触发该事件
currentTime 获取当前播放时间
startTime 获取媒体开始时间 通常为0
Duration 获取媒体总时间
muted 获取当前音量是否静音 （true） 静音 （false）音量
Volume 获取当前音量（0-1）
Js .API 方法
Play（）播放
Pause（）暂停
Load（）重新载入媒体 开始 从头播放
webStorage 本地存储：将页面中的数据存储到本地客户端中
区别：
1，存储容量 cookie 只能存储4k以内的数据
webStorage 可以存储2.5m~5m之间的数据
2，有效期限 cookie可以
webStorage不可以
分类：window对象下的属性，window.存储
SessionStorage 会话存储，当浏览关闭后存储的数据会自动删除/销毁
LocalStorage 持久化存储，永久性存储，除非人为的去删除
Js
存储数据方法：setItem（key，value） 建议使用
webStorage.key(不能跟变量和参数)=value
webStorage[key]=value
使用：window.sessionStorage.setItem（”name”，”毕鑫”）；
取存储数据的值：getItem（key） 建议使用
getItem.key
getItem[key]
删除存储数据的值：moveItem.（key）（删除单个）
setItem（key，” ”）（清空数据）
clear（）（删除所有数据）
注意：本地存储中的数据类型必须是string。
Jqurey
Josn.Parse（string）
功能：将字符串转为对象
说明：string 的格式必须是一个数组格式或对象格式的字符串
“[‘1’,’2’,’3’]” 转后 [1,2,3]
“{a：1，b：2}” 转后{a：1，b：2}
Josn.stringify（object）
功能：将对象转为字符串
$().each() 只能便利jquery对象
.
e
a
c
h
(
)
遍
历
数
组
，
对
象
及
j
q
u
e
r
y
对
象
数
组
：
.each() 遍历数组，对象及jquery对象 数组：
.each()遍历数组，对象及jquery对象数组：.each(数组，function（index，ele）{ })
说明：index 数组的索引
ele 数组元素
对象：$.each(object|json，function（key，value）{ })
说明：key 对象的键名
Value 对象的键值
渲染页面的方式：
1，拼接字符串
2，dom创建
Zepto和jq的区别：
1，更轻量，更适合移动端开发
2，去掉了很多兼容的代码
3，大量的封装的移动端事件，而jq里没有
如：tap 触屏点击 swipeLeft手指向左划 swipeRight swipeDown swipeUp
Zepto 核心模块
Event 通过on（）&off（）处理时间
Ajax xml http request和jsonp实用功能
Em：相对傅远山字体大小
Rem： 相对跟元素字体大小设置大小 （单位）
响应式布局
就是一个网站能够兼容多个终端，而不是每个终端做一个特定的版本，这个概念是为了解决移动互联网浏览器而诞生的，其目的就是为用户提供更加舒适的界面和更好的用户体验
优点：面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：兼容各种设备工作量大，效率低
代码累赘，会出现隐藏无用的元素，加载时间长
核心技术是：Media query （媒体查询）
.con{
background:green;
}
@media screen and (min-width:80px) or (min-width:80px) {//直接在一个css也可以
.con{
background:pink;
}
}
Or 或者 and 与/和
Iscroll.js是一个javascript框架，可用于制作局部滚动及拖拽加载效果 4，5
Bootstrap框架 基于juery开发 因此jq要在boot之前引用
简单灵活可可用于架构流行的用户界面的交互接口html css javascript工具集，主要用于制作响应式布局
导航：.nav
标签型导航 nav-tabs
胶囊型导航 nav-pills
垂直堆叠型导航 nav-stacked
自适应导航 nav-justified 配合胶囊或标签导航来使用
面包屑式导航 bredcrumb
[if lt Ie 9]低于ie9 it 低于 gt高于
根据不同的浏览器引入文件
<src=“html5shiv.min.js”>兼容ie6 ie7 ie8 版本
<src=“html5shiv.min.js”>
<link…>
<sripipt …>
[!endif]
循环
@for $i from 1 to 6{
}
扫一扫
103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
