学习笔记(二) 一、超链接link: 二、表单input的长度: 三、HTMLl和XHTML概念认知: 四、HTML、XHTML和HTML5的关系和区别:  五、小tips(下划线u的颜色): 六、在html中让img位置的居中: 七、html中表格table的align+valign: 八、小tips(合并表格单元格、单元格无法合并的原因之一): 九、表单: 十、企业视频推广方法: 十一、命名的规范化+常用的css命名: 十二、css样式的优先级:   十三、margin值的叠加: 十四、css中常用的长度单位:em+rem+px 十五、各类tips: 十六、margin的兼容性: 十七、css属性的继承: 十八、区分Letter-spacing和word-spacing: 十九、background-attachment:fixed;兼容性: 二十、h标签里的图片在IE6中会被拉大

  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命名:

       学习笔记(二)
一、超链接link:
二、表单input的长度:
三、HTMLl和XHTML概念认知:
四、HTML、XHTML和HTML5的关系和区别: 
五、小tips(下划线u的颜色):
六、在html中让img位置的居中:
七、html中表格table的align+valign:
八、小tips(合并表格单元格、单元格无法合并的原因之一):
九、表单:
十、企业视频推广方法:
十一、命名的规范化+常用的css命名:
十二、css样式的优先级:
 
十三、margin值的叠加:
十四、css中常用的长度单位:em+rem+px
十五、各类tips:
十六、margin的兼容性:
十七、css属性的继承:
十八、区分Letter-spacing和word-spacing:
十九、background-attachment:fixed;兼容性:
二十、h标签里的图片在IE6中会被拉大

十二、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;。