前端学习之HTML-2-CSDN博客

<table>
    <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>100分</td>
        <td>真棒</td>
    </tr>
</table>
table：表格整体，可用于包裹多个tr

tr：表格每行，可用于包裹td

td：表格单元格，可用于包裹内容

嵌套关系：table>tr>td

2.常见相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

3.表格标题和表头单元格标签

标签名	名称	说明
caption	表格大标题	默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，常用于表格第一行，默认内部文字加粗居中显示

注：caption标签书写在table标签内部

th标签书写在tr标签内部（用于替换td标签）

4.表格的结构标签

thead：表格头部

tbody：表格主体

tfoot：表格底部

注：表格结构标签内部用于包裹tr标签

可以省略

5.合并单元格

跨行合并

跨列合并

1.明确合并哪几个单元格

2.左上原则

上下合并：只保留最上面的，删除其他

左右合并：只保留最左面的，删除其他

3.给保留的单元格设置：

rowspan=跨行合并单元格个数

colspan=跨列合并单元格个数

注：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并

四、表单标签（登录注册搜索）

1.input系列标签

①type属性

<input type="text">

注：默认不换行

②占位符

<input placeholder="在这里写提示语">

③单选框

type属性值：radio

name：分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中

checked：默认选中

④文件选择

type属性值：file

multiple：多文件选择

⑤按钮

2.button按钮标签

3.select下拉菜单标签

标签组成：

select：下拉菜单的整体

option：下拉菜单的每一项

selected：下拉菜单的默认选中

4.textarea文本域标签

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数

注：右下角可以拖拽改变大小

5.label标签（点文字也可以选择）

方法1：

1.使用label标签把内容包裹起来

2.在表单标签中添加id属性

3.在label标签的for属性中设置对应的id属性值

方法2：

1.直接使用label标签把内容和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

前端学习之HTML-2

一、链接标签

二、列表标签

1.无序列表

2.有序列表

3.自定义列表

三、表格标签

1.基本标签