HTML基础

一、网页由什么组成？

    html（页面结构）CSS（结构样式）JavaScript（交互）

二、

    1、基本框架
    2、<！DOCTYPE html>
            声明文档类型
    3、meta（字符集，页面描述……）
    4、title
    5、块和行内元素的区别联系
    6、h1~h6、p、hr、br……
    7、转义字符如&nbsp；……
    8、img、a、span、input……
    9、table（cellspacing、cellpadding、border）、ol（type、start）、ul（type）、dl-dt-dd、td（cospan、rowspan）
    10、常用属性（align、width、height……）
    11、select-option，form
    ![form表单的简单实现](https://img-blog.csdn.net/20170724170704248?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjkwMjIzMjc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    input标签最好养成写type、name、value的习惯，placeholder为提醒输入提示透明文本
    name和ID的区别：随便引一个文章
    http://www.cnblogs.com/polk6/archive/2013/05/28/3101571.html
    name：分类作用（个人理解，当然作用可能更多）

三、CSS

    选择器（内联、内部、外部）
    （内部||外部）：（这里我说不清，请参考其他文档，*去除默认样式很重要）
            ****1）后代选择器：标签用空格隔开，选择末尾元素（条件是拥有所约定的前代）。如：ol li p{}//p标签被其他标签包裹是可以被选择的
            ****2）儿子选择器：标签用“>”隔开，选择末尾元素（条件是父标签必须不能越代）。如：ol>li>p{}//p标签被其他标签包裹，则父亲不是li就不会被选择
            ****3）交集选择器：标签与类名紧贴，表示同时满足两个条件（对于同类的不同标签使用）。如：p.header{}//这样就会先查找p标签，在从中选择拥有class="header"的p标签
            这样，< h1 class = "header">< /h1>或< p>< /p>就不会被选择了
             4）并集（群组）选择器：标签用“,”隔开。不做说明
            ****5）兄弟选择器：标签用"+"隔开，选择同级相邻的标签（↓）
            ****6）通用兄弟选择器：标签用"~"隔开，选择同级标签（参考与http://blog.csdn.net/haha_hello/article/details/54968313）

伪类选择器
格式：
标签:行为{}
//标签不解释（自己尝试id、class），行为有（hover、active、link、visited、……）

四、盒子模型（不作介绍，这里说一些其他注意事项）

    ****1）font、background、border、margin、padding都有一个组合的样式声明，具体的分支样式以"-"连接
    ****2）标准文档流
        ①空白折叠现象（块元素margin属性，上一个元素margin-bottom和下一个元素margin-top，两个元素的距离取较大的margin）
        （无视掉）②  行内元素高矮不一致但是在同一行显示则会底边对齐
        （无视掉）③自动换行（p标签里面写1w个字，然后就理解了）
        ④行内元素和块级元素（不做赘述）转换方式是在css中的display属性
    ****3）脱离文档流
        浮动：css样式表中的float属性
        特性
            ①元素浮动在文档流表面，但是范围受限于文档流中的标签
                如：< div>< div style="float:right;">< /div>< /div>
                这样内部div就会有浮动的效果，但是位置基于外部div
            ②非块级元素能够设置块级元素的宽、高属性
            ③浮动元素互相贴靠，哪有空间贴哪（就近原则）
            ④文字环绕效果(**p标签**的**中文**)div浮动，p不浮动
            ⑤浮动元素不设置宽高则由内容决定宽高
        清除浮动：
            ①将浮动元素装在**有高度**的**盒子**中
            ②在装浮动元素的盒子的css中添加clear属性（不作赘述）

五、CSS3一些常用写法（越往下越常用）

属性选择器
    格式：
    标签[标签属性((^/*/$……)(="内容"))]{
    }
否定选择器
    格式:
    标签:not([标签属性((^/*/$……)(="内容"))]){
    }
标签前后内容
    格式：
    标签::after(或before){
        content:"";空表示没有
        /*内容的属性列表*/
    }
伪类选择器
    格式：
        标签:nth-child(n){
        }//正向计算，在同一父类中选择有这个标签的兄弟，
        //过程无视标签内容，结果才会进行比较
        标签:nth-last-child(n){
        }//反向计算
    一般使用如下(也推荐如下使用)：
    格式:
        标签:nth-of-type(){
        }//正向计算，过程结果都会比较这个标签
文字选择效果：
    格式：
    p::selection{ 
        color:;
        background-color:;
        //其他属性不可用
    }
文本第一个字符效果
    格式:
    标签::first-letter{
    }
文本第一行字符效果
    格式:
    标签::first-line{
    }
阴影属性：
    text-shadow:偏移 偏移 粗细 颜色;
    box-shadow:偏移 偏移 粗细 颜色 作用位置(如盒内、盒外……)
块属性：
    visibility:hidden;这里单独说明这样空间依旧存在
    display:none;//这里单独说明这样不占空间
多余文字显示效果:
    text-overflow:ellipsis|clip; //多余文字省略号|不显示
    overflow:hidden; //多余文字不显示，这是为了上面的属性能执行
    white-space:nowrap; //文字不换行，为了让第二个属性能执行
    /*上面三行属性90%是缺一不可的*/
边框圆角属性：
    border-radius:参数（1~4个）;//以什么为圆心自行百度
渐变属性:
    //由一方向另一方渐变
    background: linear-gradient(to right, red 10%, green 30%);
    //从中心渐变
    background: radial-gradient(渐变方式, red 10%, green 30%);  
    针对linear,角度0deg为to top，角度90deg为to right

#~#关于after和before，特殊设置,添加一个块元素
    /*始终记住父元素（这里指当前标签）添加定位属性（三种定位选一种）*/
    标签::after/before{
        content:"";
        display:block;
        position:absolute;
        width:??;
        height:??;
        background:linear-gradient(?,?,?……)
    }

六、CSS3的（类似）动画效果

切记！！始终记得向上是0deg，顺时针是增加，一圈360deg
旋转:rotate(两个参数/单位deg);子属性自查
跳跃：
闭着眼：
扭曲:skew(两个参数)，不清楚就用子属性分开写
缩放：scale(两个参数)，子属性自查
位移：translate(两个参数)，子属性自查
warning：以上效果可能会被覆盖，但是原始位置大小依旧存在（类似于relative）