HTML5基本标签

《标题标签》
<h1></h1>  一级标签
<h6></h6>  六级标签

<p></p>  段落标签
<br/>  换行标签
<hr/>  水平标签

《字体样式标签》
<strong></strong> 加粗标签
<em></em>x斜体标签

《特殊符号标签》
&nbsp;  空格符号
&copy;   版权符号@
&gt;  大于号>       &lt；小于符号 <

《图像标签》
<img src = "path" alt = "texe" title = "text "  width= "x" height = "y"/>
src 图像地址
alt 图像的替代文字
title 鼠标悬停提示文字
wudth 图像宽度
height 图像高度

《超链接标签》
<a href ="path" target ="目标窗口位置 ">链接文本或图像</a>
href 链接路径
target 链接在哪个窗口打开
target "( _self 或 _blank)"
_seif 在本窗口覆盖原先的窗口
_balnk 原来的窗口不变重新打开一个窗口

《页面间链接》
<a href = "elearing/index.html" target="_balnk"></a>

《锚链接》
<a href></a>

disabled 禁用
readonly 只读文本框
hidden  隐藏域
placeholder  文本框入内容提示
required 必填项
pattern 验证
method ( get/post) post 密码保密
name  名称
value 开始值
size 宽度 长度
maxlength 设置可以输入多少字符
checked 指定按钮是否被选中
radio 单选按钮
checkbox 复选框
<select><option></option></select>  列表框
reset 重置按钮
image 图片提交按钮
submit 提交按钮
button 普通按钮
<textarea cols="10"  rows="30"></textarea>多行文本
 cols 列数   rows 行数
file 文本域
enctype="multipart/form-data" 表单编码属性
email 邮箱
url 网址
number 数字                                min 最小值     max 最大值
range 滑块                          min 最小值     max 最大值
search 搜索框

autoplay 自动播放属性
controls 播放框架
video 视频元素     支持格式   oog  MPEG4 WebM
<video controls>
<source src="video/video.webm" type="video/Webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>

audio 音频元素
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>     你的浏览器不支持audio元素
</audio>

font-szi  字体大小
color  颜色
<styel type="text/css"></styel> 内部样式
type="text/css" 引入css
 <link  href="css/lx1.css" rel="stylesheet" type="text/css">    链接引入css

#www  id选择器 
.www   类选择器
body p    后代选择器
body>p 子选择器
class="www"   www+p 相邻兄弟选择器
class="www"   www~通用兄弟选择器

结构伪类选择器
E:first-child 父元素第一个子元素
E:last-child 父元素的最后一个子元素
E F:nth-chlid(n) 父元素E的第n个子元素F

E:first-of-type 父元素指定类型的第一个E元素
E:last-of-type 父元素指定类型最后一个E元素
E F: nth-of-type(n) 父元素指定类型的第n个F元素

<字体>
font-family 设置字体类型
font-size 设置字体大小     auto默认   percentage x y百分比    cover整个背景图片放大填充   contain按照图片大小填充
fon-style 设置字体风格     normal正常  italic倾向  oblique斜体
font-weight 设置字体粗细   normal正常  bold 粗体 bolder 更粗  lighter更细
风格-粗细-大小-类型 

<文本>
color 设置文本颜色
text-align 设置元素水平对齐方式  left默认  right右对齐 center中间对齐 justify两端对齐文本效果
vertical-align 垂直对齐方式 middle中间对齐 top上对齐 bottom下对齐   
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰 none默认值,定义的标准文本  underline设置文本的下划线   overline设置文本的上划线 line-through设置文本删除线
text=shadow color x-offset y-offset radius 文本阴影    text=shadow red 10px  10px 10px        

a:link  未单击访问时超链接样式
a：visited 单击访问后超链接样式
a：hover 鼠标悬浮其上的超链接样式
a：active 鼠标单击未释放的超链接样式
link-visited-hover-active

ui li
list-style-type；属性
none 无标记符号
disc 实心圆
circle 空心圆
square 实心正方形
decimal 数字

background-color  背景颜色
background-image  背景图像
背景重复方式  
background属性
background-repeat属性 repeat沿水平和垂直两个方向平铺   no-repeat 不平铺，即只显示一次  repeat-x 只沿水平方向平铺 repeat-y 只沿垂直方向平铺
background-position x y背景定位

background : linear-gradient(position,color1,color2,....) 线性渐变
position 渐变方向  to top从下到上  to bottom 从上到下  to left从右到左  to right从左到右   

盒子模型,

border 边框   （border-top-color上   bottom下   left左   right右）边框颜色      《上右下左》
border-width 边框粗细  
border-type 边框样式     dotted 点线     dashed 虚线       solid 实线     double 双线
height 高
width 宽
margin 外边距 （margin-top上  bottom下   left左   right右） auto 网页居中对齐  auto条件:(块元素 固定宽度)
paddig 内边距 （paddig-top上  bottom下   left左   right右）

盒子模型尺寸
box-sizing     content-box默认   border-box

border-radius 园角边框
box-shadow：color x y radius 盒子阴影 box-shadow: red 10px 10px 10px
inset 内阴影 默认是外阴影

display 属性
display:block   行内元素改块元素，块元素不变
display:inline   块元素改行内元素，行内元素不变可以把两个块元素排到一行当中去
display:none   不显示
display:block-inline 既具有行块元素，又具有内元素
float 浮动 float:left 左浮动 right右浮动
clear清除浮动  clear:left在左侧不许浮动 right在右侧不许浮动   both 左右两侧不许浮动  none默认，不清除浮动

解决父级边框塌陷:
1  浮动后面加空div <div class="nnb"></div>  .nnb{ clear:both  margin:0; padding:0}

 2 设置父元素的高度: <div class="nnb"></div> .nnb{ height:400px border1px, solid}

 3 父级加 voerflow
voerflow属性
visible 默认值。内容不会被修剪，会呈现在盒子之外 
hidden 内容会修剪,并且其余内容是不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余内容
auto  如果内容被修剪,则浏览器会显示滚动条以便查看其余内容

 4 父级添加伪类after  
<div class:"hjb"></div> 
.hjb:after{
content:";
display:block;
clear:both;
    }

定位
position属性
static 默认, 没有定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
z-index

透明度：
opacity:x   x值为(0~1)值越小越透明
filter:alpha(opacity=x)   x值为(0~100)值越小越透明
rgba(0,0,0,0.5)
 
浏览器兼容
-webkit-ransform:  translate(4px,8px)
-o-transform:  translate(4px,8px)
-moz-transform:    translate(4px,8px)

CSS变形
transform 属性
translate(): x y平移函数
scale(): 缩放含数
rotate():旋转函数 单位deg 
skew():  x y倾斜含数 单位deg

CSS过渡
transition属性  transition (all) color 1s ease-in 3s;
ease: 速度由快到慢  (默认)
linear: 速度横速  (均速运动)
ease-in: 速度越来越快  (渐显效果)
ease-out: 速度越来越慢  (渐隐效果)
ease-in-out: 速度先加速再减速  (渐显渐隐效果)

CSS动画
@keyframes ppp{
 0%{width:0;}
 33%{width:33;}
 66%{width:66;}
 100%{width:100;}
}

关键字调用
p{
ppp: name1 2s linear 2;
}
infinte; 无限次循环