码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-09-30 23:57:58      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:表单   电脑   顺序   包含   presto   point   透明   字体   copy   

<!-- 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
    a{color:red}a:hover{color: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节点模拟)
    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=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效果等同

  

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

标签:表单   电脑   顺序   包含   presto   point   透明   字体   copy   

原文地址:https://www.cnblogs.com/solaris-wwf/p/11614434.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!