HTML - 网页结构

发表于   |   分类于   |  

<div> 和 <span> 可以将 HTML 元素组合起来，大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始和结束，例如以下标签：

1
2
3
4
5
6
7
8
<!--标题-->
<h1>
<!--段落-->
<p>		
<!--无序列表-->
<ul>	
<!--表格-->
<table>

内联元素在显示时通常不会以新行开始，例如：

1
2
3
4
5
6
7
8
<!--加粗-->
<b>		
<!--单元格-->
<td>	
<!--超链接和锚点-->
<a>		
<!--图片-->
<img>

块级元素

<div> 可用于组合其他 HTML 元素的容器。<div> 元素没有特定的含义，除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

1
2
3
4
5
6
7
8
9
10
11
<!--div标签-->
<div>
    <img src="https://images.apple.com/v/home/di/images/row-promos/iphone-7_large.jpg" width="200">
</div>
<div>
    <img src="https://images.apple.com/v/home/di/images/row-promos/iphone-7_large.jpg" width="200">
</div>
<div>
    <img src="https://images.apple.com/v/home/di/images/row-promos/iphone-7_large.jpg" width="200">
</div>
<!--div用了三行-->

内联元素

<span> 可用作文本的容器。<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

1
2
3
4
5
6
7
8
9
10
11
<!--span标签-->
<span>
    <img src="https://images.apple.com/v/home/di/images/row-promos/iphone-7_large.jpg" width="200">
</span>
<span>
    <img src="https://images.apple.com/v/home/di/images/row-promos/iphone-7_large.jpg" width="200">
</span>
<span>
    <img src="https://images.apple.com/v/home/di/images/row-promos/iphone-7_large.jpg" width="200">
</span>
<!--span 用了一行-->

标签嵌套规则

块级元素可以包含行内元素和某些块级元素，其中 <div> 元素可以包括几乎所有的 HTML 元素。行内元素不能包含块级元素，只能包含其他的行内元素。<p> 标签虽然是块级元素，但是他不能包含其他的块级元素，块级元素与块级元素并列，行内元素和行内元素并列。

1
2
3
4
5
6
<!--正确，h1 和 p 都是块级元素，因此可以在同一层级-->
<div><h1></h1><p></p></div> 				
<!--正确，span 和 a 都是行内元素，因此可以在同一层级-->
<div><span></span><a href=""></a></div>		
<!--错误，h1 是块级元素，span 是行内元素，因此不能在同一层级-->
<div><h1></h1><span></span></div>