html标签和css基础语法与浏览器兼容性等相关基础学习

 table的使用

    <h3>前端日常</h3>
    <form action="https://www.baidu.com">
        <table border="1px" cellspacing="0px"><!--cellspacing单元格间隙-->
            <thead></thead><tbody>
                <col span="2" width="100px"><!--前两列宽度改变-->
                <col span="1" width="100px"><!--最后单列宽度改变-->
                <tr>
                    <td width="100px" align="center">11</td>
                    <td colspan="2">22</td><!--colspan占据两个列度-->
                </tr><tr>
                    <td rowspan="2" align="center">sdfs</td><!--rowspan占据2行,下一行需要删掉相应列-->
                    <td><input type="text" name="loginname"></td><!--radio单选 file文件checkbox复选-->
                    <td><input type="password" name="pwd"></td>
                </tr><tr align="center">
                    <td colspan="2">
                        <input type="submit" value="确认">
                        <input type="reset" value="重置">
                    </td>
                </tr></tbody>
<tfoot></tfoot>
</table>
</form>

一些基础知识

　　标题大到小 <h1>-<h6> ， <i><em> 表示一样（一个代表逻辑风格，一个代表物理风格），

　　 <b><strong> 一样  <u> 下划线 <br/> 换行  <hr/> 水平线， <p> 段落标记

    　字符实体：往HTML文档里面写入特殊字体 <,>,&等等，一般以&或者&#开头，

         &nbsp 表示空格, &gt 表示 <， &lt 表示 > , &copy 表示备案中图标

　　文字默认行高一般在21px左右，

　　h1等于2em，1em等于16px

　　BFC:Block Formatting Content 块格式化上下文

　　子元素a  display：block以后会继承父元素的宽

表单元素

        1.表单域: <form name="" method="post/get" action=""> ,get是从服务器上获得数据，Post发送数据，安全因素，一般用post

        2.input:

            txt:placeholder(css3的,类似value)

            password:

            submit:提交，刷新了页面，提交数据到服务器

            reset:重置，没有刷新页面

            radio：单选按钮，name组同一个， disabled="disabled" 禁用

            checkbox:多选框，name最好写一写 checked="checked" 默认选中,

            button:做一个跳转，一般当做链接使用。

            select:下拉菜单 <select><option></option><option></option></select> 

            textarea:多行文本框, cols="" 50个字符宽, rows=""  3行高

css标签

        css样式表建立：

　　　　 1，内部样式表（头部），优先级：看谁排后面

       　　 2，内联样式表（标签内），优先级最高

        　　3，引用外部样式表，优先级：看谁排后面

          　　   <style rel="stylesheet" type="text/css" href="style.css" /> 

                　　rel定义文档关联，表示关联样式表。

css语法

        1.选择符

            元素选择符（标记选择符）：div span  权重0001

            类选择符：.class  权重0010

            id选择符：#id  权重0100

            伪类选择符：不光下面四个，顺序不能颠倒 权重0010

　　　　a{color:red}a:hover{color:green}除了划过不一样，其他样式相同
          a:link{}初始状态
          a:visited:{}被访问后
          a:hover{}划过
          a:active{}按下时

            群组选择符：.class,#id,div

            通配符（*）：

            伪对象选择符：:before,:after   权重0010

            包含选择符：div span 权重等于选择符之和

     1   100  1     10  1    =113权重
     ul #NAV li.active a       

            内联样式权重：1000

            继承样式权重：0000

文本类属性

font-family{文字1，文字2;font-size:;color:;font-weight:bolder/bold/normal/100-900/*  600-900才会看到加粗状态*/;
            font-style:italic/oblique/*  倾斜幅度更大*//normal;text-align:justify(两端边界线对齐);line-height:normal;
            text-decoration:none/underline/overline/line-through;
        text-indent:50px;/*  首行缩进，可以负值，隐藏文本，只对第一行起作用，如果第一行不是文字，则不变 */}

　　　  查找用户电脑中的字体库，把英文字体放在前面，中文字体放前面会对英文字体产生影响，一个单词不需要双引号，"Times New Roman"打印字体,1em = 16px,h1=2em，但是会根据父元素的font-size改变。

