HTMl总知识点复习；

1.HTMl基础
1.页中的基本标签:

  --标题标签：<h1>~<h6>
    --段落标签：<p></p>
    --换行标签：<br/>
    --水平线标签：<hr/>
    --网页标题标签：<title></title>
    --字体变粗：<strong>
    --字体倾斜：<em>
    --注释<!--注释内容 -->
    --特殊符号：空格：&nbsp;
               大于号：&gt;
               小于号：&lt;
               引号：&quot;
               版权符号：&copy;
    ----图像标签：
        语法：<img src="路径"alt="图形的替代文字"title="鼠标悬浮提示文字"width:"图片宽度"height:"图片高度"/>

----超链接的基本用法:
    语法：<a href="链接地址"target="目标窗口位置">链接文本或图像</a>
                            --target：指定链接在哪个窗口打开，常用的取值有_self(自身窗口)_blank(新建窗口)
--其他标签：<span>标签：装载文字，组合行内元素
            <font>标签:设置字体大小颜色；

2.行内元素和块状元素：
块元素：无论内容多少，独占一行；
常见：span，
行内元素：内容撑开宽度，左右都是行内的可以排在一行；
常见：

<div>
        --display:inline;转换为行内元素
        --display:block;转换为块状元素
        --display:inline-block;转换为行内块状元素

2.列表，表格及媒体元素
1.无序列表：

   <ul>
                 <li></li>
                 </ul>

2.有序列表：

<ol>
            <li></li>
           </ol>

3.定义列表：

<dl>
            <dt>标题一</dt>
            <dd>第一项</dd>
           </dl>

4.表格：
表格颜色：bgcolor;

<table>      
        <tr>
          <td></td>
        </tr>
       </table>

5.清除li前面的点：

li{
    list-style:none;
 }

3.表单和框架
1.表单：from;
2.常用表单控件;

--<input type="test"/>:单行文本框；
--<input type="submit"/>:提交按钮；
--<input type="checkbox"/>:复选框；
--<input type="radio"/>:单选框；
--<select></select>:下拉列表；
--<textarea></textarea>:多行文本输入框；
--<input type="password"/>:密码框；
--<input type="reset"/>:重置按钮；
--<input type="button"/>:普通按钮；
--<input type="hidden"/>:隐藏域；
--<input type="file"/>:文件域；
--<input type="email"/>:Email输入框；
--<input type="url"/>:url输入框；
--<input type="number"/>:数字输入框；
--<input type="range"/>:范围选取；
--<input type="date"/>:日期检出器；

3.新增input属性
–autocomplete属性：帮助用户在input类型的输入框中实现自动完成内容输入；（输入用户名或者信息的时候的提示）；
–autofocus属性：页面加载时，某表单控件自动获得焦点；
–pattern属性：验证内容格式是否正确，如邮箱有无@
–placeholder属性:在输入框中增加提示语句；
–required属性:规定输入框填写的内容不能为空，否则不允许用户提交表单

