This article is currently in the process of being translated into Chinese (~7% done).
If you are fluent in Chinese, then please help us - just point to any untranslated element (highlighted with a yellow left border - remember that images should have their titles translated as well!) inside the article and click the translation button to get started. Or have a look at the current translation status for the Chinese language.
If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.
Please help us by translating the following metadata for the article/chapter, if they are not already translated.
If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!
Block & Inline elements
行內元素作為文件中的一部分，通常其高度和寬度是不能改變的。而只有行內元素能放在行內元素之中。不過也有比較特殊的情況，雖然段落元素（<p> 元素）是區塊元素，但只有行內元素能放在 <p> 元素之中。
段落元素 <p></p> 是區塊元素，而粗體元素 <b>是行內元素。
區塊元素當中最被廣泛使用的是 <div> ，其中 div 是 division 的縮寫，意為區域、隔間（中文譯註：div 的中譯並沒有被普遍使用，習慣上是以 div 稱呼）。<div> 元素是用來分隔網頁中不同內容的區塊元素。想像在你的網頁中有兩則更新，每則更新都包含了標題、你的名字，以及發布的日期。如下方的範例所示：
Just Another Day
Written by Christina
On January 11th
This is my second blog entry, and I just wanted to check in on you
My First Blog Entry
Written by Christina
On January 10th
I’m so happy to write my first blog entry – yay!
As you can see, there is two blog-entries and we divide them using a block element - in this case is chose a <div>. Inside the block element is another block element, the paragraph (<p>). Using just only the most necessary markup, the HTML for your webpage would look like this:
<!DOCTYPE html> <html> <head> <title>Your first HTML5 Document</title> </head> <body> <div> <p>Just Another Day<br /> Written by Christina<br /> On January 11th </p> <p>This is my second blog entry, and I just wanted to check in on you </p> </div> <div> <p>My First Blog Entry<br /> Written by Christina<br /> On January 10th </p> <p> I’m so happy to write my first blog entry – yay! </p> <div> </body> </html>
The <div>-elements are used to diversify the two blog entries. Inside each of the <div>-elements is two paragraphs consisting of title & author and the actual entry.
The <div> element is widely used as a container that can apply formatting anywhere you want on your webpage. The limitation is that the <div> elements do not tell you anything about the actual content. So the browser knows that it has found a separate section, but not what kind of section. In HTML5 a lot of new elements have been introduced and some of them are here to replace the use of the <div> - see the articles about the new semantic elements to dig in to semantic markup.
I have previously talked about nesting elements and the fact that the <p> elements is inside the <div> elements is an example of nested elements.
What you have learned
- Block elements are like squares
- Inline elements have no breaks associated with the element
- You can nest block elements inside other block elements
- But you cannot nest block elements inside inline elements
- The paragraph is the only block element that must only contain inline elements
- The <div> elements is currently used as a container, but new HTML5 elements is here to change that