kongxin

前两天群里有人在聊面试，说面试官在问标签的语义化，具体问到了DIV标签，群里的童鞋们有人说做web前端的很多人也说不清它的意思，自己想了想，也确实不能很清晰明白的说出该标签的意思，只是一味的用它布局和样式，今天特地好好的深入一下，请看w3c的官方文档：

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Suppose, for example, that we wanted to generate an HTML document based on a database of client information. Since HTML does not include elements that identify objects such as “client”, “telephone number”, “email address”, etc., we use DIV and SPAN to achieve the desired structural and presentational effects.We might use the TABLE element as follows to structure the information:

<!– Example of data from the client database: –>
<!– Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org –>

<DIV id=”client-boyera”>
<P><SPAN>Client information:</SPAN>
<TABLE>
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id=”client-lafon”>
<P><SPAN>Client information:</SPAN>
<TABLE>
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

其具体意思就是：拥有id和class属性的div和span标签元素，为文档增加结构提供了一种有效的方法和途径，div和span元素使那些需要定义的内容变成块级元素和行内元素，但是不会为该内容强迫添加其他多余的表现样式；因此，用户可以用这两个元素和样式表一起作用，定义他们自己想要的样式；试着去想，比如说我们想要生成一份有关客户信息的html文档，但是由于html不包含那些能表明“client”、“telephone number”、“email address”的元素，所以我们用div和span标签元素去展示我们期望得到的结构和直观的效果；

直观的看见，div标签会隔断一行（换句话说：换行是 div 固有的唯一格式表现），例如：

<P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>ccccc<P>ccccc</DIV>

最后的结果是：

aaaaaaaaa
bbbbbbbbb
ccccc

ccccc