4.框架：
语法:
4.Css基础
1.选择器：
类选择器(.);标签选择器(标签);Id选择器(#);（优先级从左到右）
优先级为：Id选择器>类选择器>标签选择器>

2.css属性：
–背景颜色：background-color；
–字体大小：font-size;
–行高：Line-height；
–边框：border；
–字下面加线：text-decoration; none/默认、underline/下划线、overline/上划线
–字体颜色：color

3.样式优先级：行内样式>内部样式>外部样式

4.根据选择器不同，样式表分为：类样式，标签样式，id样式；

5.css伪样式：常用于超链接
A:link{color:black} : 未被访问的链接样式，黑色；
A:visited{color:yellow} : 已被访问的链接样式，黄色；
A:hover{color:red} : 当鼠标停留在链接上的样式，红色；
A:active{color:blue} : 当鼠标点击(激活)链接是的样式，蓝色；

5.Css高级选择器
1.层次选择器分为：
后代选择器，子代选择器，相邻兄弟选择器，通用兄弟选择器；
body p{
background: red;/后代选择器，表示body里所有p元素/
}（关联选择器）标签关系必须是嵌套关系

body>p{
background: pink;/子选择器，表示选择body的子元素p/
}

.active+p{
background: green;/相邻兄弟选择器/
}

.active~p{
background: yellow;/通用兄弟选择器，表示active后面所有兄弟元素/
}

2.属性选择器分为：属性选择器可以根据元素的属性及属性值来选择元素。

3.伪类选择器：CSS中已经定义好的选择器,不能随便取名
:link 未被访问过的链接
:visited 已经被访问过的链接
:hover 鼠标悬停在元素的上方（现在hover可以适用于任何标签）
:active 被激活的元素，例：点击中的链接
注意：如果全部书写，顺序不能变
:focus 获取键盘输入焦点的时候（通常用于表单元素）

         6.文字，字体，颜色

1.字体样式：
–字体类型：font-family；
–字体大小：font-size
–字体粗细：font-weight；
–字体颜色：color;

2.文本排版：
–水平对齐:text-align:left(排列左边)right(排列右边)center(排列中间)justify(实现两端对齐效果)

3.文本修饰：
–线:text-decoration：none(默认值，无变化)ubderline(文本下划线)overline(文本上划线)line-throgh(文本删除线)

4.背景属性：background-color(背景颜色);
background-image(背景图像);
background-size(背景尺寸);

7.盒子模型
边框(border)

1. 边框颜色：border-color;（4个值：上，右，下，左）（3个值：上，左右，下）（2个值：上下，左右）；
2. 边框的粗细：border-width;(同上)；
3. 边框样式：border-style：none没有。Hidden隐藏。Botted点线。Dashed虚线。Solid实线。Double双线。（同上）
4. 简写：border：像素 样式 颜色；border:1px solid red;
   圆角边框（bobrder-radius:）
5. border-radius:10px 10px 10px 10px;(顺时针)(同上)
6. 画圆：border-radius:50%（园角的半径等于元素宽度的一半，或者直接写出50%）
7. 画半圆： （w:100px h:100px）
   a) 右半圆上半圆：w:100px h:20px; border-radius:50px 50px 0 0;
   b) 下半圆：w:100px h:20px; border-radius:0 0 50px 50px;8+0.
   c) 左半圆：w:50px h:100px; border-radius:50px 0 0 50px;
   d) ：w:50px h:100px; border-radius:0px 50px 50px 0px;
8. 扇形（四分之一圆）：按上‘面理解；

外边距(margin)

1. 4方向边距：margin：同上；
2. 网页居 中对齐：margin：0 auto；（要是块元素或者有固定宽度）

内边距（padding）

1. 4方向边距：padding：同上；

除去内外边距

1. *{ margin：0； padding ：0；}

                     定型宽高（box-sizing）
   

2. box-sizing : content-box；盒子总尺度（全加）（默认值可一般不写）

3. box-sizing：border-box; 规定的尺度（缩入）
   盒子阴影（box-shadow）

4. box-shadow: inset; x-offset; y-offset; blur-radius; color;（多层阴影写完前面用逗号隔开）
   a) inset:(加这个表示内阴影不加则为外部；)
   b) x-offset: (X轴偏离量)
   c) y-offset:( Y轴偏离量)
   d) blur-radius: (阴影的模糊半径；)
   e) color: (颜色)

    	        8.浮动
   

标准文档流：由块级元素block（<h1>……<h6>,<p>,<div>,列表）和 内联元素liline(<span>,<a>,<img/>,<strong>...)组成；

1. 块级元素和内联元素的转换：display:
   A) block;(转换块级元素)
   B) inline；（转换内联元素）
   C) inline;(同时满足)
   D) none;(隐藏元素)

2. 浮动：float：
   A） left;(向左浮动)
   B） right（向右浮动）
   C） none(默认值，不浮动)

3. 解决父级边框塌陷：
   1）清除浮动：clear:
   A) left;(清楚左侧浮动)
   B) right（清楚右侧浮动）
   C) both(左右不允许浮动)
   D) none(默认值，允许浮动)

     overflow:
   

A) visible;(默认值，没变化)
B) hidden；(裁剪，隐藏多余部分，不可见)
C) scroll；（隐藏多余部分但会显示滚动条）
D) auto;(和scroll效果差不多)

2）方法
浮动元素后面加空div;（里面清除左右浮动）
设置父元素高度
父级添加overflow；(有下拉列表的场景不能使用)
Overflow:hidden
父级添加伪类after（和第一种类似但不会浪费元素）
:after{
content:"";
display:block;
clear:both
}

4.浮动的特点：
–1.块在一排显示；
–2.内联支持宽高；
–3.默认内容撑开宽度；
–4.脱离文档流；
–5.提升层级半层；

