学习笔记（二）

一、超链接link：

　　1.　　E-mail链接：

　　　　<a href="mailto:电子邮件地址">给我写信</>

　　　　允许访问者向指定的地址发送邮件。

　　2.　　空链接之设为首页：

　　　　<a href="#" onClick="this.sytle.behavior='url(#default#homepage)';this.sethomepage('http://www.具体网址')">设为首页</a>

　　3.　　添加收藏：

　　　　<a href="#" onClick="javascript:windw.external.addfavorite('http://www.具体网址','网页中文名称')">加入收藏夹</a>

　　4.　　脚本链接之打开窗口：

　　　　javascript:window.open('文件名')

　　　　<a href="javascript:window.open('http://www.具体网址')"></a>

　　5.　　脚本链接之关闭窗口：

　　　　javascript:window.close()

　　6.　　link伪类链接状态的顺序如下，否则访问过后，会看不到设置的效果了：

　　　　a:link——a:visited——a:hover——a:active 

二、表单input的长度：

　　html中，用size设置input的长度，而不是width！切记！切记！

三、HTMLl和XHTML概念认知：

　　HTML是Hyper text mark-up language超文本标记语言的缩写。

　　标记，就是用来描述网页内容的一些特定符号。

　　HTML不是编程语言，而是一种描述的标记语言，用于描述网页中内容的显示方式。

　　如文字的显示颜色，字号。

　　XHTML是the extensible hyper text markup language的缩写。XHTML的中文意思是可扩展标识语音。

　　

四、HTML、XHTML和HTML5的关系和区别：　

　　1.　　关系：

　　　　HTML指超文本标签语音。

　　　　XHTML是HTML向XML过渡的一个桥梁，XHTML基于HTML，这是严谨、代码更整洁的HTML版本。

　　　　HTML5是下一代的HTML。

　　2.　　HTML和XHTML1.0主要区别：

　　　　嵌套：XHTML元素必须被正确地嵌套。

　　　　关闭：XHTML元素必须被关闭。

　　　　标签：标签名必须用小写字母。

　　　　属性：属性名必小写，属性必有值，值必用双引号。

　　　　在HTML中，a/frame/img/form等标签都有name属性，在XHTML中除了form外，不使用name属性，而是用id代替它。

　　　　不在注释中使用“--”，只在注释开头和结尾使用。如<!-- 注释--注释 -->无效

五、小tips（下划线u的颜色）：

　　<font color=”blue”>

　　　　<u>Hello  <!--“Hello”的下划线是蓝色的-->

 　　　　　　<font color=”red”>

　　　　　　　　<u>word<u/>

 　　　　　　　　<!--兼容性问题，若无此u标记，“word”的下划线有可能是蓝色的，也有可能是红色的-->

　　　　　　 </font>

　　　　</u>

　　</font>

 

六、在html中让img位置的居中：

　　img的align属性是调节图片和文字之间的位置关系的，此align属性无center属性值，因此需通过其父盒子来设置其位置的居中。

 

七、html中表格table的align+valign:

　　table无valign属性，其align属性是针对表格相对于其所在的窗口位置而言的。

　　而td+th的align是用来设置里面的文字的水平位置的。

 

八、小tips（合并表格单元格、单元格无法合并的原因之一）：

　　th和td之间的内容要合并在一起的话，不能使用表格结构化的标签thead+tbody+tfoot，否则会合并不了。

　　ps:

　　　　表格结构化后，<thead>+<tbody>+<tfoot>标签，带着标签里面的内容一起换互换位置，不会影响其在网页中的正常显示顺序。

 

九、表单：

1. 　　input里的type+name属性的必须的。
2. 　　地名区域的value值用区号比较好，可节省空间。
3. 　　上传图片/文件用的是<input type="file" />
4. 　　用图片显示input时，用<input type="image" src=""/>
5. 　　同一组的checkbox，要保持name属性值的一致。
6. 　　隐藏域看不见，用来提交一些用户不填但隐藏传递的数据，如IP地址。<input type="hidden"/>
7. 　　为了表单的排版整齐，往往会用到表格。
8. 　　推荐使用label标签。
9. 　　而fieldset定义围绕表单中元素的边框。legend元素则为fieldset元素定义标题。

　　Ps：fieldset,不要写成filedset。

 

十、企业视频推广方法：

1. 　　上传到所有可以上传的视频网站。
2. 　　在自己的企业网站中，加入分享代码。

 

十一、命名的规范化+常用的css命名：

1. 　　所有文件、页面、图片以及flash等，都不要用中文或特殊字符命名，很多情况下服务器不能识别，容易出错。
2. 　　用英文语义化的命名，有利于搜索引擎的搜索。不建议用中文拼音，和div1,di2这样的命名。
3. 　　常用驼峰式命名法。
4. 　　类不能以数字开头，名称不能包含汉子和特殊字符。
5. 　　PS：一些公司有自己的“命名规范文档”。
6. 　　常用的css命名：

 　　　　　　

十二、css样式的优先级：

　　对于名称相同的样式，优先级从高到低依次是:

　　　　内嵌（inline）-内部（internal）-外部（external）-浏览器默认（browser default）

　　其中内部css和外部css没有优先的先后，后定义的样式覆盖前面定义的样式，即所谓的层叠。

 

十三、margin值的叠加：

　　若相邻的两个盒子都设置了margin值，则它们交界处的margin值，不是它们各自的margin值的相加，而是它们中较大的margin值。

 

十四、css中常用的长度单位：em+rem+px

　　1.　　em　　相对于当前对象内文本的字体尺寸，受父元素字体大小的影响

　　2.　　rem　　root em的简写，受根元素字体大小的影响，不受父元素字体大小的影响

