HTML5基础(二) 个人笔记

时间:2021-12-14 14:02:27

HTML5基本语法

1.表格

table
表格的基本属性有:
1.border 边框。
2.width 宽度。
3.height 高度。
4.align 对齐方式。
5.bgcolor 背景颜色。
6.background 背景图片。
7.cellspacing 单元格之间的间距。
8.cellpadding 单元格文本和单元格边框的距离。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--boeder :表格的边框
width:宽度
height:高度
cellspaceing:单元格之间的距离
cellpadding:单元格文本与单元格边框之间的距离
align:对齐方式
bgcolor:背景色
background:背景颜色
bordercolor:边框颜色-->

<table border="1"width="200px"height="80px"cellspacing="10"cellpadding="1" background="../img/15438-106.jpg">
<tr>
<th>啦啦啦</th>
<td>11</td>

<td>22</td>
<td>33</td>
</tr>
<tr>
<th>呦呦呦</th>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
</table>
</body>
</html>

HTML5基础(二) 个人笔记

2.行和列


行和列的属性有如下几个:
1.width 宽度。
2.height 高度。
3.bgcolor 背景颜色。
4.align 对齐方式(水平方向)
5.valign 对齐方式(垂直方向)
6.nowarp 文本不换行
7.colspan=”n” 跨n列。
8.rowspan=”n” 跨n行。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨行,跨列</title>
</head>
<body>
<table border="1" width="300px" height="60px">
<tr>
<td colspan="4" align="center">电子产品类</td>

</tr>
<tr>
<td colspan="2" align="center">家电类</td>
<td colspan="2" align="center">家具类</td>
</tr>
<tr>
<td colspan="3" align="center">文具类</td>
<td></td>
</tr>
<tr>
<td>21</td>
<td>21</td>
<td>23</td>
<td>31</td>
</tr>
</table>
<table border="1" width="300px" height="100px">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
</table>
<table border="1">
<tr>
<th colspan="3"><h1>学生成绩</h1></th>

</tr>
<tr>
<td rowspan="2"><h2>张三</h2></td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>语文</td>
<td>100</td>
</tr>
<table border="1">
<tr>
<td colspan="3" align="center">杰瑞</td>

</tr>
<tr>
<td>html5</td>
<td rowspan="2">android</td>
<td>ios</td>
</tr>
<tr>
<td>html5</td>
<td>ios</td>
</tr>
</table>
</table>
<table border="1" width="180px",height="120px">
<tr>
<td rowspan="6">
<img src="../img/15438-106.jpg" alt="" width="30px" height="60px">
</td>
<td rowspan="3"></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>

<td></td>
</tr>
</table>
</body>
</html>





结果如下

电子产品类
家电类 家具类
文具类
21 21 23 31
张三 语文 100
语文 100
张三 语文 100
语文 100

学生成绩

张三

语文 100
语文 100
张三 语文 100
语文 100
杰瑞
html5 android ios
html5 ios

HTML5基础(二) 个人笔记


3.结构化的表格标签


属性有如下几个:
1.caption:在表格外部加一个标题。
2.thead :表示头部执行代码。
3.tbody:表示内容执行的代码。
4.tfoot:表示尾部执行的顺序。
代码如下:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构化的表格标签</title>
</head>
<body boder="1" width="300px">
<!--
<caption></caption> 加一个表格标题
<thead></thead> 表格的头部区域
<tboday></tboday> 表格的内容区域
<tfoot></tfoot>
<colgroup></colgroup>
-->

<table border="1" width="100px">
<caption>标题</caption>
<colgroup>
<col style="background-color: red">
<col span="2" style="background-color: red">
<!--<col style="background-color: red">-->
</colgroup>
<thead>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</thead>


<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

实现如下:
HTML5基础(二) 个人笔记