正確使用HTML5元素

我有我的個人資料圖像，並在下面我想把我的名字和一些關於我的東西。我不知道如何使用圖像div，或者如果我甚至需要一個div。 h1和p元素是否正確使用？正確使用HTML5元素

片段

<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>

該網站的剩下的只是應用程序圖標考慮到我的社交媒體網站。沒有其他內容。我的網站也沒有頁眉或頁腳。不知道我的配置文件類是否應該被視爲良好SEO的頭。

來源

2015-10-09 user1052448

您不需要在圖像周圍放置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>

否則，代碼的其餘部分是完全正常的。

來源

2015-10-09 01:12:52 Elipzer

它取決於你想要用它做什麼，但如果我理解你的問題。您不需要div的圖片，只需在CSS中設置不同的圖片類即可。

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

那麼你的HTML看起來像

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

退房有關如何在你的CSS實際設置路線的更多信息

它可能使用一個div的風格是值得的文本轉換爲塊或格式化它看起來不錯，等等。但你不需要這樣做

http://www.w3schools.com/tags/tag_div.asp爲div造型。

最後，藉助個人體驗，花一個小時或2遍瀏覽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>僅僅指剛像你這樣的形象，這將看起來像

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

希望幫助！

來源

2015-10-09 01:19:01 Spooler

謝謝你的建議。您是否介意編輯您的答案，以提供除使用「h1」和「p」之外的格式化文本的示例？ – user1052448

你去所有的編輯。 – Spooler

啊，我知道那些東西。我以爲你在想我忽略的其他東西。哈哈我雖然欣賞它！ – user1052448

正確使用HTML5元素

回答

相關問題