Html、Css基础语法使用

1、行标签：span 、i 、b、strong、em、font
2、块标签：div、p、h1~h6、有序列表、无序列表、定义列表、form
3、行内块：input、button、select、img
4、display属性拓展 -- 元素之间的转换
     1、display:block
     2、display:inline-blcok
     3、display:inline
   
5、元素转换为有或者无
     1、display:none
     2、display:block
6、特殊标签：br、hr、 、@gt;、@lt；
7、添加css的3种方式
     style行内样式
     link外部引入
     内联样式
8、css基础选择器有哪些?
     id选择器、class类名选择器、标签选择器、通配选择器*
9、css高级选择器有哪些
     父子选择器 
     后代选择器
    相邻选择器
    并集选择器
    交集选择器
    伪类选择器
    属性选择器
10、a标签的伪类选择器4个
    a:hover
    a:link
    a:active
    a:visited
11、文字样式font系列
    font-family    设置字体类型
    font-size        设置字体大小，格式为数字+px
    font-style        设置字体风格，该属性设置使用斜体、倾斜或正常字体。normal（默认值，显示标准字体样式）、italic（斜体）和oblique
    font-weight    设置字体的粗细，bold（加粗）、normal（默认，不加粗）
    
12、文本样式text系列
    color        设置文本颜色，值可以是颜色的英文单词，也可是十六进制的颜色值。    color:#00C;
    text-align        设置元素水平对齐方式，left（默认）、right（右对齐）、center（居中对齐）    text-align:right;
    text-indent    设置首行文本的缩进，数字+px    text-indent:20px;
    line-height    设置文本的行高，数字+px    line-height:25px;
    text-decoration    设置文本的装饰，值none（默认标准文本）、underline（文本下的一条线）、overline（文本上的一条线）、line-through说明（从文本中间穿过的一条线）    text-    decoration:underline;
    
13、背景属性--添加背景的三种颜色值
    rgb(0,0,0)、rgba(0,0,0,1)
    #十六进制颜色值
    英文颜色单词
14、背景图片
    background:url('图片地址') 与左边框的距离  与上边框的距离 no-wrap(不平铺)；
    background-size:width height/contain/cover
15、伪类选择器和伪元素选择器之间的区别
    :：是伪元素选择器，：是伪类选择器
16、伪类选择器有哪些？
    ：before/:after/:hover/:nth-child(n)/:first-child/:last-child/:first-type-of/:last-type-of
16、定义列表、有序列表、无序列表
    dl/dd/dt/ol/ul/li
17、清空列表默认样式的方法
    ul,ol,li{
        list-style:none;
        margin:0;
        padding:0;
    }
18、list-style的属性值有哪些？
    list-style:none; - 无
        disc -实心圆
        circle-空心圆
        square - 实心方块
        decimal - 序号
19、form表单标签有哪些？
    input   select-option   texarea   button
20、input输入框的type类型有哪些？
    text/number/password/file.
    type="email"    限制用户输入的内容必须是Email类型
    type="url"        限制用户输入必须为URL类型
    type="date"    限制用户输入必须为日期类型
    type="time"    限制用户输入必须为时间类型
    type="month"    限制用户输入必须是月份类型
    type="week"    限制用户输入必须为周类型
    type="number"    限制用户必须输入数字类型 其配合的属性有max(最大值)，min（最小值）
    type="tel"        限制用户必须输入电话号码类型
    type="search"    搜索框
    type="color"    生成一个颜色输入框
    type="range "    生成一个滚动条的输入框

21、form表单元素有哪些属性？
    name="user"         输入框命名
    value="默认值"        输入框设置默认值
    required="required"        必填项
    placeholder="文本提示语"    输入框文本提示语
    autofocus= "autofocus"    自动获取焦点
    hidden            设置隐藏输入框
22、盒模型的组成
    盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
23、边框样式
    border:边框宽度 边框样式 边框颜色
24、ie盒模型和怪异盒模型的区别
               1、box-sizing 属性值不同
                                  2、width的属性值相当于什么
                                  3、视图宽高相当于什么 
                                  在标准盒模型的情况下，盒子总宽高的值为“width/height（内容宽度）+padding（内边距）+border（边框）+margin（外边距）”，其中内容宽高为content部分的width/height。
在怪异盒模型的情况下，盒子的总宽高的值为“width/height（内容宽度）+margin（外边距）”，其中内容宽高为content部分的width/height+padding（内边距）+border（边框）。

25、设置块元素水平居中的方式
    margin:0 auto;
26、改变元素位置的传统方式有哪些？
    内外边距、diplay转换元素特点、 浮动、定位
27、浮动的属性值
    left/right
28、清除浮动的方式
    /* 清除浮动方式一：在浮动元素的父级添加overflow: hidden; */
    /* 清除浮动方式二：在浮动元素后添加空的div元素 */
            clear{
                    clear: both;
            }
     /* 清除浮动方式三：在浮动元素父级添加clearfix类名 */
            .clearfix::after{
                    display: block;
                    content: '';
                    clear: both;
            }
29、定位的属性及属性值
    静态定位：static --- 默认属性    
            相对定位：relative    
            绝对定位：absolute    
            固定定位：fixed    
30、定位元素的层级显示
    z-index:0(默认值)；只作用于定位元素。值越大层级越高
31、相对定位的元素相对于谁发生位移
     /* 相对定位：相对于自身原有的位置发生偏移 */
32、绝对定位元素相对于谁发生位移
     /* 绝对定位：相对于父级有定位属性的元素发生位移（除static之外），如果父级没有定位属性，就相对于浏览器边框body发生位移 */
33、固定定位元素相对于谁发生位移
    /* 固定定位：相对于浏览器发生位移 */
34、常用的浏览器种类：4个
    谷歌（Google）、火狐（firfox）、safir(苹果)、IE
35、html5的容器标签有哪些
    header：头部标签
    nav：导航标签
    article：内容标签
    section：定义文档某个区域（可以通俗的理解为大号的div）
    aside：侧边栏标签
    footer：底部版权标签

36、过渡的单词及前四个值
    transition：需要过渡的属性 过渡持续的时间 运动曲线 等待过渡的时间
37、平移、旋转、缩放
    transform:translate(300px) scale(2) rotate(90deg)
38、img属性选择器的写法
    img[src]{} / img[title] /img[alt]
39、动画的属性及属性值
    /* 动画：动画名称 动画执行时长 动画执行执行状态  延迟执行 重复执行动画的次数 动画执行方向 结束动画的状态*/
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */

40、将元素设置为弹性盒子的语法
    display:flex;
41、设置弹性盒子子元素的水平对齐方式
    justify-content:space-around;
                space-between;
                space-evenly
                center
                flex-start
                flex-end
42、设置弹性盒子子元素垂直方向对齐方式
    align-item:center
        space-around;
        space-between;
        space-evenly
        flex-start
        flex-end
    align-content:center
        space-around;
        space-between;
        space-evenly
        flex-start
        flex-end
43、设置弹性盒子子元素换行
    flex-wrap:wrap;
    flex-wrap:no-wrap;
44、设置元素横向排列和纵向排列
    flex-direction:column; --- 纵向排列
        row;---默认值，横向排列
        row-reverse --- 反向横向排列
45、让元素box水平垂直居中的方式
    .box{
          position：absolute;
          top:0;
          left:0;
                      right:0;
                      buttom:0;
                      margin: auto;
    
    }
    .boxFather{
          display:flex;
          justify-content:center;
          align-items:center;
    }
46、!DOCTYPE的作用
    <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。