好久不见，兄弟们。我又回来继续更blog了！
博主主页：GUIDM
收入专栏：零基础HTML学习
文章来源地址https://www.toymoban.com/news/detail-410526.html
一、表格
<table> <tr> <td></td> </tr> </table>tr:行 td：列
<tr> <th></th> </tr>th:表头单元格，内部文本加粗并居中显示。
表格<table>属性
border：定义线条的粗细
width：定义表格的总宽度
height：定义表格的总高度
cellspacing：定义单元格之间的距离
cellpadding：定义单元格边框和文本之间的距离
align：定义表格在页面中水平方向上的对齐方式
bgcolor：修饰表格的背景颜色
bordercolor：修饰表格的边框颜色
想让单元格之间的距离，或者单元格与文本之间的距离变大，调整cellspacing和cellpadding即可。
表格行<tr>属性
height：设置表格行的高度（总高度不变）
bgcolor：背景颜色（一整行）
align：设置tr内部所有单元格内容的水平对齐方式
valign：设置tr内部所有单元格内容的垂直对齐方式
tr无宽度属性
单元格中默认的对齐方式：水平左侧对齐，垂直居中对齐。
单元格<td>属性
width：单元格宽度
height：单元格高度
bgcolor：单元格背景色
align：单元格里面内容的水平对齐方式
valign：单元格里面内容的垂直对齐方式
调整任何单元格的高度/宽度，都会影响该单元格所有列的所有单元格的高度/宽度。
清除单元格之间的距离/单元格跟文本之间的距离：
<table border="1" width="500px" height="150px" cellspacing='0' cellpadding='0' align="center" >
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>单元格合并
rowspan：合并行
colspan：合并列
可查看：合并案例
这个案例可以很好的了解如何使用合并
表格分组
表格标题：<caption></caption> 一般放在第一个<tr></tr>标签之前。
表格头：<thead></thead>
表格体：<tbody></tbody>
表格尾：<tfoot></tfoot>
表格如果没有使用任何分组标签，浏览器在渲染时，会把table中所有未分组的tr放在一个tbody标签里。
一个表格只允许使用一个thead和一个tfoot，但允许使用多个tbody。
列分组标签：
<colgroup></colgroup>：把一列或连续的几列分成一组，经常用于表格一整列单元格的颜色。
span属性：多少列为一组
bgcolor属性：背景颜色
二、svg
svg标签是svg图形的一个容器（绘制图形的画布）。
<svg></svg>
重要属性：
width：定义画布的宽度
height：定义画布的高度
形状元素：
- 矩形<rect/>
width:定义矩形的宽度
height：定义矩形的高度
fill：填充颜色
stroke-width：边框宽度
stroke：边框颜色
x：左边位置
y：顶部位置
fill-opacity：填充颜色的不透明度（0-1）
stroke-opacity：描边颜色的不透明度（0-1）
opacity：整个元素的不透明度（0-1）
<svg width="500px" height="500px">
<rect width="300px" height="200px" fill="green" stroke-width="2px" stroke="black" x="50" y='20'/>
</svg>- 圆角矩形
通过定义rx，ry属性，同值为圆角，不同值为椭圆。
<svg width="500px" height="500px">
<rect width="300px" height="200px" fill="green" rx="50" ry="50"s/>
</svg>svg width="500px" height="500px">
<rect width="300px" height="200px" fill="green" rx="50" ry="70"/>
</svg>- 圆<circle/>
cx：定义圆形中心的x坐标
cy：定义圆形中心的y坐标
r：定义圆形的半径
stroke：边框颜色
stroke-width：边框宽度
fill：背景色填充
<svg width="500px" height="500px">
<circle cx='100' cy='100' r='50' fill="yellow"/>
</svg>- 椭圆<ellipse/>
cx:圆心x坐标
cy：圆心y坐标
rx：水平半径
ry：水平半径
stroke：边框颜色
stroke-width：边框宽度
fill：背景色填充
<svg width="500px" height="500px">
<ellipse cx='100' cy='100' rx='50' ry="60" fill="green"/>
</svg>- 线条<line/>
x1：起点x坐标
x2：结束x坐标
y1：起点y坐标
y2：结束y坐标
- 多边形 <polygon/>
points：图形每个点的坐标，至少三对坐标，每对坐标用空格隔开。
<svg width="500px" height="500px">
<polygon points="200,20 250,190 160,210"/>
</svg>- 多线条<polyline/>
points:2个以上的坐标，一般用于折现的表现。
文章来源：https://www.toymoban.com/news/detail-410526.html
到了这里，关于零基础html学习-第五期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
