html&css精华总结

1、标题标签
h标签

2、段落标签
p

3、换行
br

4、空格
 

5、大于号，小于号
>
<

6、双引号
"

7、版权符号
©

8、注册符
®

---------------------------------------------------------------------------------------------------
1、无序列表
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

2、无序列表

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

3、自定义列表
<dl>
    <dt>深圳</dt>
        <dd>深圳1</dd>
        <dd>深圳2</dd>
        <dd>深圳3</dd>
    <dt>广州</dt>
        <dd>广州1</dd>
        <dd>广州2</dd>
        <dd>广州3</dd>
</dl>

3、超链接标签
<a href="www.baidu.com" target="_blank" title="xxxxx">百度一下</a>
超连接到的地址就是href属性的值"www.baidu.com"
你的鼠标放在百度一下的文字上浮动框显示的内容title属性的值"xxxxx"
target的属性的值的意思就是点击百度一下会重新打开一个tab页面,如果没有设置target属性
则默认会在当前窗口打开这个页面，也就是属性的值是“self”

4、表格标签,tr表示行，td表示列
4_1、table的属性
width设置宽度，height设置高度，align设置表格左右对齐
bgcolor设置背景颜色,cellspacing设置单元格和单元格之间的间距,cellpading设置单元格边框和文字之间的距离

4_2、tr的属性
align属性：设置文字在单元格中的位置，比如靠左，靠右，中间
bgcolor属性：背景属性

4_3、td的属性
align:水平对齐
valign:垂直对齐

    <!--border="1"的作用是给表格加一个边框-->
    <table border="1" width="100px" height="100px" align="left" bgcolor="red" cellspacing="2px" cellpadding="2px">
        <caption>测试的表格</caption>
        <thead>
            <tr>
                <th>
                    表头第一列
                </th>
                <th>
                    表头第二列
                </th>
                <th>
                    表头第三列
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>表身体第一行：第一列</td>
                <td>表身体第一行：第二列</td>
                <td>表身体第一行：第三列</td>
            </tr>
            <tr>
                <td>表身体第二行：第一列</td>
                <td>表身体第二行：第二列</td>
                <td>表身体第二行：第三列</td>
            </tr>
            <tr>
                <td>表身体第三行：第一列</td>
                <td>表身体第三行：第二列</td>
                <td>表身体第三行：第三列</td>
            </tr>
        </tbody>
    </table>

表格还可以做合并单元格的处理

    <table border="1">
        <caption>测试合并单元格横向合并</caption>
        <thead>
            <tr>
                <th>
                    表头第一列
                </th>
                <th>
                    表头第二列
                </th>
                <th>
                    表头第三列
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>

                <!--colspan="3"作用是横向合并-->
                <td colspan="3">表身体第一行：第一列</td>
                <!--<td>表身体第一行：第二列</td>-->
                <!--<td>表身体第一行：第三列</td>-->
            </tr>
            <tr>
                <td>表身体第二行：第一列</td>
                <td>表身体第二行：第二列</td>
                <td>表身体第二行：第三列</td>
            </tr>
            <tr>
                <td>表身体第三行：第一列</td>
                <td>表身体第三行：第二列</td>
                <td>表身体第三行：第三列</td>
            </tr>
        </tbody>
    </table>

    <table border="1">
        <caption>测试合并单元格纵向合并</caption>
        <thead>
            <tr>
                <th>
                    表头第一列
                </th>
                <th>
                    表头第二列
                </th>
                <th>
                    表头第三列
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>

                rowspan="3">：作用是纵向合并单元格
                <td rowspan="3">表身体第一行：第一列</td>
                <td>表身体第一行：第二列</td>
                <td>表身体第一行：第三列</td>
            </tr>
            <tr>
                <!--<td>表身体第二行：第一列</td>-->
                <td>表身体第二行：第二列</td>
                <td>表身体第二行：第三列</td>
            </tr>
            <tr>
                <!--<td>表身体第三行：第一列</td>-->
                <td>表身体第三行：第二列</td>
                <td>表身体第三行：第三列</td>
            </tr>
        </tbody>
    </table>

5、表单标签
5_1:form的属性
    name:表单的名称
    action:提交数据到哪里
    method:提交的方式，有post和get两种方式
    target:_bank:和a标签的target属性一致

