html制作动态网页 第1篇
在chapter01=文件夹中创建一个HTML文件 运行查看效果
在chapter01文件夹中创建一个HTML文件 运行查看效果
在chapter01文件夹中创建一个名称为的文件。 在chapter01文件夹中创建一个HTML文件 运行查看效果
在chapter01文件夹中创建一个HTML文件
运行查看效果
html制作动态网页 第2篇
基本选择器
通配符选择器，元素选择器，类选择器，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%;
盒阴影
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（__）,url(__):
整个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(,...)
径向渐变（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+
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 赋予生命
视觉暂留原理
人类具有‘视觉暂留’的特性 人的眼睛看到一幅画后或一个物体后，在秒 内不会消失
动画原理
通过把任务的表情动作变化等分级后画成许多 瞬间的画幅，利用视觉暂留的原理。在一幅画还没有消失之前播放下一幅画，就会给你一种流畅的视觉变化效果
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 {
参数说明
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
/***/
html制作动态网页 第3篇
在E:\web_work里创建一个名称为chapter01的文件夹然后创建一个名为htmlDemo01的HTML文件。
保存并运行程序，使用浏览器打开。
在chapter01文件夹中新建HTML文件 保存并运行程序，使用浏览器打开。
在chapter01文件夹中新建HTML文件 保存并运行程序，使用浏览器打开。
运行查看效果 设置样式 查看效果
在chapter01文件夹中创建一个HTML文件 保存并运行程序可以在里面输入内容。
在chapter01文件夹中创建一个HTML文件 保存并运行程序
*无序列表 在chapter01文件夹中创建一个HTML文件 保存并运行 *有序列表 在chapter01文件夹中创建一个HTML文件 保存并运行 *定义列表 在chapter01文件夹中创建一个HTML文件
保存并运行
在chapter01文件夹中创建一个HTML文件 保存并运行
单击泸州职业技术学院的效果 单击全国职业院校技能大赛的效果
在chapter01文件夹中添加一个名称为的图片文件，然后创建一个HTML文件 保存运行查看效果
html制作动态网页 第4篇
在chapter01文件夹中创建一个JavaScriptDemo01的HTML文件 运行查看效果
在chapter01文件夹中创建 运行查看效果
在chapter01文件夹中创建一个名为的文件 在chapter01文件夹中创建一个名为JavaScriptDemo03的HTML文件。 在这里插入图片描述 运行查看效果
在chapter01文件夹中创建一个名为JavaScriptDemo04的HTML文件 运行查看效果
在chapter01文件夹中创建一个名为JavaScriptDemo05的HTML文件。