动态生成html页面技术_HTML5与CSS3实现动态网页（笔记）

打开新页面

HTML5与CSS3实现动态网页（学习笔记）

结构标签

：标签定义一篇文章

：该标签定义页面或部分的标题

nav：标签定义导航链接

：标记定义区域

aside：该标签定义页面内容部分的侧边栏

：标记定义文件中某个块的相关信息

：该标签定义一组媒体内容及其标题

：该标签定义元素的标题

：该标签定义页面或区域的底部

：标记定义一个类似微信的对话框（会话框）

第一个补充点：//aside//

第二点：// >aside////nav

多媒体标签

video：标签定义视频

audio：标签定义音频内容

：标签定义媒体资源

： 有非常强大的 API

embed：标签定义外部交互内容或插件

多媒体标签的意义：多媒体标签的出现也推动了富媒体的发展，支持无需插件的操作媒体文件，大大提高了用户体验。

Web 应用程序标签

状态标签

仪表：状态标签（实时状态显示：气压和温度）（Opera）

：状态标签（任务流程：安装和加载）（Opera）

列出标签

：定义一个下拉列表用于输入标签，使用（Opera）

：该标签定义元素的详细内容，与（ ）结合

菜单标签

菜单：命令列表（目前并非所有主流浏览器都支持）

：菜单命令列表（仅.0）支持

:menu 标签定义命令按钮（仅 IE9 支持）

注释标签

Ruby：标记定义注释或音标

rt：标签定义注释内容文本，为Ruby

rp：告诉不支持ruby元素的浏览器如何显示它们

rp：不要将其放在 rt 标签内

标签

mark：mark 用标记来定义文本

：标记定义一些输入类型，并随时间计算表单结果

：标签以以下形式定义生成的值

time：该标签定义日期/时间，目前并非所有主流浏览器都支持该标签

已删除的标签

纯粹表达的元素

大字体 s tt u

对可用性产生负面影响的元素

弗兰

造成混淆的因素

目录

重新定义标签

b: 内联文本通常为粗体，不表达重要性

i：内联文本通常为斜体，不传达重要含义

dd：可以和and一起使用，也可以用来定义文本

dt：可以与 和 一起使用来总结细节，或者

hr：表示主题的结束，而不是水平线，虽然显示是一样的

menu：重新定义用户界面的菜单，配合或使用

Small：表示小字体，例如打印注释或法律术语。

：表示重要性而不是强调。

输入

日期输入类型

日期——选择日、月、年

月——选择月份、年份

Week——选择周数和年份

时间 - 选择时间（小时和分钟）

——选择时间、日、月、年（UTC时间）

-local——选择时间，日，月，年（当地时间）

新布局意义

语义

HTML5允许更多语义化的结构化代码标签来替代大量无意义的v标签

1：此语义特性提高了网页的质量和语义

2：减少以前用于 CSS 调用的 class 和 id 属性

搜索引擎友好

新的结构标签给网页布局带来了变化，提高了网页对搜索引擎的友好度

HTML5 属性变更

输入

电子邮件 /url/ / 范围 /日期 / /颜色/ 电话

表单属性

/ // /

链接属性

” = “” >

a:媒体“”（电视）

a:=”zh” （这里的语言设置为中文）

a:rel =“”（设置超链接的引用，此处超链接为外部链接）

其他属性

defer：脚本不是在加载完成后才执行，而是在整个页面加载完成后才执行。

async：脚本加载完成后立即执行，不需要等待整个页面加载完成，异步执行

ol 有序列表

Start - 起始值

- 相反的顺序

html

=“缓存”。（定义页面离线应用文件）

API 简介

简要描述;简介

移动应用程序

************************CSS3********************************

基本选择器

通配符选择器、元素选择器、类选择器、id选择器、后代选择器

新添加的选择器

子选择器、相邻兄弟选择器、通用兄弟选择器、组选择器

属性选择器

使用指定的属性设置 HTML 元素的样式

使用CSS3属性选择器，可以指定元素的属性，也可以同时指定元素的属性和其对应的属性值。

a[htrf]{} 使用属性设置元素的样式

a[href=""]{} 设置具有属性“value”的元素的样式

a[href~=""]{} 包含值

a[href^=""]{} 所有以value开头的元素的样式

a[href$=""]{} 所有以value结尾的元素的样式

a[href*=""]{} 包含所有具有值的元素的样式

a[href|=""]{} 选择属性值为 'value-' 或以 'value' 开头的元素

伪类选择器

动态伪类