5.inline-block和浮动的区别
----1.inline-block和浮动的优点：
–display:inline-block可以让元素排在一行，并且支持宽度和高度，添加该属性的元素在标准文档流中，不需要清除浮动；
float：可以让元素排在一行并且支持宽度和高度，可以决定排列方向；
----1.inline-block和浮动的缺点：
–display:inline-block位置方向不可控制，会解析空格。
float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它父级上添加清除浮动的样式；

						9.元素定位

1.position ：absolute(绝对)relative(相对)，static（静态),或者fixed（固定）
1、position：static；静态定位
静态布局，position的默认属性值，不脱离文档流

2、position：absolute；绝对定位
1）脱离文档流
2）不保留定位前的空间
3）若父级元素有定位属性，则根据父级元素左上角定位；如果父级元素没有定位，则根据距离它最近的开启了定位的元素进行定位；如果都没有开启定位，则根据浏览器的左上角进行定位。

3、position：relative； 相对定位
1）不脱离文档流
2）保留定位前的空间
3）相对元素本身的位置进行定位（若相对本身向上或向左的话要设置top，left为负值）
4、position：fixed；固定定位
和绝对定位基本一致；
1）脱离文档流
2）不会根据滚动条的滚动而滚动。
z-index 判定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素

					10.网页布局

弹性布局分为:浮动+百分比布局；
flex弹性布局；
flex弹性盒模型：
常见属性 1.flex:伸缩性；
2.flex-direction:伸缩性方向；正序还是倒叙
flex-direction:
row :默认值，从左到右排列
row-reverse ：从右到左排列
column ：从上到下排列
column-reverse ：从下到上排列
3.flex-wrap：伸缩换行；一行显示还是换行显示；
nowrap :默认值，伸缩容器单行显示，伸缩项目不会换行；
wrap ：伸缩容器多行显示，伸缩项目会换行；
wrap-reverse：伸缩容器多行显示，伸缩项目会换行，且颠覆倒行顺序
4.justify-content：主轴对其；居左居右居中对齐
justify-content：
flex-start:向一行的起始位置靠齐；
flex-end:结束位置靠齐
center:中间位置靠齐
space-between:平均分布在行内，
space-around:

          5.align-items：侧轴对齐；居上还是居下对齐
                 align-items：
                                flex-start:
                                flex-end:
                                center:
                                stretch:
                                baseline:
          游览器兼容问题-ms-flex:1

flex布局功能：
1.在屏幕和游览器窗口大小发生改变时，可以灵活的调整布局；
2.控制元素在页面的布局方向；
3.控制不同于DOM所指定排列方式对屏幕上的元素重新排列
flex布局的优势:
1.可以让盒子开面元素排在一行；
2.盒子里面的元素是高度相同；

11.利用Css3制作网页布局
完成动作的过程；
过度：transition;
监控元素的属性变化

它是复合型的属性，属性值的位置顺序可以调换的，但是时间不能，如果有两个时间，第一个时间是运动时间，第二个延迟时间(延迟时间第一次有效)

监控属性变化的，默认值是all

transition;不能监控所有属性值的变化，比如block none

2D动画：transform:
1.rotate(旋转函数)
rotate(度数 deg) 正数是顺时针 负数是逆时针
transforn-origin
中心点 也可以设置其他的值
transform-origin 属性可以设置变换的起点。默认情况下，使用元素的中心作为起点。
具体设置方案参考如下表：
left
center
right 指定 x 轴的位置
top
center
bottom 指定 y 轴的位置
//默认值，以中心点变形
transform-origin: center center;
transform-origin: 50% 50%;
//以左上角为基准点变形
transform-origin: left top;
transform-origin: 0px 0px;

                2.scale()：缩放函数
                    scaleX-- 在水平方向进行扩大或者缩小
                    ScaleY--在垂直方向进行扩大或者缩小

                3.transla()：位移函数
                     translateX--在水平方向上移动
                     translateY---在垂直方向上进行移动

3D动画：1 建立3D空间 transform-style（preserve-3d）
Perspective 景深（一般为800px）

    2 使用3D属性
     rotateX()
     rotateY()
     rotateZ()
     translateZ()
     scaleZ()

动画
animation： 复合型的属性

1 设置一个动画
@keyframes move{

20%{}
30%{}
}
}

2 在需要运动的元素上调用动画 animation：move 2s 1s 2|infinite（无限次） alternate（反复）