列表属性

        list-style-image:url，用图片作为列表符号，

            一般用background图片代替:url() no-repeat left 50%;padding-left:20px

        list-style-position:默认outside/inside,定义列表符号的位置，在li框内框外，当使用margin:0;padding:0之后，outside会有变化

        list-style:none，去掉列表样式

        无序列表

　　"circle"空心圆"square"方形（个浏览器显示效果不一样，如果用list-style-image,如果字体大小改变，这个方法就不适用，一般用background-image）

<ul type="disc"><!-- 实心圆,默认，-->
       <li><a href="#" title="提示文本">sfsdfsdfsdf</a></li>
       <li><a href="#">sfsdfsdfsdf</a></li>
</ul>

　       有序列表

<ol type="1"> <!-- 默认 ，"A""I""a" -->
      <li><a href="#">sfsdfsdfsdf</a></li>
      <li><a href="#">sfsdfsdfsdf</a></li>
</ol>

  

      自定义列表dl

<dl>
       <dt>名词</dt>
       <dd>解释</dd>  <!-- 后退两格显示，一个dt可以带很多dd -->
　　</dl>

　　背景属性

　　backgroud:{#444 url() norepeat left top;};
        background-color
        background-image:url(background-repeat:no-repeat/repeat/repeat-x/repeat-y;
        background-positoin:水平px（left/center/right） 垂直px(top/center/bottom););

浏览器兼容性

    五大浏览器内核

        Trident:IE,Maxthon,theworld,360

        Gecko:Mozilla Firefox,优势跨平台,开源

        Webkit:Safari,Chrome，开源

        Presto:Opera，优势，渲染最快。Opera开发的排版引擎

        Blink:Opera和Google开发的排版引擎

    CSS BUG：各浏览器CSS解释不一致，

    CSS HACK：hack是指让CSS兼容浏览器的方法，属于个人对官方CSS的修改或者补丁，也称为patch补丁

    Filter：过滤器，对特定浏览器或浏览器组显示或隐藏规则或申明的方法，是一种过滤浏览器的hack类型

        1.图片间隙：最好加上 display:block ，要不然行内元素会有bug，会比父元素少3个像素，来适应加入的文本

        2.双倍浮向：ie6的问题，浮向float边界会双倍显示 margin-left:50px 变100。添加 _display:inline 

        3.默认高度：ie6问题，部分块元素有默认高度，低于18px，

            方法1， font-size:; 

            方法2,， overflow:hidden; 

        4.表单元素的行高（line-height）不一致：mz ie o c s,hack给表单元素添加 float:left 

        5.按钮元素的大小不一致：

            hack1,统一大小,class/（统一用a节点模拟）

　　　　a{display: block;height: 40px;width: 50px;background: #333;text-align: center;
                 text-decoration: none;line-height: 22px;font-size:14px;border:1px solid #000;color:#666}

　　　 hack2,在input上写样式，去掉边框

          hack3,如果按钮是图片，作为背景图即可

        6.百分比Bug：ie6，四舍五入百分比，50%加上50%会大于100%，hack:给右面的浮动元素加 clear:right 

        7.鼠标指针bug：cursor的hand值只有ie能识别， hack：cursor:pointer 则可以

        8.透明属性：ie： fliter:alpha(opacity=-) ;兼容其他浏览器写法， opacity:-; 

            opacity有个问题，会把透明度转给子元素，

        9.过滤器filter：

            1.下划线属性过滤器：只有IE6能读：比如background _background(ie6)

            2.!important关键字过滤器：这个声明有最高优先级，因为IE6不支持，所以可以利用这个BUG来让ie6兼容其他浏览器， background：#！important 

            3.*属性过滤器：当一个属性增加了*，只能被ie7识别。

    表单表格高级属性

        表单域： <form name="" method="" action=""></form> 

        表单控件： <input type="text" value="" /> 

        提示信息：

　　<label for="male">男</label><input type="radio" name="sex" id="male"/>
   <label for="female">女</label><input type="radio" name="sex" id="female" />

        　　点击label效果等同

　　css的calc()

　　　　calc() 此CSS函数让你在声明CSS属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<number>、或<integer>。 

　　　　比如 left：calc（50% -10px）,此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值,表达式可以是加减乘除

　　　　还可以在添加括号来建立计算顺序，例如：calc( calc( 100px / 2) / 2)