html设定元素动画执行,HTML5+CSS3基础元素使用

做一个全方面发展的优(快)秀(乐)人(咸)才(鱼)(ง •_•)ง。

HTML表中一些元素已经可以用css设计实现，但依然写在表格内用于了解。

HTML

HTML5基本元素书写方式

功能

超链接，跳转到xxx(网址)，不创建新标签页

超链接，跳转到xxx(网址)，不创建新标签页

超链接，跳转到xxx(网址)，并创建新标签页

段落(自动换行)

斜体

被强调的文本(效果为斜体)

粗体

被强调的文本(效果为粗体)$^①$

下划线

删除线

换行

①与仅表示效果，与主要作用为语义上的强调，在阅读器以及翻译等其他方面有比和更多的效果。由于现在开发大部分使用css，和的直接使用已经逐渐减少。

HTML5表格元素书写方式

功能

创建表格

定义表格边框宽度为1px

表格居中

创建一行单元格，嵌套在

内

创建一个单元格，嵌套在

内，作为表头元素字体加粗且居中

创建一个单元格，嵌套在

内

以此单元格为起点，合并两个同一行相邻的单元格

以此单元格为起点，合并两个同一列相邻的单元格

HTML5列表元素书写方式

功能

创建有序列表(默认标号为阿拉伯数字)

创建无序列表

创建列表中的项

反转有序列表的标号

选择标号类型(五种)：”A” , “a” , “I” , “i” , “1”，分别为大小写字母，大小写罗马数字以及阿拉伯数字

HTML5表单元素(上)书写方式

功能

创建表单，表单内容均写在这里面

单行文本框

同

初始化，在文本框内置文本xxx

初始化，在文本框内置文本xxx，且不占文本空间。作用为提示应输入的信息

文本框文本最长输入长度为xxx

只读，无法修改文本框内容

密码框，输入文本显示形式均为”*”

设置按钮，按钮提示文本为xxx

设置按钮，按钮提示文本为xxx $^①$

xxx

设置多行文本框，且可调整大小，初始内容为xxx

xxx

设置初始文本框为10行15列

数字框

选择框(多选)

选择框(单选)

多个此语句并列，name为xx的元素只能选择一个

初始为选中状态

选择列表框

选择列表框，可自定义输入内容，但需要利用定义，用法为：

选择列表框元素，嵌套在或内

①

HTML5表单元素(下)书写方式

功能

获取时间

获取颜色

显示名字为xxx的图片

上传单个文件

上传多个文件

HTML5嵌入图片与创建分区响应图书写方式

功能

显示xx.jpg

设置图片宽高分别为100px,160px

图片加载失败时提示picture字样

跳转功能，点击图片跳转至xxx.com

点击图片在网址栏可显示坐标

定义图片可行跳转区域

定义图片跳转矩形区域，其中矩形的左上右下边界分别为1px,2px,3px,4px(距离左边界或上边界距离)，嵌套在中

定义图片跳转圆形区域，其中圆心坐标为1px，2px，半径为3px，嵌套在中

定义图片跳转圆形区域，顶点为(1px,2px),(3px,4px),…其中顶点个数必须不小于三个，coords内数字个数必须不小于六个

HTML5嵌入视频书写方式

功能

播放xx.mp4视频，视频框宽高为500px，500px

设置控制栏

自动加载视频

不加载视频

加载视频第一帧

设置封面为xxx.jpg

视频静音

CSS

以下以创建.css文件为例进行说明，css的使用方式为:

HTML中：

CSS中:

a.css为创建的css文件的名字，其路径需要与调用它的html一致，在css中创建xx类时前面必须加上点(.)，若为内置文档类型(如,

css选择器书写方式

功能

*{…;}

通配符，对html中所有的元素均起作用

#id1{…;}

对元素id为id1的元素起作用

[href]{…;}

属性选择器，对href属性起作用(也可以为其他属性)

.xx:hover{…;}

当鼠标放置在该元素时触发设定的效果(冒号后面可设置其它类型的触发条件)

css控制边框和背景书写方式

功能

border-size: 2px;

设置边框宽度为20px

border-color: blue;

设置边框颜色为blue

border-style: ;

边框样，可选择solid/dashed/dotted/inset/hidden，分别为实线/虚线/圆点/内嵌/隐藏

border:2px blue dashed;

简化设置边框样式，元素顺序可交换

border-top/botton/left/right: ;

同border,分别设置四个边框属性

background-image:url(xxx) ;

设置xxx为背景图片

background-color:;

设置背景颜色

background-size: ;

设置背景填充样式

border-radius: 10px/10px;

定位圆心为(10px,10px)，画弧线，两个值不相等时为椭圆弧

css设置文本样式书写方式

功能

text-align: ;

设置文本对齐方式

direction: ;

设置文本排版方向

letter-spacing: ;

设置字母间距

word-spacing: ;

设置单词间距

line-heigth: ;

设置行高

text-indent: ;

设置文本缩进

text-decoration: ;

文本装饰，可设置下划线(underline)，上划线(overline)，删除线(line-through)等。

text-transform: ;

英文单词大小写转换，全为大写(uppercase)，全为小写(lowercase)，仅首字母大写(capitalize)等

font-family: ;

设置字体

font-size: ;

设置字体大小

font-style: ;

设置字体样式(粗体，斜体等)

font-variant: ;

设置字体大小写转换以及字体大小，如小型大写(small-caps)

font-weight: ;

设置字体粗细

text-shadow: 1px 2px 1px red;

设置文本阴影，参数分别为水平偏移，竖直偏移，模糊程度(可不写)，颜色。

css使用过渡

使用过渡时利用之前学过的选择器 : .xx:hover{…;}，表示类名为xx的元素在鼠标放上去时执行当前类操作。

其内部元素与之前无异，只是相当于创建了一个新的格式，在鼠标放上去时显示，但其增加了过度时的动画效果(css使用动画语句也写在 .xx:hover{…;}中)。

书写方式

功能

transition-delay: ;

过渡延迟(单位s或ms)

transition-duration: ;

平滑过渡，宽高大小均匀变化(单位s或ms)

transition-property: ;

设置有平滑过渡效果的元素(宽高，颜色等)

css使用动画

调用动画时需要将动画最终效果的元素放在一个新的类型 : @keyframes name{…;} .

书写方式

功能

animation-duration: ;

同transition-duration: ;

animation-delay: ;

同transition-delay: ;

animation-name: ;

动画效果名称

anianimation-iteration-count: infinite;

动画效果执行无数次(也可设置为其他正整数)

anianimation-direction: alternate;

动画结束后反方向播放动画,即倒放

css使用变换书写方式

功能

transform: rotate(30deg) ;

顺时针旋转30°

transform: scale(2);

缩放2倍

transform: scalex(2);

长扩大2倍

transform: scaley(2);

宽扩大2倍

transform-origin: 20px 40px ;

以距左边界20px，上边界40px为锚点进行变换(也可设为top/button,left/right)

css盒子模型书写方式

功能

padding-top/button/left/right: 100px;

文本、图片等距离上/下/左/右边界100px

background-clip: content-box/padding-box/boder-box;

设置元素背景(仅内容/延伸至边缘/包含边缘)

margin-left/right/top/botton: ;

设置盒子与网页左右上下边距(绝对距离)