HTML:表格和框架
居靖
已于 2023-04-05 20:08:29 修改
阅读量1.1k
收藏
6
点赞数
文章标签：
html
于 2023-03-24 17:44:49 首次发布
版权声明：本文为博主原创文章，遵循
CC 4.0 BY-SA
版权协议，转载请附上原文出处链接和本声明。
本文链接：
https://blog.csdn.net/m0_73886399/article/details/129748619
版权
本文详细介绍了HTML表格的结构，包括表格标签如
、
、
及其属性，如align、valign、rowspan、colspan等。同时，讲解了表格的行分组、列分组，以及如何使用
和
创建框架集和内联框架
，并涉及框架之间的链接方法。 </div> <span>摘要由CSDN通过智能技术生成</span> </div> </div> <article class="baidu_pl"> <div id="article_content" class="article_content clearfix"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"> <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-044f2cf1dc.css"> <div id="content_views" class="htmledit_views"> <h2 style="margin-left:0px;text-align:justify;">表格：</h2> <p style="margin-left:0;text-align:justify;">表格标签：<table></p> <p style="margin-left:0;text-align:justify;">语法：</p> <p style="margin-left:0;text-align:justify;"><table></p> <p style="margin-left:0;text-align:justify;"> <tr> //一行可以包括多个单元格</p> <p style="margin-left:0;text-align:justify;"> <td>单元格内容</td></p> <p style="margin-left:0;text-align:justify;"> <td>单元格内容</td></p> <p style="margin-left:0;text-align:justify;"> …..</p> <p style="margin-left:0;text-align:justify;"></tr> 更多行</p> <p style="margin-left:0;text-align:justify;"></table></p> <p style="margin-left:0;text-align:justify;">其中：<br /> 表格的各组成部分均包含在<table>标签之内；<br /> 单元格是表格的基本元素，使用<td>标签表示；<br /> 行是表格的水平元素，使用<tr>标签表示；<br /> 一行可以由一个或多个单元格构成，而一个表格可以由一行或多行构成。</p> <p style="margin-left:0;text-align:center;">表2-1表格常用的属性</p> <table align="center" border="1" cellspacing="0" style="width:486.7pt;"><tbody><tr><td style="border-color:#000000;vertical-align:top;width:177.4pt;"> <p style="margin-left:0;text-align:justify;">属性</p> </td><td style="border-color:#000000;vertical-align:top;width:154.65pt;"> <p style="margin-left:0;text-align:justify;">取值</p> </td><td style="border-color:#000000;vertical-align:top;width:154.65pt;"> <p style="margin-left:0;text-align:justify;">描述</p> </td></tr><tr><td style="border-color:#000000;width:177.4pt;"> <p style="margin-left:0;text-align:center;">align</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">left、center、right</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">设置表格相对周围元素的对齐方式</p> </td></tr><tr><td style="border-color:#000000;width:177.4pt;"> <p style="margin-left:0;text-align:center;">bgcolor</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">rgb(x,x,x) #xxxx colorName</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">设置表格的背景颜色</p> </td></tr><tr><td style="border-color:#000000;width:177.4pt;"> <p style="margin-left:0;text-align:center;">border</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">像素</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">设置表格边框的宽度</p> </td></tr><tr><td style="border-color:#000000;width:177.4pt;"> <p style="margin-left:0;text-align:center;">cellpadding</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">像素或百分比</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">设置单元格与其内容之间的距离</p> </td></tr><tr><td style="border-color:#000000;width:177.4pt;"> <p style="margin-left:0;text-align:center;">cellspacing</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">像素或百分比</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">设置单元格之间的距离</p> </td></tr><tr><td style="border-color:#000000;width:177.4pt;"> <p style="margin-left:0;text-align:center;">height</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">像素或百分比</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">设置表格的高度</p> </td></tr><tr><td style="border-color:#000000;width:177.4pt;"> <p style="margin-left:0;text-align:center;">width</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">像素或百分比</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">设置表格的宽度</p> </td></tr><tr><td style="border-color:#000000;width:177.4pt;"> <p style="margin-left:0;text-align:center;">rules</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">none、groups、rows、cols、all</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">设置表格中的表格线显示方式，默认是all<br /> </p> </td></tr><tr><td style="border-color:#000000;width:177.4pt;"> <p style="margin-left:0;text-align:center;">frame</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">void、above、below、hsides、vsides、lhs、rhs、box、border</p> </td><td style="width:154.65pt;"> <p style="margin-left:0;text-align:justify;">设置表格外部边框的显示方式</p> </td></tr></tbody></table> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="background-color:#ffffff;"><span style="color:#4d4d4d;"> none</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">（不显示）、</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">groups</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">（显示分组）、</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">rows</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">（显示行）、</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">cols</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">（显示列）、</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">all</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">（行和列都显示）（设置表格内的表格线表示方式，默认是</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">all</span></span><span style="background-color:#ffffff;"><span style="color:#4d4d4d;">）</span></span></span></p> <p style="margin-left:0;text-align:center;">frame属性列表</p> <table border="1" cellspacing="0"><tbody><tr><td style="border-color:#000000;vertical-align:top;width:142pt;"> <p style="margin-left:0;text-align:justify;">属性</p> </td><td style="border-color:#000000;vertical-align:top;width:10cm;"> <p style="margin-left:0;text-align:justify;">描述</p> </td></tr><tr><td style="border-color:#000000;vertical-align:top;width:142pt;"> <p style="margin-left:0;text-align:justify;">void</p> </td><td style="vertical-align:top;width:10cm;"> <p style="margin-left:0;text-align:justify;">不显示边框</p> </td></tr><tr><td style="border-color:#000000;vertical-align:top;width:142pt;"> <p style="margin-left:0;text-align:justify;">above</p> </td><td style="vertical-align:top;width:10cm;"> <p style="margin-left:0;text-align:justify;">只显示顶部边框</p> </td></tr><tr><td style="border-color:#000000;vertical-align:top;width:142pt;"> <p style="margin-left:0;text-align:justify;">below</p> </td><td style="vertical-align:top;width:10cm;"> <p style="margin-left:0;text-align:justify;">只显示底部边框</p> </td></tr><tr><td style="border-color:#000000;vertical-align:top;width:142pt;"> <p style="margin-left:0;text-align:justify;">hsides</p> </td><td style="vertical-align:top;width:10cm;"> <p style="margin-left:0;text-align:justify;">显示顶部和底部边框</p> </td></tr><tr><td style="border-color:#000000;vertical-align:top;width:142pt;"> <p style="margin-left:0;text-align:justify;">vsides</p> </td><td style="vertical-align:top;width:10cm;"> <p style="margin-left:0;text-align:justify;">只显示左右两侧边框</p> </td></tr><tr><td style="border-color:#000000;vertical-align:top;width:142pt;"> <p style="margin-left:0;text-align:justify;">Ihs</p> </td><td style="vertical-align:top;width:10cm;"> <p style="margin-left:0;text-align:justify;">只显示左侧边框</p> </td></tr><tr><td style="border-color:#000000;vertical-align:top;width:142pt;"> <p style="margin-left:0;text-align:justify;">rhs</p> </td><td style="vertical-align:top;width:10cm;"> <p style="margin-left:0;text-align:justify;">只显示右侧边框</p> </td></tr><tr><td style="border-color:#000000;vertical-align:top;width:142pt;"> <p style="margin-left:0;text-align:justify;">box或border</p> </td><td style="vertical-align:top;width:10cm;"> <p style="margin-left:0;text-align:justify;">显示表格的所有边框（不指定frame属性时的默认边框）</p> </td></tr></tbody></table> <h2 style="margin-left:0px;text-align:justify;">单元格标签：</h2> <p style="margin-left:0;text-align:justify;"> 单元格是表的基本元素，可以通过<td>或<th>标签来创建单元格。<td>标签多用来包含表格中的数据部分，而<th>标签用来包含表格的标题部分。</p> <p style="margin-left:0;text-align:justify;">表头单元格：<th> </th>.</p> <p style="margin-left:0;text-align:center;">单元格的属性</p> <table border="1" cellspacing="0"><tbody><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0;text-align:justify;">属性</p> </td><td style="border-color:#000000;width:10cm;"> <p style="margin-left:0;text-align:justify;">描述</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0;text-align:justify;">align</p> </td><td style="width:10cm;"> <p style="margin-left:0;text-align:justify;">设置单元格内容的水平对齐方式：left、center、right、justify</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0;text-align:justify;">valign</p> </td><td style="width:10cm;"> <p style="margin-left:0;text-align:justify;">设置单元格内容的垂直对齐方式：top、middle、bottom、baseline</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0;text-align:justify;">rowspan(行)</p> </td><td style="width:10cm;"> <p style="margin-left:0;text-align:justify;">设置单元格跨越的行数</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0;text-align:justify;">colspan</p> </td><td style="width:10cm;"> <p style="margin-left:0;text-align:justify;">设置单元格跨越的列数</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0;text-align:justify;">scope</p> </td><td style="width:10cm;"> <p style="margin-left:0;text-align:justify;">定义将表头数据与单元数据相关联的方法</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0;text-align:justify;">width</p> </td><td style="width:10cm;"> <p style="margin-left:0;text-align:justify;">设置单元格的宽度</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0;text-align:justify;">height</p> </td><td style="width:10cm;"> <p style="margin-left:0;text-align:justify;">设置单元格的高度</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0;text-align:justify;">bgcolor</p> </td><td style="width:10cm;"> <p style="margin-left:0;text-align:justify;">设置单元格的背景颜色</p> </td></tr></tbody></table> <p style="margin-left:0;text-align:justify;"> 单元格的水平跨度colspan(又称列跨度)是指表格内的某个单元格在水平方向上跨越单元格的列数；而垂直跨度rowspan(又称为行跨度)是单元格在垂直方向上所跨的行数。</p> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#4d4d4d;"> left:</span><span style="color:#4d4d4d;">内容左对齐</span><span style="color:#4d4d4d;"> center:</span><span style="color:#4d4d4d;">内容居中对齐</span><span style="color:#4d4d4d;"> right</span><span style="color:#4d4d4d;">内容右对齐</span><span style="color:#4d4d4d;"> justify:</span><span style="color:#4d4d4d;">内容两端对齐</span><span style="background-color:#ffffff;"><span style="color:#2d3037;">top</span></span><span style="background-color:#ffffff;"><span style="color:#2d3037;">（对内容进行上对齐）、</span></span><span style="background-color:#ffffff;"><span style="color:#2d3037;">bottom</span></span><span style="background-color:#ffffff;"><span style="color:#2d3037;">（对内容进行下对齐）、</span></span><span style="background-color:#ffffff;"><span style="color:#2d3037;">middle</span></span><span style="background-color:#ffffff;"><span style="color:#2d3037;">（对内容进行居中对齐）、</span></span><span style="background-color:#ffffff;"><span style="color:#2d3037;">baseline</span></span><span style="background-color:#ffffff;"><span style="color:#2d3037;">（与基线对齐）。</span></span><br /><span style="color:#000000;"> 标签<th>用来定义表格头部信息，多用于表格的第一行或第一列，其内容通常使用粗体并水平居中显示。</span></span></p> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;"> 大部分浏览器都会忽略空白单元格（即<td>、</td>之间没有内容），因此在页面中显示空白单元格式时，需要在单元格标签内加入一个空白实体引用“&nbsp;”(即<td>&nbsp;</td>),以确保浏览器能正确显示该单元格。</span></span><br /><span style="background-color:#ffffff;"><span style="color:#000000;">行标签：</span></span></p> <p style="margin-left:0cm;text-align:center;"><span style="background-color:#ffffff;"><span style="color:#000000;">行标签常用的属性</span></span></p> <table border="1" cellspacing="0" style="margin-left:-8.8pt;width:0px;"><tbody><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;text-align:center;">属性</p> </td><td style="border-color:#000000;width:293.2pt;"> <p style="text-align:center;"></p> <p style="margin-left:0cm;text-align:center;">描述</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;text-align:center;">align</p> </td><td style="width:293.2pt;"> <p style="margin-left:0cm;text-align:center;">设置单元格内容水平对齐方式：left、center、right、justify</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;text-align:center;">valign</p> </td><td style="width:293.2pt;"> <p style="margin-left:0cm;text-align:center;">设置单元格内容垂直对齐方式：top、middle、bottom、baseline</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;text-align:center;">bgcolor</p> </td><td style="width:293.2pt;"> <p style="margin-left:0cm;text-align:center;">设置单元格的背景颜色</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;text-align:center;">bordercolor</p> </td><td style="width:293.2pt;"> <p style="margin-left:0cm;text-align:center;">设置行内单元格的边框颜色</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;text-align:center;">bordercolordark</p> </td><td style="width:293.2pt;"> <p style="margin-left:0cm;text-align:center;">设置行内单元格的左上边框颜色</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;text-align:center;">bordercolorlight</p> </td><td style="width:293.2pt;"> <p style="margin-left:0cm;text-align:center;">设置行内单元格的右下边框颜色</p> </td></tr></tbody></table> <p style="margin-left:0;"><br /><span style="background-color:#ffffff;"><span style="color:#000000;">表格的行分组：</span></span></p> <p style="margin-left:0;"><span style="background-color:#ffffff;"><span style="color:#000000;">使用<thead>、<tfoot>、<tbody>、<caption>标签可以对表格进行横向分组：<thead>标签定义表头，用于创建表格的头部信息；</span></span></p> <p style="margin-left:0;"><span style="background-color:#ffffff;"><span style="color:#000000;"><tfoot></span><span style="color:#000000;">标签定义表尾，用于创建表格的脚注部分；</span></span></p> <p style="margin-left:0;"><span style="background-color:#ffffff;"><span style="color:#000000;"><tbody></span><span style="color:#000000;">标签定义表格主体，用于表示表格的主体部分；</span></span></p> <p style="margin-left:0;"><span style="background-color:#ffffff;"><span style="color:#000000;"><caption></span><span style="color:#000000;">标签定义表格标题，显示在整个表格的上方。<br /> 表格可以包含多个<tbody>标签，用于对表格主体部分的数据进行横向分组；而<br /> <thead>和<tfoot>标签在表格中只能出现一次。</span></span></p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body bgcolor="white"> <!-- 表格的行分组 --> <table width="400" border="1" rules="groups"> <caption>表格标题</caption> <thead> <!--头部--> <tr> <th>表格头部</th> <th>表格头部</th> <th>表格头部</th> <th>表格头部</th> </tr> </thead> <tbody> <!--主体--> <tr> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> <td>表格内容</td> </tr> </tbody> <tfoot> <!--尾部--> <tr> <td></td> <td></td> <td>表格内容</td> <td>表格内容</td> </tr> </tfoot> </table> </body> </html></code></pre> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;">表格的列分组：<colgroup>标签可以将表格按列进行分组。</span></span></p> <p style="margin-left:0cm;text-align:center;"><span style="background-color:#ffffff;"><span style="color:#000000;"><colgroup></span><span style="color:#000000;">标签的属性</span></span></p> <table border="1" cellspacing="0"><tbody><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;text-align:center;">属性</p> </td><td style="border-color:#000000;width:10cm;"> <p style="margin-left:0cm;text-align:center;">描述</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">align</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设置单元格内容水平对齐方式：left、center、right、justify</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">valign</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设置单元格内容垂直对齐方式：top、middle、bottom、baseline</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">span</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">规定该列组应该横跨的列数，默认值是1</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">width</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设定列组合的宽度</p> </td></tr></tbody></table> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;">表格的嵌套：</span></span></p> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;">在嵌套表格时，内部表格<table>应该位于外层表格的<td></td>标签之间，作为该单元格的内容部分。</span></span></p> <h2><strong>框架：</strong></h2> <p><br /><span style="background-color:#ffffff;"><span style="color:#000000;"> 使用框架集标签<frameset>来划分页面的框架，使用属性rows(或cols)说明框架的行数（或列数）以及所占窗口的比例。<br /> 【语法】<br /> <frameset rows="行高度所占窗口的像素或比例…”cols="列宽度所占窗口的像素或比例，.”><br /> <frame src="..."/></span></span></p> <p style="margin-left:33pt;"><span style="background-color:#ffffff;"><span style="color:#000000;">…</span></span></p> <p style="margin-left:21pt;"><span style="background-color:#ffffff;"><span style="color:#000000;"></frameset></span><br /><span style="color:#000000;">其中：<br /> 一个<frameset>框架集可以包含多个<frame>框架窗口，具有rows和cols属性。</span></span></p> <p style="margin-left:21pt;"><span style="background-color:#ffffff;"><span style="color:#000000;"> rows</span><span style="color:#000000;">属性用于设置框架中包含的行数，以及各行高度占窗口的像素或比例；当参数个数是两个或两个以上时，参数之间需用逗号(，)隔开。<br /> cols属性用于设置框架中包含的列数，以及各列宽度占窗口的像素或比例；当参数个数是两个或两个以上时，参数之间需用逗号(，)隔开。 </span></span></p> <p style="margin-left:21pt;"><span style="background-color:#ffffff;"><span style="color:#000000;"> rows与cols属性可以单独使用，也可以一起使用。<br /> 一个框架集中可以包含多个<frame>框架，每个框架引用一个独立的页面资源。属性rows="60,*，100”表示当前框架由三部分构成：第一部分高度为60像素，第三部分高度为100像素，而第二部占据页面的剩余部分；其中“*”为通配符，表示页面在横向或纵向的剩余部分。</span></span></p> <p style="margin-left:21pt;text-align:center;"><span style="background-color:#ffffff;"><span style="color:#000000;"><frameset></span><span style="color:#000000;">标签的属性</span></span></p> <table border="1" cellspacing="0" style="margin-left:21pt;"><tbody><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">属性</p> </td><td style="border-color:#000000;width:286.35pt;"> <p style="margin-left:0cm;">描述</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">rows</p> </td><td style="width:286.35pt;"> <p style="margin-left:0cm;">设置框架集中包含框架的行数，以及对应的高度</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">cols</p> </td><td style="width:286.35pt;"> <p style="margin-left:0cm;">设置框架集中包含框架的列数，以及对应的宽度</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">frameborder</p> </td><td style="width:286.35pt;"> <p style="margin-left:0cm;">设置框架集的边框是否显示，取值为1、0或yes、no,边框本身不能</p> <p style="margin-left:0cm;">调整宽度</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">bordercolor</p> </td><td style="width:286.35pt;"> <p style="margin-left:0cm;">设置框架集的边框的颜色</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">framespacing</p> </td><td style="width:286.35pt;"> <p style="margin-left:0cm;">框架与框架间的空白距离</p> </td></tr></tbody></table> <p style="margin-left:21pt;"><br /><span style="background-color:#ffffff;"><span style="color:#000000;">下面详细介绍rows和cols属性的四种取值形式。</span></span></p> <ol><li><span style="background-color:#ffffff;"><span style="color:#000000;">以像素为单位的绝对值<br /> 使用像素指定行高或列宽时，只需提供具体数值即可。例如，rows="120,580,*”,说明第一行高度为120像素，第二行高度为580像素，第三行占页面的剩余空间。而当rows="100,300,200”且窗口的高度不是600像素时，各个框架大小将按照窗口的比例1：3：2进行分配。</span></span></li><li><span style="background-color:#ffffff;"><span style="color:#000000;">浏览器窗口的百分比<br /> 使用百分比的形式指定行高或列宽时，框架的大小将随浏览器窗口的变化而变化。例如，属性rows="30%,70%"说明第一行占窗口的30%，第二行占窗口的70%。当百分比总和大于或小于100%时，浏览器会按照对应比例调整高度或宽度。<br /> 行（或列）之间的相对宽度<br /> 相对宽度是百分比的一种替代方式，例如，rows="1*,3*,1*"表示第一行占窗口的1/5,第二行占窗口的3/5，第三行占窗口的1/5。<br /> 混合度量尺寸<br /> 使用混合度量方式时，需要注意不同度量方式之间的优先级。优先级从高到低依次是像素单位、百分比、相对宽度、通配符。例如，rows="100,70%,*"表示第一行为100.像素，第二行为窗口的70%，第三行占据窗口的剩余部分。在设计框架时应非常小心，否则很可能因为空间不足而导致部分面内容无法展示给用户。</span></span></li></ol> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>框架集的基本结构</title> </head> <frameset rows="40%,*" frameborder="yes" framespacing="8" bordercolor="red"> <frame src="biaodan.html" /> <frame src="yuanshen-card.html" /> </frameset> <noframe> <body bgcolor="white"> 该浏览器不支持。 </body> </noframe> </html></code></pre> <blockquote> <p>注：<frameset>标签不在<body>标签内，其位于<head>标签之后。其次是<noframe>标签的位置，如上述代码。</p> </blockquote> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;">框架的属性：</span></span></p> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;"><frame></span><span style="color:#000000;">标签用于指示框架集中每个框架的内容，语法格式如下。<br /> 【语法】<br /> <frame src="url”name=""..></frame>其中：<br /> src和name是<frame/>标签的两个常用属性；<br /> 属性src用于指向个页面资源的URL路径，可以是绝对路径，也可以是相对路径；</span></span></p> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;">属性name为框架指定一个名称；<br /> <frame>标签可以使用单标签形式，也可以使用双标签形式。<br /> 【示例】框架标签的写法<br /> <frame src="topFrame.html" name="topFrame"/><br /> <frame src="mainFrame.html" name="mainFrame"></frame></span></span></p> <p style="margin-left:0cm;text-align:center;"><br /><span style="background-color:#ffffff;"> <span style="color:#000000;">框架的属性</span></span></p> <table border="1" cellspacing="0"><tbody><tr><td style="border-color:#000000;vertical-align:bottom;width:5cm;"> <p style="margin-left:0cm;">属性</p> </td><td style="border-color:#000000;vertical-align:bottom;width:10cm;"> <p style="margin-left:0cm;">描述</p> </td></tr><tr><td style="border-color:#000000;vertical-align:bottom;width:5cm;"> <p style="margin-left:0cm;">name</p> </td><td style="vertical-align:bottom;width:10cm;"> <p style="margin-left:0cm;">设置框架的名称，在设置超链接时用作框架的标记</p> </td></tr><tr><td style="border-color:#000000;vertical-align:bottom;width:5cm;"> <p style="margin-left:0cm;">src</p> </td><td style="vertical-align:bottom;width:10cm;"> <p style="margin-left:0cm;">设置在框架中显示页面的URL</p> </td></tr><tr><td style="border-color:#000000;vertical-align:bottom;width:5cm;"> <p style="margin-left:0cm;">frameborder</p> </td><td style="vertical-align:bottom;width:10cm;"> <p style="margin-left:0cm;">设置框架的边框是否显示，取值为0或1</p> </td></tr><tr><td style="border-color:#000000;vertical-align:bottom;width:5cm;"> <p style="margin-left:0cm;">marginheight</p> </td><td style="vertical-align:bottom;width:10cm;"> <p style="margin-left:0cm;">定义内容与框架的上下边缘高度，默认为1</p> </td></tr><tr><td style="border-color:#000000;vertical-align:bottom;width:5cm;"> <p style="margin-left:0cm;">marginwidth</p> </td><td style="vertical-align:bottom;width:10cm;"> <p style="margin-left:0cm;">定义内容与框架的左右边缘宽度，默认为1</p> </td></tr><tr><td style="border-color:#000000;vertical-align:bottom;width:5cm;"> <p style="margin-left:0cm;">scrolling</p> </td><td style="vertical-align:bottom;width:10cm;"> <p style="margin-left:0cm;">设置框架中是否显示滚动条，取值为yes、no和auto</p> </td></tr><tr><td style="border-color:#000000;vertical-align:bottom;width:5cm;"> <p style="margin-left:0cm;">noresize</p> </td><td style="vertical-align:bottom;width:10cm;"> <p style="margin-left:0cm;">设置框架不能调整大小，值只有noresize一个</p> </td></tr></tbody></table> <p></p> <h2 style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;">内联框架</span></span></h2> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;">内联框架是嵌人到页面中的一个区域，通过<iframe>标签引人另外一个页面资源，无需<frameset>标签协助。<iframe>标签的语法格式如下。<br /> 【语法】<br /> <iframe src="url" name=" " width=" height=" "..></iframe>其中：<br /> <iframe/>标签常用的属性有src、name、width和height等；<br /> src属性用于指向被加载的页面资源，其值可以是绝对路径或相对路径；<br /> name属性表示框架的名称；<br /> width和height属性用于指定框架区域的宽度和高度。</span></span></p> <p style="margin-left:0cm;text-align:center;"><span style="background-color:#ffffff;"><span style="color:#000000;">内联框架<iframe>常用的属性</span></span></p> <table border="1" cellspacing="0"><tbody><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">属性</p> </td><td style="border-color:#000000;width:10cm;"> <p style="margin-left:0cm;">描述</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">align</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设置iframe与周围文本的对齐方式，取值可以是let,right,top.middle.bottom</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">frameborder</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设置iframe的边框是否显示，取值0或1</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">marginheight</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">定义iframe的顶部和底部的边距</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">marginwidth</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">定义iframe的左侧和右侧的边距</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">height</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设置iframe的高度</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">width</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设置iframe的宽度</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">scrolling</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设置iframe中是否显示滚动条，取值yes、no、auto</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">src</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设置iframe中显示页面的URL</p> </td></tr><tr><td style="border-color:#000000;width:5cm;"> <p style="margin-left:0cm;">name</p> </td><td style="width:10cm;"> <p style="margin-left:0cm;">设置iframe的名称</p> </td></tr></tbody></table> <h2 style="margin-left:0cm;"><br /><span style="background-color:#ffffff;"><span style="color:#000000;">框架之间的链接：</span></span></h2> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;">对每一个框架命名，之后在链接的后面加target=””加上框架名，网页就会在该框架显示。</span></span></p> <p style="margin-left:0cm;"><span style="background-color:#ffffff;"><span style="color:#000000;">例：<a href=”链接” target=”框架名”>…</>;</span></span></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </div> <div id="treeSkill"></div> </article> <script> $(function() { setTimeout(function () { var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode'); if (mathcodeList.length > 0) { for (let i = 0; i < mathcodeList.length; i++) { if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) { var alt = mathcodeList[i].alt; alt = '\\(' + alt + '\\)'; var curSpan = $('<span class="img-codecogs"></span>'); curSpan.text(alt); $(mathcodeList[i]).before(curSpan); $(mathcodeList[i]).remove(); } } MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } }, 1000) }); </script> </div> <div class="directory-boxshadow-dialog" style="display:none;"> <div class="directory-boxshadow-dialog-box"> </div> <div class="vip-limited-time-offer-box-new" id="vip-limited-time-offer-box-new"> <img class="limited-img limited-img-new" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-newWhite.png"> <div class="vip-limited-time-top"> 确定要放弃本次机会？ </div> <span class="vip-limited-time-text">福利倒计时</span> <div class="limited-time-box-new"> <span class="time-hour"></span> <i>:</i> <span class="time-minite"></span> <i>:</i> <span class="time-second"></span> </div> <div class="limited-time-vip-box"> <p> <img class="coupon-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/vip-limited-close-roup.png"> <span class="def">立减 ¥</span> <span class="active limited-num"></span> </p> <span class="">普通VIP年卡可用</span> </div> <a class="limited-time-btn-new" href="https://mall.csdn.net/vip" data-report-click='{"spm":"1001.2101.3001.9621"}' data-report-query='spm=1001.2101.3001.9621'>立即使用</a> </div> </div> <div class="more-toolbox-new" id="toolBarBox"> <div class="left-toolbox"> <div class="toolbox-left"> <div class="profile-box"> <a class="profile-href" target="_blank" href="https://blog.csdn.net/m0_73886399"><img class="profile-img" src="https://profile-avatar.csdnimg.cn/70cbebf1f0114a99a9d88cf8cc56cbe2_m0_73886399.jpg!1"> <span class="profile-name"> 居靖 </span> </a> </div> <div class="profile-attend"> <a class="tool-attend tool-bt-button tool-bt-attend" href="javascript:;" data-report-view='{"mod":"1592215036_002","spm":"1001.2101.3001.4232","extend1":"关注"}'>关注</a> <a class="tool-item-follow active-animation" style="display:none;">关注</a> </div> </div> <div class="toolbox-middle"> <ul class="toolbox-list"> <li class="tool-item tool-item-size tool-active is-like" id="is-like"> <a class="tool-item-href"> <img style="display:none;" id="is-like-imgactive-animation-like" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarThumbUpactive.png" alt=""> <img class="isactive" style="display:none" id="is-like-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2021Active.png" alt=""> <img class="isdefault" style="display:block" id="is-like-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newHeart2021Black.png" alt=""> <span id="spanCount" class="count "> 0 </span> </a> <div class="tool-hover-tip"><span class="text space">点赞</span></div> </li> <li class="tool-item tool-item-size tool-active is-unlike" id="is-unlike"> <a class="tool-item-href"> <img class="isactive" style="margin-right:0px;display:none" id="is-unlike-imgactive" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newUnHeart2021Active.png" alt=""> <img class="isdefault" style="margin-right:0px;display:block" id="is-unlike-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newUnHeart2021Black.png" alt=""> <span id="unlikeCount" class="count "></span> </a> <div class="tool-hover-tip"><span class="text space">踩</span></div> </li> <li class="tool-item tool-item-size tool-active is-collection "> <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"popu_824","spm":"1001.2101.3001.4130","ab":"new"}'> <img style="display:none" id="is-collection-img-collection" class="animation-dom active-animation" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive.png" alt=""> <img class="isdefault" id="is-collection-img" style="display:block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectBlack.png" alt=""> <img class="isactive" id="is-collection-imgactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCollectActive.png" alt=""> <span class="count get-collection " data-num="6" id="get-collection"> 6 </span> </a> <div class="tool-hover-tip collect"> <div class="collect-operate-box"> <span class="collect-text" id="is-collection"> 收藏 </span> </div> </div> <div class="tool-active-list"> <div class="text"> 觉得还不错? <span class="collect-text" id="tool-active-list-collection"> 一键收藏 </span> <img id="tool-active-list-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/collectionCloseWhite.png" alt=""> </div> </div> </li> <li class="tool-item tool-item-size tool-active tool-item-comment"> <div class="guide-rr-first"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward01.png" alt=""> <button class="btn-guide-known">知道了</button> </div> <a class="tool-item-href" href="#commentBox" data-report-click='{"spm":"1001.2101.3001.7009"}'> <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newComment2021Black.png" alt=""> <span class="count"> 0 </span> </a> <div class="tool-hover-tip"><span class="text space">评论</span></div> </li> <li class="tool-item tool-item-bar"> </li> <li class="tool-item tool-item-size tool-active tool-QRcode" data-type="article" id="tool-share"> <a class="tool-item-href" href="javascript:;" data-report-click='{"mod":"1582594662_002","spm":"1001.2101.3001.4129","ab":"new"}'> <img class="isdefault" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newShareBlack.png" alt=""> </a> <div class="QRcode" id="tool-QRcode"> <div class="share-bg-icon icon1" id="shareBgIcon"></div> <div class="share-bg-box"> <div class="share-content"> <img class="share-avatar" src="https://profile-avatar.csdnimg.cn/70cbebf1f0114a99a9d88cf8cc56cbe2_m0_73886399.jpg!1" alt=""> <div class="share-tit"> HTML:表格和框架 </div> <div class="share-dec"> 、之间没有内容），因此在页面中显示空白单元格式时，需要在单元格标签内加入一个空白实体引用“ ”(即 ),以确保浏览器能正确显示该单元格。相对宽度是百分比的一种替代方式，例如，rows="1*,3*,1*"表示第一行占窗口的1/5,第二行占窗口的3/5，第三行占窗口的1/5。”cols="列宽度所占窗口的像素或比例，.”>在嵌套表格时，内部表格应该位于外层表格的 </div> <a id="copyPosterUrl" class="url" data-report-click='{"spm":"1001.2101.3001.7493"}' data-report-view='{"spm":"1001.2101.3001.7493"}'>复制链接</a> </div> <div class="share-code"> <div class="share-code-box" id='shareCode'></div> <div class="share-code-text">扫一扫</div> </div> </div> <div class="share-code-type"> </div> </div> </li> </ul> </div> <div class="toolbox-right"> </div> </div> </div> <script type=text/javascript crossorigin src="https://csdnimg.cn/release/phoenix/production/qrcode-7c90a92189.min.js"></script> <script src="//g.csdnimg.cn/??sharewx/1.2.1/sharewx.js" type="text/javascript"></script> <script type="text/javascript" crossorigin src="https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script> <script type="text/javascript" crossorigin src="https://g.csdnimg.cn/collection-box/2.1.2/collection-box.js"></script> <div class="first-recommend-box recommend-box "> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/MengSao1001/article/details/123113096" data-report-view='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~PaidSort-1-123113096-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"1","strategy":"2~default~BlogCommendFromBaidu~PaidSort","dest":"https://blog.csdn.net/MengSao1001/article/details/123113096"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/MengSao1001/article/details/123113096" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~PaidSort-1-123113096-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"1","strategy":"2~default~BlogCommendFromBaidu~PaidSort","dest":"https://blog.csdn.net/MengSao1001/article/details/123113096"}' data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-123113096-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-123113096-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1">03 <em>HTML</em>_网页中的<em>表格</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/MengSao1001" target="_blank"><span class="blog-title">遇见你 的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">02-24</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 6888 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/MengSao1001/article/details/123113096" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6661.1","mod":"popu_871","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant_t0.none-task-blog-2~default~BlogCommendFromBaidu~PaidSort-1-123113096-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"1","strategy":"2~default~BlogCommendFromBaidu~PaidSort","dest":"https://blog.csdn.net/MengSao1001/article/details/123113096"}' data-report-query='spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-123113096-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7EPaidSort-1-123113096-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1"><table> 定义<em>表格</em>区域 border <em>表格</em>边框 tr 定义<em>表格</em>的行 td 行中的单元格 th <em>表格</em>表头 caption <em>表格</em>标题 colspan 水平合并 rowspan 垂直合并 </div> </a> </div> </div> </div> </div> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_commontools-9d6d0707b4.min.js" type="text/javascript" async></script> <div class="second-recommend-box recommend-box "> <div class="recommend-item-box type_blog clearfix" data-url="https://huaweicloud.csdn.net/638edfebdacf622b8df8d383.html" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-1-124016726-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"1","strategy":"2~default~BlogCommendFromBaidu~activity","dest":"https://huaweicloud.csdn.net/638edfebdacf622b8df8d383.html"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://huaweicloud.csdn.net/638edfebdacf622b8df8d383.html" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-1-124016726-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"1","strategy":"2~default~BlogCommendFromBaidu~activity","dest":"https://huaweicloud.csdn.net/638edfebdacf622b8df8d383.html"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-1-124016726-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-1-124016726-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>基础 - <em>HTML</em><em>表格</em></div> <div class="tag">热门推荐</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/qq_45383769" target="_blank"><span class="blog-title">qq_45383769的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">04-07</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1万+ </span> </div> </div> </div> <div class="desc-box"> <a href="https://huaweicloud.csdn.net/638edfebdacf622b8df8d383.html" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.1","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-1-124016726-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"1","strategy":"2~default~BlogCommendFromBaidu~activity","dest":"https://huaweicloud.csdn.net/638edfebdacf622b8df8d383.html"}' data-report-query='spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-1-124016726-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-1-124016726-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1"><em>HTML</em>基础 - <em>HTML</em><em>表格</em> 1.无表头的<em>表格</em> <table> <tr> <td> <table>标签代表的是表 <tr>标签代表的是行 <td>标签代表的是列 在<em>html</em>页面中的<em>表格</em>来着，就和excl的<em>表格</em>不一样喽，咱自己有自己的规则： 这就是没有表头，也就是最简单的一个<em>表格</em>。（设置了边框为1 ：border= “1”） 2.有表头的<em>表格</em> <th> <th>表示就是表头了哦，字体是加粗居中显示的 </div> </a> </div> </div> </div> </div> <a id="commentBox" name="commentBox"></a> <div id="pcCommentBox" class="comment-box comment-box-new2 unlogin-comment-box-new" style="display:none"> <div class="unlogin-comment-model"> <span class="unlogin-comment-tit">参与评论</span> <span class="unlogin-comment-text">您还未登录，请先</span> <span class="unlogin-comment-bt">登录</span> <span class="unlogin-comment-text">后发表或查看评论</span> </div> </div> <div class="recommend-box insert-baidu-box recommend-box-style "> <div class="recommend-item-box no-index" style="display:none"></div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/dahongmao/article/details/139332764" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~YuanLiJiHua~Position-2-139332764-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"2","strategy":"2~default~YuanLiJiHua~Position","dest":"https://blog.csdn.net/dahongmao/article/details/139332764"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/dahongmao/article/details/139332764" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~YuanLiJiHua~Position-2-139332764-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"2","strategy":"2~default~YuanLiJiHua~Position","dest":"https://blog.csdn.net/dahongmao/article/details/139332764"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-2-139332764-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-2-139332764-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em><em>表格</em>基础</div> <div class="tag">最新发布</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/dahongmao" target="_blank"><span class="blog-title">dahongmao的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">05-30</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 838 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/dahongmao/article/details/139332764" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.2","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~YuanLiJiHua~Position-2-139332764-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"2","strategy":"2~default~YuanLiJiHua~Position","dest":"https://blog.csdn.net/dahongmao/article/details/139332764"}' data-report-query='spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-2-139332764-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EYuanLiJiHua%7EPosition-2-139332764-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">日常生活中，为了清晰地显示数据或<em>信息</em>，常常使用<em>表格</em>对数据或<em>信息</em>进行整理，同样在制作网页时，为了使网页中的元素有条理地显示，也可以使用<em>表格</em>对网页内容进行规划。标签用于定义表头单元格，其文本默认加粗居中显示，而标签定义的为普通单元格，其文本为普通文本且水平左对齐显示。<em>表格</em>的宽度和高度是自适应的，依靠<em>表格</em>内的内容来支撑，要想更改<em>表格</em>的尺寸，就需要对其应用宽度属性width和高度属性height。bgcolor 设置<em>表格</em>的背景颜色 颜色的英文单词、十六进制颜色值#RGB、RGB颜色值rgb(r,g,b)</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_73807171/article/details/132047573" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-132047573-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_73807171/article/details/132047573"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/weixin_73807171/article/details/132047573" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-132047573-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_73807171/article/details/132047573"}' data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-132047573-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-132047573-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em><em>表格</em>和<em>框架</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/weixin_73807171" target="_blank"><span class="blog-title">weixin_73807171的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-01</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 197 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/weixin_73807171/article/details/132047573" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.3","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-3-132047573-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"3","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_73807171/article/details/132047573"}' data-report-query='spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-132047573-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-3-132047573-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1"><em>HTML</em><em>表格</em>表单和表单</div> </a> </div> </div> </div> <dl id="recommend-item-box-tow" class="recommend-item-box type_blog clearfix"> </dl> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/ZHANGYANG_1109/article/details/122727760" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-4-122727760-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"4","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/ZHANGYANG_1109/article/details/122727760"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/ZHANGYANG_1109/article/details/122727760" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-4-122727760-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"4","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/ZHANGYANG_1109/article/details/122727760"}' data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-4-122727760-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-4-122727760-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em><em>表格</em>(table)、<em>框架</em>(iframe)</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/ZHANGYANG_1109" target="_blank"><span class="blog-title">小绵杨</span></a> </div> <div class="info display-flex"> <span class="info-block time">01-28</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 3462 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/ZHANGYANG_1109/article/details/122727760" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.4","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-4-122727760-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"4","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/ZHANGYANG_1109/article/details/122727760"}' data-report-query='spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-4-122727760-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-4-122727760-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">在前一篇博客中<em>HTML</em>的常用基础标签，重新复习了一遍<em>html</em>中的常用基础标签，这篇博客来学习一下比较复杂并且总要的几个标签。 1、<em>表格</em>（table） 1.1基本使用 <em>表格</em>由 <table> 标签来定义。每个<em>表格</em>均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指<em>表格</em>数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、<em>表格</em>等等。 <em>表格</em>实例： <!DOCTYPE h</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://devpress.csdn.net/v1/article/detail/117796441" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-5-117796441-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"5","strategy":"2~default~BlogCommendFromBaidu~activity","dest":"https://devpress.csdn.net/v1/article/detail/117796441"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://devpress.csdn.net/v1/article/detail/117796441" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-5-117796441-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"5","strategy":"2~default~BlogCommendFromBaidu~activity","dest":"https://devpress.csdn.net/v1/article/detail/117796441"}' data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-5-117796441-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-5-117796441-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>html</em>页面布局3列,CSS3多列布局(columns)的用法</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/weixin_42632156" target="_blank"><span class="blog-title">weixin_42632156的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">06-03</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 1235 </span> </div> </div> </div> <div class="desc-box"> <a href="https://devpress.csdn.net/v1/article/detail/117796441" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.5","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-5-117796441-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"5","strategy":"2~default~BlogCommendFromBaidu~activity","dest":"https://devpress.csdn.net/v1/article/detail/117796441"}' data-report-query='spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-5-117796441-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-5-117796441-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">CSS3中新出现的多列布局(multi-column)是传统<em>HTML</em>网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本...</div> </a> </div> </div> </div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/weixin_42129005/18721149" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-6-18721149-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"6","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_42129005/18721149"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/weixin_42129005/18721149" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-6-18721149-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"6","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_42129005/18721149"}' data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-6-18721149-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-6-18721149-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1">Assignment-1:<em>表格</em>和<em>表格</em></div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">05-14</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/weixin_42129005/18721149" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.6","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-6-18721149-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"6","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_42129005/18721149"}' data-report-query='spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-6-18721149-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-6-18721149-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1"><em>HTML</em><em>表格</em>用于组织数据，通过使用`<table>`、`<tr>`（<em>表格</em>行）、`<td>`（<em>表格</em>数据单元格）和`<th>`（表头单元格）等标签来创建。下面我们将详细介绍这些标签以及与<em>表格</em>相关的其他属性和元素。 1. **创建基本<em>表格</em>**：...</div> </a> </div> </div> </div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/lwy050/4839347" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-7-4839347-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"7","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/lwy050/4839347"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/lwy050/4839347" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-7-4839347-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"7","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/lwy050/4839347"}' data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-7-4839347-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-7-4839347-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em><em>框架</em>，<em>表格</em></div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">12-03</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/lwy050/4839347" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.7","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-7-4839347-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"7","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/lwy050/4839347"}' data-report-query='spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-7-4839347-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-7-4839347-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1"><em>HTML</em><em>表格</em>用于在网页上组织数据，使用`<table>`、`<tr>`（行）、`<td>`（数据单元格）和`<th>`（表头单元格）等标签进行创建。以下是一个简单的<em>表格</em>实例： ```<em>html</em> 员工<em>信息</em> 姓名 职位 薪水 张三 经理 ...</div> </a> </div> </div> </div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/woshifafuge/33445839" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-8-33445839-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"8","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/woshifafuge/33445839"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/woshifafuge/33445839" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-8-33445839-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"8","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/woshifafuge/33445839"}' data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-33445839-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-33445839-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>html</em>列表<em>表格</em>和<em>框架</em>PPT教案.pptx</div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">10-20</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/woshifafuge/33445839" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.8","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-8-33445839-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"8","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/woshifafuge/33445839"}' data-report-query='spm=1001.2101.3001.6650.8&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-33445839-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-8-33445839-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">"<em>HTML</em>列表<em>表格</em>和<em>框架</em>PPT教案" 本教案主要介绍了<em>HTML</em>列表<em>表格</em>和<em>框架</em>的概念和应用。列表<em>表格</em>是<em>HTML</em>中的一种基本结构，用于组织和展示数据，而<em>框架</em>则是将网页分割成多个窗口，以便于控制和展示不同的内容。 有序列表 ...</div> </a> </div> </div> </div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/cailibin/85387827" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-9-85387827-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"9","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/cailibin/85387827"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/cailibin/85387827" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-9-85387827-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"9","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/cailibin/85387827"}' data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-85387827-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-85387827-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em><em>表格</em>、<em>框架</em>-使用大全.ppt</div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">05-16</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/cailibin/85387827" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.9","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-9-85387827-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"9","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/cailibin/85387827"}' data-report-query='spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-85387827-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-9-85387827-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1"><em>HTML</em><em>表格</em>和<em>框架</em>是网页设计中不可或缺的元素，主要用于数据展示和页面布局。下面将详细介绍这两个概念及其使用方法。 首先，<em>HTML</em><em>表格</em>（<em>HTML</em> Table）是一种结构化的数据展示方式，用于排列和组织<em>信息</em>。创建<em>HTML</em><em>表格</em>的...</div> </a> </div> </div> </div> <div class="recommend-item-box type_download clearfix" data-url="https://download.csdn.net/download/weixin_42128015/15560720" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-10-15560720-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"10","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_42128015/15560720"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://download.csdn.net/download/weixin_42128015/15560720" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-10-15560720-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"10","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_42128015/15560720"}' data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-10-15560720-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-10-15560720-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1">myPersonalWebsite：纯CSS和<em>HTML</em>无<em>框架</em></div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block">03-04</span> </div> </div> </div> <div class="desc-box"> <a href="https://download.csdn.net/download/weixin_42128015/15560720" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.10","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-download-2~default~OPENSEARCH~Rate-10-15560720-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"10","strategy":"2~default~OPENSEARCH~Rate","dest":"https://download.csdn.net/download/weixin_42128015/15560720"}' data-report-query='spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-10-15560720-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7EOPENSEARCH%7ERate-10-15560720-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">【标题】"myPersonalWebsite：纯CSS和<em>HTML</em>无<em>框架</em>"所代表的是一个个人网站项目，完全依赖于<em>HTML</em>和CSS这两种基础网页技术来构建，没有使用任何前端<em>框架</em>如Bootstrap、Angular或React等。这样的项目通常是对网页设计和...</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_68509156/article/details/124877663" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-11-124877663-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"11","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_68509156/article/details/124877663"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/weixin_68509156/article/details/124877663" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-11-124877663-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"11","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_68509156/article/details/124877663"}' data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-11-124877663-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-11-124877663-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>-----第二章<em>表格</em>及样式</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/weixin_68509156" target="_blank"><span class="blog-title">BUG专业户</span></a> </div> <div class="info display-flex"> <span class="info-block time">05-20</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 3294 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/weixin_68509156/article/details/124877663" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.11","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-11-124877663-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"11","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_68509156/article/details/124877663"}' data-report-query='spm=1001.2101.3001.6650.11&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-11-124877663-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-11-124877663-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1"><em>表格</em> CSS样式入门 基础选择器</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_35578185/article/details/117868389" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-12-117868389-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"12","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_35578185/article/details/117868389"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/weixin_35578185/article/details/117868389" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-12-117868389-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"12","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_35578185/article/details/117868389"}' data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-117868389-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-117868389-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>html</em>5使用<em>框架</em>页面布局,<em>HTML</em><em>框架</em>集与布局</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/weixin_35578185" target="_blank"><span class="blog-title">weixin_35578185的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">06-07</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 4568 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/weixin_35578185/article/details/117868389" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.12","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-12-117868389-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"12","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_35578185/article/details/117868389"}' data-report-query='spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-117868389-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-117868389-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1"><em>html</em>的<em>框架</em>详解和布局什么是<em>框架</em>？<em>框架</em>将浏览器划分成不同的部分，每一部分加载不同的页面，实现在同一浏览器窗口中加载多个页面的效果划分<em>框架</em>标记语法格式lt;framesetgt;....<em>HTML</em><em>框架</em>集我们可以通过<em>框架</em>，在一个浏览器窗口中显示多个页面。<em>HTML</em><em>框架</em>集的使用十分简单，我们需要用到如下2个标签：frameset的属性frameset主要有以下属性：rowscolsboede...博文来自...</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/TKY666/article/details/123120987" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-13-123120987-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"13","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/TKY666/article/details/123120987"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/TKY666/article/details/123120987" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-13-123120987-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"13","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/TKY666/article/details/123120987"}' data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-123120987-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-123120987-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>—— 超链接 行内<em>框架</em> <em>表格</em> 知识总结。</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/TKY666" target="_blank"><span class="blog-title">TKY666的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">02-24</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 4320 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/TKY666/article/details/123120987" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.13","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-13-123120987-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"13","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/TKY666/article/details/123120987"}' data-report-query='spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-123120987-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-13-123120987-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">一、超链接 1. 简述 <em>HTML</em> 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 我们通过使用 <a> 标签在 <em>HTML</em> 中创建链接 2. 举例 <a href="" target=""> 超链接</a> 实例 ..</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_42865575/article/details/81433376" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-14-81433376-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"14","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_42865575/article/details/81433376"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/qq_42865575/article/details/81433376" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-14-81433376-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"14","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_42865575/article/details/81433376"}' data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-81433376-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-81433376-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>——<em>表格</em>与<em>框架</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/qq_42865575" target="_blank"><span class="blog-title">qq_42865575的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">08-05</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 2144 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/qq_42865575/article/details/81433376" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.14","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-14-81433376-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"14","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_42865575/article/details/81433376"}' data-report-query='spm=1001.2101.3001.6650.14&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-81433376-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-14-81433376-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1"><em>表格</em>：由行和列组成的一种结构。 创建<em>HTML</em><em>表格</em>： 1、<em>表格</em>内容包含在table双标签里。 2、caption标签定义标题<em>表格</em>。 3、tr标签定义<em>表格</em>中的一行【table row】 4、td【table data cell —单元格】标签和th【table header cell—单元格头部】标签定义一个单元格。th标签中内容默认粗体、局中显示。 &amp;lt;table&amp;gt; ...</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/rushkid02/article/details/7506779" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-15-7506779-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"15","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/rushkid02/article/details/7506779"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/rushkid02/article/details/7506779" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-15-7506779-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"15","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/rushkid02/article/details/7506779"}' data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-7506779-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-7506779-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>html</em><em>框架</em>集 js刷新页面方法大全</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/rushkid02" target="_blank"><span class="blog-title">WITNESS</span></a> </div> <div class="info display-flex"> <span class="info-block time">04-26</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 9018 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/rushkid02/article/details/7506779" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.15","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-15-7506779-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"15","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/rushkid02/article/details/7506779"}' data-report-query='spm=1001.2101.3001.6650.15&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-7506779-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-15-7506779-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">一、先来看一个简单的例子： 下面以三个页面分别命名为frame.<em>html</em>、top.<em>html</em>、bottom.<em>html</em>为例来具体说明如何做。 frame.<em>html</em> 由上(top.<em>html</em>)下(bottom.<em>html</em>)两个页面组成，代码如下： 复制代码 代码如下: frame 现在假设top.<em>html</em> (即上面的页面) 有七个b</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_41829060/article/details/88936470" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-16-88936470-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"16","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_41829060/article/details/88936470"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/qq_41829060/article/details/88936470" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-16-88936470-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"16","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_41829060/article/details/88936470"}' data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-88936470-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-88936470-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>的<em>表格</em>与<em>框架</em></div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/qq_41829060" target="_blank"><span class="blog-title">积少成多，水滴石穿</span></a> </div> <div class="info display-flex"> <span class="info-block time">03-31</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 208 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/qq_41829060/article/details/88936470" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.16","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-16-88936470-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"16","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_41829060/article/details/88936470"}' data-report-query='spm=1001.2101.3001.6650.16&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-88936470-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-16-88936470-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">1、<em>表格</em> 基本语法 <table cellspacing="12" bgcolor="sandybrown"> <tr> <td> name </td> <td> dep </td> <td> area </td> <td> gend </t...</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/qq_38182287/article/details/71446569" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-71446569-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_38182287/article/details/71446569"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/qq_38182287/article/details/71446569" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-71446569-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_38182287/article/details/71446569"}' data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-71446569-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-71446569-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1"><em>HTML</em>的基本结构语法 <em>表格</em>， <em>框架</em>， 表单</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/qq_38182287" target="_blank"><span class="blog-title">qq_38182287的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">05-09</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 7138 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/qq_38182287/article/details/71446569" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.17","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-17-71446569-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"17","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/qq_38182287/article/details/71446569"}' data-report-query='spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-71446569-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-17-71446569-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">三、<em>表格</em> 1.<em>表格</em>基本语法： 内容 2.<em>表格</em>的对齐方式： 属性 值 说明 align （水平对齐方式） left 左对齐 center 居中对齐 right 右对齐</div> </a> </div> </div> </div> <div class="recommend-item-box type_blog clearfix" data-url="https://blog.csdn.net/weixin_39801613/article/details/111789402" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-18-111789402-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"18","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_39801613/article/details/111789402"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://blog.csdn.net/weixin_39801613/article/details/111789402" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-18-111789402-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"18","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_39801613/article/details/111789402"}' data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-111789402-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-111789402-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1">layui<em>表格</em>有边框_layui前端<em>框架</em><em>表格</em>如何进行屏幕适配</div> </a> </div> <div class="info-box display-flex"> <div class="info"> <a href="https://blog.csdn.net/weixin_39801613" target="_blank"><span class="blog-title">weixin_39801613的博客</span></a> </div> <div class="info display-flex"> <span class="info-block time">12-21</span> <span class="info-block read"><img class="read-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> 910 </span> </div> </div> </div> <div class="desc-box"> <a href="https://blog.csdn.net/weixin_39801613/article/details/111789402" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.18","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~Rate-18-111789402-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"18","strategy":"2~default~BlogCommendFromBaidu~Rate","dest":"https://blog.csdn.net/weixin_39801613/article/details/111789402"}' data-report-query='spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-111789402-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-111789402-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">匿名用户1级2017-07-03 回答标签：js代码 .com 效果 click .text jquer 参考 定义 <em>html</em>项目中需要弹出层效果，使用了layui前端<em>框架</em>，主要使用了里面的弹出层特效(可以移动)<em>html</em>代码要给这个标签绑定click方法1 显示点击以后，显示这个页32313133353236313431303231363533e59b9ee7ad9...</div> </a> </div> </div> </div> <div class="recommend-item-box type_c_download clearfix" data-url="https://wenku.csdn.net/doc/1h1k7d49hn" data-report-view='{"ab":"new","spm":"1001.2101.3001.6650.19","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-c_download-2~default~OPENSEARCH~Position-19-1h1k7d49hn-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"19","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/doc/1h1k7d49hn"}'> <div class="content-box"> <div class="content-blog display-flex"> <div class="title-box"> <a href="https://wenku.csdn.net/doc/1h1k7d49hn" class="tit" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.19","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-c_download-2~default~OPENSEARCH~Position-19-1h1k7d49hn-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"19","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/doc/1h1k7d49hn"}' data-report-query='spm=1001.2101.3001.6650.19&utm_medium=distribute.pc_relevant.none-task-c_download-2%7Edefault%7EOPENSEARCH%7EPosition-19-1h1k7d49hn-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-c_download-2%7Edefault%7EOPENSEARCH%7EPosition-19-1h1k7d49hn-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="left ellipsis-online ellipsis-online-1">Web前端入门指南：从基础到<em>HTML</em><em>表格</em>和<em>框架</em></div> </a> </div> <div class="info-box display-flex"> <div class="info display-flex"> <span class="info-block"></span> </div> </div> </div> <div class="desc-box"> <a href="https://wenku.csdn.net/doc/1h1k7d49hn" target="_blank" data-report-click='{"ab":"new","spm":"1001.2101.3001.6650.19","mod":"popu_387","extra":"{\"highlightScore\":0.0,\"utm_medium\":\"distribute.pc_relevant.none-task-c_download-2~default~OPENSEARCH~Position-19-1h1k7d49hn-blog-129748619.235^v43^pc_blog_bottom_relevance_base2\",\"dist_request_id\":\"1721660856887_77754\"}","dist_request_id":"1721660856887_77754","ab_strategy":"landing_bge","index":"19","strategy":"2~default~OPENSEARCH~Position","dest":"https://wenku.csdn.net/doc/1h1k7d49hn"}' data-report-query='spm=1001.2101.3001.6650.19&utm_medium=distribute.pc_relevant.none-task-c_download-2%7Edefault%7EOPENSEARCH%7EPosition-19-1h1k7d49hn-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2&depth_1-utm_source=distribute.pc_relevant.none-task-c_download-2%7Edefault%7EOPENSEARCH%7EPosition-19-1h1k7d49hn-blog-129748619.235%5Ev43%5Epc_blog_bottom_relevance_base2'> <div class="desc ellipsis-online ellipsis-online-1">"这是一份关于web前端开发的学习笔记，涵盖了从web基础概念到<em>HTML</em>的深入讲解，包括<em>HTML</em><em>表格</em>和<em>框架</em>的使用以及表单的构成。笔记适合初学者系统学习web前端知识。" 在web前端开发中，首先要理解的是web的概念。Web，即...</div> </a> </div> </div> </div> </div> <div id="recommendNps" class="recommend-nps-box common-nps-box"> <h3 class="aside-title">“相关推荐”对你有帮助么？</h3> <div class="aside-content"> <ul class="newnps-list"> <li class="newnps-item" data-type="非常没帮助"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel1.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey1.png" alt=""> </div> <div class="newnps-text">非常没帮助</div> </li> <li class="newnps-item" data-type="没帮助"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel2.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey2.png" alt=""> </div> <div class="newnps-text">没帮助</div> </li> <li class="newnps-item" data-type="一般"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel3.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey3.png" alt=""> </div> <div class="newnps-text">一般</div> </li> <li class="newnps-item" data-type="有帮助"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel4.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey4.png" alt=""> </div> <div class="newnps-text">有帮助</div> </li> <li class="newnps-item" data-type="非常有帮助"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel5.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey5.png" alt=""> </div> <div class="newnps-text">非常有帮助</div> </li> </ul> <div class="newnps-form-box"> <div class="newnps-form"> <input type="text" placeholder="请输入建议或反馈后点击提交" class="newnps-input"> <span class="newnps-btn">提交</span> </div> </div> </div> </div><div class="blog-footer-bottom" style="margin-top:10px;"></div> <script src="https://g.csdnimg.cn/common/csdn-footer/csdn-footer.js" data-isfootertrack="false" type="text/javascript"></script> <script type="text/javascript"> window.csdn.csdnFooter.options = { el: '.blog-footer-bottom', type: 2 } </script> </main> <aside class="blog_container_aside"> <div id="asideProfile" class="aside-box"> <div class="profile-intro d-flex"> <div class="avatar-box d-flex justify-content-center flex-column"> <a href="https://blog.csdn.net/m0_73886399" target="_blank" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4121","dest":"https://blog.csdn.net/m0_73886399","ab":"new"}'> <img src="https://profile-avatar.csdnimg.cn/70cbebf1f0114a99a9d88cf8cc56cbe2_m0_73886399.jpg!1" class="avatar_pic"> </a> </div> <div class="user-info d-flex flex-column profile-intro-name-box"> <div class="profile-intro-name-boxTop"> <a href="https://blog.csdn.net/m0_73886399" target="_blank" class="" id="uid" title="居靖" data-report-click='{"mod":"popu_379","spm":"1001.2101.3001.4122","dest":"https://blog.csdn.net/m0_73886399","ab":"new"}'> <span class="name " username="m0_73886399">居靖</span> </a> <span> </span> <span class="flag expert-blog"> <span class="bubble">CSDN认证博客专家</span> </span> <span class="flag company-blog"> <span class="bubble">CSDN认证企业博客</span> </span> </div> <div class="profile-intro-name-boxFooter"> <span class="personal-home-page personal-home-years" title="已加入 CSDN 2年">码龄2年</span> <span class="personal-home-page"> <a class="personal-home-certification" href="https://i.csdn.net/#/uc/profile?utm_source=14998968" target="_blank" title="暂无认证"> <img src="https://csdnimg.cn/identity/nocErtification.png" alt=""> 暂无认证 </a> </span> </div> </div> </div> <div class="data-info d-flex item-tiling"> <dl class="text-center" title="22"> <a href="https://blog.csdn.net/m0_73886399" data-report-click='{"mod":"1598321000_001","spm":"1001.2101.3001.4310"}' data-report-query="t=1"> <dt><span class="count">22</span></dt> <dd class="font">原创</dd> </a> </dl> <dl class="text-center" data-report-click='{"mod":"1598321000_002","spm":"1001.2101.3001.4311"}' title="546718"> <a href="https://blog.csdn.net/rank/list/weekly" target="_blank"> <dt><span class="count">54万+</span></dt> <dd class="font">周排名</dd> </a> </dl> <dl class="text-center" title="285278"> <a href="https://blog.csdn.net/rank/list/total" data-report-click='{"mod":"1598321000_003","spm":"1001.2101.3001.4312"}' target="_blank"> <dt><span class="count">28万+</span></dt> <dd class="font">总排名</dd> </a> </dl> <dl class="text-center" style="min-width:58px" title="56680"> <dt><span class="count">5万+</span></dt> <dd>访问</dd> </dl> <dl class="text-center" title="2级,点击查看等级说明"> <dt><a href="https://blog.csdn.net/blogdevteam/article/details/103478461" target="_blank"> <img class="level" src="https://csdnimg.cn/identity/blog2.png"> </a> </dt> <dd>等级</dd> </dl> </div> <div class="item-rank"></div> <div class="data-info d-flex item-tiling"> <dl class="text-center" title="269"> <dt><span class="count">269</span></dt> <dd>积分</dd> </dl> <dl class="text-center" id="fanBox" title="11"> <dt><span class="count" id="fan">11</span></dt> <dd>粉丝</dd> </dl> <dl class="text-center" title="44"> <dt><span class="count">44</span></dt> <dd>获赞</dd> </dl> <dl class="text-center" title="3"> <dt><span class="count">3</span></dt> <dd>评论</dd> </dl> <dl class="text-center" title="227"> <dt><span class="count">227</span></dt> <dd>收藏</dd> </dl> </div> <div class="aside-box-footer" data-report-view='{"spm":"3001.4296"}'> <div class="badge-box d-flex"> <div class="badge d-flex"> <div class="icon-badge" title="习惯养成"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/xiguanyangchengLv1.png" alt="习惯养成"> </div> </div> <div class="icon-badge" title="新秀勋章"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/xinxiu@240.png" alt="新秀勋章"> </div> </div> <div class="icon-badge" title="持之以恒"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/6442aa9fc16e48d5b07a805642466ec8.png" alt="持之以恒"> </div> </div> <div class="icon-badge" title="勤写标兵"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/f10c883cfd674a3e9217683e8cd55511.png" alt="勤写标兵"> </div> </div> <div class="icon-badge" title="笔耕不辍"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/70592b2299594e37aedcaa91fc52a294.png" alt="笔耕不辍"> </div> </div> <div class="icon-badge" title="创作能手"> <div class="mouse-box"> <img class="medal-img" data-report-click='{"spm":"3001.4296"}' src="https://csdnimg.cn/medal/qixiebiaobing4@240.png" alt="创作能手"> </div> </div> </div> </div> </div> <div class="profile-intro-name-boxOpration"> <div class="opt-letter-watch-box"> <a rel="nofollow" class="bt-button personal-letter" href="https://im.csdn.net/chat/m0_73886399" target="_blank" rel="noopener">私信</a> </div> <div class="opt-letter-watch-box"> <a class="personal-watch bt-button" id="btnAttent" >关注</a> </div> </div> </div> <a id="remuneration" data-report-click='{"spm":"1001.2101.3001.9809"}' rel="nofollow" href="" class="remuneration-box"> <img src="" alt=""> </a> <div id="asideWriteGuide" class="aside-box side-write-guide-box type-2" data-report-view='{"spm":"3001.9728"}'> <div class="content-box"> <a rel="nofollow" href="https://mp.csdn.net" target="_blank" class="btn-go-write" data-report-query="spm=3001.9728" data-report-click='{"spm":"3001.9728"}'> <img src="https://img-home.csdnimg.cn/images/20240218021830.png" alt="写文章"> </a> </div> </div> <div id="asideSearchArticle" class="aside-box"> <div class="aside-content search-comter"> <div class="aside-search aside-search-blog"> <input type="text" class="input-serch-blog" name="" autocomplete="off" value="" id="search-blog-words" placeholder="搜博主文章"> <a class="btn-search-blog" data-report-click='{"spm":"1001.2101.3001.9182"}'> <img src="//csdnimg.cn/cdn/content-toolbar/csdn-sou.png?v=1587021042"> </a> </div> </div> </div> <div id="asideHotArticle" class="aside-box"> <h3 class="aside-title">热门文章</h3> <div class="aside-content"> <ul class="hotArticle-list"> <li> <a href="https://blog.csdn.net/m0_73886399/article/details/129970394" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/m0_73886399/article/details/129970394","ab":"new"}'> Java：定义一个学生类（Student），属性包括：学号，姓名，性别，年龄；方法包括：获得学号，获得姓名，获得性别，获得年龄，修改学号，修改姓名，修改性别，修改年龄。定义并创建一个学生数组对象。 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">39172</span> </a> </li> <li> <a href="https://blog.csdn.net/m0_73886399/article/details/129970330" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/m0_73886399/article/details/129970330","ab":"new"}'> Java：编程创建一个Box类，在其中定义三个变量表示一个立方体的长、宽和高，定义一个构造方法对这三个变量进行初始化，然后定义一个方法求立方体的体积。创建一个对象，求给定尺寸的立方体的体积。 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">2113</span> </a> </li> <li> <a href="https://blog.csdn.net/m0_73886399/article/details/129670693" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/m0_73886399/article/details/129670693","ab":"new"}'> Java：输出一个整数的位数。 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">1922</span> </a> </li> <li> <a href="https://blog.csdn.net/m0_73886399/article/details/129685840" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/m0_73886399/article/details/129685840","ab":"new"}'> Java：判断一个整数是否是素数 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">1584</span> </a> </li> <li> <a href="https://blog.csdn.net/m0_73886399/article/details/129669782" target="_blank" data-report-click='{"mod":"popu_541","spm":"1001.2101.3001.4139","dest":"https://blog.csdn.net/m0_73886399/article/details/129669782","ab":"new"}'> Java：判断某个整数是否是7的倍数 <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png" alt=""> <span class="read">1332</span> </a> </li> </ul> </div> </div> <div id="asideNewComments" class="aside-box"> <h3 class="aside-title">最新评论</h3> <div class="aside-content"> <ul class="newcomment-list"> <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/m0_73886399/article/details/129970394#comments_30086656" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/m0_73886399/article/details/129970394#comments_30086656","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/m0_73886399/article/details/129970394#comments_30086656","ab":"new"}'>Java：定义一个学生类（Student），属性包括：学号，姓名，性别，年龄；方法包括：获得学号，获得姓名，获得性别，获得年龄，修改学号，修改姓名，修改性别，修改年龄。定义并创建一个学生数组对象。</a> <p class="comment ellipsis"> <a href="https://happy-aj.blog.csdn.net" class="user-name" target="_blank">阿J~: </a> <span class="code-comments">赞赞赞，你真是个小天才哦</span> </p> </li> <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/m0_73886399/article/details/129667042#comments_25663230" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/m0_73886399/article/details/129667042#comments_25663230","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/m0_73886399/article/details/129667042#comments_25663230","ab":"new"}'>Java基本语法</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/community_717" class="user-name" target="_blank">CSDN-Ada助手: </a> <span class="code-comments">Java 技能树或许可以帮到你：https://edu.csdn.net/skill/java?utm_source=AI_act_java</span> </p> </li> <li> <a class="title text-truncate" target="_blank" href="https://blog.csdn.net/m0_73886399/article/details/129667042#comments_25652512" data-report-click='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/m0_73886399/article/details/129667042#comments_25652512","ab":"new"}' data-report-view='{"mod":"popu_542","spm":"1001.2101.3001.4231","dest":"https://blog.csdn.net/m0_73886399/article/details/129667042#comments_25652512","ab":"new"}'>Java基本语法</a> <p class="comment ellipsis"> <a href="https://blog.csdn.net/m0_73886399" class="user-name" target="_blank">居靖: </a> <span class="code-comments">第一次写，开始记录学习过程<img src="https://g.csdnimg.cn/static/face/emoji/005.png" alt='表情包' ></span> </p> </li> </ul> </div> </div> <div id="asideNewNps" class="aside-box common-nps-box"> <h3 class="aside-title">您愿意向朋友推荐“博客详情页”吗？</h3> <div class="aside-content"> <ul class="newnps-list"> <li class="newnps-item" data-type="强烈不推荐"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel1.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey1.png" alt=""> </div> <div class="newnps-text">强烈不推荐</div> </li> <li class="newnps-item" data-type="不推荐"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel2.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey2.png" alt=""> </div> <div class="newnps-text">不推荐</div> </li> <li class="newnps-item" data-type="一般般"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel3.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey3.png" alt=""> </div> <div class="newnps-text">一般般</div> </li> <li class="newnps-item" data-type="推荐"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel4.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey4.png" alt=""> </div> <div class="newnps-text">推荐</div> </li> <li class="newnps-item" data-type="强烈推荐"> <div class="newnps-img-box"> <img class="newnps-img active" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeel5.png" alt=""> <img class="newnps-img default" src="https://csdnimg.cn/release/blogv2/dist/pc/img/npsFeelGrey5.png" alt=""> </div> <div class="newnps-text">强烈推荐</div> </li> </ul> <div class="newnps-form-box"> <div class="newnps-form"> <input type="text" placeholder="请输入建议或反馈后点击提交" class="newnps-input"> <span class="newnps-btn">提交</span> </div> </div> </div> </div> <div id="asideArchive" class="aside-box" style=" width:300px;"> <h3 class="aside-title">最新文章</h3> <div class="aside-content"> <ul class="inf_list clearfix"> <li class="clearfix"> <a href="https://blog.csdn.net/m0_73886399/article/details/133869840" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/m0_73886399/article/details/133869840","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/m0_73886399/article/details/133869840","ab":"new"}'>使用HTML和js设置一个简单的提示框，在同一个提示框中，点击不同的按钮，提示不同的内容：</a> </li> <li class="clearfix"> <a href="https://blog.csdn.net/m0_73886399/article/details/133142471" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/m0_73886399/article/details/133142471","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/m0_73886399/article/details/133142471","ab":"new"}'>编写两个JSP页面，分别为inputName.jsp和people.jsp。</a> </li> <li class="clearfix"> <a href="https://blog.csdn.net/m0_73886399/article/details/133141274" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/m0_73886399/article/details/133141274","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/m0_73886399/article/details/133141274","ab":"new"}'>jsp一个简单页面的设计：</a> </li> </ul> <div class="archive-bar"></div> <div class="archive-box"> <div class="archive-list-item"><a href="https://blog.csdn.net/m0_73886399?type=blog&year=2023&month=10" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/m0_73886399?type=blog&year=2023&month=10"}'><span class="year">2023年</span><span class="num">22篇</span></a></div> </div> </div> </div> <!-- 详情页显示目录 --> <!--文章目录--> <div id="asidedirectory" class="aside-box"> <div class='groupfile' id="directory"> <h3 class="aside-title">目录</h3> <div class="align-items-stretch group_item"> <div class="pos-box"> <div class="scroll-box"> <div class="toc-box"></div> </div> </div> </div> </div> </div> </aside> <script> $("a.flexible-btn").click(function(){ $(this).parents('div.aside-box').removeClass('flexible-box'); $(this).parents("p.text-center").remove(); }) </script> <script type="text/javascript" src="https://g.csdnimg.cn/user-tooltip/2.7/user-tooltip.js"></script> <script type="text/javascript" src="https://g.csdnimg.cn/user-medal/2.0.0/user-medal.js"></script> </div> <div class="recommend-right align-items-stretch clearfix" id="rightAside" data-type="recommend"> <aside class="recommend-right_aside"> <div id="recommend-right" > <div class='flex-column aside-box groupfile' id="groupfile"> <div class="groupfile-div"> <h3 class="aside-title">目录</h3> <div class="align-items-stretch group_item"> <div class="pos-box"> <div class="scroll-box"> <div class="toc-box"></div> </div> </div> </div> </div> </div> <div id="asideArchive" class="aside-box" style=" width:300px;"> <h3 class="aside-title">最新文章</h3> <div class="aside-content"> <ul class="inf_list clearfix"> <li class="clearfix"> <a href="https://blog.csdn.net/m0_73886399/article/details/133869840" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/m0_73886399/article/details/133869840","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/m0_73886399/article/details/133869840","ab":"new"}'>使用HTML和js设置一个简单的提示框，在同一个提示框中，点击不同的按钮，提示不同的内容：</a> </li> <li class="clearfix"> <a href="https://blog.csdn.net/m0_73886399/article/details/133142471" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/m0_73886399/article/details/133142471","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/m0_73886399/article/details/133142471","ab":"new"}'>编写两个JSP页面，分别为inputName.jsp和people.jsp。</a> </li> <li class="clearfix"> <a href="https://blog.csdn.net/m0_73886399/article/details/133141274" target="_blank" data-report-click='{"mod":"popu_382","spm":"1001.2101.3001.4136","dest":"https://blog.csdn.net/m0_73886399/article/details/133141274","ab":"new"}' data-report-view='{"mod":"popu_382","dest":"https://blog.csdn.net/m0_73886399/article/details/133141274","ab":"new"}'>jsp一个简单页面的设计：</a> </li> </ul> <div class="archive-bar"></div> <div class="archive-box"> <div class="archive-list-item"><a href="https://blog.csdn.net/m0_73886399?type=blog&year=2023&month=10" target="_blank" data-report-click='{"mod":"popu_538","spm":"1001.2101.3001.4138","ab":"new","dest":"https://blog.csdn.net/m0_73886399?type=blog&year=2023&month=10"}'><span class="year">2023年</span><span class="num">22篇</span></a></div> </div> </div> </div> </div> </aside> </div> <div class="recommend-right1 align-items-stretch clearfix" id="rightAsideConcision" data-type="recommend"> <aside class="recommend-right_aside"> <div id="recommend-right-concision" > <div class='flex-column aside-box groupfile' id="groupfileConcision"> <div class="groupfile-div1"> <h3 class="aside-title">目录</h3> <div class="align-items-stretch group_item"> <div class="pos-box"> <div class="scroll-box"> <div class="toc-box"></div> </div> </div> </div> </div> </div> </div> </aside> </div> </div> <div class="mask-dark"></div> <script type="text/javascript"> var timert = setInterval(function() { sideToolbar = $(".csdn-side-toolbar"); if (sideToolbar.length > 0) { sideToolbar.css('cssText', 'bottom:64px !important;') clearInterval(timert); } }, 200); </script> <div class="skin-boxshadow"></div> <div class="directory-boxshadow"></div> <div class="comment-side-box-shadow comment-side-tit-close" id="commentSideBoxshadow"> <div class="comment-side-content"> <div class="comment-side-tit"> <span class="comment-side-tit-count">评论</span> <img class="comment-side-tit-close" src="https://csdnimg.cn/release/blogv2/dist/pc/img/closeBt.png"></div> <div id="pcCommentSideBox" class="comment-box comment-box-new2 unlogin-comment-box-new" style="display:none"> </div> <div id="pcFlodCommentSideBox" class="pc-flodcomment-sidebox"> <div class="comment-fold-tit"><span id="lookUnFlodComment" class="back"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowLeftWhite.png" alt=""></span>被折叠的 <span class="count"></span> 条评论 <a href="https://blogdev.blog.csdn.net/article/details/122245662" class="tip" target="_blank">为什么被折叠?</a> <a href="https://bbs.csdn.net/forums/FreeZone" class="park" target="_blank"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/iconPark.png">到【灌水乐园】发言</a> </div> <div class="comment-fold-content"></div> <div id="lookBadComment" class="look-bad-comment side-look-comment"> <a class="look-more-comment">查看更多评论<img src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentArrowDownWhite.png" alt=""></a> </div> </div> </div> <div class="comment-rewarddialog-box"> <div class="form-box"> <div class="title-box"> 添加红包 <a class="btn-form-close"></a> </div> <form id="commentRewardForm"> <div class="ipt-box"> <label for="txtName">祝福语</label> <div class="ipt-btn-box"> <input type="text" name="name" id="txtName" autocomplete="off" maxlength="50"> <a class="btn-ipt btn-random"></a> </div> <p class="notice">请填写红包祝福语或标题</p> </div> <div class="ipt-box"> <label for="txtSendAmount">红包数量</label> <div class="ipt-txt-box"> <input type="text" name="sendAmount" maxlength="4" id="txtSendAmount" placeholder="请填写红包数量(最小10个)" autocomplete="off"> <span class="after-txt">个</span> </div> <p class="notice">红包个数最小为10个</p> </div> <div class="ipt-box"> <label for="txtMoney">红包总金额</label> <div class="ipt-txt-box error"> <input type="text" name="money" maxlength="5" id="txtMoney" placeholder="请填写总金额(最低5元)" autocomplete="off"> <span class="after-txt">元</span> </div> <p class="notice">红包金额最低5元</p> </div> <div class="balance-info-box"> <label>余额支付</label> <div class="balance-info"> 当前余额<span class="balance">3.43</span>元 <a href="https://i.csdn.net/#/wallet/balance/recharge" class="link-charge" target="_blank">前往充值 ></a> </div> </div> <div class="opt-box"> <div class="pay-info"> 需支付：<span class="price">10.00</span>元 </div> <button type="button" class="ml-auto btn-cancel">取消</button> <button type="button" class="ml8 btn-submit" disabled="true">确定</button> </div> </form> </div> </div> <div class="rr-guide-box"> <div class="rr-first-box"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward02.png" alt=""> <button class="btn-guide-known next">下一步</button> </div> <div class="rr-second-box"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/guideRedReward03.png" alt=""> <button class="btn-guide-known known">知道了</button> </div> </div> </div> <div class="redEnvolope" id="redEnvolope"> <div class="env-box"> <div class="env-container"> <div class="pre-open" id="preOpen"> <div class="top"> <header> <img class="clearTpaErr" :src="redpacketAuthor.avatar" alt="" /> <div class="author">成就一亿技术人!</div> </header> <div class="bot-icon"></div> </div> <footer> <div class="red-openbtn open-start"></div> <div class="tip"> 领取后你会自动成为博主和红包主的粉丝 <a class="rule" target="_blank">规则</a> </div> </footer> </div> <div class="opened" id="opened"> <div class="bot-icon"> <header> <a class="creatorUrl" href="" target="_blank"> <img class="clearTpaErr" src="https://profile-avatar.csdnimg.cn/default.jpg!2" alt="" /> </a> <div class="author"> <div class="tt">hope_wisdom</div> 发出的红包 </div> </header> </div> <div class="receive-box"> <header></header> <div class="receive-list"> </div> </div> </div> </div> <div class="close-btn"></div> </div> </div> <div class="pay-code"> <div class="pay-money">实付<span class="pay-money-span" data-nowprice='' data-oldprice=''>元</span></div> <div class="content-blance"><a class="blance-bt" href="javascript:;">使用余额支付</a></div> <div class="content-code"> <div id="payCode" data-id=""> <div class="renovate"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-time-out.png"> <span>点击重新获取</span> </div> </div> <div class="pay-style"><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/weixin.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/zhifubao.png"></span><span><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/jingdong.png"></span><span class="text">扫码支付</span></div> </div> <div class="bt-close"> <svg t="1567152543821" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12"> <defs> <style type="text/css"></style> </defs> <path d="M512 438.378667L806.506667 143.893333a52.032 52.032 0 1 1 73.6 73.621334L585.621333 512l294.485334 294.485333a52.074667 52.074667 0 0 1-73.6 73.642667L512 585.621333 217.514667 880.128a52.053333 52.053333 0 1 1-73.621334-73.642667L438.378667 512 143.893333 217.514667a52.053333 52.053333 0 1 1 73.621334-73.621334L512 438.378667z" fill="" p-id="10925"></path> </svg> </div> <div class="pay-balance"> <input type="radio" class="pay-code-radio" data-type="details"> <span class="span">钱包余额</span> <span class="balance" style="color:#FC5531;font-size:14px;">0</span> <div class="pay-code-tile"> <img src="https://csdnimg.cn/release/blogv2/dist/pc/img/pay-help.png" alt=""> <div class="pay-code-content"> <div class="span"> <p class="title">抵扣说明：</p> <p> 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。<br> 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。</p> </div> </div> </div> </div> <a class="pay-balance-con" href="https://i.csdn.net/#/wallet/balance/recharge" target="_blank"><img src="https://csdnimg.cn/release/blogv2/dist/pc/img/recharge.png" alt=""><span>余额充值</span></a> </div> <div style="display:none;"> <img src="" onerror='setTimeout(function(){if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com|baidu.com)$/.test(window.location.hostname)){window.location.href="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x77\x77\x77\x2e\x63\x73\x64\x6e\x2e\x6e\x65\x74"}},3000);'> </div> <div class="keyword-dec-box" id="keywordDecBox"></div> </body> <!-- 富文本柱状图 --> <link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/chart.css" /> <script type="text/javascript" src="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/lib/chart.min.js"></script> <script type="text/javascript" src="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/chart/widget2chart.js"></script> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/axios-83fa28cedf.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_highlight-8defd55d6e.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/pc_wap_common-be82269d23.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/components/js/edit_copy_code-bf594a7338.min.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/lib/cboxEditor/1.1.5/embed-editor.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://g.csdnimg.cn/lib/cboxEditor/1.1.5/embed-editor.min.css"> <link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.6.12/ckeditor/plugins/codesnippet/lib/highlight/styles/atom-one-light.css"> <script src="https://g.csdnimg.cn/user-accusation/1.0.6/user-accusation.js" type="text/javascript"></script> <script> // 全局声明 if (window.csdn === undefined) { window.csdn = {}; } window.csdn.sideToolbar = { options: { report: { isShow: true, }, qr: { isShow: false, }, guide: { isShow: true } } } $(function() { $(document).on('click', "a.option-box[data-type='report']", function() { window.csdn.loginBox.key({ biz: 'blog', subBiz: 'other_service', cb: function() { window.csdn.feedback({ "type": 'blog', "rtype": 'article', "rid": articleId, "reportedName": username, "submitOptions": { "title": articleTitle, "contentUrl": articleDetailUrl }, "callback": function() { showToast({ text: "感谢您的举报，我们会尽快审核！", bottom: '10%', zindex: 9000, speed: 500, time: 1500 }) } }) } }) }); }) </script> <script src="https://g.csdnimg.cn/baidu-search/1.0.12/baidu-search.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/download/old_static/js/qrcode.js"></script> <script src="https://g.csdnimg.cn/lib/qrcode/1.0.0/qrcode.min.js"></script> <script src="https://g.csdnimg.cn/user-ordercart/3.0.1/user-ordercart.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/user-ordertip/5.0.3/user-ordertip.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/order-payment/4.0.5/order-payment.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/pc/js/common-a425354f6a.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/pc/js/detail-bb3607a690.min.js" type="text/javascript"></script> <script src="https://csdnimg.cn/release/blogv2/dist/pc/js/column-f814d377e0.min.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/side-toolbar/3.4/side-toolbar.js" type="text/javascript"></script> <script src="https://g.csdnimg.cn/copyright/1.0.4/copyright.js" type="text/javascript"></script> <script> $(".MathJax").remove(); if ($('div.markdown_views pre.prettyprint code.hljs').length > 0) { $('div.markdown_views')[0].className = 'markdown_views'; } </script> <script type="text/javascript" src="https://csdnimg.cn/release/blog_mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script type="text/x-mathjax-config"> MathJax.Hub.Config({ "HTML-CSS": { linebreaks: { automatic: true, width: "94%container" }, imageFont: null }, tex2jax: { preview: "none", ignoreClass:"title-article" }, mml2jax: { preview: 'none' } }); </script> <script type="text/javascript" crossorigin src="https://g.csdnimg.cn/common/csdn-login-box/csdn-login-box.js"></script></html>
已于 2023-04-05 20:08:29 修改
本文详细介绍了HTML表格的结构，包括表格标签如