前端备忘录

1.截图:crtl+alt+A; 按ctrl直接看16进制

2.使用z-index设置元素的堆叠顺序,但是只能对非static定位的定位元素起效。

3.浮动框脱离普通文档流,不在普通文档流之列。就好像漂浮在普通文档之上。

4.当父元素没有设置高度而子元素设置高度,在子元素没有设置浮动的情况下,此时父元素因为包含子元素,也具有了高度,而当子元素设置浮动后,因为脱离了文档标准流,父元素不具有高度了(这应该就是元素崩塌)。

   消除这种影响,有三种方法,

 1.在浮动元素后加个div设置

{
clear: both; 
height:0;
overflow:hidden;
}

  设置个height为0的div,这样等于阻止了div2去占用div1的位置。

2. 为div设置一个class="clearfix"的类,然后统一对.clearfix进行样式设置,这样做的好处是,你需要时就为它添加一个class="clearfix"。

3.好理解,没高度给他个高度就撑起来了

5.网页代码优化:

标题 把重要的关键词放在前面,不要重复出现。每个页面的title不要设置相同的。
<meta keywords> 关键词 写出几个重要的关键词即可,不需要过多的堆砌。
<meta description> 网页描述 高度概括网页的内容,长度适中,每个页面也要有所不同。

语义化代码,在适当的位置用适当的标签。

强调字体内容时,使用<strong><em>标签 <strong><em>标签为了SEO的效果 
只是用于字体效果时使用<b><i>标签,<b><i>标签为了表现效果,能少用标签完成的效果就尽量少用

<br>标签只用于文本内容的换行
重要内容不要使用JS输出。
尽少使用jframe 框架。
谨慎使用display:none;因为小蜘蛛收录不了这个属性的内容可以使用 z-index 等来代替。

<img>标签要加入 alt属性,表示说明图片相关信息

使用<table>标签时,要加入标题<caption>XXXX</caption>
<table>
<caption>XXXX</caption>
<th>
..
..
</tr>
</table>

7.nofollow有两种用法:
1.用于meta元标签:<meta name="robots" content="nofollow" />,告诉爬虫该页面上所有链接都无需追踪。
2.用于a标签:<a href="login.aspx" rel="nofollow">登录</a>,告诉爬虫该页面无需追踪。

 重要内容HTML代码放在最前面

尽量精简代码

原文地址:https://www.cnblogs.com/sunmarvell/p/6805928.html