锚点伪类：：link：

用户操作伪类：:hover::focus

UI 元素状态伪类：我们把：：：（opera）

CSS3 结构类：

:first-child 选择其父元素的第一个子元素

:last-child 选择父元素的最后一个子元素的样式

:nth-child() 匹配其父元素的第 N 个子元素，无论元素类型如何

:nth-子节点(n) :nth-子节点(2n+1) :nth-子节点(奇数) :nth-子节点(偶数)

: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(/) 选择器匹配所有非指定元素/选择器的元素。

父元素：not(子元素/子选择器) (:not(/))

a:不是（:最后一个类型）

重量

体重级别和体重

内联样式 (1000) > ID 选择器 > 类选择器和伪类选择器 (10) > 元素和伪元素 (1) > * (0)

包含更高特异性的选择器的规则具有更高的特异性。

ID选择器（#）比属性选择器[id='']的权重更高

具有上下文的选择器比简单元素选择器具有更高的权重

无论选择器由多少个元素组成，没有任何类选择器具有更高的权重。

通配符选择器权重为0，继承的CSS属性也有一个权重，也是0

伪元素

CSS伪元素用于为某些选择器设置特殊效果

句法

元素::伪元素（::-）

::first-line 样式格式化第一行文本（仅适用于块级元素）

::first - 为第一个字母设置特殊样式（仅适用于块级元素）

:: 在元素内容之前插入新内容行级元素

::after 在元素内容后插入新内容

::用于设置浏览器中选中文本后的背景色和前景色

圆角理论：

-

一个值：四个圆角的值相同

两个值：第一个值是左上角和右下角，第二个值是右上角和左下角

三个值：第一个值是左上角，第二个值是右上角和左下角，第三个值是右下角

第四个值是左上角，第二个值是右上角，第三个值是右下角，第四个值是左下角。

-左上方-

-右上-

- 左边-

- 正确的-

---：50%；

-moz-border-radius:50%;
   -ms-border-radius:50%;
      -o-border-radius:50%;
            border-radius:50%;

盒子阴影

box- 属性

box-:h- v- 模糊颜色插图；

边框图片

-image 属性

-图像：切片宽度；

-clip: -box：背景被剪裁到边框

-clip: -box：背景被剪裁到填充框

-clip: -box：背景被剪裁到内容框

-属性

- 属性指定背景属性应为相对

-：-盒子-盒子-盒子

-尺寸：||封面|

当只设置一个值时，第二个值会根据图像的宽度按比例缩放。

当两个值都存在的时候，图像会按照设置的值大小显示。

cover 将按比例缩放背景图像以填充整个容器

-图像：url(“bg2.png”)，url(“bg1.jpg”)：

全部的

：彩色尺寸剪辑图片；

—尺寸：90%；

-： -盒子;

-剪辑：-盒子；

-： 固定的;

坡度

线性渐变

：-（,颜色提示1，颜色停止2）

：-o--（,color-stip1，color-stop2）

:-（角度.颜色停止1.停止2，…）

径向渐变 ( )

颜色从起点到终点以圆形渐变的方式由内向外变化（从中心向外拉）

:-（形状，颜色停止1，颜色停止2，…）

形状描述

- 圆形的

- 椭圆（默认）

径向渐变大小关键字

语法

:-（大小，颜色停止点1，颜色停止点2，…）

关键字描述

-side：最近的一侧 -side：最远的一侧

-: 最近的角度 -: 最远的角度

：----(30% 70%、-侧、红色、、蓝色、绿色)；

CSS3 过渡

css3() 转换

通过指定角度参数创建原始元素的二维旋转。

语法

:() 角度可以是正数也可以是负数

css3（）翻译

move() 方法根据给定的参数将元素从当前位置移动到 Y 轴的顶部。

（x）仅在水平方向移动（X轴移动）

（Y）仅在垂直方向移动（Y轴移动）

（x,y）水平移动和垂直移动（同时移动）

