html网页制作第六弹


div层标签

div层标签来为HTML文档内大块的内容提供结构和背景元素,就像一个容器一样可大可小,可长可短,可宽可短。HTML页面可中添加div的起始标签和结束标签之间的所有内容都是用来构成这个块的。其中所含有的元素特性由div的属性来控制或者是通过演示样式表格式化这个块来进行控制。


代码示例:

<html>

  <head>

   <title>

        My Page

   </title>

  </head>

  <body>

    <div style="background-color=red;height=58"></div>

<div style="background-color=yellow;height=58"></div>

<div style="background-color=black;height=58"></div>

</body>

</html>


<!--pre标签个人觉得一般用的很少,大家记得就可以-->

效果显示:



注意在设置样式属性值的时候因为已经存在了双引号,所以在设置值得时候就不要再加入双引号了。

table表格标签

table标签用于在HTML网页中创建一个表格,它包含表名和表格本身内容的代码,表格的基本单元是单元格,用<td></td>表示。


<tr></tr>代表行

<td></td>代表列


语法:

<table>

  <tr > <td></td><td></td></tr>

<tr> <td></td><td></td></tr>

</table>

代码示例:

<html>

  <head>

   <title>

        My Page

   </title>

  </head>

  <body> 

<table border="1">

  <tr >

<td>1</td>

<td>1</td>

</tr>

<tr>

 <td>1</td>

<td>1</td>

</tr>

</table>

</body>

</html>

效果显示:


大家注意,table中的border是社会表格的边框大小的,可以修改,可以不加。

在表格中可以设置coslpan属性和rowspan属性,是代表跨列和跨行的效果。大家可以设置试试

表格中也是可以设置高度和宽度,背景颜色,背景图片等属性的,大家都可以尝试一下。

table中的coslpan属性



代码示例:

<html>

<head>

<title>My Page</title>

</head>

<body>

<table border="1">

<tr>

 <td>手机充值</td>

  <td colspan="2">办公文具</td>

</tr>

<tr>

<td rowspan="2">各种卡的汇总</td>

<td>铅笔</td>

<td > 彩笔</td>

</tr>

<tr>

<td>打印</td>

<td>刻录</td>

</tr>

</table>

</body>

</html>


效果显示:


多尝试设置

在table标签中可以设置height="高度" widht="宽度"

以及表格中文字的对齐方式-align=“对其方式”


效果图:


这只是设置了高度宽度和对齐方式,大家尝试一下

那么今天的内容就到这里吧!大家明天见,每天学习一点,每天进步一点。

听雨HTML基础QQ交流群:577919336,大家有兴趣的可以进群交流一下。

或者有问题去听雨的博客反应:

博客地址:http://blog.csdn.net/dx15618816293  

附(因为听雨电脑的原因,可能有时很多尾标签的/没有敲上去,所以如果大家是直接复制我的源码过去的话可能无法显示,建议大家还是自己敲一敲。记住一般情况下标签都是有头标签和尾标签的。)



明天学习很重要的一个知识点 form表单标签
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值