HTML+CSS笔记4

html标签

• 列表

        有序列表（块级）
        <ol>
        <li>政治新闻</li>
        <li>娱乐新闻</li>
        </ol>

        无序列表（块级）
        <ul>
        <li><a href="#">服装<a></li>
        <li>文具</li>
        </ul>

• 列表的css 

        1.list-style-type 设置列表图标样式
                disc实心圆 circle空心圆 square方块 none无  decimal数字
                lower-roman小写罗马数字 upper-roman大写罗马数字 lower-alpha小写字母                 upper-alpha大写字母 
        2.list-style-image:url()设置列表图片
        3.list-style-position列表的排列方式  outside外对齐 inside内对齐

• 表格

        <table>表格（块级）     

        <tr>行（块级）        <td>单元格（行级）        <th>标题单元格（行级）
        <table>
        <tr><td></td><td></td></tr>
        <tr><td></td><td></td></tr>
        </table>
        属性：
        1.cellspacing 外补白        2.cellpadding 内补白
        3.rowspan 合并行        4.colspan 合并列

• 表格css   （IE9.0）

        1.border-collapse 边框合并或独立  separate 独立  collapse合并(常用)
        2.border-spacing 设置边框间距（外补白）   单位：像素px或百分比%
        3. empty-cells 隐藏没有内容的单元格  hide隐藏 show显示

• 表单

1. 普通文本框 <input type="text">
2. 密码框 <input type="password">
3. 单选框 <input type="radio" name="sex">
4. 复选框  <input type="checkbox" name="like">
5. 附件框

• <input type="file">
• <form action="a4.html" method="post" enctype="multipart/form-data">
• method="post"  get:明文,容量小 1k--8k, post:隐藏,容量大 无上限,无类型限制
• enctype="multipart/form-data"  封装数据类型=多包传送的表单数据

        enctype=> encapsulation封装 type类型 
        multipart=> multi多个 part部分: 
        form-data: 表单数据

    6.文本域 <textarea></textarea>

    7.下拉框 <select>
                   <option>学生</option>
                   <option>教师</option>

                   </select>
    8.提交 <input type="submit">
    9.重置 <input type="reset">
  10.校验 <input type="button" value="返回">
  11.表单 <form></form> 定义跳转路径和传值，让按钮能执行
        action定义路径     method传值方式get/post
        属性
            1. type定义文本框类型
            2. value 定义按钮名称、文本框默认值
            3. name 给文本框起名 为了把多个值规定成一类属性
            4. checked 默认选中单选和复选框
            5. readonly 只读（可以传参）
            6. disabled 禁用（不可以传参）
            7. selected 默认选中下拉框

• 浮动 

        1.float 浮动 (飘移)
        left左浮动  right有浮动 none不浮动
        2.clear清除浮动
        left左浮动  right有浮动  both两边
        
        注意：
        1.谁浮动谁会脱离标准流，会在页面漂浮起来  标准流=文档流
        2.漂浮的元素会挡住下面的元素，可以给被挡住的元素设置清除浮动
        3.当所有孩子都为浮动，父类会没有高度
           解决办法：
            1.给父类设置固定高度，但是需要计算
            2.给父类设置overflow：hidden
            3.给父类添加一个新的孩子，设置清除浮动
            4.通过伪对象添加新元素，设置清除浮动
               .wrap::after{ content: ""; display: block; clear: both;}
    伪对象
              div:after{content:""} 在元素之后添加内容
              div:before{content:""}  在元素之前添加内容
              注意：content属性不能省略，必须要写，可以设置空

•     背景

        1.background-color背景颜色
        2.background-image:url()背景图片
        3.background-repeat背景平铺方式
           repeat平铺（默认）  repeat-x水平平铺  repeat-y垂直平铺 no-repeat不平铺
        4.background-postion背景图片位置
           单位：像素或百分比
           方向：  top right bottom left center
           写作：background-postion：100px 200px （x y）
        5.background-attachment背景固定方式  scroll移动 fixed固定
    伪类选择器
        1.a:link{}没访问的样式
        2.a:visited{}被访问过的样式
        3.a:hover{}鼠标悬停样式
        4.a:active{}被选中的样式
        注意：有写作顺序，hover必须在link、visited之后，active必须在hover之后
              顺序: link, visited, hover, active ==>LV好啊

      布局属性
        1.display 设置元素的显示方式
           none隐藏  inline变成行级元素  block变成块级元素  inline-block行块的共同点
           注意： inline-block有浏览器兼容性问题，写在列表里会出现错位情况
           display:none; //隐藏时,放弃原有的区域
           display:block; //显示

        2.visibility是否隐藏对象
           visible可见 hidden隐藏
        隐藏区别：display隐藏不保留面积，visibility隐藏会保留面积
    关系选择器
        1.h1,p,.font{}并集选择器
        2.ul li{}后代选择器 ==>子子孙孙
        3.div>p{}子选择器  > 仅指下一代
        4.h1+p{}相邻选择器（下一个）
        5.h1~p{}兄弟选择器（下面所有兄弟）
        6.class="box1 box2 box3"设置多个选择器

    属性选择器
        E[att="val"] { sRules }
        Element[attribute="value"]{ sRules }
        元素[属性="值"]{ css代码 }

        html标签名[属性名]
        例: 
        1.input[name]{}属性选择器
        2.input[type="button"]{}属性值选择器
        3.div[class~="a"]{}获得空格前后有a的值(属性值只要包含完整a的值就生效)
        4.div[class^="a"]{}获得头部带a的值
        5.div[class$="a"]{}获得尾部带a的值
        6.div[class*="a"]{}获得任意位置带a的值(属性值中只要有a就生效)
        7.div[class|="a"]{}获得"-"链接a的值（属性值为"a" 或 "a-"）

            行内>id>关系选择器>属性选择器>class>标签>通配符

    引入语法
          @charset "uft-8"引入字符集(CSS文件开头到底声明)
          @import 引入样式css
          加载顺序区别：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载

          @font-face 引入字体
          @font-face { font-family:szdcf;
                        src: url(css/Dominatrix.ttf); }

    轮廓 (类似border)
         1.outline-color 轮廓颜色
         2.outline-width 轮廓粗细
         3.outline-style 轮廓样式
         4.outline-offset设置线体距离     (类似padding)

    缩放
         zoom缩放   单位：数字，可以为小数，不可以为负数  

•     css精灵 background

        也叫做css雪碧，css sprites,是一种css图片拼合技术，将网页中的一些背景图片放到一个图片文件中，通过背景定位的方式找到每一个图片所在位置
        优点：
        1.不用每次重新从本地请求一个图片路径
        2.提高浏览器加载速度    

link和import区别？
  1.link是html标签，import是css属性
  2.link没有兼容性问题，import不兼容IE7以下
  3.link会比import先加载
  加载顺序区别：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载

•         定位

        1.position 定位
                static无定位 fixed固定定位 relative相对定位  absolute绝对定位 
       static无定位(默认值)
       1).fixed固定定位(默认原点: 浏览器的左上角)

       2).relative相对定位(默认原点: 标签自身的左上角)   

       3).absolute绝对定位(默认原点: 没父类,浏览器左上角,有父类,使用父类的左上角) 

        2.z-index 设置层叠顺序
                单位：数字，可以为负数，不可以为小数，默认0，数字越大越显示在上面
        3.方向
                x: left right   y:top bottom 必须与定位连用
    注意：
       fixed：会脱离标准流，永远参照浏览器设置位置，不会随着滚动条进行移动
       absolute：会脱离标准流，如果没有父类，参照浏览器，如果有定位的父类，参照父类；
       relative：不会脱离标准流，参照自己设置位置
       为了防止兄弟元素被串行，我们页面上的定位采取相对定位嵌套绝对定位
    
    作用：
        1.设置元素水平垂直居中
           任意一种定位都可以设置居中方式
           .box{width: 100px; height: 100px; background: #f00; font-size:3rem; color:#fff; 
              position: fixed; left:50%; top:50%; 
              margin-left:-50px;
              margin-top: -50px; } 
        2.制作定位的背景图片，放置图片和浏览器宽高不一致
         body{ background-image: url(img/2.jpg); background-repeat:no-repeat ;
                        background-size:100% ; background-attachment:fixed ; }
        img{ position:fixed;z-index: -1; top:0px;left:0px; bottom:0px;right: 0px;
                        width: 100%; height: 100%; }
        标签
    iframe 在页面里引用另一个页面
         <iframe src="http://www.baidu.com"></iframe>
         width宽度  height高度  marginwidth左侧边距  marginheight上方边距
            scrolling是否显示滚动条 yes/no  frameborder是否显示边框 0/1    
    a超链接属性target
        _self 默认的，在当前页面打开      _blank 打开一个新窗口
        _parent 跳出iframe框架，并在当前页面打开

        属性
     可以用在超链接和图片里
     title 悬停的提示信息     alt 显示错误的提示信息

•         布局

    固定宽度布局(台式机/笔记本电脑)
        在只兼容电脑端浏览器事，常用固定宽度布局，兼容电脑最少分辨率是1024，需要给最大的div设置为1000px，每个浏览器保留的边框、滚动条等宽高会不一致，如果不考虑IE8以下浏览器，可以设置最大外包为1100-1200px也可
           .wrap{ width: 1000px;   margin: 0px auto;  }
        1.浮动法
             注意：当所有孩子为左右浮动时，父类会没有高度，要给父类设置overflow：hidden，或者用伪对象清除浮动    
        2.定位法
            注意：用相对定位嵌套绝对定位，当所有孩子都为绝对定位，父类会没有面积，可以让最高的div设置为相对定位，在父类里撑开面积    
        3.转化表格法
            注意：把父类转化成display: table;，把孩子标签转化成display: table-cell;但是一切样式都必须按照表格的css属性去设置，并且它不支持低版本浏览器

        变宽布局(移动端-响应式布局)
        让div和浏览器与相同的宽度，可以设置div宽度为100%，可以设置最小宽度min-width为1000px
        1.等比变宽
            可以采用浮动、定位等任何方法，设置所有元素为百分比布局，但是防止页面缩小造成元素串行，需要设置最小宽度为1000
        2.单列固定
           可以采用浮动、定位等任何方法，设置宽度比较小的div为固定宽度值，让兄弟元素设置margin-right: -350px;让出此div的宽度，但是由于兄弟元素宽度为100%，需要设置最小宽度min-width处理分辨率    
        3.布局优化
             可以采用浮动、定位等任何方法，设置同行显示的元素为百分比布局，让里面嵌套的孩子为固定布局，再设置居中兼容所有分辨率    
     开发规范
    1.文件的命名不要写中文，单词要有意义
    2.class的命令也要合理
    3.div减少嵌套
    4.不要写行内样式
    5.不要用br和nbsp
    6.超链接和图片要写title和alt
    7.合理的写html和css注释
网页设计的注意事项
    1.为了兼容电脑端所有分辨率，最大的外包要设置1000px居中，如果不考虑低版本浏览器，可以设置1100-1200
    2.浏览器默认字体大小不一致，需要自己设置页面文字为12-14px
    3.字体与行高比例可以采用1:1.2或1:1.5
    4.特殊字体可以用导入字体文件的方式，或者当成图片定义
    5.不建议使用br和nbsp，可以用块级标签换行，可以用单词或字体间距设置空格
    6.注意色彩搭配，要明暗有对比
    7.图片采用png，jpg，gif，其他格式不要用，否则会有不兼容情况
    8.除了背景图片，其他图片不建议用超大尺寸，否则会让浏览器加载缓慢
    9.图片搭配和整个页面色调也要一致
    10.做页面先观看，后布局，最后填内容

兼容性
    1. 为了去掉所有浏览器默认的空白，可以设置*{margin:0px;paading:0px}
    2.元素水平居中 div{width：100px;margin:0px auto}
    3.元素水平垂直居中 
            .box{width: 400px;height: 200px;background-color: rgb(5, 4, 4);
                    position:absolute; left: 50%; top:50%; margin-left: -200px; margin-top:-100px ; } 
    4.文字和图片居中text-align:center
    5.伪类悬停属性要有先后写作顺序
    6.页面上图片要用css精灵，减少浏览器加载次数
    7.文字不要用特殊字体
    8.注意边距塌陷问题，方式元素空隙大小不一致
    9.当所有孩子都为浮动，父类没有高度
         给父类设置高度值
         给父类设置overflow：hidden
         给父类添加一个新的孩子，设置清除浮动
         给父类设置after伪对象，设置清除浮动
    10.固定定位让他永远写在body，用相对定位嵌套绝对定位
    11.如果所有孩子都为绝对定位，父类会没有面积，设置面积最大的孩子为相对定位
    12.不要注记，否则会变成低版本浏览器的样式
    13.减少div嵌套，减少class和id的定义，减少重复代码
    14.对于电脑端页面而言，减少使用css2或css3属性，防止不兼容，部分代码可以用图片代替
    15.当在标签中间加注释，或者行级元素加了换行，浏览器会保留一个空格的位置
         注释定义在其他位置
         宽高对应减少，留出空白位置
         用定位或display:inline-block代替浮动

    属性符修改
          _background: green;兼容IE6以下
          *background: green;兼容IE7以下
          background: green \9;兼容IE8以下
          background: green \0;兼容IE8以下
    选择器修改
         *body .box{width: 300px;}兼容IE7以下
         * +body .box{width: 300px;}兼容IE7以上
    标签修改
         不支持IE10以上
         语法：
          <!--[if IE ]>
                    <h1>aaaaaa</h1>
              <![endif]-->

       大于:gt=great 小于:lt=little 等于:eq=equal
          判断条件
        IE 8 等于         !IE 8 不等于
        gt IE 8 大于    lt IE 8 小于
        gte IE 8 大于等于    lte IE 8 小于等于
         <!--[if gte IE 8 ]>
                    <h1>aaaaaaaa</h1>
            <![endif]-->
         多条件选择
        &并且     |或者
         <!--[if (gte IE 6) & (lte IE 8)]>
                    <h1>能不能看到文字</h1>
        <![endif]-->