Question

我有自己的个人资料图片，在我的下方，我想提出我的名字和一些关于我的事情。我不知道如何使用图像div，或者我甚至需要一个div。 h1和p元素是否正确使用？

段

<div class="profile">

  <div><img src="profile_image.jpg"></div>
  <h1>first last</h1>

  <p>Coffee snob.</p>

</div>

全身HTML

<body>

  <div class="page">

    <div class="profile">

      <div><img src="profile_image.jpg"></div>
      <h1>first last</h1>

      <p>Coffee snob.</p>

    </div>

    <div class="sites">

      <ul>
        <li><a href=""><img src=""></a> <a href=""><img src=""></a></li>
      </ul>

    </div>

  </div>

</body>

网站的其余部分只是我的社交媒体网站上的应用图标。没有其他内容。我的网站也没有页眉或页脚。不确定我的个人资料类是否应该被视为此时的标题以获得良好的搜索引擎优化。

Answer 1

您无需在图像周围放置div。只需将其设置为display: block（img默认为display: inline）

<div class="profile">
  <img style="display: block" src="profile_image.jpg">
  <h1>first last</h1>
  <p>Coffee snob.</p>
</div>

否则，其余代码完全正常。

Answer 2

这取决于你想要用它做什么，但如果我理解你的问题。只需在CSS中设置不同的图像类，就不需要图像的div。

.image1
{
  width:100px;
  height:100px;
}

然后你的HTML看起来像

<img src="profile_image.jpg" class="image1">

查看http://www.w3schools.com/css/css_align.asp，了解有关如何在CSS中实际设置路线的更多信息

使用div将文本设置为块或将其格式化为漂亮等等可能是值得的。但是你不需要这样做

http://www.w3schools.com/tags/tag_div.asp用于div样式。

最后升级个人经验，花一两个小时浏览W3Schools CSS部分并学习样式基础知识这是学习使用CSS所需的基本工具并让您的网页看起来很棒的好方法！

修改样式文字

<h1>first last</h1>
<p>Coffee snob.</p>

所以首先你可以在你的css中将它们设置为它们的元素

h1 
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}


p
{
text-align: right; 
}

做你的HTML看起来完全像你不需要改变任何东西。显然，对于所有<p>和<h1>内容，您只能执行一次这样的操作，并且每次使用这些标记而不为其指定类时，它看起来就像上面的CSS一样。

另一种选择是按照我对图像的建议，给他们一个独特的类。

p.body
{
text-align: right;
}

在这里，您需要将类添加到<p> jsut，就像您为图像添加类似

 <p class="body">Coffee snob.</p>

希望有所帮助！

正确使用HTML5元素

2 个答案: