html（超文本标记语言）

 

　　html很有趣的一个东西，能给他加很多很多特效。用的时候你会爱上它，因为它非常非常好玩！

 

　　<></>尖括弧

 

　　<link>定义文档与外部资源的关系

 

　　h1-h6（标题标签）

 

　　<p></p>文字段落标签

 

　　</br>强制换行，只用于文字、文章换行(单标签)

 

　　<hr>分割线（单标签）

 

　　<imgsrc="img/wenjianming.jpg"/>图片标签（单标签）

 

　　<ahref="https：//www.baidu.com"></a>链接标签

 

　　<u></u>加下划线

 

　　<s></s>加删除线

 

　　<i></i>文字倾斜

 

　　<b></b>文字加粗

 

　　<span></span>用来组合文档中的行内元素(行标签)

 

　　<div></div>盒子（这个非常重要）

 

　　<ul>有序列表（必须有<li></li>）

 

　　<li></li>

 

　　<li></li>

 

　　<ul>

 

　　<ol>无序列表（必须有<li></li>）

 

　　<li></li>

 

　　<li></li>

 

　　</ol>

 

　　<dl>定义列表

 

　　<dt></dt>定义列表中的项目

 

　　<dd></dd>定义列表中项目的描述

 

　　<dt></dt>

 

　　<dd></dd>

 

　　</dl>

 

　　（行标签变块标签

 

　　display：block

 

　　变完之后叫行内块元素。

 

　　display：inline-block;）

 

　　行元素和块元素

 

　　1.行元素只占它本身

 

　　2.继承父级属性

 

　　3.不可以设置宽高

 

　　1.快标签独占一行

 

　　2.继承父级属性

 

　　3.可以设置宽高

 

　　表格table（定义表格）

 

　　<table>表格

 

　　<tr>表格中的行

 

　　<td>天地</td>表格行中的单元

 

　　<td>玄黄</td>

 

　　<td>混沌</td>

 

　　<tr>

 

　　</table>

 

　　水平合并：colspan="1"

 

　　垂直合并：rowspan="1"

 

　　表单from（定义供用户输入的HTML表单）

 

　　input定义输入控件

 

　　lable定义input元素的标注

 

　　<lable>姓名：</lable>

 

　　<inputtype="text">文本框

 

　　<inputtype="radio"name="sex">单选按钮

 

　　<inputtype="checkbox"name="sex">多选按钮

 

　　<inputtype="password">密码

 

　　<inputtype="button"value="点击">button按钮.value定义按钮的名称（自定义）

 

　　<inputtype="submit">提交按钮

 

　　<inputtype="reset">重置按钮

 

　　<inputtype="file">上传文件

 

　　<select>下拉框

 

　　<option>我是下拉框的选项1</option>

 

　　<option>我是下拉框的选项1</option>

 

　　</select>

 

　　<textareacols="60"rows="20"></textarea>文字区域/留言板

 

　　cols控制textarea的宽rows控制textarea的宽高

 

　　placeholder输入框提示信息

 

　　required必填项，如果不填写则无法提交

 

　　maxlength定义最大字符数

 

　　action提交跳转地址

 

　　method传输方式

 

　　disabled是否禁用

 

　　method(传输的方法)=""action=""（跳转地址）

 

　　readonly只读

 

　　name用于服务器端获取数据

 

　　selected下拉框被选中

 

　　checked="checked"默认选定（可多选）

 

　　css层叠样式表

 

　　浮动出现问题解决办法：

 

　　1.给父级设置宽高

 

　　2.clear：both清除浮动

 

　　Opacity透明度0-10

 

　　color颜色

 

　　font字体（不推荐使用）

 

　　font-color字体颜色

 

　　font-size字体大小

 

　　font-family字体类型

 

　　font-weight字体粗细

 

　　font-style：italic文字倾斜

 

　　font-style：normal字体正常

 

　　line-height行高

 

　　text-decoration:line-through加删除线

 

　　text-decoration:overline加顶线

 

　　text-decoration:underline加下划线

 

　　text-decoration:none删除链接下划线

 

　　text-transform:capitalize首字大写

 

　　text-transform:uppercase英文大写

 

　　text-transform:lowercase英文小写

 

　　text-align:right文字右对齐

 

　　text-align:left文字左对齐

 

　　text-align:center文字居中对齐

 

　　text-align:justify文字分散对齐

 

　　vertical-align属性

 

　　vertical-align:top垂直向上对齐

 

　　vertical-align:bottom垂直向下对齐

 

　　vertical-align:middle垂直居中对齐

 

　　vertical-align:text-top文字垂直向上对齐

 

　　vertical-align:text-bottom文字垂直向下对齐

 

　　padding内边距

 

　　margin外边距

 

　　margin：0auto盒子居中

 

　　list-style：none去ul中li的黑点

 

　　url统一资源定位符

 

　　text-indent：“10px”文字段落首行缩进

 

　　word-spacing："10px"字母间距

 

　　letter-spacing："10px"汉字和字母的间距

 

　　背景图片

 

　　background-color：red背景颜色

 

　　background:transparent透视背景

 

　　background-image:url(/image/bg.gif)背景图片

 

　　background-repeat:repeat重复排列-网页默认

 

　　background-repeat:no-repeat不重复排列

 

　　background-repeat:repeat-x在x轴重复排列

 

　　background-repeat:repeat-y在y轴重复排列

 

　　background-position背景定位

 

　　background-position:90px(%)90px(%)背景图片x与y轴的位置

 

　　background-position:top向上对齐

 

　　background-position:buttom向下对齐

 

　　background-position:left向左对齐

 

　　background-position:right向右对齐

 

　　background-position:center居中对齐

 

　　while-space：nowrap强制不换行

 

　　overflow：hidden隐藏多余（恢复隐藏多余visible）

 

　　text-overflow：ellipsis变...

 

　　css引入方式和优先级

 

　　外部链接<linehref="css/"rel="stylesheet">

 

　　行内样式<divstyle=""></div>

 

　　嵌入样式<style></style>

 

　　引入样式@impot<style>内@importurl（global.css）

 

　　优先级：行内样式>嵌入样式>外部链接>引入样式（由大到小）

 

　　【帅】css选择器

 

　　1：标签选择器div{}p{}ul{}

 

　　2：类名选择器（用class命名，在样式）.box{}.input_l{}

 

