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，引用外部样式表，优先级：看谁排后面

　　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)

巴特西

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

最新文章

热门文章