写点什么

HTML 学习笔记

作者:虾仁疙瘩汤
  • 2022-10-24
    山东
  • 本文字数:1660 字

    阅读完需:约 5 分钟

一、表格


<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 属性:背景颜色


二、svgsvg 标签是 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 个以上的坐标,一般用于折现的表现。

发布于: 刚刚阅读数: 5
用户头像

还未添加个人签名 2022-10-23 加入

还未添加个人简介

评论

发布
暂无评论
HTML学习笔记_html_虾仁疙瘩汤_InfoQ写作社区