html 和 css 基础总结笔记

html部分

1.<.img> 中的title是悬停时的提示 ,alt是加载不出来时的显示,同时给搜索引擎提供服务

2.<a> 中的title属性是鼠标悬停的提示
        arget属性是网页打开方式有_selt _blank
         设置全局打开方式 <base  target="_blank">

3.<video > <audio>
    autopaly:自动播放
    controls :显示控制器
    loop:循环播放
    <audio>
        <source src="xxx" type="mp3"></source>
        <source src="xxx" type="mvm"></source>
    </audio>

4.网页head相关设置
    设置编码:              <meta charset="utf-8">
    设置关键字:          <meta name="keywords" content="动漫,二次元">
    设置详细概要:      <meta name="description" content="我们是一个专门吸收二次元的世界">
    设置网页刷新跳转 <meta http-equiv="refresh" content="3;http://www.baidu.com">
    设置icon小图标       <link rel="icon" href="jd.icon" >

5.表格相关
    设置表格标题:       <caption>工资表</caption>
    合并边框 :            border-collapse:collapse; collapse 折叠 边框折叠
                             table,td {border:1px solid red; border-collapse;}
    跨行:rowspan   跨列 clospan

6.控件相关
    [多选]下拉框,下拉框分组
        <select multiple="multiple">
                <optgroup label="北方">
                        <option>北京<option/>
                        <option>天津<option/>
                        <option>河北<option/>
                </optgroup>
        <select>

        表单设置多文件上传:<form multiple>

        <input type=""> h5控件
            type="email" :  邮箱
            type="tel"      :  手机号码
            type="range" :  滑块
            type="color"  :  调色板

        h5中表单的属性
            自动获取属性 :  autofocus
            自动完成 :          autocomplete自动完成
                                  (输入过东西再点会有提示) off关闭  on打开
             不为空 :            required
7.H5 中的数据显示绑定(option中如果有value,那么没有value的没有提示)
    :就是输入控件只输入部分,就能提示全部
    <input type="text"  list="dataLiset">

    <datalist id="dataListe">
        <option value="bj">北京</option>
        <option>上海</option>
        <option>河南</option>
        <option>山东</option>
    </datalis>

8.H5的自定义属性
    语法    :    data-[属性名]: 属性值
    用法    :    Node.dataset[属性名]来获取属性值

    注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
    <div data-my-name="itcast"> 这样获取Node.dataset['myName']

9. fieldset
    fieldset是集合的意思,也可以理解成领域
    作用 : 把一块区域用边框包起来,同时上边框左侧中间有个标题
    <fieldset >
        <legen>注册</legen>
    </fieldset>

css 部分

1.设置透明度
    rgba(0,0,0,.5)
    opcity : 0.5  [该属性会使内容也有透明度]
    hsl :色谱图
        h    :    色调    0-360
        s    :    饱和度    0%~100%
        L    :    亮度        0%~100%
        hsl(100,23%,50%) 或者hsl(100,23%,50%,0.5)  其中的0.5是透明度

2.字体相关样式:
    斜体    : font-style : italic
    加粗    : font-weight     : bold  (也可以是0-900之间的指,400是正常,700加粗)
    去掉下划线     : text-decoration    : underline;

    font属性连写: font:700 italic 20px 宋体
                注意: font-size 必须在font-family前面
    
    字体阴影 : text-shadow : [x偏移量] [y偏移量] [模糊度] 颜色
            例     :    text-shadow : 1px 0px 15px red,-1px 0px 15px blue
    
    选中第一个首字母(文字)   ::first-letter
    选中第一行:                    ::first-line
    标签被选中时的状态        ::selection

3.css样式初始化
    body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl,li,dt,dd {
        margin    : 0;
        padding :0;
        font-size :14px;
        font-family:微软雅黑,宋体;
        color : #000;
        list-style : none;
    }

    img,input,button {
        margin:0;
        padding:0;
        border:0 none;
        outline-style:none;
    }

    a {
        text-decoration:none;
        color     : #000;    
    }

4. 选择器权重
    !important > 行内样式 > id 选择器 > 类选择器 >标签选择器

5. a标签中的伪类顺序  link - visited -hover -active
    补充 : :focus 获取焦点的伪类

