第一范文网 - 专业文章范例文档资料分享平台

HTML入门教程xq

来源:用户分享 时间:2025/6/5 22:09:07 本文由loading 分享 下载这篇文档手机版
说明:文章内容仅供预览,部分内容可能不全,需要完整文档或者需要复制内容,请下载word后使用。下载word有问题请添加微信号:xxxxxxx或QQ:xxxxxx 处理(尽可能给您提供完整文档),感谢您的支持与谅解。

数据的 (也就是那些以行和列显但是示来体现意义的数据),因此,不要仅仅因为你想把某些内容放在一起而使用表格。 在因特网的初期(也就是几年以前),表格经常被用作网页布局的工具。但是, 如果你要控制文本和图像的显示,还有更酷的方式(提示:即 CSS),有关内容将在后面作详细介绍。 现在,该是你动手实践刚才所学内容的时候了,试试看设计几个具有不同尺寸、 属性和内容的表格。这也许要令你忙上几个小时。

第 11 课:表格的高级特性

“表格的高级特性”这一标题听起来可能感觉挺枯燥的。但从积极的一面看,当你精通表格后,就再也没有其他有关 HTML 的内容能难住你了。

表格还有哪些相关属性? 表格还有哪些相关属性? colspan 和 rowspan 这两个属性用于创建特殊的表格。 colspan 是“column span(跨列)”的缩写。colspan 属性用在 属性用在标签中,来指定单元格横向跨越的列数

例 1:

单元格 2 单元格 3 单元格 4

该例在浏览器中将显示如下: 单元格 1 单元格 2 单元格 3 单元格 4 该例通过把 colspan 设为“3”, 令所在单元格横跨了三列。如果我们将 colspan 设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行

占据相同的列数。

例 2:

单元格 2
单元格 3 单元格 4 单元格 5

该例在浏览器中将显示如下: 3单元格 4单元格 5 rowspan 单元格1 单元格 2 单元格 3单元格 4 rowspan 是什么?

可能你已经猜到,rowspan 的作用是指定单元格纵向跨越的行数 的作用是指定单元格纵向跨越的行数。

例 3:

单元格 2
单元格 3
单元格 4

该例在浏览器中将显示如下: 单元 单元格 2 格 3 单元格 4 1, rowspan 被设为“3”, 其 这表示该单元格必须跨越三行 (本 身一行,加上另外两行)。因此,单元格 1 和单元格 2 在同一行,而单元格 3 和单元格 4 形成独立的两行。

上例中的单元格

上例中的单元格 1,其 rowspan 被设为“3”,这表示该单

元格必须跨越三行(本 身一行,加上另外两行)。因此,单元格 1 和单元格 2 在同一行,而单元格 3 和单元格 4 形成独立的两行。 感觉有些迷糊?这确实比较复杂,而且容易出错。因此,在进行 HTML 编码之前, 你最好先在纸上把表格设计好。 明白了?那么你就自己试着用 colspan 和 rowspan 来创建几个表格吧。

页面布局(CSS)

第 12 课:页面布局(CSS)

如果能为页面实现理想的布局,岂不妙哉? 是啊,但如何实现呢?

你可以使用级联样式表( Sheets, CSS) 你可以使用级联样式表(Cascading Style Sheets,简称 CSS)为网站设计页面 布局。本课将对 CSS 作简单介绍。如需从头开始全面学习 CSS 知识,可以使用我布局们提供的 CSS 教程。因此,请将本课当作 CSS 的预备课。 CSS 是 HTML 的搭档。在编码过程中,它们发挥不同的作用:HTML 负责网页的具 HTML 体内容(结构),而 CSS 则修饰网页的表现形式(布局)。 正如第 7 课所讲, 可以用 style 属性将 CSS 内联到网页中。

例如,你可以采用下面的方法来设置文字的字体类型和大小: 例 1:

体;\

该例在浏览器中将显示如下: 这里的文字大小为 20 这里的文字字体为黑体

这里是文字大小为 20、采用黑体的文字

在上例中,我们使用了 style 属性来指定字体类型(font-family)和字体大小 (font-size)。在最后一段中,我们同时进行了字体类型与字体大小的设置,请 注意用分号将它们隔开。

页面布局似乎挺繁琐的?

CSS 有一个优越的特性,即它可以对页面布局进行集中管理 在每个标签里都使用 style 属性;相反,你可以只声明一次,浏览器便会按相应的页面布局效果来显示文本。

例 2:

我的第一个 CSS 页面