web前段基础知识汇总：HTML+css

前端：结构+样式+行为
html:超文本标记语言，搭建网页的结构
    元素：标签及标签之间的内容这个整体
    标签的分类
        1、块级：p段落、h1~h6标题、div、br换行、hr分割线、ul无序列表、ol有序列表、li列表项、dl定义列表、dt名词、
                dd解释、form表单域、table表格、tr行
        2、行内:strong/b加粗、i/em斜体、span、a链接
        3、行内块级:img图片、input、select、textarea
    a: 1、链接到互联网上的网页：<a href="http://www.baidu.com" target="_blank" title="鼠标移入时的提示文字"></a>
        2、链接到本项目中其他的网页<a href="相对路径"></a>
        3、链接到当前页面的指定位置<a href="#id"></a>
    form:  表单域
        action:规定表单的提交位置
        method:规定表单提交方式  get、post
    表单元素：
        input: text（文本框）、password（密码框）、radio（单选框）、checkbox（复选框）、submit（提交）、button（普通按钮）、reset（重置按钮）、image（图片按钮）、file（文件域）、hidden（隐藏域）
        select:（下拉列表）
                option（下拉项）
        textarea:文本域
    设置表单默认值：
        text、password： value
        radio、checkbox:  checked="checked"
        select:  selected="selected"
        textarea: <textarea>默认值</textarea>
    禁用表单：disabled="disabled"
css：层叠样式表，规定html的样式
    1、引入方式
        1）行内式：
        <h1 style="font-size:16px;color:red;"></h1>
        2)内嵌式
        在head标签之间加入style标签
        <style>
            选择器{
                font-size:16px;//声明
                color:red;
            }
        </style>
        3）外链式
        在head标签之间加入link标签,通过href引入一个.css文件

    2、选择器
        *         通配符
        tagName  标签选择器
        .class    类选择器
        #id       ID选择器
        .box>div   子代选择器
        .box div    后代选择器
        .red,.green,.blue   并集
        div.red     交集
        a:hover    a链接的鼠标移入状态
    3、常用属性
        font-size:12px;字体大小
        font-family:"微软雅黑"; 字体
        font-style:italic;   斜体
        font-weight:bold;    加粗
        line-height:30px;   行高
        color：red/#333/rgb(255,0,0)/rgba(255,0,0,0.5)  颜色的四种表示方式
        background-color:   背景颜色
        background-image:  背景图片
        background-repeat:no-repeat/repeat-x/repeat-y; 背景重复
        background-position:top/center/bottom left/center/right;  100px（水平距离左边的位移） 200px （垂直距离上边的位移）  背景位置
        list-style:none; 列表样式
        text-decoration:none/underline/line-through; 文本样式，无， 下划线， 横穿线
        display:inline（转换成行级）/block（块级）/inline-block（行内块级）/none;（隐藏原素）  布局：
        text-align:center（居中）/left/right; （设置文本位置）
        vertical-align:middle;（设置图片和文字对齐）
        text-indent:2em;（缩进2个字符）
        overflow:hidden;（溢出隐藏）

        float:left/right/none;（浮动）
        脱离文档流，父级没有高度
        清除浮动：
        .clear:after{
            content:'';
            display:block;
            clear:both;
        }
        .clear{
            *zoom:1;
        }

        position:
        相对定位：relative
        参照物：元素本身的位置
        脱离文档流：否

        绝对定位：absolute
        参照物：距离元素本身最近的一个带有position属性的祖先元素，如果没有就是参照body定位
        脱离文档流：是

        固定定位：fixed
        参照物：浏览器的可视窗口
        脱离文档流：是

        z-index:默认是0，数值越大层级越高
        脱离文档流的元素：不区分块级和行内元素，默认从左到右从上到下排列，都可以设置宽高及盒模型属性
        长度单位：px em  cm mm %