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>辅助撑开