HTML5如何创建容器

为了让网页的布局更加美观,HTML提供了容器的概念,即在网页中占用一块区域,在此区域内可以添加多种标签,且这些标签只会在该区域内显示,使得标签有了各自的容器,能在各自的区域内显示内容。

标签

在HTML中使用

标签来建立一个容器。其使用形式如下!

其他标签

标签所包含的标签都隶属于同一个容器,当使用
标签设置属性样式(即style通用样式)时

整个容器都会显示此样式。

示例代码:

我是标题1

  

                

我纻蜞居是腭绠纩定标题2

                

我这里可以输入一个段落

第2行代码设置了标题标签,此标签并不在容器内,因此不受容器样式的影响。
第3行代码使用

标签创建了一个容器,并设置了背景颜色第4行和第5行代码分别创建了

标签,这两个标签都包含在同一个容器中。
保存代码文件并使用浏览器打开后的网页显示效果如图14-22所示,容器中的内容都被填充了背景颜色。

布局

当需要对网页页面进行布局时,需要设置

标签的相应属性。例如以下使用形式:

参数width和height:表示容器的宽度和高度,长度单位为px,即像素。参数foat:表示容器的位置,值可以为right(靠右侧)、left(靠左侧)、bottom(靠底部)、top(靠顶部)。示例代码:

        

我是标题1

        

 

                

我是标题2

                

                        

我这里可以输入一个段落

                        

python 办公 自动化

       

        

                

我是标题3

        

        

最后一段内容

        

该代码中包含3个

容器标签,其中第1个容器标签中包含另外两个容器标签。第3行代码创建了第1个容器(容器1),并设置容器的宽度为500px,高度为400px,背景颜色为antiquewhite.

第5行代码创建了第2个容器(容器2),第9行代码创建了第3个容器(容器3),这两个容器都隶属于第1个容器。且容器2的宽度为200px,高度为300px,位置为靠左侧。容器3由于位置是靠右侧,因此会紧靠容器2。容器2的右边还剩余大量空间,因此容器3位于容器2的右边。若容器2右边剩余空间不够容纳容器3,则会换到容器2下面的位置,并且超出容器1的边界。

保存代码文件并使用浏览器打开后的网页显示效果如图14-23所示。如果需要在容器2中显示内容,只需将对应标签嵌套在容器2的标签内即可。

创建表格

在HTML网页中能比较方便地创建表格,通常来说表格也可以作为网页页面的布局。本节将主要介绍如何在网页中创建表格。

表格标签

在HTML中可以使用表格标签

创建表格,其中表格的行数由标签的个数决定,表格的列数由标签中

标签的个数决定。

示例代码:

        

创建表格

        

                

                        

                        

                

               

                        

                        

                

        

第1行中的第1格 第1行中的第2格
第2行中的第1格 第2行中的第2格

新3行代码使用

标签创建了表格,其中属性border表示表格的边框样式,其数据类型为数值类型。

添加表格表头

如果需要在表格中插入表头,可以使用

属性colspan:表示表头单元格可横跨的列数。也可以使用rowspan属性,表示表头单元格可横跨的行数

        示例代码:

        

        

我是标题1

        

标签来实现。其使用形式如下

表格表头内容

                

                

                        

                        

                

                

                        

                        

                

        

我是表格表头内容
第1行中的第1格 第1行中的第2格
第2行中的第1格 第2行中的第2格

        

第4行代码设置表头的内容为“我是表格表头内容”,表头单元格可横跨的列数为2

添加表格标题

创建表格标题可以使用标签

来实现。其使用形式如下:

标题内容 标签必须位于标签内,且每个表格只能定义一个标题,默认标题位于表格的上方,且居中对齐。

示例代码:

添加表格标题

        

        

                

                

        

                

                

  

        

我是表格标题
第1行中的第1格 第1行中的第2格

        

第2行中的第1格 第2行中的第2格

第4行代码在表格中添加了表格标题标签

,且其内容为“我是表格标题”。如果不使用表格标题标签,而是用文本标签实现将内容设置在表格的上方,会导致表格无法跟着文本标签内容的移动而移动。

你可能感兴趣的:(html5,前端,html)