6.过渡动画 transition
        transition : all 2s 1s ease;
        第一个属性是要实现动画的属性
        第二个属性是动画的持续时间
        第三个属性是动画的延迟时间
        第四个属性是动画的加速度 linear ease ease-in ease-out ease-in-out

7. 背景连写问题
    background : url() Xpx Ypx red no-repeat
    注意 : 可以连写多个背景图片,但是不能写背景色
    x 跟 y 不写是 从左上角开始 , 省略不写的就是center
    left : 从左边开始显示
    right :从右边开始显示

8. 垂直外边距塌陷
    触发条件 :
                1 :父元素与子元素都占着位置 (没有浮动,或者fixed,absolute)  position: relative 占着位置,所以也会触发垂直外边距塌陷
                2 :    子元素的margin-top 的参照是父元素的上边(就是子元素没设置margin-top时与父元素上边贴合)
    解决方法:
                1.给父元素设置边框
                2.给父元素添加overflow:hidden属性
                3.当父元素或者子元素有浮动时(不占着位置),那么也能解决

9.盒子模型
    轮廓线        outline-style :
    合并边框 :    boder-collapse : 给table设置即可  同时给table 跟td设置边框 table,td{ border:1px solid red;border-collapse:collapse;}
    边框圆角:
                 border-radius：5px;
                 边框的四个角都圆角化
                 border-radius：5px  10px;
                    上左 下右的角为5px     上右 下左 的角是10px
                 border-radius:5px 10px 20px;
                    上左角5px  上右 下左角10px   下右角20px

10. 边框图片(一般原始图片是九宫格,对应边框的各个部分,中间舍弃)
    border-img-src :url()       设置边框图片
    border-img-slice : 5px 6px 7px 8px            进行裁切图片
                                上   右    下    左   4条线切割九宫格,例如上边那条线距离上边框的距离是5px,右边那条线距离右边边框的距离是6px  )
    border-img-repeat  设置边框图片平铺  选值有:stretch |  repeat | round
                                默认是 : stretch 拉升
                                repeat : 原始比例平铺,有可能出现显示不完整
                                round : 整数的平铺,不会出现有边框图片元素显示不完整的情况

11. 浮动
    文字不受浮动的影响
    清除浮动的3种方式:
        1. 给父元素设置overflow : hidden  
        2. 在最后一个浮动的元素后面添加一个 <div class="clear"></div>
            其中  .clear {clear:both; }
        3.伪类的方式清除浮动: 只要给父元素设置clearfix的类样式即可
            .clearfix: after {
                content : "";
                display:block;
                visibility : hidden;
                height:0;
                clear:both;
            }
            .clearfix { zoom:1; }
12.设置背景图片,那么元素一定要有宽高,如果设置了宽高,一定要是块(行内块元素),如果不是一定要进行模式转换 display : block ;display:inline-blick;

13.overflow内容超出盒子大小
    overflow : hidden 超出部分隐藏
    overflow : scroll   出现滚动条
    overflow : auto   当有超出内容才出现滚动条

14.说出4种定位的类型以及他们的特点.
        静态定位 static : 默认的定位,标准流下的定位方式,不能用定位方式移动位置
        绝对定位 absolute :
            1.会进行模式转换
            2.脱标不占位置
            3.移动位置一级一级向上找有设置除了static定位的父级元素,移动位置则参照该父元素,否则移动位置参照body.
                口诀 : 子绝父相
            4.具有层叠性
        相对定位  relative:
             1.不会脱标  占位置
             2.不会进行模式转换
             3.移动参照自己原来的位置
             4.具有层叠性
        固定定位  fixed :
             1.脱标不占位置
             2.进行模式转换
             3.移动位置参照浏览器的可视区域
             4.具有层叠性

15.精灵图的使用
    精灵图 : 是很多张图片合成一张图片 , 可以避免浏览器访问时进行多次的请求,加快网站的访问速度
    使用场景 : 一般一些图标的背景图,或者小图标会使用精灵图.
    使用方法 : 使用background-img-position : 位置进行找到指定的图片
                    注意: positon: 中的值 向左还有向上移动是负值。所以一般精灵图中位置多位负值

html和css中的疑惑解决