<form name="表单的名称" action="url" method="post/get">
    1、form标签中可以使用的标签
    1_1、input标签，文本框
    <input type="text" value="你好" placeholder="hello">

    1_2、input标签，密码框
    <input type="password">

    1_3、input标签，单选框,checked="true"的意思默认被选中,如果是单选框，则同样的name属性的标签只能选中一个，才会互斥
    <input name="sex" type="radio" checked="true">男
    <input name="sex" type="radio" checked="true">女

    1_4、input标签，复选框
    <input type="checked" name="hob" value="100" checked="true">足球
    <input type="checked" name="hob" value="100">篮球
    <input type="checked" name="hob" value="100">学习

    1_5、文件
    <input type="file"><input type="button" value="浏览">

    1_6、input标签的属性值
     <!--text：就是一个文本输入框-->

     <!--submit:可以将数据提交到后台的框-->

     <!--password:是一个密码的输入框-->

     <!--checkbox:是一个复选框，可以实现多选-->

     <!--radio:是一个单选框，需要借助一个name的属性，把只能单选的radio的标签的name的值设置为相同的-->

     <!--button:也是一个触发框，但是不给后台提交数据，主要是用和js结合使用，比如点击颜色变为红色之类的-->

     <!--file:是一个上传文件的标签-->

     <!--reset:清空输入框的输入的内容-->

    2、select标签，下拉菜单

    <!--select:实现一个下拉框的标签-->
    <!--默认只显示第一个内容，且只能单选，无默认选中项-->

    <!--提交数据的格式为k为choice,values的值为choice1或者choice2，这个就看你选择哪个了-->
    <select name="choice">
        <option value="choice1">选项1</option>
        <option value="choice2">选项2</option>
        <option value="choice3">选项3</option>
        <option value="choice4">选项4</option>
    </select>

    <!--默认只显示第2个内容，且只能单选，无默认选中项-->
    <select size="2" name="choice">
        <option value="choice1">选项1</option>
        <option value="choice2">选项2</option>
        <option value="choice3">选项3</option>
        <option value="choice4">选项4</option>
    </select>

    <!--默认只显示2个内容，且可以多选，无默认选中项-->
    选项:<select size="2" multiple="multiple">
        <option value="choice1">选项1</option>
        <option value="choice2">选项2</option>
        <option value="choice3">选项3</option>
        <option value="choice4">选项4</option>
    </select>

    <!--默认只显示第一个内容，且可以多选，有默认选中项-->
    <select size="2" multiple="multiple">
        <option selected="selected">选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option selected="selected">选项4</option>
    </select>

     <!--实现的效果就是实现一个下拉框，按照选项进行了分类-->

    <!--那下面这种select该如何提交数据呢？-->
    <div>
        <select name="bf">
            <optgroup label="第一集团军">
                <option value="bf1">北伐军1</option>
                <option value="bf2">北伐军2</option>
            </optgroup>
            <optgroup label="第二集团军">
                <option value="bf3">北伐军3</option>
                <option value="bf4">北伐军4</option>
            </optgroup>
        </select>
    </div>

    3、文本域
    <!--textarea:一个输入框-->
    <!--控制行数rows-->
    <!--控制列数cols-->
    <div>
        <textarea rows="10" cols="20">
            自我简介
        </textarea>
    </div>

    4、图像域,图像就一个标签
    <input type="image" src="图片地址">
</form>

-------------------------------------------------------------------------
css

1、引入方法
行内样式
内联样式
外部样式

2、css选择器
简单选择器
    标签名
    id
    class

组合选择器
    后代选择器：空格
    子代选择器：大于号
    并行选择器：逗号
    毗邻选择器：加号

属性选择器
假如有一个标签的属性实例如下，一个标签的test属性可以有多个值
<a test="abc1" "abc2"></a>

    [test]：选中所有的标签中有属性名称为test的标签
    [test="abc1"]：选中所有的标签中有属性名称为test的标签，且标签的值为abc1
    [test~="abc1"]：选中所有的标签中有属性名称为test的标签，且标签的test属性的值中只要有“abc1”就会被选中
    [test^="abc"]：选中所有的标签中有属性名称为test的标签，且标签的test属性的值只中以abc开头的标签
    [test$="abc"]：选中所有的标签中有属性名称为test的标签，且标签的test属性的值只中以abc结尾的标签
    [test*="abc"]：选中所有的标签中有属性名称为test的标签，且标签的test属性的值有abc这个字母就可以了

    属性的前面还可以加一个标签的值，类似下面的例子
    a[test]

3、字体属性
    font-family：设置字体的格式，比如楷书等等
    font-size：设置字体的大小
    font-style：设置字体的风格,比如斜体
    font-weight：设置字体的粗细
    color：设置字体的颜色

4、文本属性
    color：设置文本的颜色
    text-align：设置元素的水平对齐方式，比如test-align:left
    text-indent：设置首行文本的缩进方式，比如test-indent:20px
    line-height：设置文本的行高，比如line-height：25px
    test-decoration：设置文本的装饰
           test-decoration:none：默认的格式，无任何装饰
           test-decoration:underline：下划线
           test-decoration:overline：上划线
           test-decoration:line-through：中划线

