HTML+CSS 的语法

第一

行内元素： 图片img 图片路径src 高度height 宽度width 加粗strong 超链接路径 href
超链接打开方式:targer 空格 <<>>@© 超链接元素a mailto:邮件地址
块元素：标题h1 段落:p 换行 br 水平线 hr

第二

块元素 无序列表 ul 子元素li 有序列表 ol 子元素li 定义列表 dl 子元素 标题dt 选项 dd
表格 table 块元素 tr 子元素 标题 th 选项td colspan跨列 rowspan 跨行
视频元素 video 视频组件controns 子元素source src 自动播放autoplay 音频audio controls
标题头部header 脚部footer 文章article web的一个页面section 相关内容 aside 导航类辅助内容
iframe 的使用 <a href ="“targer=“mainFrame”> 内容 <iframe name=“mainFrame” src=”’>

第三

表单 form 地址action 提交方法 method post ||get form属性type 默认value 名字 name
文本 text属性 密码属性 possword 长度 size 显示maxlength 单选按钮radio 默认checked
复选框checkbox 每一项option 按钮重置reset 确定submit button按钮 多文本 textarea
文件 file 邮箱 mail 网址 url 数字number 滑动 range value max min step search
隐藏 hidden 只读 readonly 禁止 disable 注释label 提示 placehold 不能为空 required
pattern属性

第四

link href="" rel=“stylesheet” type=“text/css”@import url() E F 子代 E>F子选择 E+F相邻兄弟
E~F后面的兄弟 父 子 first-child 第一个子元素 nth-child(1) nth-of-type类型元素]属性E[attr]
E[att=val] E[attr*=val] E[attr^=val] E[attr$=val]

第五

行内元素 span标签 用于某段文字改变 字体类型font-family 字体大小font-size
字体的粗细font-weight bold bolder lighter normal 100 font全部的属性
字体风格标准normal ,italic,oblique
文本颜色color rbg rbga(1,2,3,透明度) 元素的对齐方式 text-align left左边 right右边 center中间
两端对齐justify 行高line-height 首行缩进text-indent:2em;
文本修饰：text-decoration
默认值none 下划线underline 上划线overling 删除线line-through
图片的文字的对齐方式vertical-aligh:middle;
文本阴影text-shadow(0~&++)
color x轴 y轴 模糊半径
超文本链接伪类 访问前a:link 访问后a:visited 悬浮时a:hover 单击未释放a:active
列表样式 list-style-type:无标记none 实心圆disc 空心圆circle 实心正方形squire
数字:decimal list-style:none
块类元素div 分割网页 背景颜色 ground-color: 透明transparent
背景图片ground-image:url(“路径”)背景重复方式repeat 水平和垂直 no-repeat不平埔
repeat-x只沿水平方向repeat-y只沿垂直方向 background-position背景位置
backgroun:全部属性
背景属性 背景属性 background-size背景大小 默认值auto 百分比percentage 放大cover
适合contain
背景渐变 linear-gradient(位置position,color1,color2) to top从下到上
ie -ms- Chrome -webkit- safari -webkit- Opera -o- firefox -moz-

第六

边框border 网页内容content 内边距padding 外边距margin
border-color 颜色 border-width边框宽度 border-style 边框类型 实线solid 点线dotted
虚线dashed 双线double 下边框全部属性border-bottom :9px #F00 dashed;
box-sizing=content-box||border-box|inherit拯救全局
默认值 content-box 等于元素宽度bored-box 继承父元素的盒子模型inherit
border-radius的使用 border:1px 2px 3px 4px; 半圆50 50 0 0
box-shadow盒子阴影(insert内) x y 阴影半径 color

第七

display 的属性 块元素block 行内元素inline 行内块元素inline-block 无显示none
float ：左浮动left 右浮动right none 没有 clear属性 左边 清除left right both none
解决父级塌陷 1浮动后面加空div 2设置父元素高度 3父级加overflow属性 默认值visible
内容会被修剪hidden 会被，可以滚动scoll 可能被auto 4 父级添加伪类after

第八

position属性 默认值static 相对地址relative 绝对地址absolute 固定地址fixed()
页面属性上下位置z-index 设置透明度opacity:x(0~1) filter:alpha(opcity=x):(0~100)

第九

webkit-transform属性 translate平移（x,y） scale缩放(0~0.99缩小 1~~放大) rotate旋转(90deg) skew旋转（0,90deg）
-webkit-transition css属性(width height background 属性) 过渡时间
过渡方式ease linear匀速 ease-in 快ease-out慢 ease-in-out越来越快 延迟时间
过渡的触发 hover 媒体 javaScript
设置关键帧@-webkit-keyframe name
{0%{} percentage{} 100%{}
}
animation 动漫名称 动漫播放方式 动画开始时间 动画播放次数1 infinte无数次
动画方向 normal循环向前 akternate 奇数前 偶数后 动画状态 开始running 结束paused
动画对外属性fowwards结束后关键帧 backwards开始帧 both两个属性都有