Html 同一h1标记中的两种不同样式

现在我的标题包含两个不同样式的p标签：

<p style="color:#FFF; font-size:34px; margin-bottom:10px;">First half</p>
<p style="color:#FFF; font-size:88px;">Second half</p>

上半页

下半部分

---

是否可以将其转换为一个h1标签？或者我可以有两个h1在一起吗？主要目的是它应该能很好地与seo配合使用。

seo方面-每个网页应该包含一个H1标签。 对于我认为您正在尝试实现的目标，一个可能的解决方案是在H1中添加span标记，使您能够对H1的每个部分进行不同的样式设置：

HTML:

1） 您应该将样式移动到样式表中

2） 您可以在一个

h1

中轻松拥有多个样式。。。像这样：

HTML:

---

一种不典型的方法是使用

：：第一行
和
空白：前一行
。这个组合非常有效，因为
white=space:pre-line
允许您准确地确定第一行的结束位置。当然，与其他答案一样，这种方法只需要一个
h1
标签，这是搜索引擎优化的理想选择

这是一个简单的例子：


h1{
空白：行前；
颜色：#fff；
字号：88px；
}
h1：：一线{
字体大小：34px；
}
身体{
背景：黑色；
}
上半部分
下半场
您可以使用

<h1>
<span >First half</span>
<span class='otherStyle' >Second half</span>
</h1>

h1 {
  color: #fff;
}

.smallerFont {
  font-size: 34px;
  margin-bottom: 10px;
}

.bigFont {
  font-size: 88px;
}

<h1>First <span class='A'>Second</span></h1>

h1 { color:#F00; }
.A { color:#0F0; }

<h1>
<span >First half</span>
<span class='otherStyle' >Second half</span>
</h1>

h1{
color :red;
}

h1> span{ //all the span elements within h1 is applied this style
 color : blue;
font-size:34px; 
margin-bottom:10px;
 }
.otherStyle{  
color:yellow;
font-size:88px;
}