name:有如下6个值：
application-name：文档名或者应用名，整个文档只能包含一个值。
author：文档作者
description:文档描述
generator：生成文档的程序。
keywords：网页关键字，用英文逗号分隔。
<a href="http://www.baidu.com">百度一下</a><br><br><span style="background-color: #00ccff">href:路径</span>
登录后复制
<img src="../img/a.jpg" alt="此图无法显示" border="1px solid red" style="max-width:90%" style="max-width:90%"/><br><span style="background-color: #00ccff">src：图片路径<br><br></span>
登录后复制
标签的属性
Border 边框
Cellspacing 表格外边距
Cellpadding 表格内边距
Align 位置
Bgcolor：背景色
Background：背景图片
Bordercolor：边框颜色
table中
|
立即学习“前端免费学习笔记（深入）”；
| colspan 跨2列
rowspan 跨 行
type值
text 文本
password 密码
radio 单选
checkbox 多选
reset 重置
file 文件上传
submit 提交表单
image 图形提交
button 普通按钮
分组下拉
<<span style="background-color: #00ccff">select</span> name="city" id="city"><br> <<span style="background-color: #00ccff">optgroup</span> label="山东"><br> <<span style="background-color: #00ccff">option</span> value="yt">烟台</option><br> <option value="qd">青岛</option><br> <option value="wh">威海</option><br> </optgroup><br> <optgroup label="北京"><br> <option value="bj">bj</option><br> <option value="tam">tam</option><br> <option value="zong">zong</option><br> </optgroup><br></select><br><br>文字区域<span style="background-color: #00ccff">textarea</span>
登录后复制
<textarea name="textarea" id="textarea" <span style="background-color: #00ccff">cols="30" rows="10"</span> readonly="readonly"<br> disabled="disabled"><br> 1</textarea><br>cols 宽度 rows 高度 readonly 只读<br><br><span style="background-color: #800080">css样式</span>
登录后复制
字体、字号：
font（缩写形式）
font-weight（粗细） 正常(normal) 粗体(bold) 斜体(italic)
font-size（大小）
font-family（字体系列）
font-style（字体样式）
字体颜色：
color
opacity (透明度 css3)
行距、对齐等：
line-height （行高）
text-align （对齐）
letter-spacing （字符间距）
text-decoration （文本修饰 ）
overflow 超出的部分隐藏
text-overflow
text-overflow文本裁剪 clip裁剪文本时不添加... ellipsis 裁剪时加... 注意：不换行和over-flow控制
text-shadow 阴影
text-indent
背景属性：
background （缩写形式）
background-color（背景色 ）
background-image（背景图 ）
background-repeat（背景图重复方式 ）
background-position（位置坐标、偏移量）
列表常用
list-style： none无风格 disc实心圆 circle空心圆 square 实心正方形 decimal 数字
盒子属性：
margin（外边距/边界） 以上方为主 可写1、2、4个值
border（边框）
padding（内边距/填充 ）
后可加 -top 等方向
border-radius 边框圆角
box-shadow 阴影
变形效果：transform
transform-origin 指定变换的起点
none无变换
translate（长度值或百分比） translateX translateY 在水平、垂直方向平移
scale（数值）scaleX scaleY 在水平方向、垂直方向或两个方向上缩放
rotate（角度）旋转元素
skew（角度）skewX skewY 在水平方向、垂直方向或两个方向上使元素倾斜一定的角度
matrix 自定义
过渡效果：transition
transition-property 指定过渡的css属性 默认值 all
transition-duration 完成过渡的时间
transition-timing-function 指定过渡函数 缓动效果默认值ease 等同于（0.25， 0.1， 0.25， 1.0）
transition-delay 指定过渡开始出现的延迟时间
@keyframes：定义一个动画
animation
<span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
.t5</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
transition</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 5s ease-out all</span><span style="background-color: #f5f5f5; color: #000000">;</span> <span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000">过渡 ease in 加速 out减速</span><span style="background-color: #f5f5f5; color: #008000">*/</span>
<span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000">transition-delay延迟</span><span style="background-color: #f5f5f5; color: #008000">*/</span><span style="background-color: #f5f5f5; color: #800000">
.t5:hover</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> skew(45deg,45deg)
</span><span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
@keyframes key </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
0%{
background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> red</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
25%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> orange</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 100px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> rotate(-90deg)</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
50%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> yellow</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 60px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 60px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> none</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
75%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> green</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 120px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 120px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> none</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
100%</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> blue</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">transform</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> rotate(360deg)</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="background-color: #f5f5f5; color: #000000">}</span><span style="background-color: #f5f5f5; color: #800000">
}
.kt</span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
animation</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff">key 1s</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000"> animation-iteration-count: infinite;</span><span style="background-color: #f5f5f5; color: #008000">*//*</span><span style="background-color: #f5f5f5; color: #008000">无限循环</span><span style="background-color: #f5f5f5; color: #008000">*/</span><span style="background-color: #f5f5f5; color: #ff0000">
background-color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> yellow</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">
width</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span><span style="background-color: #f5f5f5; color: #ff0000">height</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 200px</span><span style="background-color: #f5f5f5; color: #000000">;</span>
<span style="background-color: #f5f5f5; color: #000000">}<br><br></span> <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="kt t5"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>登录后复制
<span style="background-color: #00ccff"><br><br><br><br></span>
登录后复制
广告
收藏
676
