菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 91期前端基础-张建树-2023.4.12 [打印本页]

作者: 菁英91期张建树 时间: 2023-4-12 22:54
标题: 91期前端基础-张建树-2023.4.12

一、今日内容

表格标签的基本语法

1.<table></table>定义表格标签

2.<tr></tr>标签用于定义表格中的行（table row），要嵌套在<table></table>标签中

3.<td></td>标签用于定义行中的单元格（table data）, 必须嵌套在<tr></tr>标签中

4.<th></th>标签定义行中的内容是否是表头内容，表头的内容会加粗并且居中对齐

表格标签中的常用属性

1.align 规定表格的相对于周围元素的水平对齐方式

属性值：left、center、right

2.border 固定表格的是否拥有边框，默认是没有
属性值：1 代表有边框

3.width 固规定表格的宽度

属性值：像素值

4.height 规定表格的高度

属性值：像素值

5.cellpadding 控制单元格内容和单元格边框之间的距离（一般会设置为0）

属性值：像素值，默认是1像素

6.cellspacing：控制单元格和单元格之间的距离（一般会设置为0）

属性值：像素值，默认是2像素

例

· file:///C:/Users/86182/AppData/Local/Temp/msohtmlclip1/01/clip_image002.png

表格的结构标签

表格标签中，用<thead></thead>来确定表头区域、用<tbody></tbody>来确定表格的主体区域，这样能让表格的结构更加清晰，也方便后期使用JS来获取表格中的内容。

· 合并单元格

· 合并单元格的步骤

· 1、找到目标单元格

· 2、确定是跨行还是跨列合并

· 跨行合并 rowspan=“被合并单元格的个数”, 合并单元格的个数最少是2

· 跨列合并 colspan=“被合并单元格的个数”，合并单元格的个数最少是2

· 3、将被和合并的单元格删除掉

列表标签

无序列表

语法结构

· file:///C:/Users/86182/AppData/Local/Temp/msohtmlclip1/01/clip_image004.png

注意点：

1、无序列表的各个列表项之间是没有级别之分

2、<ul></ul>标签中只能嵌套<li></li>标签，不允许嵌套其他的标签

3、<li></li>相当于一个盒子或者容器，可以容纳所有的元素

4、无序列表有自己本身的样式后期可以通过CSS处理掉。
有序列表

语法结构

· file:///C:/Users/86182/AppData/Local/Temp/msohtmlclip1/01/clip_image006.png

注意点：

1、有序列表的各个列表项之间是有级别之分，会有数字标识

2、<ol></ol>标签中只能嵌套<li></li>标签，不允许嵌套其他的标签

3、<li></li>相当于一个盒子或者容器，可以容纳所有的元素

4、有序列表有自己本身的样式后期可以通过CSS处理掉

表单域

常用的属性

1.action

属性值：url地址，用于指定接受并处理表单内容的服务器地址。

2.method

属性值：get/post，用于指定表单数据传递的方式，取值为get/post

name

在页面中，如果有多个选项让用户去选择，还可以节约页面的空间，就能使用select标签定义下拉列表

option标签定义列表中的选项，一个select标签至少应该有一个option标签

如果要默认选中某个选项，就给option标签添加selected属性值，属性值为selected

· file:///C:/Users/86182/AppData/Local/Temp/msohtmlclip1/01/clip_image008.png

textarea表单元素

textarea文本域标签，一般用在评论区或者用户输入内容较多的时候（留

二、今日问题

今天上课比昨天效果好，最起码会的地方多一点，但是学起来感觉还是跟不上节奏

三、解决方案

目前还没有良】好的解决方案，很纠结

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)