整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

网页前端基础教程06-HTML中body属性和表格详解,收藏

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容:这是HTML课程的第六课,在这节课程中主要讲解一下HTML中body的属性,以及表格元素。希望大家根据这个教程可以学习一下。


上节回顾

在上节中主要讲解了超链接和图片的知识点。上节请戳->网页前端开发基础教程05-网页中插入图片和超链接,界面更绚丽

当然讲解的并不是很全面,只是把常用的HTML属性进行讲解了出来,在后期会进行做项目,到时候,直接回顾一下,马上就能搞懂了。这次直接讲解一下HTML中的body属性以及表格元素。

PS:其实HTML这个东西很简单,只需要根据对应的元素,学会标签指的是什么就可以了,就和谍战片中中的密码本一样,按照密码本书写对应的格式,写上去就能直接显示了。只是学会这种标签的样式而已。自己学习HTML也是可以的。最重要的还是进行实践。


body的属性

body是整个页面的主体元素,我们把内容写入到body元素中,那应该如何设置主体的背景颜色、背景图片呢?

下面就一一来讲解一下。使用Sublime创建一个HTML文件。

  1. 设置背景颜色,属性为bgcolor,值为RGB颜色或者颜色的英文单词。

2.背景图片设置,背景图片照样可以用路径的方式写入到HTML文件中。属性为background例如:

当然body的属性值,比较少,而且几乎不太用,在以后的时候要使用CSS代替这些东西。


表格

表格在网页中还是很常用的,比如在按照每行数据进行展示的时候,就需要用到表格啦。所以就需要学习一下表格应该如何写。

OK,我们先建立一个最简单的学生信息表:

其中table(表格)、tr(一行)、(一个单元格)。这三个时表格最基本的元素。并依次有个上下级嵌套的关系。


表格中的属性

表格中有很多属性,正是因为有了这些属性,才让表格无比强大。比如在老早的时候,风靡一时的Hao123就是使用表格进行制作的。OK在下节中咱们也会自己制作一个模仿的Hao123第一版,通过table制作。

border

border是边框的意思,在以后的学习中你肯定会对这个单词不陌生,因为这个单词真的是太常用了。border有两个值分别为0和1.0表示“没有边框”,1表示“有边框”。

cellpadding:

这个表示的是表格的内边距,也就是表格的边框到里面的内容的距离。

数值越大,单元格的表框到内容的距离越大。

cellspacing

这是单元格和单元格之间的距离,这个值越大,单元格之间的距离越大。

align:

align表示的是单元格的对齐方式,对里面的内容进行水平的对齐,其值有三个分别为right(右)、center(居中)、left(左)。

colspan、rowspan:

这是两个属性,分别表示行的合并和列的合并。其值为数字,表示要合并的单元格:

还有其他几个属性例如:valign、bgcolor、width、height等在前课程中也讲过了。


每天一个知识点,带你迈向软件编程大神,一起努力吧。下节课程,我们一起做一个Hao123的导航页面。

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容:这是HTML课程的第六课,在这节课程中主要讲解一下HTML中body的属性,以及表格元素。希望大家根据这个教程可以学习一下。


上节回顾

在上节中主要讲解了超链接和图片的知识点。上节请戳->网页前端开发基础教程05-网页中插入图片和超链接,界面更绚丽

当然讲解的并不是很全面,只是把常用的HTML属性进行讲解了出来,在后期会进行做项目,到时候,直接回顾一下,马上就能搞懂了。这次直接讲解一下HTML中的body属性以及表格元素。

PS:其实HTML这个东西很简单,只需要根据对应的元素,学会标签指的是什么就可以了,就和谍战片中中的密码本一样,按照密码本书写对应的格式,写上去就能直接显示了。只是学会这种标签的样式而已。自己学习HTML也是可以的。最重要的还是进行实践。


body的属性

body是整个页面的主体元素,我们把内容写入到body元素中,那应该如何设置主体的背景颜色、背景图片呢?

下面就一一来讲解一下。使用Sublime创建一个HTML文件。

  1. 设置背景颜色,属性为bgcolor,值为RGB颜色或者颜色的英文单词。

2.背景图片设置,背景图片照样可以用路径的方式写入到HTML文件中。属性为background例如:

当然body的属性值,比较少,而且几乎不太用,在以后的时候要使用CSS代替这些东西。


表格

表格在网页中还是很常用的,比如在按照每行数据进行展示的时候,就需要用到表格啦。所以就需要学习一下表格应该如何写。

OK,我们先建立一个最简单的学生信息表:

其中table(表格)、tr(一行)、(一个单元格)。这三个时表格最基本的元素。并依次有个上下级嵌套的关系。


表格中的属性

表格中有很多属性,正是因为有了这些属性,才让表格无比强大。比如在老早的时候,风靡一时的Hao123就是使用表格进行制作的。OK在下节中咱们也会自己制作一个模仿的Hao123第一版,通过table制作。

border

border是边框的意思,在以后的学习中你肯定会对这个单词不陌生,因为这个单词真的是太常用了。border有两个值分别为0和1.0表示“没有边框”,1表示“有边框”。

cellpadding:

这个表示的是表格的内边距,也就是表格的边框到里面的内容的距离。

数值越大,单元格的表框到内容的距离越大。

cellspacing

这是单元格和单元格之间的距离,这个值越大,单元格之间的距离越大。

align:

align表示的是单元格的对齐方式,对里面的内容进行水平的对齐,其值有三个分别为right(右)、center(居中)、left(左)。

colspan、rowspan:

这是两个属性,分别表示行的合并和列的合并。其值为数字,表示要合并的单元格:

还有其他几个属性例如:valign、bgcolor、width、height等在前课程中也讲过了。


每天一个知识点,带你迈向软件编程大神,一起努力吧。下节课程,我们一起做一个Hao123的导航页面。


ody部分

body 元素是html文档的二级标签,body标签负责显示内容。

body 元素是定义文档的主体。body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。),表示网页的主体部分,也就是用户可以看到的内容,可以包含文本、图片、音频、视频等各种内容!


<!DOCTYPE html>
<!--html是html文档的根元素-->
<html >
    <!--head定义文档标题等属性,用户不可见-->
    <head>
        <!--网页使用的字符集-->
        <meta charset="utf-8">
        <!--title设置网页的标题-->
        <title>我的第一个网页</title>
    </head>
    <!--body显示给用户的内容-->
    <body>
        <!--标题标签-->
        <h1>一级标题</h1>
        <!--段落标签-->
        <p>段落,我是一个男孩,是网页的作者。</p>
        <!--表格标签-->
        <table>
            <caption>我是表头</caption>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>1</td>
                <td>前端男孩</td>
                <td>20</td>
            </tr>
        </table>
        <!--图片标签-->
        <img src="test1.png" >
    </body>
</html>



好了本节全部内容全部结束了,希望我准备的内容对你有所帮助

你的支持是我的最大动力,若觉得我的教程还可以对你有帮助为我点赞加关注!谢谢!