5、超链接的伪样式
    a:hover{
        这里写样式，比如颜色，字体等，意思是鼠标悬浮上去上去css的样式变成什么样子
    }

    a:link{
        这里写样式，比如颜色，字体等，意思是我这个超链接放在那里最初始的状态
    }

    a:visited{
        这里写样式，比如颜色，字体等，意思是鼠标单击访问后超链接的样式
    }
    a:active{
        这里写样式，比如颜色，字体等，意思是鼠标单击未释放的超链接的样式
    }

6、列表和背景
列表样式，这里主要是说每一行前面那个小圆点的样式
list-style-type:
    none：无标记符号
    disc：实心圆，默认的样式
    circle：空心圆
    square：实心正方形
    decimal：数字

背景
    背景颜色
        background-colour

    背景图片
        background-img:url(背景图片的路径)

    背景图片重复的方式
        background-repeat:
            repeat：水平和垂直方向平铺
            no-repeat：不平铺，只显示一个
            repeat-x：水平方向平铺
            repate-y：垂直方向平铺

     背景图片的定位
        background-position:100px 300px;
        距离左边100像素，距离上边300像素

        background-position:30% 50%;
        距离左边的距离是占30%，距离上边是占50%

        background-position:[水平方向的关键字]left\right\center
        background-position:[垂直方向的关键字]top\bottom\center

        background-position:水平方向关键字 垂直方向关键字

    背景图片的尺寸
        background-size:
            auto:背景图片保持原样
            20% 60%：占整个标签水平方向的百分比和垂直方向的百分比
            cover:背景图片放大填充整个元素
            contain:让图片水平和垂直方向等比例扩大或者缩小

7、盒子模型
    7_1、边框
        边框的风格
            border-style:上边风格、右边风格、下边风格、左边风格【四个值】
            border-style:上下风格、左右风格【两个值】
            border-top-style
            border-bottom-style
            border-left-style
            border-right-style
         边框的颜色
            border-color:上边颜色、右边颜色、下边颜色、左边颜色
            border-style:上下颜色、左右颜色【两个值】
            border-top-color
            border-bottom-color
            border-left-color
            border-right-color

         边框的宽度，使用方法和color和style是一样的
            border-width

    7_2、盒子外边距,盒子距离其他盒子的距离
        margin：距离上边盒子的距离、距离右边盒子的距离、距离下边盒子的距离、距离左边盒子的距离
        margin-top:
        margin-bottom:
        margin-left:
        margin-right:
        margin:0 auto【上下的外边距为0，左右居中，就可以实现居中】

    7_3、盒子内边距，盒子中的文本距离盒子内边框的距离
        padding:
        padding-top:
        padding-right:
        padding-bottom:
        padding-left:

8、文档流
    标准文档流组成
        块级标签
        内联标签

    display属性
        block:标签会被设置为块级标签[转换块级元素和内联元素]
        inline：标签会被设置为内联标签[转换块级元素和内联元素]
        inline-block:既有内联元素的属性，又有块级元素的属性[控制块级元素放到一行]
        none:该元素不会被显示出来[控制元素的显示和隐藏]

9、浮动，会脱离正常的文档流
    浮动起来的元素会怎么浮动呢?今天终于弄明白了，比如我们一个元素float的值为left，则他向左边浮动，如果他前面的标签是块级标签，则会浮动到该元素的下边框
    就停止了，如果他前面的是内联标签，则该内联标签会被挤到该元素的右边，如果他前面的元素也是浮动的，则该元素会浮动到他前一个浮动元素的右边

    float:left
    float；right

    clear:left
    意思保证该元素的左边没有浮动元素
    clear:right
    意思保证该元素的右边没有浮动元素

总上所述，把块级标签排列的一行有2个办法，一个就是display:inline-block,一个就是float属性

10、postion,元素定位
    fixed:元素是固定的，不会移动
    static:默认的位置
    relative:相对于static的位置移动，他移动也不会脱离文档流,relative的标签所占的位置还是之前未偏移的时候所占的位置
    absolute:
        1、首先设置为absolut属性的标签会脱离正常文档流，就会浮动起来
        2、然后确定的位置是他的父元素，如果父元素的postion被设置为[relative或者absolut]的话，如果父元素的postion属性
        没有被设置为上述任意两种元素，则会继续找父元素的父元素，以此类推

11、z-index:设置绝对定位元素的重叠顺序
    1、首先他只对position设置为absolut的标签生效
    2、z-index的值大的标签比z-index的值小的标签会更显示到上面