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

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

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

上节回顾

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

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

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

body的属性

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

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

设置背景颜色，属性为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的导航页面。

例

一个简单的 HTML 表格，包含两列两行：

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

浏览器支持

所有主流浏览器都支持 <tr> 标签。

标签定义及使用说明

<tr> 标签定义 HTML 表格中的行。

一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。

HTML 4.01 与 HTML5之间的差异

在 HTML 5 中，不支持 <tr> 标签在 HTML 4.01 中的任何属性。

属性

属性	值	描述
align	rightleftcenterjustifychar	HTML5 不支持。定义表格行的内容对齐方式。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	HTML5 不支持。HTML 4.01 已废弃。规定表格行的背景颜色。
char	character	HTML5 不支持。规定根据哪个字符来进行文本对齐。
charoff	number	HTML5 不支持。规定第一个对齐字符的偏移量。
valign	topmiddlebottombaseline	HTML5 不支持。规定表格行中内容的垂直对齐方式。

全局属性

<tr> 标签支持 HTML 的全局属性。

事件属性

<tr> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

<!DOCTYPE html>

<html>

<head>

    <title>html5添加音乐</title>

    <meta charset="utf-8">

<!--embed标签写在<head>里面的title标签下-->
   

<embed src="C:\Users\Administrator\Desktop\告白气球.mp3" hidden="flase" autostart="true" loop="true">


<!-- 说明：

1、src：文件路径。

2、hidden="true"表示隐藏音乐播放按钮，相反使用hidden="false"表示开启音乐播放按钮。

3、autostart="true" 表示是打开网页加载完后自动播放。

4、loop="true"表示 循环播放 如仅想播放一次则为：loop="false" -->

</head>

<body>

<audio autoplay="autoplay" loop="loop" preload="auto" controls="controls"

            src="C:\Users\Administrator\Desktop\告白气球.mp3">       

</audio>

<!-- 说明：

1、autoplay="autoplay"，则背景音乐将在音网页打开后就自动马上播放。

2、controls="controls"，则为了在页面内显示显示控件，如播放按钮。

3、"loop="loop"，则是为了使背景音乐重复播放。

4、preload="auto"，则音频在页面加载的同时进行加载，并预备播放。

5、src=""，即是在""内加入背景音乐的保存路径，如：src=""。

注：若是想播放按钮隐藏，则使用以下语句：

直接使用css 的display控制audio标签的显示： -->

<style type="text/css">

 audio{

         display: none;

     }

</style>

</body>

</html>

在线咨询

上一篇：手把手教你用Markdown写一份高质量的简历
下一篇：html文件的操作-pandas

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

您的项目需求