前端学习
HTML
特殊字符
标签
文本修饰标签
引用标签
iframe标签
可以引入其他的html到当前的html中显示
主要是利用iframe的属性进行样式的调节
pre与code标签（一起使用）
针对网页的程序代码的显示效果
map与area（一起使用）
给特殊图形添加链接
embed与object
给flash和一些插件进行渲染操作的标签
audio与video
引入音频与视频的标签
ruby与rt（一起使用）
文字注解
link标签扩展
添加网址标题栏的小图标
<link rel="ico" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico"> /*千峰的小logo*/dns解析处理，加快网站访问速度
<link rel="dns-prefetch" href="...">语义化标签
header 页眉 footer 页脚 main 主要的 nav(navigation) 导航的简写 section 区段 aside 旁边 article 文章
超链接跳转方式
href 链接的地址 target 可以改变链接打开方式，默认值为：_self（当前页面打开）,可以改成blank,则跳转时打开新页面
也可以如下实现，改变所有链接跳转方式，都为新页面跳转
<head>
<base target="_blank"></base>
</head>跳转锚点
利用#，id即可实现
<body>
<a href="#html">html</a>
<a href="#css">css</a>
<a href="#js">js</a>
<h1 id="html">HTML</h1> <p>...</p>
<h1 id="css">CSS</h1> <p>...</p>
<h1 id="js">JAVASCRIPT</h1> <p>...</p>
</body>列表
无序列表
有序列表
定义列表
<body>
<dl>
<dt>标题</dt>
<dd>子标题1</dd>
<dd>子标题2</dd>
<dd>子标题3</dd>
</dl>
</body>图片
常见图片格式：
gif: 支持动画，只有全透明和不透明两种模式，只有256种颜色。
jpg: 采用有损压缩算法，体积较小，不支持透明，不支持动画。
png: 采用无损压缩算法，体积相对较小，支持背景透明，不支持动画。（比较常用）
svg: 只会记录图像的形状和颜色。(不太适合用于保存照片，适合保存图形)
psd: Photoshop原始文件，方便切图
图片处理：
src 引入图片的地址
title 鼠标划上时的提示信息 alt 若图片加载失败后的提示信息
表格
caption 表格标题
colspan:单元格所占列数（列合并）
rowspan:单元格所占行数（行合并）
表头：<th>...</th>相当于加粗且居中的<td>...</td>
列分组：colgroup
尽量不省略tbody标签
表单
提交数据：post
获取数据：get
普通表单元素：
智能表单：
type=“email/url/number” 邮箱/地址/数字
下拉菜单
select 和 option 组合使用
size 初始显示的选项
multiple 多选
checked 选中的 disabled 不可选的
<select>
<option>请选择</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>标签的嵌套
HTML注释
注释：<!-- ... -->
CSS样式
transparent 透明颜色
CSS注释
/* ...*/
style=""样式修改
<p style=" ">
</p>
CSS重置（去除默认样式）
很多元素标签都自带边距和符号或边框等默认样式，我们可以用下面的CSS给它去除掉
ul{ list-style: none; } 去列表的"点"
a { text-decoration: none; } 去除下划线
<style>
* {margin: 0px; padding: 0px; border: none;}
ul {list-style: none;}
img {dispaly: block;}
a {text-decoration: none;}
</style>图片与容器底部有一些空隙
原因：
图片是内联块元素，内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐
解决方法：
1、img{ vertical-align: baseline;} 基线对齐方式（默认值）改为img{ vertical-align: bottom;}
2、img{ display: block;} 转换成块元素即可
CSS选择器
ID选择器：
<style>
#banner {...}
</style>
<div id="banner">...</div>类别选择器：可复用，即class="nav_1 nav_2"
<style>
.nav {...}
</style>
<div class="nav">...</div>标签选择器：
<style>
body {...}
</style>
<body>...</body>通用选择器：
<style>
* {...}
</style>
选择器权重：选择器选择的范围，越小越精确，优先级就越高
eg：#box p .tt
100 1 10
伪类选择器
:before
:after
:checked 当元素被选中时
:disabled
:focus
外部样式
"..." 中填入地址路径
<link rel="stylesheet" href="...">CSS文本属性
颜色：color 字体：font-family(字体类型) 大小：font-size
行高：line-height: 2 字体大小的2倍
加粗：font-weight:bold; 倾斜：font-style: italic;
首行缩进：text-indent: 2em; 首行缩进两个字符
对齐方式：text-align:left/center/right/justify; 左对齐/中对齐/右对齐/两端对齐
文字修饰：text-decoration:underline/line-through/overline; 下划线/删除线/上划线
文字大小写：text-transform:lowercase/uppercase/capitalize; 小写/大写/首字母大写
定义字间距：letter-spacing 定义词间距：word-spacing (只针对英文)
中英文的换行问题
强制折行：word-break: break-all;(非常强烈的折行) word-wrap: break-word;(不强烈的折行)
背景属性
background-color：背景颜色
background-image：背景图片
background-repeat：背景图片的平铺方式
background-position：背景图片的位置
background-attachment：背景图随滚动条的移动方式
边框属性
border-style：边框的样式
border-width：边框的大小
border-color：边框的颜色
CSS继承（inherit）
文字的样式可以被继承
布局相关的样式不能被继承（默认不能继承，但可以通过设置相关继承属性 inherit 值）
元素浮动
浮动影响的都是后面的元素
float: left; float: right; float: none;
<style>
.div {float:left;}
</style>清楚浮动方法
当父元素，因为子元素浮动效果，无法包含子元素时，可采用以下办法解决：
固定宽高： 不推荐；不适合做自适应的效果
父元素浮动：不推荐，父容器也会影响到后面的元素
overflow: auto;(BFC规范)（overflow表示溢出）
display: inline-block;(BFC规范)
设置空标签： 不推荐，会多添加一个标签
after伪类: 推荐，是空标签的加强版，目前各大公司的做法 clear: left/right/both; ( 只会操作块标签，对内联标签不起作用 )
<style>
.clear:after{
content:'';display:block;
}
</style>
浮动元素的重叠问题
盒模型
margin:auto; （让父元素自动设置边距，左右边距相等，即达到居中效果，水平方向有效）
从外到内
边距：margin
边框：border
填充：padding
内容：文本，图像
盒子模型扩展
盒子模型塌陷：当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background-color: tomato;
}
#btn{
margin-top: 20px;
}
</style>
<div class="box">
<div id="btn">容器</div>
</div>
解决方法：
1.给父容器设置边界线 eg: border: 1px solid transparent;
2.给父元素设置内边距 eg: padding: 1px;
3.给父元素设置超出部分隐藏属性 eg: overflow: hidden;
box-sizing
box-sizing: border-box 盒子的宽高将不再受内部元素影响 box-sizing = content + padding + border（默认content-box box-sizing = content）
CSS属性简写
background
border
font
margin---简写顺序成顺时针环绕型，上右下左
padding(和margin简写方式一样)
color
元素类型
三大类型
改变元素类型
display:block 表示块元素
display:inline 表示内联(行内)元素 元素之间间隙： 代码换行产生的。 解决方法: font-size: 0;
display:inline-block 表示内联元素
注：布局一般用块标签，修饰文本用内联标签
布局中的定位
要想定位，先给这个元素一个坐标（可以给负数），再设置定位方式。
position: static; (默认)
position: absolute; (绝对定位) 使内联元素支持宽高 （让内联具备块特性；使块元素默认宽根据内容决定（让块具备内联的特性）
position: relative; (相对定位即被参考的对象) 如果没有定位偏移量，对元素本身没有任何影响；不使元素脱离文档流；不影响其他元素布局；left、top、right、bottom是相对于当前元素自身进行偏移的
position: fixed; (固定定位)
position: sticky; (粘性定位) 当这个元素到达指定位置时，保持不动
<style>
div {position:sticky; top:0px;}
</style>
设置了定位的元素，会依次从最近的外层开始，查找设置了定位方式的元素，直到找到，即以它为参考位置来定位，若一直未找到，则最终会以浏览器窗口为参考系来进行定位。
eg: C元素设定了定位，则会先查找B是否设定了定位方式，若有则以B为参考系，若没有设置，则继续向外查找A,同理；最后都没有，则以浏览器窗口为参考系。
鼠标
划入效果
<style type="text/css">
.test {...} /*原效果*/
.test:hover {...} /*鼠标划入过后的效果*/
</style>
<div class="test">...</div>手势
cursor: pointer
表示光标指到按钮上时变成小手的形状，默认为default(箭头)
也可以实现自定义手势：准备图片： .cur 、.ico
<style>
#div{...
cursor: url(...),auto;
}
</style>overflow
overflow: scroll; 添加滚动条（与内容无关）
overflow: hidden; 隐藏超出的部分
overflow: auto; 显示滚动条（内容溢出容器时才显示）
overflow-x: hidden; overflow-y: auto; 显示竖直方向的滚动条
图标的添加
CSS精灵（雪碧图）
特性
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处
可以减少图片的质量，网页的图片加载速度快；减少图片的请求的次数，加快网页的打开
<style>
#box1 {width:20px; height:20px; background:url(...) no-repeat left -596px} /*导入精灵图、不重复、调用左边或者右边的图、距离图片最上方的距离*/
</style>
<body>
<div id="box1"></div>
</body>伪类选择器 注：必须跟在一个选择器元素后面
:first-child 表示选择第一个子元素
同级兄弟选择器
:nth-child(n) 是根据自然顺序来编号的，即选择按顺序排列的第n个元素，与类型无关
:nth-of-type(n) 是根据类型来查找的
:nth-of-type(even) 表示偶数行的元素
这里选择的是li下的第1,4,6个超链接a元素
属性选择器：
根据不同后缀名来选择元素
<style>
li a[href$='.pptx'] {
background-position-y: 47px;
}
</style>表示后缀为.pptx的图片，从精灵图中（小图标都在一列中，通过改变背景的y位置来选出图标）选择出相应图标
总结：
^ 属性的开头 $ 属性的结尾
选择器
字体图标
@font-face语法
知识补充
baseline
border-radius 圆角属性
hover 当子元素被hover的时候，父元素也同样被hover了（父元素要有hover）
多行文本框可以设定：resize: 表示重设大小 none 表示文本框大小不可调整 horizontal 表示水平方向可调整 vertical 表示垂直方向可调整
vertical-align 属性调整元素的垂直对齐方式（只对inline-block有效）
outline: none 可以取消输入时输入框的外圈效果
opacity: 0(透明)~1(不透明) 透明度，且占空间，若父元素设置了，子元素也会改变 注：transparent为颜色设置，所以不占空间
rgba(0,0,0,0): 0~1 可以让指定样式透明，而不影响其他样式
z-index 设置了这个，则大者居上原则（本来是后者居上原则和定位居上原则）
深层次静态页面组件及效果
BFC
块格式上下文
阴影效果
-webkit-appearance: none 取消复选框的外观
xxx::after { content: ""; ... } 给一个元素添加伪元素
把背景颜色改为线性渐变 linear-gradient()
阴影的效果添加(text-shadow:文字阴影) box-shadow：left(改变水平方向的值) top(改变垂直方向的值) 模糊值(改变阴影模糊程度) 扩大值(阴影扩大的值) 影子颜色 阴影方向（内/外）
过渡效果
transion 过渡方式：
ease(慢快慢) linear(线性) ease-in(慢速开始) ease-out(慢速结束) ease-in-out(慢速开始慢速结束)
贝塞尔曲线：bezier
transform
transform位移效果
只能添加给块元素，复合写法执行时有顺序的，从后往前，且translate会受到rotate、scale、skew的影响
transform缩放和旋转(旋转使用左手法则)
transform-origin 缩放的位置 transform:scale() 缩放的大小 rotate 旋转(deg为旋转多少度) skew 斜切(单位也是角度，正值向左，负值向右)
帧动画
@keyframe 关键帧 animation 可以增加延迟
透视与3D
perspective
渐变效果
线性渐变 linear-gradient是值，需要添加到background-image属性上
注：渐变的0度是在页面左下边，正值会按顺时针旋转，负值按逆时针旋转
径向渐变 radial-gradient
响应式布局
媒介查询@media scrrean and() 当屏幕尺寸不小于多少时的样式
知识补充
多重阴影（多添加几个阴影效果即可）
box-shadow：left(改变水平方向的值) top(改变垂直方向的值) 模糊值(改变阴影模糊程度) 扩大值(阴影扩大的值) 影子颜色 阴影方向（内/外）
背景渐变
上下左右渐变
角度渐变
关于变形原点
transform-origin 百分比形式，像素形式也可以
eg：transform-origin: 0px 0px; transform: scale(1.4);
关于透视原点
perspective-origin 改变观察视角
移动端
概述
viewport 手机浏览器的窗口大小 content 窗口和手机设备的大小一致 网页缩放为原来的多少倍，根据js来设定
移动端网页适配
大多采用rem配置，等比例缩放
flex布局
flex弹性元素
设置方法：
display: flex;（float失效，vertical-align失效）
justify-content 主轴调整对齐方式
flex-direction 主轴变换，默认为row
align-items 交叉轴（与主轴交叉的轴，和justify-content属性一致）
flex-grow 父元素剩余空间的瓜分比例
flex-shrink 元素的多余空间削减比例