　　3.　　px　　像素pixel，推荐使用

　　ps:

　　　　a. html中的根元素是html。

 　　　  b. 除了值为0的情况，所有的非0的值，后面都要加上单位！！！

 　　　　 c. rem的兼容性问题及对策：

　　　　　　　　除了IE8及更早版本外，所有浏览器均已支持rem。

　　　　　　对策：多写一个绝对单位的声明。比如：div{font-size:14px; font-size:.875rem;}。对于不支持它的浏览器会忽略用rem设定的字体大小。

　　　　　　ps：要先设置px的，再设置rem的。因先设置rem，就会被后面设置的px的给覆盖掉。

　　

十五、各类tips：

　　1.　　代码优化tips：

　　　　为了将来的css代码优化，建议，所有属性值后面都要带上“；”

　　2.　　颜色取值范围：

　　　　十六进制的取值范围是00和ff

　　　　三原色单位的值域是0-255

　　3.　　特殊字体/符号使用tips：

　　　　某些特殊字体/符号，其他人的电脑可能没有，就会显示不出来。若想使用，可以用图片的形式加载进去。

　　4.　　字体样式font-style设置tips：

　　　　a.先设置英文字体，再设置中文字体。若反过来，则中文字体样式也对英文字体有效。

　　　　b.中文字体用英文名称比较好，最好使用unicode。

 　　　   c.建议中英文字体都用双引号" "括起来。英文字体常用Arial字体。

　　5.　　一行文字的垂直居中设置：

　　　　设置line-height等于盒子的高度，文字就垂直居中了，但只局限于文字是一行，且文字长度小于盒子宽度的情况下。

　　6.　　IEtest工具兼容性：

　　　　在win7下，打不开IE6。

　　　　对策：下载绿色版IE6。

 　　

　　7.　　电脑安装不了IE9的原因可能是：

　　　　xp系统不能装IE9。

　　　　对策：系统升级到WIN7就可以装。

　　8.　　：focus的兼容性（IE6/7不支持）：

　　　　设置对象成在为焦点（onfocus事件）时的样式，IE6/7不支持。

　　　　对策：用javascript设置。

　　9.　　ul的list-style的属性值基本都用none:

　　　　Ul的list-style往往都选none，因该属性有兼容性问题，圆点大小和位置都不一致。

　　10.　　border的属性值基本都选solid:

　　　　Border的dotted+dashed...有兼容性问题，so基本都用solid的！

 　　　　ps:浏览器兼容性问题，背景颜色有的显示到border的上，有的显示到padding上。

　　11.　　tips（IE6中父元素的高度）：

　　　　在IE6中，子元素的高度超过了父元素的高度，IE6默认会自动把父元素的高度增加。

　　12.　　tips（行内元素）：

　　　　给行内元素添加背景的时，记得要把行内元素变为块元素，同时设置宽+高。否则无法显示。

　　　　行内元素浮动后，会变成块元素，可以直接设置宽+高，不需要再设置dispaly:block;

 

　　13.　　（清除浮动）当父元素没有指定高度，并且它的子元素有浮动时，这个父元素的高度不会自动增加。

　　　　解决方案1：额外标签法。在容器的末尾增加一个“Clear:both”的元素，强迫容器适应它的高度以便装下所有的float元素。

　　　　缺点：增加一个空标签，会增加代码。

　　　　代码示例如下：

　　　　<div id=”main”>

　　　　　　<div id=”left”>左盒子</div>

　　　　　　<div id=”right”>右盒子</div>

　　　　　　<div class=“clear”></div> <!--增加一个空div，设置样式.clear{clear:both;}-->

　　　　</div>

　　　　<div id=”footer”>底部</div>

　　解决方案2：给父元素加overflow:hidden;

　　前提/缺点：子元素没有使用定位布局。

　　

　　解决方案3：利用伪对象after方法。

　　具体代码如下：

　　　　.clearFix:after{

　　　　　　clear:both;

　　　　　　display:block;

　　　　　　visibility:hidden;

　　　　　　height:0;

　　　　　　line-height:0;

　　　　　　content:"";

}

　　　　.clearFix{zoom:1;}/*解决IE6/7兼容性问题*/

　　PS:zoom只有IE内核的浏览器支持，缩放比例。zoom:1;解决IE6高度自适应问题。

　　

十六、margin的兼容性：

　　1.使用margin时，若无效果，有可能是浏览器的兼容性问题。甚至，同一个标签，同时设置上下左右外边框，会出现有的有效，有的无效的现象。

　　解决方案之一：加border：10px，solid标签。

　　

　　 2.IE6双倍边距的问题：

　　　　当外边距和浮动的方向一致的时候，IE6会出现双边距的问题。

　　  解决方案：　加display:inline;　

　　3.一个元素既设定了margin属性，又浮动时，都有可能出现兼容性问题。

　　　解决方案：加_display:inline;

十七、css属性的继承：

　　继承：

　　　　文本相关属性：font-size,font-family,line-height,text-indent等

　　　　列表相关属性：list-style-type等

　　　　颜色相关属性：color

　　不继承：

　　　　button,input, select,textarea在IE下是不继承body属性的，需要单独书写。

十八、区分Letter-spacing和word-spacing：

　　Letter-spacing 让每个字符（汉字+字母+标点符号）之间的距离，都是设置的宽度。　　

　　word-spacing让你敲的空格长度是你所设置的宽度。

十九、background-attachment:fixed;兼容性：

　　IE6只有html和body两个元素支持这个属性。IE7及以上都支持。

二十、h标签里的图片在IE6中会被拉大

　　因为h标签默认是加粗的。

　　解决方案：加font-size:1em；。