:(200像素）；

CSS3 比例（）

规模

scale() 方法指定对象的二维比例（2D缩放）

三个条件

（x）元素仅水平缩放（X 轴缩放）

（y）元素仅在已知方向上缩放（Y 轴缩放）

scale(x,y) 是元素同时水平和垂直缩放

语法

:()

:()

CSS3 skew() 扭曲或斜角

css3() 矩阵或 mixin

矩阵

将二维变换指定为包含六个值 (a,b,c,d,e,f) 的变换矩阵。

相当于直接喝下[a,b,c,d,e,f]变换矩阵

语法

：(a,b,c,d,tx,ty);

参数说明

tx,ty，根据 X 和 Y 坐标重新定位元素

它是混合旋转、平移、移动、缩放、倾斜和剪切。

css3（）

css3（）

css3（）

css3（）

css3（）

回转

该方法指定对象在X轴上的旋转角度。

语法

：（角度）

参数说明

angle 表示旋转角度

回转

方法指定对象的 3D 旋转角度

语法

:(x，y，z，角度）；

参数说明

前三个参数表示旋转的方向，x，y，z，第四个参数表示旋转角度。

参数不能被忽略

移动

设置对象 Z 轴平移的方法

语法

:(z);

参数说明

该参数对应Z轴，不可省略。

移动（）

转置3d（x，y，z）

参数说明

分别对应X、Y、Z，轴参数不可省略

飞涨

方法指定对象的 z 轴缩放

语法

:(z);

参数说明

参数对象的Z轴，不可省略

飞涨

指定对象 3D 缩放的方法

语法

:(x，y，z）；

参数说明

对象x,y,z分别表示，参数不能省略

-属性

语法

-:x轴y轴z轴；

CSS3 中的矩阵

在 CSS3 中，矩阵指的是一种写法，

它是元素的运动变换二维变换矩阵是3*3

是元素的移动变换，三维变换规则是一个4*4的矩阵。

-style 属性

-style 属性指定嵌套元素在三维空间中如何呈现。

语法

样式：平面/-3D

属性

指定与观察者 [z=0] 平面的距离，以便为具有 3D 位置变换的元素提供透视图

语法

：|无

默认值

：没有任何：

-属性

指定透视点的位置

语法

-:x 轴，y 轴

-属性

指定元素的背面是否对用户可见。

语法

-： | ；

CSS3 过渡

兼容性 IE10+++.1.1

- 属性

检查或设置参与转换的对象的属性（指定该转换的名称）

语法

-:无/全部/

- 属性

检测或设置对象转换的顺序

语法

-：时间;

CSS3 属性

- 属性

检索或设置对象中的过渡动画类型

- 指定属性名称

- 过渡时间

-- 过渡方法

-delay 延迟

CSS3 动画

阿尼玛灵魂赋予生命

视觉暂留原理

人类具有‘视觉暂留’的特性，在看到一幅图片或一个物体之后，0.34秒内影像不会消失。

动画原理

通过将任务的表情、动作变化分级分解成许多个瞬间的帧，利用视觉暂留的原理，在一帧消失之前播放下一帧，就会得到平滑的视觉变化效果。

CSS3 动画

-name 属性

检测或设置应用于对象的动画的名称

语法

-名称 :| 无

- 属性

检索或设置对象动画的持续时间

语法

- ：时间

参数说明

time 指定动画完成所需的时间。默认值为 0

--

定时调节时间选择

-delay 属性

检索或延迟对象的动画

语法

-延迟时间;

定义是动画之外的东西

--count 属性

重复迭代

--计数：| ；

- 属性

检查或设置对象动画是否在循环中反向播放

-：| | |-

|

法线方向

反转方向

动画正常运行然后反转并继续交替运行

- ：动画先反向运行，再正向运行，并继续交替

（以上属性必须设置循环播放才有效）

-fill-node 属性

指定动画未播放时（动画完成或动画延迟时）应用的元素样式。

语法

-fil 模式:;

参数说明

默认值为 none，不设置动画以外的对象状态。

设置动画结束时对象的状态

设置动画开始时对象的状态

两者将对象状态设置为动画的结束或开始状态

-play-state 属性

指定动画是否正常运行或暂停

语法

-播放状态 : | ;

参数说明

：指定暂停动画

：默认值指定正在运行的动画。

属性

匹配属性来检索或设置应用于对象的动画效果

语法

名称 - 延迟 -计数填充模式播放状态；

css3@{

keyframes-selector {
 css-styles ; 

参数说明

：必须写定义的名字

- 您必须输入动画持续时间的百分比 0 - 100% 形式（0%）

至(100%)

css-：必须写入一个或多个有效的 css 样式属性

css3 将

1：-固定替代方案-

2：带有图像的元素放置在伪元素中

3：使用意愿

目标

提高页面渲染性能

CPU 和 GPU

CPU，即中央处理器，负责解释计算机指令并处理计算机软件中的数据

GPU是图形处理单元，专门处理和绘制图形相关的硬件。

它专为数学和几何计算而设计，将 CPU 从图形处理任务中解放出来。