1.select ->中option 设置 backgournd-color and width 没有效果
    解答 : 因为option不支持css样式, 所以一般实现这种效果都使用div+ul列表来实现

2. first-child ,nth-child(n),last-child .....的具体含义
    解答: 选中的标签所在父标签中, 选中第一个标签,第n个标签,最后一个标签.

3.absolut 绝对定位如何实现水平跟垂直居中.
    解答 : 水平居中 : left : 50% ; margin-left :-自己宽度的一半
             垂直居中 : top : 50% ; margin-top : -自己高度的一半
             margin : 0 auto;对于不占位置的元素不起作用

4.<link rel="stylesheet" href="book.css">其中的rel是什么的缩写?指的是什么意思?
    解答: 是relevance 的缩写, 意思是关联性.在这里指关联样式表

5.<meta http-equiv="refresh" content="3;#">中的http-equiv 是什么意思?
    解答: http-equiv 百度翻译 : 标题信息  ,信息
            http-equiv 是用来设置http的文件头信息.键值对中提供名称.
             一般是服务器在发送实际文档之前设置MIME文档头部.
            MIME : 多用途的网际邮件扩充协议;

6.<thead><tbody></tfoot> 是什么?
    解答: 这3个标签都是表格中的标签,当我们不写时,浏览器会默认帮我们加上.(很少用)
            <thead> 是定义表格的表头
            <tbody>是定义表格的主体
            <tfoot> 定义表格的页脚,会出现在表格的最下面
            一般要一起使用,使用顺序是thead,tfoot,tbody

7.点击文字时 , 控件会获取焦点的使用?labe for
    解答 : 给文字用<laber>标签包起来 , 设置for属性,值为要获取焦点控件的id值
            <laber for="username">用户名:</laber> <input type="text" id="username">

8.nth-child伪类选中奇数跟选中偶数?
    解答 : even:偶数的意思      odd :奇数的意思
             nth-child(odd)   选中奇数
             nth-child(even)  选中偶数

9.伪元素选择段落的首字符,第一行,选中的状态?
    解答: 伪元素 是用2个: 表示         ::
            ::selection 选中的状态 只能设置颜色相关的属性
            ::first-line 第一行
            ::first-letter : 首字符

10. 如何不让浏览器解析html代码,当成文字显示?
    解答: 用 <xmp> </xmp>包裹起来

11.什么是轮廓线,怎么去掉?
    解答: 轮廓线是指输入框输入时,亮起的边框.
            去掉的方式 : outline-style:none

12.表格中的边框合并怎么实现?
    解答 : collapse 折叠的意思 border-collapse 设置边框的折叠样式
             只要给table便签设置css样式 border-collapse : collapse;即可

13.表单中多文件上传怎么设置?
    解答:    <form method="post" action="" enctype="multipart/form-data">

14.边框圆角如何是让一个角或者多个角是椭圆?
    解答: border-radius 可以设置1-4个值
             其中每个值都可以有2种写法   5px/10px 5px
                    第一个值指x轴的半径,第二个值指Y轴的半径,只写一个值代表x跟y轴的值
             通过这种写法,可以设置椭圆形的边框

15.什么是bfc , 什么属性会有bfc?
    解答: bfc 是block fomatting context  块级格式上下文,它规定了内部如何布局,定位的规则.
            http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html　
            部分引用:
                BFC布局规则：
                        1.内部的Box会在垂直方向，一个接一个地放置。
                        2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
                        3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
                        4.BFC的区域不会与float box重叠。
                        5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
                        6.计算BFC的高度时，浮动元素也参与计算

                  哪些元素会生成BFC :
                        1.    根元素
                        2.    float属性不为none
                        3.    position为absolute或fixed
                        4.    display为inline-block, table-cell, table-caption, flex, inline-flex
                        5.    overflow不为visible

16.如何引用外部html文件?
    解答: iframe引入   object引入
                <iframe name="header_frame" height="" width=""  frameborder="0"></iframe>
                注意: 1. 其中如果没有设置frameborder,那么他默认引入是有边框的,
                        2. 如果没有设置高度,或者设置的高度小于引入html的高度,那么会出现滚动条
                
                <object style="border:0px" type="text/x-scriptlet"
                        data="import.htm" width=100% height=30></object>
                其中的type可以省略,style也可以不写