HTML嵌套

合理嵌套 HTML 标签，ul 和 li 是固定嵌套，ul 直接子元素必须是 li，dl 和 dt、dd 是固定嵌套，dl 的直 接子 元素必须是 dl 和 dd。p 标签不允许嵌套 p 标签。a 标签不允许嵌套 a 标签和其他交互性元素，比如 button。 尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能。 为什么需要样式重置？ 规划重置样式表： 因为浏览器的兼容问题，不同浏览器对某些标签默认值的解析是不同的，如果没对 CSS 初始化往往会出 现不 同浏览器之间的页面显示差异。为了避免这种差异需要使用样式重置。 命名参考 登录条：loginBar 标志：logo 侧边栏：sideBar 广告：banner 导航：nav 子导航：subNav 菜单：menu 子菜单：subMenu 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 热点：hot 新闻：news 按钮：btn 投票：vote 状态：status 合作伙伴：partner 外 套：wrap 商 标：label 标 题：title 顶导航：topnav 左导航：leftsideBar 右导航：rightsideBar 横幅：banner 菜单内容： menuContent 菜单容器： menuContainer 子菜单： subMenu 边导航图标：sidebarIcon 注释： note 版 权：copyRight 友情链接：friendLink 容器：container 页脚：footer 当前：current 激活：active 购物车：shop 搜索：search 登陆：login 注册：register 下载：download 面包屑：breadCrumb   logo优化 logo在整个页面中非常重要，使用h1标签，目的是为了提高权重，告诉搜索引擎，这个地方很重 要 h1里面放一个链接，将logo作为链接的背景图片插入 链接里面要放文字内容（一般为网站名称），为了搜索引擎收录，但是文字不要显示出来 用text-indent移到盒子外面（text-indent:-9999px），然后overflow:hidden （淘宝） 直接font-size:0（京东） 最后给链接一个title，鼠标悬停时显示提示文字。   二、浏览器常见兼容问题 1、图片下间隙问题 2、IE8中图片边框问题 a标签中嵌套img，在ie8下图片会有蓝色边框

     

 

3、 ie8中背景复合属性写法问题 背景属性简写时，如果背景图片与背景图片是否重置中间没有空格隔开，在ie8下背景图片将不能显示 4、在 IE6 及更早版本浏览器中，定义小高度的容器 5、IE6 及更早版本浏览器下，浮动时产生双倍边距的 BUG  

.box {   height: 5px;   background-color: aqua;   /* 解决方案 */   font-size: 0;   line-height: 0; }

• 三、css Hack 使用CSS Hack可以控制不同浏览器及版本之间的显示差异，某些情况下处理兼容问题可以事半功倍，但 滥用会影响页面性能，也会导致后期维护困难，因此尽可能减少对CSS Hack的使用。 1、条件Hack： 用于选择IE浏览器及IE的不同版本 if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块） if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本 ● 大于：选择大于指定版本的IE版本。关键字：gt（greater than） ● 大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal） ● 小于：选择小于指定版本的IE版本。关键字：lt（less than） ● 小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal） ● 非指定版本：选择除指定版本外的所有IE版本。关键字：!  
  •       首页       >  
  •  
    •       首页       >  
    •  
      •       首页       >  
      条件hack在标准浏览器下会当做注释进行处理 2、属性级hack CSS 样式属性名前或值后面加上一些只有特定浏览器才能识别的 hack 前缀或后缀，以达到预期的页面 展 现效果。 _下划线：选择IE6及以下 *：选择IE7及以下 \9：选择IE6+ \0：选择IE8+和Opera15以下的浏览器 3、选择符级Hack 四、项目测试 1、静态banner大图的处理 .box {     color: red;   _color:pink;   *color:orange;   color:aqua\0; } * html       /*IE6及更早浏览器*/         * + html       /*IE7*/ -有效区填白，降低图片大小 -有效区的图片根据情况划分为三到五部分，注意不要切断文字 -图片间隙处理