2015-09-24 第六节课 (CSS补充和html 标签讲解、浏览器兼容性)

1、 DIV 隐藏有两种方式

1.1:隐藏之后不占位置  display:none;

1.2:隐藏之后占位置 visibility:hidden;

2、HTML标签语义化

  2.1:权重: h1~h6,的权重很高,搜索引擎容易收录

  2.2:<em> 和 <strong>都是加粗抢到的作用,但<strong>更具有语义,带有语气色彩

  2.3:<s>  和 <del> 都是删除线,但是del 有删除的意思在里面

  总结:标签语义化就是在网页中使用的标签尽量带有感情色彩,这样更容易被搜索引擎收录,对于网页优化非常有帮助。

3、补充的HTML 标签

  3.1: abbr 表示网页中呈现的文字缩写与简称  为浏览器可对缩写检查提供有用信息

万维网<abbr title="World Wide Web">www</abbr>万维网www

  3.2:定义列表:(一般用在定义个解释语句和回答语句上)

语法:

<dl>
    <dt>...</dt>
    <dd>...</dd>
    <dt>...</dt>
    <dd>...</dd>
</dl>  

例子:

<dl>
  <dt>A问:你要去哪</dt>
  <dd>B答:我去吃饭</dd>
  <dt>A:问:今天是什么节日</dt>
  <dd>B答:你的生日呀!</dd>
</dl>

  3.3:C:版权符:  @copy;

  3.4:DIV排序(如何让一个div置于另一个div上面,则把数字设置大。)

   设置:z-index:2;越大则越在上面  默认是1。

4、Html5新增标签

  H5 很多标签在有些浏览器中兼容性不是太好,现在还没有完全普及,最主要的应用是在手机端,现在学习是了解阶段.

    4.1:新增多媒体标签  video   audio   canvas 

    4.2:audio 标签有的浏览器不支持mp3   有的不支持  OGG   用个工具 ffmpeg 可完成相应的转换,步骤如下图

代码书写方式:

<video src="小苹果.mp3" controls="controls" autoplay>
<video controls="controls">
   <source src="小苹果.mp4"  type="video/mpeg"/>
   <source src="小苹果.ogg"  type="video/ogg"/>
</video>

1、z-index=数字

  z轴的值,当几个div重叠时,z-index数字越大的,越在上面
  
2、overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条)
  
3、浏览器兼容性问题:
  
  (1)兼容性问题:不同的浏览器基于不同的内核,对一些前端代码支持不一样,导致显示效果不一样
  
  (2)测试的各大浏览器:IE7-IE11(可使用IETester,不考虑IE6)、Opera、Safari、Chrome、Firefox
  
  (3)关于兼容性非常好的介绍文章:http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
  
4、超链接样式:
  
  a:link    平时的链接样式
  
  a:visited   已访问过的链接样式
  
  a:hover    鼠标放上去时的样式
  
  a:active    鼠标点击时的样式
  
  必须按照以上顺序放(lvha)才会有正常的效果
  
5、块级元素不靠边:*{ marin:0px; padding:0px}
  
6、ul在不同浏览器靠边问题:在IE中,ul的默认边距是margin,在Firefox中,ul的默认边距是padding,所以设置时margin和padding都设为0px
  
7、行内元素的上下margin撑不开自己所在的块级元素的高度:需在行内元素上下各加一个<div style="height:0px;overflow:hidden"></div>辅助撑开

原文地址:https://www.cnblogs.com/admi88/p/4838332.html