目录
HTML5新特性
标签 | 意义 |
---|---|
article | 页面独立的内容区域 |
aside | 页面的侧边栏内容 |
bdi | 允许设置一段文本,使其脱离父元素的文本方向设置 |
command | 命名按钮,比如单选按钮、复选框或按钮 |
details | 描述文档或文档某个部分的细节 |
dialog | 对话框,比如提示框 |
summary | 包含.detail元素的标题 |
figure | 规定独立的流内容(图像、图表、照片、代码等) |
figcaption | 定义figure的标题 |
footer | section或document的页脚 |
header | 文档的头部 |
mark | 带有记号的文本 |
meter | 度量衡,仅用于已知最大和最小值得度量 |
nav | 导航链接的部分 |
progress | 任何类型的任务进度 |
ruby | ruby注释(中文注音或字符) |
rt | 字符(中文注音或字符)的解释或发音 |
rp | 在ruby注释中使用,定义不支持ruby元素的浏览器所显示的内容 |
section | 文档中的节(section、区段) |
time | 定义日期或时间 |
wbr | 规定在文本中的何处适合添加换行符 |
canvas 绘制
canvas只是图形容器,必须使用脚本来绘制
<canvas id="mycanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d")
ctx.fillStyle = "#FF0000"
ctx.fillRect(0,0,150,75)
</script>
SVG 可伸缩矢量图形
图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG | canvas |
---|---|
基于 XML,SVG DOM 中的每个元素都是可用的 | 通过 JavaScript 来绘制 2D 图形,不支持事件处理器 |
每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形 | 一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象 |
属性draggable=“true” 拖放
项目 | Value |
---|---|
拖动什么 | ondragstart和setData() |
放到何处 | ondragover |
进行放置 | ondrop |
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id)
}
ondragover 事件规定在何处放置被拖动的数据;
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
调用:event.preventDefault()
进行放置 ondrop:
当放置被拖数据时,会发生 drop 事件;
ondrop 属性调用了一个函数,drop(event):
function drop(ev)
{
ev.preventDefault(); // drop 事件的默认行为是以链接形式打开
var data=ev.dataTransfer.getData("Text");
// 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在setData() 方法中设置为相同类型的任何数据
ev.target.appendChild(document.getElementById(data));
// 把被拖元素追加到放置元素(目标元素)中
}
audio(音频) video(视频)
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 自动播放 |
controls | controls | 向用户显示控件,比如播放按钮 |
height | pixels | 设置视频播放器的高度 |
loop | loop | 循环播放 |
preload | preload | 视频在页面加载时进行加载,并预备播放。 |
src | url | 要播放的视频的 URL |
width | pixels | 设置视频播放器的宽度 |
Web存储 localStorage、sessionStorage
1、sessionStorage
①生命周期为关闭浏览器窗口
②在同一个窗口(页面)下,数据可以共享
③以键值对的形式存储使用
存储数据:sessionStorage.setItem(key,val)
获取数据:sessionStorage.getItem(key)
删除数据:sessionStorage.removeItem(key)
清空数据:sessionStorage.clear()
2、loaclStorage
①生命周期永久生效,除非手动删除,否则页面关闭依旧存在
②可以多窗口(页面)共享(同一浏览器可以共享)
③以键值对的形式存储使用
存储数据:loaclStorage.setItem(key,val)
获取数据:loaclStorage.getItem(key)
删除数据:loaclStorage.removeItem(key)
清空数据:loaclStorage.clear()
Input 类型
type="" | 作用 |
---|---|
包含 e-mail 地址的输入域,在提交表单时,会自动验证 email 域的值 | |
url | 包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值 |
number | 包含数值的输入域。还能够设定对所接受的数字的限定 min max step(间隔) value(默认值) |
range | 包含一定范围内数字值的输入域,range 类型显示为滑动条,还能够设定对所接受的数字的限定 min max |
date, month, week, time, datetime, datetime-local | 日期选择器 |
search | 搜索 |
CSS3新特性
属性选择器
属性选择器 | 描述 |
---|---|
E[att] {} | 选择具有att属性的E元素。 |
E[att=“val”] {} | 选择具有att属性且属性值等于val的E元素。 |
E[att~=“val”] {} | att=“val” √;att=“val val2” √;att=“valval2” ×; |
E[att^=“val”] {} | att=“val” √;att=“valval2” √;att=“vval” ×;(属性字符串以val开头即可) |
E[att$=“val”] {} | 属性字符串以val结尾即可 |
E[att*=“val”] {} | 属性字符串含有val即可 |
E[att l=“val”] {} | att=“val” √;att=“val-…” √;att=“val…” × |
结构伪类选择器
p: type 父级的第n个p元素
p: child 父级的第几个子元素
比如:p:nth-of-type(2) 父级的第二个p元素,p:nth-child(2) 父级的第二个子元素
盒模型
box-sizing属性是用来切换盒模型
box-sizing的默认属性是content-box
属性值 | 意义 |
---|---|
box-sizing:content-box; | 元素的宽高只包含content(W3C标准盒模型) |
box-sizing:pandding-box; | 元素宽高包含padding和content |
box-sizing:border-box; | 元素的宽高包含border、padding和content (常用,IE怪异盒模型) |
box-sizing: inherit; | 规定应从父元素继承 box-sizing 属性的值。 |
border(边框)
属性 | 作用 |
---|---|
border-image | 设置所有边框图像的速记属性 |
border-radius | 设置边框半径 圆角 |
box-shadow | 盒子阴影 |
文本效果
属性 | 作用 |
---|---|
text-align: “justify” | 行对齐 |
text-overflow | 文本溢出 |
text-shadow | 文本阴影 |
transform 转换变形
在原来位置移动,而不是现在位置移动
作用 | Value |
---|---|
移动 | translate(x,y)、translateX(n)、translateY(n) |
缩放 | scale(x,y)、scaleX(n)、scaleY(n) |
旋转 | rotate(angle) |
倾斜转换 | skew(x-angle,y-angle)、skewX(angle)、skewY(angle) |
transition 过渡
动画
作用:通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
主要属性:
@keyframes :在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
例:
@keyframes myfirst{
from {
background: red;}
to {
background: yellow;}
}
@keyframes myfirst{
0% {
background: red;}
25% {
background: yellow;}
50% {
background: blue;}
100% {
background: green;}
}
@keyframes 中创建动画后,要把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:规定动画的名称、规定动画的时长
例:animation: myfirst 5s;
表示把 “myfirst” 动画捆绑到 div 元素,时长:5 秒:
display=“flex” 弹性盒 伸缩布局
属性 | 作用 |
---|---|
justify-content | 元素在主轴(横轴)方向上的对齐 |
align-item | 元素在侧轴(纵轴)方向上的对齐 |
flex | 分配空间 |
ES6新特性
var、let、const、增强字面量、闭包
for …of … ,for … in …
… 展开运算符
const books = ["Kevin", "Durant"];
console.log(...books); // Kevin Druant
结合数组:
const fruits = ["apples", "bananas", "pears"];
const vegetables = ["corn", "potatoes", "carrots"];
var product1 = fruits.concat(vegetables); // Array.concat()
const produce2 = [...fruits,...vegetables]; // 展开运算符
console.log(produce1); // ["apples", "bananas", "pears","corn", "potatoes", "carrots"]
console.log(produce2); // ["apples", "bananas", "pears","corn", "potatoes", "carrots"]