html <hn>应该在<a>的里面还是外面?

在网上看到有人是这样说的

<h1><a href="*******com">锚文本</a></h1>
<a href="*******com"><h1>锚文本</h1></a>

上面的告诉搜索引擎,这个锚文本链接非常重要。

下面的告诉搜索引擎,锚文本这三个字很重要!


我个人比较热衷于将<h1>放在外面甚至认为只能放在外面,因为在用css设置样式时,两者会有所不同,将<h1>放在外面看起来似乎表现得更好更准确,来看一下代码

<h1 class="orangeColor">
        <a href="#" class="redColor">&lt;h1&gt;放在&lt;a&gt;外面,h1蓝色,a红色</a>
    </h1>
    <a href="#" class="redColor">
        <h1 class="orangeColor">&lt;h1&gt;放在&lt;a&gt;里面,h1蓝色,a红色</h1>
    </a>
    <a href="#">
        <h1 class="orangeColor">&lt;h1&gt;放在&lt;a&gt;里面,h1蓝色,a不设置</h1>
    </a>
    <a href="#" class="redColor">
        <h1>&lt;h1&gt;放在&lt;a&gt;里面,h1不设置,a红色</h1>
    </a>
对应的css代码:

.orangeColor{
    <span style="white-space:pre">		</span>background-color: orange;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>.redColor{
<span style="white-space:pre">		</span>    background-color: red;
<span style="white-space:pre">		</span>}
实现的效果(IE11,FireFox33.02,Chrome38.02效果都一样):




可以看出:

1)h1放在外面时,背景色的表现都很正常

2)h1放在里面是,a设置的背景色就不起作用了


这是什么原因呢?

这里不得不说下嵌套规则了,html的嵌套规则是这样说的:块级元素可以包含内联元素或某些块级元素,但内敛元素不能包含块级元素,它只能包含其它内联元素。在写html时,要注意这条嵌套规则,不然则会引起奇怪的样式表现。


ps:有几个特殊的块级元素只能包含内联元素,不能包含块级元素,如:h1~h6  p  dt  等等。




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值