　　3：id选择器(标签后面id=“id名称”调用#id名称唯一的，不能重复用一个，id可以是多个，id优先级比类名高。)#

 

　　4：通用选择器（*{}控制网页全局样式,margin：0;padding:0；）

 

　　5：伪类选择（：hover鼠标经过超链接样式.：active鼠标点击时的样式）.box:hover{}a:hover{}#id:hover{}

 

　　6:子代选择器两代选择器父和子.boxp{}#idspan{}

 

　　7：后代选择器三代及以上.boxpspan{}

 

　　8：群组选择器多个标签到一起设置

 

　　9：交叉选择器两个不同选择结合使用

 

　　单冒号(:)用于css3伪类，双冒号（：：）用于css3伪元素。

 

　　伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。

 

　　但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，

 

　　比如：first-line、：first-letter、：before、：after等。

 

　　对于css2之前已有的伪元素，比如：before，单冒号和双冒号的写法：：before作用是一样的。

 

　　提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。

 

　　scc3

 

　　border：10pxsolidred边框

 

　　border-radius：10px10px10px10px边框圆角

 

　　background：linear-gradient（red，yellow）默认从上往下

 

　　background：linear-gradient（red50%，yellow50%）颜色占比

 

　　background：linear-gradient（torightred，yellow）左右渐变

 

　　background：radial-gradient（red，yellow）径向渐变

 

　　text-shadow文字阴影

 

　　box-shadow盒子阴影

 

　　box-shadow：apxbpxcpxdpxyellow

 

　　apx指的水平靠左或靠右阴影

 

　　bpx指控制垂直方向，正数向上，负数向下

 

　　cpx模糊程度，越大越模糊

 

　　dpx阴影范围

 

　　yellow黄色（自定义颜色）

 

　　定位

 

　　1、静态定位（默认）：position：static没有定位的情况下

 

　　2、相对定位：position：relative相对定位占自己原本的位置移动元素会导致覆盖其他元素

 

　　3、绝对定位：position：absolute不占原来空间，就像原来元素不存在一样，后面不定位的任何元

 

　　素都会被挡住，无论行标签还是块标签绝对定位之后都会变成块级框

 

　　4、固定定位：position：fixed参照边界是浏览器的边界，通常放在左侧或右侧，

 

　　无论父级是否有定位都不影响，不占空间默认悬浮上面

 

　　z-index：控制空间位置/前后位置值从-9999到99990是默认-1是默认下一层，

 

　　1是默认的上一层2在1上一层

 

　　文档流：html的结构/层级关系

 

　　定位：position

 

　　如果已经绝对定位的元素无定位的父级（直接在body里，没有父级）参考的边界是浏览器的边界ml/body，

 

　　如果有定位的父级，参考边界父级

 

　　z-index控制定位的空间位置

 

　　相对和绝对区别：

 

　　相对

 

　　1、相对定位无父级会受到周围元素的影响，比较适合作为父级元素，他定位参照周围元素，

 

　　2、如果无父级无周围元素，相对定位参照body

 

　　3、相对定位，元素移动后还占原本位置

 

　　绝对

 

　　1、绝对定位，不受周围元素影响，

 

　　2、如果无父级无周围元素，绝对定位参照浏览器窗口

 

　　3、绝对定位，元素移动后不占原本位置

 

　　2d、3d转换

 

　　transition：5s过渡，时间越长变换越慢。

 

　　2d转换样式

 

　　transform

 

　　1.位移translate（x水平方向，y垂直方向）

 

　　transform:translate(200px,50px)X，Y同时位移

 

　　transform:translateX(200px)X，Y必须大写

 

　　transform:translateY(50px)

 

　　2.旋转rotate

 

　　rotate（3600deg）-deg度数单位-

 

　　transform：rotate（3600deg）

 

　　transform:translate(200px,100px)rotate(96000deg)位移和旋转效果。

 

　　3.缩放scale

 

　　scale（2,2）倍数

 

　　scale（1,1）不缩放，正常效果。

 

　　4.倾斜skew

 

　　skewX(30deg)

 

　　skewY(60deg)

 

　　5.matrix矩阵。

 

　　通过矩阵算法实现以上4个效果。

 

　　3d转换transform

 

　　透视perspective/破四百可体悟/:500px

 

　　透视距离值越大离得越远，幅度越小。值越小离得越近，幅度越大。一般设置300-500左右合适。

 

　　perspective-origin:leftrighttopbottom；透视基点

 

　　origin基点

 

　　opacity透明度0-1

 

　　transform-style:preserve-3d控制子级在3d空间内显示

 

　　动画：animation

 

　　动画的组成部分：

 

　　关键帧@keyframes{

 

　　form{}

 

　　to{}

 

　　}

 

　　@keyframes{

 

　　0%{}

 

　　50%{}

 

　　100%{}

 

　　}

 

　　动画属性properties/铺肉破踢斯/-决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。

 

　　动画时间函数animation-timing-function

 

　　(linear匀速、ease快、ease-in进入快、ease-out出去快、ease-in-out进入出去快中间匀速。

 

　　动画延迟animation-delay:5s（延迟几秒后进行）

 

　　动画方向animation-direction

 

　　正序normal

 

　　倒序reverse

 

　　交替播放alternate

 

　　反向交替alternate-reverse

 

　　迭代次数animation-iteration-count

 

　　动画填充模式animation-fill-mode

 

　　animation-fill-mode：backwards动画结束后保持第一帧的状态。

 

　　animation-fill-mode：forwards动画结束后保持最后帧的状态。

 

　　animation-fill-mode：both动画将执行backwards和forwards的状态。

 

　　动画播放状态

 

　　animation-play-state：paused；动画暂停播放paused

 

　　animation-play-state：running；动画正常播放running

 

　　animation：hezi（自定义动画名）5s（秒数）infinite（循环播放，linear只播放一次）

 

　　一.2d和3d有啥区别

 

　　答：2d是平面，3d是立体。

 

　　2d两个轴x和y轴，transform：translate（x，y）rotate（x，y）scale（x，y）skew（x，y）

 

　　3d三个轴xyz，transform：translate3d（x，y，z）rotate3d（x，y，z）scale3d（x，y，z）skew3d（x，y，z）

 

　　2d旋转基点transform-origin

 

　　3d必须有父级父级上加transform-style：preserve-3d让子元素在3d空间上显示

 

　　还加透视perspective：500px

 

　　透视基点perspective-origin

 

　　3d默认旋转基点是左上角

 

　　二.动画和过度有啥区别

 

　　答：1.过度是一段时间动作，需要鼠标触发

 

　　动画是一直循环，不需要鼠标，刷新页面就执行

 

　　2.过渡是一个动作到另一个动作变化的过程

 

　　动画是可以持续很长时间由很多个关键帧组成，动画可以把每一段过渡组成到一起，动画不需要过渡

 

　　三.2d转换有几个属性分别是

 

　　四.透视是啥透视基点和旋转基点有什么区别。

 

　　答：透视效果是近大远小

 

　　透视基点是定到哪个点就以这个为准出透视效果，透视效果决定因素不光是透视基点还有透视距离

 

　　旋转基点：旋转时候以哪个点旋转就是旋转基点。

 

　　相似之处：都是参照物，都可以设置left，right，top，bottom。像素，百分比

 

　　【弹性盒子】

 

　　弹性盒子组成

 

　　display：flex或display：inline-flex

 

　　弹性盒子是弹性容器（container）和弹性元素（flexitme）组成

 

　　弹性盒子内包括一个或多个子元素

 

　　弹性盒子换行//

 

　　flex-wrap：nowrap默认不换行

 

　　flex-wrap：wrap/外泼/换行

 

　　flex-wrap：reverse//反方向

 

　　弹性盒子方向flex-direction

 

　　flex-direction：column/考了木/竖着

 

　　row横着

 

　　column-reverse反着竖着

 

　　row-reverse横着反向

 

　　同时决定方向和换行flex-flow

 

　　flex-flow可以同时设置flex-direction和flex-wrap

 

　　flex-flow：rownowrap

 

　　内容对齐-水平方向

 

　　justify-content：flex-start；靠左

 

　　justify-content：flex-end；靠右

 

　　justify-content：center；居中

 

　　justify-content：space-between；两端对齐中间距离均等。

 

　　justify-content：space-around；两端均等，中间平分

 

　　内容设置垂直方向的距离align-content

 

　　align-content：flex-start；垂直靠上

 

　　align-content：flex-end；垂直靠下

 

　　align-content:center；居中

 

　　align-content:space-between；上下靠边中间距离均等

 

　　align-content:space-around；上下留出相等距离，中间距离平均分

 

　　设置弹性盒内每一项弹性子元素的位置<垂直方向>弹性项的位置align-items

 

　　align-items：flex-start靠上

 

　　align-items：center居中

 

　　align-items：flex-end靠下

 

　　align-items：baseline以基线，与flex-strat很像

 

　　align-items：stretch拉伸，每一项item的高度拉伸至父级高度，如果不固定可以通过

 

　　min-height/ma

 

　　设置弹性元素自身在纵轴（垂直）的位置

 

　　align-self：

 

　　align-self：flex-start靠上

 

　　align-self：center居中

 

　　align-self：flex-end靠下

 

　　align-self：baseline以基线，与flex-strat很像

 

　　align-self：stretch/死拽吃/拉伸高度至父级高度两行就是父级高度一半，三行就是三分之一

 

　　（stretch前提是他不能有具体的高度）

 

　　flex在每一项上设置flex：1/2/3/4;order排列顺序

 

　　flex：abc；三个值order：1；order：2；order：3；

 

　　a占比第二个到第一个用order：-1；

 

　　b缩放比例

 

　　c基准位置

 

　　flex属性用于指定弹性子元素如何分配空间

 

　　设置了弹性布局之后，子元素的css中的float、clear、vertical-align都无效