HTML总结
HTML5总结
- 新增标签
- <nav>导航栏标签
- <header>定义文档页眉头部
- <main>文档主要内容
- <footer>定义文档或节页脚
- <article>定义文章
- <section>定义文章中的节(类似于div)
- <aside>定义侧边内容
- <progress max=“长度” value=“进度”></progress>//进度条
- <meter max=“最大值” min=“最小值” high=“规定高度” low=“规定地址” value=“进度”>//度量器,高于high和低于low会变换颜色
- <label for=“id值”>//for属性与input的id属性相连使文字标注与input绑定
- <form>//输入栏提示标签
<datalist id=“input标签的list属性值”>
<option value=“值”>input中可能输入的值</option>
</datalist>
</form> - <form>//将表单元素分组
<fieldset>
<legend>分组标题</legend>
<input type=“text” />
<input type=“text” />
</fieldset>
</form>
- 新增表单
- <input type=“email”>//验证email格式
- <input type=“tel”>//验证手机号格式
- <input type=“url”>//验证网址格式
- <input type=“number”>//验证邮政编码
- <input type=“time”>//验证时间
- <input type=“date”>//验证日期
- <input type=“datetime”>//验证日期时间
- <input type=“month”>//验证月份
- <input type=“week”>//验证星期
- <input type=“range”>//滑块
- <keygen >//加密提交
- <output for=“定义输出域相关的一个或多个元素”>//只显示不可修改
- 属性:autocomplete=“on”/"off"打开关闭提示(必须有name属性)
- 属性:autofocus="autofocus"自动获取光标
- 属性:accesskey=“s”//规定使用此元素快捷键为S
- 属性:pattern=“正则表达式”//规定格式
- type="file"属性:multiple//上传多个文件或多个邮箱地址,以,分隔
- type="submit"属性:required//不能为空
- 媒体标签
- 音频
<audio>
<source src=“音频地址.mp3”>//可定义多个格式
<source src=“音频地址.ogg”>
</audio>
- src=“音频地址”
- autoplay=“autoplay”//自动播放
- controls//显示控件
- loop//循环
- poster=“封面地址”
- 视频
<video>
<source src=“视频地址.mp3”>//可定义多个格式
<source src=“视频地址.ogg”>
<video>
- src=“音频地址”
- autoplay=“autoplay”//自动播放
- controls//显示控件
- loop//循环
- poster=“封面地址”
CSS总结
- 概述
CSS 指层叠样式表(Cascading Style Sheets),用于定义如何显示HTML元素
书写位置
<标签名 style="属性:值;属性:值;...">
<style type="text/css">
选择器{
属性:值;
...
}
</style>
<link href="css文档路径" rel="stylesheet" type="text/css"/>
选择器
- 通配符选择器: *{ 属性:值; }//全部
- 元素选择器: 标签名{ 属性:值; }
- id选择器: #id名{ 属性:值; }//用一次
- 类选择器: .class名{ 属性:值; }//用多次
- 多类名选择器: .class名 .class名{ 属性:值; }
- 后代选择器: 外层名 内层名{ 属性:值; }
- 子代选择器: 外层名>内层名{ 属性:值; }//后代中的亲儿子
- 相邻兄弟选择器: 元素 + 元素{ 属性:值; }
- 交集选择器: 标签名.class名{ 属性:值; }
- 并集选择器: 标签名,标签名…{ 属性:值; }
- 链接伪类选择器:
a:link{ 属性:值; }//未访问过时
a:hover{ 属性:值; }//鼠标悬停时
a:action{ 属性:值; }//鼠标压下时
a:visited{ 属性:值; }//鼠标点击后 - 伪元素选择器:
:first-letter{ 属性:值; }//向文本的第一个字母添加特殊样式
:first-line{ 属性:值; }//向文本的首行添加特殊样式
:before{ 属性:值; }//在元素之前添加内容
:after{ 属性:值; }//在元素之后添加内容
三大特性
- 层叠性: 下层属性会将上层属性覆盖
- 继承性: 内层继承外层某些属性
- 优先级: 权重能叠加 id>类>标签 内>外 自身>继承
属性 | 权重 |
---|
继承或* | 0,0,0,0 |
标签 | 0,0,0,1 |
类,伪类 | 0,0,1,0 |
id | 0,1,0,0 |
行内样式 | 1,0,0,0 |
!important | ∞无穷大 |
属性
- 背景
- 背景颜色: background-color //rgba(red,green,blue,透明度)
- 背景图片: background-image //url(图片路径)
- 背景图片重复: background-repeat //repeat,repeat-x,repeat-y,no-repeat
- 背景关联: background-attachment //fixed背景固定,scroll滚动
- 背景定位: background-position //center,top,bottom,left,right,长度值
- 连写: background: 颜色,图片,图片重复,关联,定位
- 文本
- 文本缩进: text-indent
- 水平对齐: text-align //center,left,right
- 垂直对齐: vertical-align //baseline与基线对齐,middle与中线对齐,top与顶线对齐,bottom与底线对齐
- 字间隔: word-spacing
- 字母间隔: letter-spacing
- 颜色: color
- 行高: line-height
- 修饰: text-decoration //none无修饰,underline下划线,overline上划线,line-through删除线,blink闪烁
- 字体
- 字体风格: font-style //斜体(i),正常(normal)
- 字体粗细: font-weight
- 字体大小: font-size //单位:像素(px),英寸(in),点(pt),厘米(cm)
- 字体系列: font-family //宋体,微软雅黑
- 连写font: font-style,font-weight,font-size(必写),font-family(必写)
- 元素转换
- 块级元素(占整行): h1,p,div,ul,ol,li
- 行内元素(内容大小): span,select,label
- 行内块元素(设置大小): img,input,td
- 转换: display //block块级,inline行内
- 盒子模型
- 内容: width、height
- 内边距: padding
- 一个值: 代表上下左右,
- 两个值: 第一个代表上下,第二个代表左右
- 三个值: 第一个代表上,第二个代表左右,第三个代表下
- 四个值: 第一个代表上,依次顺时针
- 内上边距: padding-top
- 内下边距: padding-bottom
- 内左边距: padding-left
- 内右边距: padding-right
- 边框: border
- 边框宽度: border-width
- 边框颜色: border-color
- 边框风格: border-style //none无边框,hidden隐藏边框,solid实线边框,dashed虚线边框
- 连写: border:宽度 风格 颜色
- 上边框: border-top
- 下边框: border-bottom
- 左边框: border-left
- 右边框: border-right
- 合并相邻边框: border-collapse:collapse
- 外边距: margin
- 定位
- 静态定位: static(默认)
- 相对定位: relative(占有原位置,以自己走)
- 绝对定位: absolute(不占有原位置,以浏览器屏幕走)
- 固定定位: fixed(不占有原位置,固定在屏幕某个位置)
- 偏移量:
top:值;//向上偏移
bottom:值;//向下偏移
left:值;//向左偏移
right;//向右偏移 - 叠放次序:z-index 默认为0
- 模式转换: 元素有绝对或固定定位后模式会转换为行内块模式,行内元素加高度后可不转换
- 浮动
- 浮动框脱离文档流,可向左或向右浮动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
- float //left左浮动,right右浮动,none默认
- 清除浮动:把浮动的盒子圈在标准流的盒子里
1.在浮动盒子后一个盒子并使用clear属性(值为left表左侧不允许浮动元素,值为right表右侧不允许浮动元素,值为both表左右两侧均不允许浮动元素)
2.为父元素添加overflow:hidden;
3.为父元素添加class值为clearfix
.clearfix:after{/伪元素是行内元素 正常浏览器清除浮动方法/
content: “”;
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 号只有IE6-IE7执行,其他浏览器不执行/
}
4.为父元素添加class值为clearfix
.clearfix:after,.clearfix:before{
content: “”;
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
- 其他
- display //block块级显示,none不保留位置隐藏
- visibility //visible显示,hidden保留位置隐藏
- overflow //visible不剪切内容也不添加滚动条,auto超出自动显示滚动条,hidden不显示超出内容,scroll总显示滚动条
- 鼠标样式cousor //pointer变手,text文本,move拖拽,default默认
- 取消轮廓outline:none;
- 取消拖拽resize:none;
CSS3总结
选择器
- 属性选择器
div[class]{} //带class属性的div
div[class=“a”] //class属性值是a的div
div[class^=“a”] //class属性值是以a开头的div
div[class$=“a”] //class属性值是以a结尾的div
div[class*=“a”] //class属性值是包含的div - 伪类选择器
li:nth-child(3){} //第三个li
li:nth-child(even){} //偶数的li
li:nth-child(odd){} //奇数的li
li:frist{} //第一个li
li:nth-child(n){} //全部的li - 兄弟伪类选择器
.类名+li{} //与类名相邻的li元素
.类名~li{} //与类名为兄弟的li元素 - 相对于父元素的结构伪类
li:first-child{} //li的父元素中的第一个元素
li:first-of-type{} //li的父元素中的第一个li元素
li:nth-child(5){} //li的父元素中的第5个li元素
li:nth-of-type(even){} //li的父元素中偶数的元素
li:nth-of-type(){-n+5}{} //li的父元素中的前5个元素
li:empty{} //无内容的li元素
li:nth-last-child(n){} //倒着计算的li元素
li:last-child{} //最后的li元素 - 伪元素选择器
p::first-letter{} //p中第一个字
p::first-line{} //p中第一行
p::selection{} //选择某个状态
p::before{必须有属性content:“其它属性修饰内容”} //在p前放内容,默认为行级元素
p::after{必须有属性content:“其它属性修饰内容”} //在p里放内容 - 锚点选择器
h2:target{} //为锚点添加样式
前缀
- 属性名前加-ms- 代表IE浏览器私有属性
- 属性名前加-webkit- 代表safari、chrome浏览器私有属性
- 属性名前加–o- 代表Opera浏览器私有属性
- 属性名前加-moz- 代表firefox浏览器私有属性
背景
- 线性渐变background:linear-gradient(to 方向,开始颜色 位置,终止颜色 位置)
- 径向渐变background:radial-gradient(形状,大小,坐标,颜色)
- 重复渐变background:repeating-radial-gradient(形状,大小,坐标,颜色)
- 背景图片background-image:url(“图片地址”)
- 重复背景图片background-repeat //round图像缩放后平铺,space以相同的间距平铺
- 背景图片尺寸background-size //值设置图片宽高,contain等比例自适应,cover自适应
- 背景图片定位区域background-origin //content-box(与border重叠填充背景)padding-box(与padding重叠填充背景)border-box(与内容开始位置重叠)
- 背景绘制区域background-clip //border-box显示border及以内的背景,padding-box显示padding及以内的背景,显示content及以内的背景
边框
- 图片边框border-image-source:url(“图片地址”)
- 图片边框向内偏移border-image-slice //number|%|fill保留边框图像的中间部分
- 图片边框宽度border-image-width
- 图片边框区域超出边框的量border-image-outset
- 图片边框样式border-image-repeat //repeated平铺,rounded铺满,stretched拉伸
- 连写border-image:地址,宽度,超出量,样式
- 圆角边框border-radius: 左上,右上,右下,左下
- 左上圆角边框border-top-left-radius
- 右上圆角边框border-top-right-radius
- 右下圆角边框border-bottom-right-radius
- 左下圆角边框border-bottom-left-radius
- 边框阴影box-shadow: 水平 垂直 模糊度 颜色 内阴影; //可叠加
文本
- 文本阴影text-shadow: x轴 y轴 模糊度 颜色; //可多个叠加用逗号分隔
- 长单词换行到下一行word-wrap:break-word;
过渡
- 在不使用Flash动画或JavaScript的情况下,为元素从一种样式变为另一种样式添加效果
- 过渡名称transition-property //none没有属性会获得|all所有属性会获得|自定义名称列表,以逗号分隔
- 过渡时间transition-duration
- 过渡速度transition-timing-function //linear匀速|ease慢快慢|ease-in慢速开始|ease-out慢速开始结束|ease-in-out慢速开始和结束|cubic-bezier(n,n,n,n)自定义值在0到1之间
- 延迟transition-delay
- 连写transition: property duration timing-function delay
2D转换
- transform:转换方法;
- 转换方法
- translate(x,y) //沿X和Y轴移动元素
- translateX(n) //沿X轴移动元素
- translateY(n) //沿Y轴移动元素
- scale(x,y) //改变元素宽高
- scaleX(n) //改变元素宽
- scaleY(n) //改变元素高
- rotate(angle) //旋转元素,角度单位deg
- skew(x-angle,y-angle) //沿X和Y轴倾斜元素
- skewX(angle) //沿X倾斜元素
- skewY(angle) //沿Y轴倾斜元素
- transform-origin:设置旋转轴心;//值为坐标点
3D转换
- transform:转换方法;
- 转换方法
- translate3d(x,y,z) //沿X,Y,Z轴移动元素
- scale3d(x,y,z) //沿X,Y,Z轴缩放元素
- rotate3d(x,y,z,angle) //沿X,Y,Z轴旋转元素
- transform-origin:设置旋转轴心;//值为坐标点
- transform-style规定被嵌套元素如何在3D空间中显示//preserve-3d子元素将保留其3D位置
- perspective设置元素被查看位置//元素距离视图的距离
- perspective-origin设置3D元素的基点位置
动画
- 规定动画
@keyframes 动画名
{
百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%
0% {background: red;}
50% {background: blue;}
100% {background: green;}
或from {background: red;}
to {background: red;}
} - 应用动画
- animation:动画名 其他属性值;//可连写顺序如下
- 动画名animation-name
- 花费时间animation-duration
- 速度animation-timing-function //linear匀速|ease慢快慢|ease-in慢速开始|ease-out慢速开始结束|ease-in-out慢速开始和结束|cubic-bezier(n,n,n,n)自定义值在0到1之间
- 延迟时间animation-delay
- 执行次数animation-iteration-count
- 反向播放animation-direction:alternate;
- 动画结束状态animation-fill-mode //forwards保留结束状态|backwards进入初始状态|both合并前两种状态
- 播放还是暂停animation-play-state //paused暂停|running播放 不可连写
布局
- 多列布局
- 分隔列数column-count
- 列规则column-rule:样式,宽度,颜色;//样式none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
- 列间隔column-gap
- 填充列column-fill //balance|auto
- 元素横跨列数column-span
- 宽度和列数连写columns
- 弹性布局
- display:flex;开启
- 作用于父容器的6大属性
- flex-direction决定元素的排列方向:column纵向 row横向 wrap-reverse反转
- flex-wrap决定元素如何换行:nowrap不换行 wrap换行
- 连写: flex-flow:row wrap
- align-items元素在交叉轴上的对齐方式 //flex-start交叉轴的起点对齐|flex-end交叉轴的终点对齐|center交叉轴的中点对齐|baseline项目的第一行文字的基线对齐|stretch(默认值)
- align-content元素在多根轴上的对齐方式 //flex-start与交叉轴的起点对齐|flex-end与交叉轴的终点对齐|center与交叉轴的中点对齐|space-between与交叉轴两端对齐,轴线之间的间隔平均分布|space-around每根轴线两侧的间隔都相等|stretch(默认值)轴线占满整个交叉轴
- justify-content元素在主轴上的对齐方式 //center居中 flex-start默认左 flex-end右对齐 space-between左右平均 space-around平均散开左右对齐
- 作用于子项目的6大属性
- flex-grow当有多余空间时,元素放大比例
- flex-shrink当空间不足时,元素的缩小比例
- flex-basis元素在主轴上占据的空间//如果主轴为水平设置这个属性相当于设置项目的宽度,原width将会失效
- 连写flex: 0 1 2px;
- order定义元素的排列顺序
- align-self定义元素自身的对齐方式 //可覆盖容器上的align-items属性,