HTML5与CSS3实现动态网页（笔记）
打开新页
HTML5与CSS3实现动态网页（学习笔记）
结构标签
article：标记定义一篇文章
header：标记定义一个页面后者一个区域的头部
nav：标记定义导航链接
section：标记定义一个区域
aside：标记定义页面内容部分的侧边栏
hgroup：标记定义文件中一个区块的相关信息
figure：标记定义一组媒体内容以及他们的标题
figcaption：标签定义figure元素的标题
footer：标记定义一个页面或一个区域的底部
dialog：标记定义一个对话框（会话框）类似微信
第一点补充：header/section/aside/article/footer
第二点补充：header/section/foooter >aside/article/figure/htroup/nav
多媒体标签
video：标记定义一个视频
audio：标记定义音频内容
source：标记定义媒体资源
canvas：画布很强大的API
embed：标记定义外部的可交互的内容或插件
多媒体标签意义：多媒体标签的出现亦为之富媒体的发展以及支持不适用插件的抢矿下即可操作媒体文件，极大的提升了用户体验
Web应用标签
状态标签
meter：状态标签（实时状体显示：气压气温）（Chrome Opera）
progress：状态标签（任务过程啊：安装 加载） (Chrome Firefox Opera)
列表标签
datalist：为input标记定义一个下拉列表，配合option（Firefox Opera）
details：标记定义一个元素的详细内容，配合summary( Chrome)
Menu标签
menu：命令列表（目前所有主流浏览器都不支持）
menuitem：menu命令里列表（只有FireFox8.0）支持
command：menu 标记定义一个命令按钮（只有IE9支持）
注释标签
ruby：标记定义注释或音标
rt：标记定义对ruby真的注释内容文本
rp：告诉那些不支持ruby元素的浏览器如何去显示
rp：不要放在rt标签内
其他标签
mark ：标记定义有标记的文本
output ：标记定义一些输入类型，计算表单结果配合oninput时间
keygen：标记定义表单里一个生成的建值
time：标记定义一个日期/时间，目前所有主流浏览器都不支持
删除的标签
纯表现的元素
Basefont big center font s strike tt u
对可用性产生负面影响的元素
frane frameset noframes
产生混淆的元素
acribym applet isindex dir
重定义标签
b：代表内联文本 通常是粗体 没有传递表示重要的意思
i：代表内联文本 通常是斜体 没有表示传递表示重要的意思
dd：可以同details与figure 一同使用，定义包含文本 dialog也可用
dt：可以同details与figure 一同使用，汇总细节，dialog也可以用
hr：表示主题结束，而不是水平线，虽然显示相同
menu：重新定义用户界面的菜单，配合commond或者menuitem使用
small：表示小字体，例如打印注释或者法律条款
strong：表示重要性而不是强调符号
input
date Pickers input 类型
Date——选取日，月，年
Month——选取月，年
Week——选取周和年
Time——选取时间（小时和分钟）
Datetime——选取时间，日，月，年（UTC时间）
Datetime-local——选取时间，日，月，年（本地时间）
新布局意义
语义化
html5 可以让很多更语义化的结构化代码标签代替大量无意义的地v标签
1：这种语义化大的特性提升了网页的质量和语义
2：减少了以前用于css调用的class和id属性
对搜索引擎的友好
新的结构标签带来的网页布局的改变及其提升对搜索引擎的友好
HTML5属性变化
input
email /url/ number/ range /Date picker /search /color/ tel
表单属性
autocomplete/ autofocus /muiltiple/ placeholder /required
链接属性
target
http://localhost/” target = “_blank” >
a:media “” (handhelp tv )
a:hreflang=”zh” (设置语言 这里设置是中文)
a:rel = “external” （设置超链接的引用，这里超链接卫外部链接）
其他属性
script
defer：加载完脚本后并不执行，而是等整个页面加载完成之后执行
async ：加载完脚本之后立刻执行，不用等整个页面都加载完成，异步执行
ol 有序列表
Start - 起始值
Reversed - 倒叙排序
html
manifest = “cache.manifest” (定义页面离线应用文件)
简述API
简述Canvas
移动端应用
************************CSS3********************************
基本选择器
通配符选择器，元素选择器，类选择器，id选择器，后代选择器
新增加的选择器
子元素选择器，相邻兄弟选择器，通用兄弟选择器，群组选择器
属性选择器
对带有指定属性的HTML元素设置样式
使用CSS3 属性选择器，你可以指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。
a[htrf]{} 带有atribute属性的Element元素设置样式
a[href=”“]{} 为attribute=”value” 属性的Element元素设置样式
a[href~=”“]{} 包含value值
a[href^=”“]{} 以value值开头的所有Element元素的样式
a[href$=”“]{} 以value值结尾的所有Element元素的样式
a[href*=”“]{} 包含value值的所有Element元素的样式
a[href|=”“]{} 选择器attribute属性值为’value-’ 或以’value’ 开头的元素
伪类选择器
动态伪类
锚点伪类:：link :visited
用户行为伪类：:hover :active :focus
UI元素状态伪类：我们把：enabled ：disabled ：checked （opera）
CSS3结构类：
:first-child 选择属于父元素的首个子元素的每个Element元素
:last-child 选择属于父元素的最后一个子元素的element 元素的样式
:nth-child() 匹配属于其父元素的第N个子元素 ，不论元素类型
:nth-child(n) :nth-child(2n+1) :nth-child(odd):nth-child(even)
:nth-last-child() 匹配属于其元素第n个元素的每个元素 不论类型从最后
一个子元素开始计数
:nth-of-type(N)选择器匹配属于父元素的特定类型的第N个子元素每个
元素
:nth-last-of-type（n）指定元素类型
nth-last-child（n）不限定元素类型
:first-of-type 匹配属于其父元素的特定类型的首个子元素的每个元素
:last-of-type 匹配属于其父元素的特定类型的最后一个子元素的每个元素
:only-child 匹配属于其父元素的唯一子元素的每个元素
:only-of-type 匹配属于其父元素的特定类型的唯一子元素的每个元素
:empty 匹配没有子元素（包括文本节点）的每个元素
否定选择器
:not(Element/selector) 选择器匹配非指定元素/选择器的每个元素
父元素：not(子元素/子选择器) （Father:not(Children/selector)）
a:not(:last-of-type)
权重
权重等级与权值
行内样式（1000）> ID选择器 >类属性选择器和伪类选择器（10）> 元素和伪元素( 1 ) > * （0）
包含更高权重的选择器的一条规则拥有更高的权重
ID选择器（#idValue）的权重比属性选择器[id=’idValue’]高
带有上线文关系的选择器比单纯的元素选择器权重高
无论多少元素组成的选择器，都没有一个class 选择器权重高
通配符选择器权重是0，被继承的css属性也带有权重 ，权重也是0
伪元素
css伪元素用于向某些选择器设置特殊效果
语法格式
元素::伪元素 （Element::pseudo-element）
Element::first-line 样式对element第一行文本格式化 (只能用于块级元素)
Element::first-letter 第一个首字母设置特殊样式 （只用于块级元素）
Element::before 在元素内容前面插入新内容 行级元素
Elemetn::after 在元素内容后面插入新内容
Element::selection 用于设置在浏览器中选中文本后的背景色和前景色
圆角理论：
border-radius
一个值：四个圆角值相同
两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
三个值：第一个值为左上角，第二个值为右上角与左下角，第三个值为右下
第四个值：左上角，第二个至为右上角，第三个值为右下角，第四个值左下
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
-webkit-border-radius:50%;
-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;
盒阴影
box-shadow 属性
box-shadow:h-shadow v-shadow blur spread color inset;
边界图片
border-image 属性
border-image:source slice width outset repeat;
background-clip： border-box：背景被裁剪到边框盒
background-clip：padding-box：背景被裁剪到内边距盒
background-clip：content-box：背景被裁剪到内容盒
background-origin属性
background-origin 属性指定backg-position属性应该是相对位置
background-origin：padding-box border-box content-box
background-size：length|percentage|cover|contain
当只设置一个值时，第二个值根据图片的宽度值来等比缩放
当两个值都有，按设置值大小来显示图片
cover 即将背景图片等比例缩放以填满整个容器
background-image：url（”bg2.png”）,url(“bg1.jpg”):
整个background
background：color position size repeat origin clip attachment image;
background-size: 90%;
background-origin: content-box;
background-clip: content-box;
background-attachment: fixed;
渐变
线性渐变 linear Gradients
background：linear-gradient（direction,color-stip1, color-stop2）
background：-o-linear-gradient（direction,color-stip1, color-stop2）
background:linear-gradient(angle.color-stop1.stop2,…)
径向渐变（radial gradients）
从起点到终点颜色从内想外进行圆形渐变（从中间向外拉）
background:radial-gradient(shape,color-stop1,color-stop2,…)
形状说明
circle - 圆形
ellipse - 椭圆（默认）
径向渐变 尺寸大小关键字
语法
background:radial-gradient(size,color-stop1,color-stop2,…)
关键字说明
closest-side : 最近边 farthest-side : 最远边
closest-corner: 最近角 farthest-corner ： 最远角
background: -webkit-repeating-radial-gradient(30% 70%, closest-side circle, red, yellow, blue, green);
CSS3转换
css3 rotate() 转换
通过制定的角度参数对原元素制定一个2D rotation （ 2D旋转）
语法
transform ：rotate（） 角度可以为正值或者负值
css3 translate() 平移
移动translate（）方法 根据X轴和顶部Y轴位置给定的参数，从当前元素位置移动
translateX（x）仅水平方向移动（X轴移动）
translateY（Y）仅垂直方向移动（Y轴移动）
translate（x,y）水平方向移动和垂直方向移动（同时移动）
transform:translateX(200px);
css3 scale（） 缩放
缩放 scale
scale（）方法 指定对象2D scale （2D 缩放）
三种情况
scaleX(x) 元素仅水平方向缩放（X轴缩放）
scaleY( y) 元素仅谁知方向缩放 （Y轴缩放）
scale（x,y） 是元素水平方向和垂直方向同时缩放
语法
transform:scaleX()
transform:scaleY()
css3 skew（） 扭曲或者斜切
css3 matrix（） 矩阵或者混合
矩阵matrix
以一个含六值得（a,b,c,d,e,f）变换矩阵的形式指定一个2D变换
相当于直接饮用一个[a,b,c,d,e,f]变换矩阵
语法
transform：matrix(a,b,c,d,tx,ty);
参数说明
tx,ty ,就是基于X和Y坐标重新定位元素
是一个混合 rotate 旋转 translate 平移 移动 scale 缩放 skew 斜切
css3 rotate3d()
css3 translate3d()
css3 scale3d()
css3 matrix3d()
css3 perspective()
旋转rotateX
rotateX方法指定对象在X轴上的旋转角度
语法
transform:ratoteX(angle)
参数说明
angle表示旋转的角度
旋转rotate3d
rotate3d方法指定对象的3d旋转角度
语法
transform:rotate3d(x,y,z,angle);
参数说明
前三个参数分别表示旋转的方向想，x,y,z,第四个参数表示旋转角度
参数不允许忽略
移动 translateZ
translateZ方法制定对象Z轴的平移
语法
transform:translateZ(z);
参数说明
参数对应Z轴，不允许省略
移动translate3d()
trans;ate3d(x,y,z)
参数说明
分别对应X，Y，Z，轴 参数不允许省略
缩放scaleZ
scaleZ方法指定对象的z轴缩放
语法
transform:scaleZ(z);
参数说明
参数对象的Z轴，不允许省略
缩放scale3d
scale3d方法制定对象的3d缩放
语法
transform:scale3d(x,y,z)；
参数说明
分别对象x,y,z,参数不允许省略
transform-origin属性
语法
transform-origin:x-axis y-axis z-axis;
css3中的矩阵
css3中矩阵指的是一个方法 书写为matrix 和matrix3d
matrix 是元素的移动变换trasform 2D 变换矩阵为3*3
matrix3d 是元素的移动变换transform 3D变换规则是4*4 的矩阵
transform-style属性
transform-style属性指定嵌套元素是怎样在三维空间中呈现
语法
transform-style:flat/preserve-3d
perspective 属性
指定观察者[z=0]平面的距离 使具有三维位置变换的元素产生透视效果
语法
perspective:number | none
默认值
perspective:none:
perspective-origin属性
指定透视点的位置
语法
perspective-origin:x-axis,y-axis
backface-visibility属性
指定元素背面面向用户是否可见
语法
backface-visibility:visible | hidden;
css3过渡 transition
兼容性 IE10+ FireFox16+ CHrome26+ Safari6.1 Opera12.1
transtion-property 属性
检测或设置对象中参与过渡的属性（指定那个过渡的名称）
语法
transition-property ：none /all / property
transition-duration 属性
检测或设置对象过渡的秩序时间
语法
transtion-duration：time；
css3 transition 属性
transition-timing-function 属性
检索或设置对象中过渡的动画类型
transtion-property 指定属性名
transition-duration 过渡时间
transition-timing-function 过渡方法
transition-delay 延迟
css3 动画
animation 动画 anima 灵魂 animate 赋予生命
视觉暂留原理
人类具有‘视觉暂留’的特性 人的眼睛看到一幅画后或一个物体后，在0.34秒 内不会消失
动画原理
通过把任务的表情动作变化等分级后画成许多 瞬间的画幅，利用视觉暂留的原理。在一幅画还没有消失之前播放下一幅画，就会给你一种流畅的视觉变化效果
css3 动画
animation-name 属性
检测或设置对象所应用的动画名称
语法
animaiton-name : keyframename | none
animation-duration 属性
检索或设置对象动画的持续时间
语法
animation-duration :time
参数说明
time 指定动画播放完成花费的时间，默认的数值是0
animation-timing-function
timing 定时 调整 时间选择
animation-delay 属性
检索或这是对象动画的延迟时间
语法
animaiton-delay: time;
定义的是动画之外的事情
animation-iteration-count 属性
iteration 迭代 反复 重复
animation-iteration-count:infinte | ;
animation-direction 属性
检测或设置对象动画在循环中是否反向运动
animiatoin-direction: normal | reverse | akterbate | alternate-reverse
initial | inherit
normal 正常方向
reverse 反方向方向
alternate 动画先正常和运行再反向运行 并持续交替运行
alternate-reverse : 动画先反向运行再正方向运行，并持续交替运行
(上面的属性一定要设置为循环播放才能起作用)
animaiton-fill-node 属性
规定动画不播放时（当动画完后才能或当动画有延迟未播放时）要应用的元素样式
语法
animation-fil-mode:;
参数说明
none 默认值不设置对象动画之外的状态
forwards 设置对象状态动画结束时的状态
backwards 设置对象状态动画开始时的状态
both 设置对象状态为动画结束或开始的状态
naimation-play-state 属性
指定动画是否正常运行或已暂停
语法
animation-play-state : paused | running ；
参数说明
paused ： 指定暂停动画
running : 默认值 指定正在运行的动画
animation 属性
符合属性 检索或设置对象所应用的动画特效
语法
animation name duration timeing-function delay iteration-count direction fill-mode play-state;
css3 @keyframes {
keyframes-selector {css-styles ;
}
}
参数说明
animationname :必须写 定义 animation 的名称
keyframes-selector 必须写 动画持续时间的百分比 0 - 100% form(0%)
to(100%)
css-styles ： 必须写 一个或者多个合法的css样式属性
css3 will-change
1:position-fixed 替代 background-atachment
2:带图的元素放在伪元素中
3：巧用will-change
目标
增强页面渲染性能
CPU 和GPU
CPU即中央处理器解释计算机指令以及处理计算机软件中的数据
GPU即图形处理器 专门处理和绘制图形相关的硬件 GPU 是专为执行复杂
的数学和几何计算而设计的 有了它 CPU 就从图形处理的任务任务重解放出来
可以执行其他更多的系统任务
现状
css的动画 变形 渐变 并不会自动触发GPU加速 而是使用浏览器稍慢的软件渲染引擎在 transition transform和animation的世界里应该写在进度到GPU加快速度 只有3D 变形会有自己的layer 2D变形不会
translateZ() (or translate3D) Hack
为元素添加没有变化德3D变形 骗取浏览器触发硬件加速
代价
这种情况通过向他自己的层叠加元素 占用RAM和GPU存储空间
vill-change
提前通知浏览器匀速将要做什么动画 让浏览器提前准备何时的优化设置
语法
will-change ：auto scroll-position contents
auto 此关键字表示没有特定的意图 使用与他通常所做的任何启发式优化
scroll-position 表示将要改变元素的滚动位置
custom-ident 明确指定将要改变的睡醒与给定的名称
animateable-feature 可动画一些特定值 比如 left to[ margin 等
注意
勿滥用 提前生命 remove
/*********************************************/
js
完整的javascript 是有ECMAScript （语法）
Browser Objects (DOM BOM ) 特性组成的。
// 单行注释
/**/ 多行注释
ECMASxript 中的一切 (变量 函数名和操作符) 都区分大小写
1：什么是标识符
变量 函数 属性的名字 或者函的参数
2：表示符命名规则
有字符 数字 下划线 或 $ 符号组成不能以数字开头 不能使用关键字 保留字 作为标识符
1： 变量声明 var
变量的声明要使用var 操作符语法 var 变量名
2： 变量赋值
声明同时赋值 var 变量名 = 值先声明后赋值 ： 变量名 = 值
说明
1：省略var 声明的变量是全局变量
2：不推荐 省略var操作符来定义全局变量
javaScript 的数据类型
ECMAScript
五种简单的数据类型 Undefined NUll Boolean NUmber String
复杂的数据类型 Object
typeof 功能 检测便令类型
返回值 string number boolean object undefined function
undefined
undefined 类型只有一个值 即特殊的undefined
说明
一般而言 不存在需要显示地吧一个变量设置为 undefined 的情况
null
1：null 值表示一个空对象指针
2：如果定义的变量准备在将来用于保存对象 那么最好将变量
初始化为null 而不是其他的值
说明 undefined 值时派生字null值得 所以 undefined == unll
的返回结果是true
1：掌握 Number
2：掌握isNAN()
3：掌握数值转换
Number()parseInt()parseFloat()
Number :表示整数 或浮点数
NaN ：即非数值（Not a Number） 是一个特殊的数值
说明
1：任何涉及NaN的操作例如（NaN/10）都会返回NaN
2：NaN与任何值都不相等 包括 NaN本身。
isNaN
语法 isNaN （n）
功能： 检测 n 是否是“非数值” 返回值 boolean
参数 ： 参数n可以是任意类型
说明 isNaN() 对接受的数值 先尝试转换为数值 ，在检测是否为非数值
数值转换
1：Number（ ）可以用于任何数据类型
2：parseInt() 和parseFloat（）则专门用于把字符串转换成数值
3：parseInt()操作的字符串必须以数字开头、
4：parseInt()会忽略字符串前面的空格 直至知道直至找到第一个非空格
说明
parseInt（）转换空字符串返回NaNparseInt（）这个函数提供第二个参数 转换时使用基数 即多少进制
parseFloat
parseFloat ： 从第一个字符开始解析 到每一个字符 直至遇见一个无效的
浮点数字字符为止
说明
除了第一个小数点有效外 parseFloat() 与parseInt() 的第二个区别在与它
始终都会忽略前置的零
String
语法
str.toString()
功能 ： 将 str转化为 字符串
1:掌握String
2：掌握字符串转换
String（）
toString()
3: 掌握Boolean
4；掌握类型转换
String类型 用于表示零或者多个16位Unicode字符组成的字符序列
即字符串 字符串可以有单引号或者双引号 一定是配对使用
toString
语法 str.toString()
功能 ：将str 转化为字符串
返回值 str 的一个副本
参数 : str是要转换的内容 可以是数值，布尔值，对象，和字符串
说明
在不知道要转换的值是不是null或者undefined 的情况下，还可以使用String （）函数 ，它能将任意类型的值转化为字符串
类型转换
1: 除0之外的所有数字 都转换为布尔值为true
2：除” ” 之外的所有字符 转换为布尔型都是true
3：null 和undefined 转换为false
学习目标
1：掌握什么是表达式
2：掌握javascript操作符的分类
3：掌握算数操作符
什么是表达式
将同类型的数据（如常亮，变量，函数等） 用运算的符号按照一定的规则谅解起来，有意义的式子称为表达式。
操作符分类
1：算数操作符 + - * 、 / %
2：逻辑操作符
3：赋值操作符
4：比较操作符
5：三元操作符
递增和递减
1：递增
++a 与a++ 都是对 a 进行递增的操作
区别
++a 先返回递增之后的a 的值
a++先返回a的原值 在，返回递增之后的值
赋值操作符
简单赋值 =
复合赋值 += -= *= /= %=
比较操作符
< >= <= == === != !==
== 相等 只比较值是否相等
=== 相等 比较值得同时比较数据类型是否相等
!= 不相等 比较值是否不想等
！== 不相等 比较值得同时比较数据类型是否不相等
返回值 ： boolean型
三元操作符
语法
条件？ 执行代码1 ： 指定代码2
说明
可代替简单的if语句
如果条件成立 指定代码1 否则执行代码2
逻辑操作符
&&：与 （只要有一个条件不成立 ，返回false）
说明
在第一个操作符不是布尔值的情况，逻辑与操作就不一定返回值
1：如果第一个操作数隐士类型转化为true 则返回第二个操作数
2：如果第一个操作隐士类型转化为false 的直接返回第一个操作数
3：只要有null undefined NaN 就会返回 null undefined NaN
|| ：或 （只要有一个条件成立，返回true）
1: 如果第一个操作隐士类型转换类型true 则返回第一个操作数
2：如果第一个操作隐士类型转换为false 则返回第二个操作数
3：如果两个操作数都是null NaN undefined 则返回null NaN undefined
！：非 （）
说明
无论操作是是什么类型数据类型，逻辑非都会返回一个布尔值
！！ 同时使用两个逻辑运算符时
第一个逻辑非操作会基于无论什么操作都会返回一个布尔值
第二个逻辑非对该布尔值求反
1：掌握星期的获取方法
2：掌握document.write()
3：掌握条件语句switch
语法：new Date().getDay()
功能：获取星期
返回值：number(0-6)
switch语句
语法
switch (){
case value : statement
break ;
case value : statement
break;
default:statement
}
输出
语法：document.write（“内容”）
功能：想浏览器输出内容
for 语句
语法
for(语句; 语句2;语句3){
被执行的代码块
}
语句1 : 在循环（代码块）开始前执行
语句2：定义运行循环（代码块）的条件
语句3：在循环（代码块）已被执行之后执行
for嵌套
1：外层为假时内层不执行
2：限制性外城在执行内层，直至内层的条件为假时再返回外层去执行
do-while语句
语句
do {
需要执行的代码
}while (条件)
说明 这种语法的循环至少要被执行一次
for 适合一直循环次数的循环体
while 适合位置循环次数的循环体
1：掌握break语句的应用
2：掌握continue 语句的应用 结束本次循环
javaScript 中的函数
1：掌握函数的作用
2：掌握函数的定义
3：掌握函数的调用
函数的作用
通过函数可以封装任意多条语句，而且可以在任何地方，任何时候
调用执行
function functionName([arg0,arg1,…agrn]){
}
说明：
1：functionName 是要定义的函数名 属于标识符
2：[] 中的arg0，arg1 。。。argn 为函数的参数
3：[]说明里面的内容不是必须的，它不是语法
return 函数的返回值
任何函数通过 return 语句 后面耕者返回的值来实现返回值
说明
1：函数会在执行完return 语句之后停止并立即退出
2：return语句也可以不带有任何返回值，用于提前停止函数执行又不需要返回值得情况
学习目标
1：掌握arguments
ECMAScript 中的参数在内部用一个数组来表示
在函数体内通过arguments对象来访问这个数组参数
说明
1：arguments对象只是与数组类似，并不是Array的实例
2：[] 语法访问它的每一个元素
3：length属性确定传递参数的个数
javaScript 中的内置对象
1：Array
2：String
3：Math
4：Date
Array
1：掌握如何创建数组
2：掌握数组元素的读和写
3：掌握数组的length属性
创建数组的基本方式有两种
1：使用Array构造函数
语法：new Array（）
小括号 （）说明
（1）预先知道数组要保存的项目数量
（2）向Array构造函数中传递数组应包含的项
2：使用数组字面量表示法
有一对包含数组项的方括号[]表示，多个数组项之间以逗号隔开
数组元素的读写
读取和设置值时，使用方括号[]并提供相应的索引
说明：索引是从0 开始的正整数
数组长度
语法 array.length
功能 ：获取数组array的长度
返回值：number
说明
1：通过设置length可以从数组的末尾移除项或向数组中添加新项
2：把一个值放在超出当前数组大小的位置上时，会重新计算数组的长度值，长度值等于最后一项索引加1.
掌握数组的栈方法
1：push（）
2：unshift（）
3：pop（）
4：shift（）
push（）
语法
arrayObject.push（newele1,newele2,….,neweX）
功能
把它的参数顺序添加到 arrayObject的尾部
返回值
把指定的值添加到数组或的心长度
unshift()
语法
arrayObject.unshift(newele1,newele2,…,neweX)
功能：
把它的参数循序添加到arrayObject的开头
返回值
把指定的值添加到数组后的新长度
pop()
语法
arrayObject.pop()
功能
删除 arrayObject 的最后一个元素
返回值
被删除的那个元素
shift()
语法
arrayObject.shift ()
功能
删除 arrayObjectr 中的第一个元素
返回值
被删除的那个元素
join()
语法
arrayObject.join(separator)
功能
用于把数组的所有元素放入一个字符串
返回值
字符串。
reeverse()
语法
stringObject.reverse()
功能
用于点到数组中的元素的顺序
返回值：数组
sort()
语法
arrayObject.sort(sortby)
功能
用于对数组元素进行排序
返回值：数组
说明：
1：即使数组中的每一项都是数值，sort()方法比较的也是字符串
2：sort（）方法可以接受一个比较函数的作为参数
sort(function(){a,b} return a
HTML5与CSS3实现动态网页（笔记）相关推荐
- html动态网页作品,HTML5与CSS3实现动态网页
资源介绍 步骤1:xa0HTML基础 HTML主要是为"网页创建和其它可在网页浏览器中看到的信息"设计的一种标记语言,为搭建网页结构做出第一步.本阶段主要介绍了HTML的语法基础. ...
- 响应式Web设计：HTML5和CSS3实战（读书笔记）
视口:浏览器窗口内的内容区域,不包含工具栏,标签栏.网页实际显示. 屏幕尺寸:设备物理显示区域 各种宽度和高度a.可视区的真实宽度和高度document.documentElement.clientW ...
- HTML5与CSS3实战指南读书笔记之一些可能会有用的东西
2019独角兽企业重金招聘Python工程师标准>>> 1.details 一个简单的收起/展开 <details><summary>Notes</su ...
- HTML5与CSS3基础教程学习笔记【第三章 基本HTML结构】
第三章 基本HTML结构 前言 3.1开始编写网页 3.2创建页面标题 3.3创建分级标题 3.4普通页面构成 3.5创建页眉 3.6标记导航 3.7标记页面的主要区域 3.8创建文章 3.9定义区块 ...
- 基于html5动画效果毕业论文,毕业设计（论文）-基于HTML5和CSS3的响应式网页制作.doc...
第PAGE \* MERGEFORMAT1页(共16页) 全日制本科生毕业论文 题 目: 基于HTML5和CSS3的响应式网页制作 学 院: 计算机与信息科学学院 专业年级: 计算机科学与技术2011 ...
- [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
写在前面 书籍介绍:本书主要讲解了如何运用HTML5和CSS3来进行响应式Web设计,使页面的设计与开发根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)来进行相应的响应和调整. 我的简评:响 ...
- HTML5与CSS3权威指南笔记案例1
第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...
- 响应式Web设计：HTML5和CSS3实战 读书笔记
响应式Web设计:HTML5和CSS3实战 Responsive Web Design with HTML5 and CSS3 By : Pandao pandao####vip.qq.com ...
- 02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...
最新文章
- 关于FATFS文件系统挂载多个磁盘
- java 单线程改多线程_帮我把单线程的程序改成多线程JAVA,急！
- php使用strstr函数 ，判断字符串A中是否含有字符串B
- rust(34)-Rust and WebAssembly(2)
- 详解python运行三种方式_详解python调用cmd命令三种方法
- 一个简单的进程池版的爬虫程序
- 本地编译tomcat的docker镜像
- [导入]液晶显示器型号速查[转]
- 关于码率（Bitrate）、帧率（FPS）、分辨率和清晰度详解
- 薅羊毛php源码,基于AutoJs实现的薅羊毛App专业版源码大分享---更新啦
- RN版UiTableView（带sessionHeaderView）并加载多层json数据
- 非洲机皇传音继续出圈
- Android自定义星星评分控件
- 【Python】xlwings-删除重复行
- Protein-protein interaction site prediction through combining local and global features 文章梳理
- containers详解
- 20220407——组合逻辑电路 3-8线译码器
- ecshop后台首页mysql_ecshop 添加后台页面以及设置权限
- ios 扇形 按钮_iOS 画圆弧或扇形
- Linux下搜狗拼音输入法无法输出中文以及显示界面异常