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

Posted 2022-12-08 solaris-wwf

<!-- 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;备案中图标

表单元素

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

        2.input:

            txt:placeholder(css3的,类似value)

            password:

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

            reset:重置，没有刷新页面

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

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

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

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

            textarea:多行文本框,cols="50"50个字符宽,rows="3" 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

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

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

            通配符（*）：

            伪对象选择符：权重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:0;

            方法2,，overflow:hidden;

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

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

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

　　　　adisplay: 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=1-100);兼容其他浏览器写法，opacity:0-1;

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

        9.过滤器filter：

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

            2.!important关键字过滤器：这个声明有最高优先级，因为IE6不支持，所以可以利用这个BUG来让ie6兼容其他浏览器，background：#000！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效果等同