表格相关内容
有序列表、无序列表、自定义列表
<body>
<!-- 无序列表 -->
<h1>水果列表</h1>
<!-- ul表示无序列表的整体 -->
<!-- li表示无序列表的每一项 -->
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
<li><p>随意添加</p></li>
</ul>
<!-- 注意点;
ul标签中之允许包含li标签
li标签可以包含任何内容
-->
<!--有序列表 -->
<!-- ol表示有序列表的整体 ,用于包含li-->
<!-- li表示有序列表的每一项 -->
<h1>成绩列表</h1>
<ol>
<li>宋亚轩:100</li>
<li>贺俊霖:100</li>
<li>严浩翔:100</li>
</ol>
<!-- 注意点;
ol标签中之允许包含li标签
li标签可以包含任何内容
-->
<!-- 自定义列表 -->
<!-- dl 表示自定义列表的整体 ,用于包dt、dd
dt 表示自定义列表的主题
dd 表示自定义列表的每一项内容 dd会默认显示缩进效果
dt、dd标签可以包含任何内容
-->
<h1>帮助中心</h1>
<dl>
<dt>帮助中心</dt>
<dd>帮助中心</dd>
<dd>帮助中心</dd>
<dd>帮助中心</dd>
</dl>
<!-- 按住ALT 帮助中心(光标在帮前面)
帮助中心
帮助中心
帮助中心
之后ctrl+shift选中要移动的
ctrl+x 剪切
之后在alt 按住选择多行位置
ctrl+v粘贴过来
-->
<!-- 无序列表最常用、有序偶尔用、自定义列表底部导航用 -->
</body>
效果图
表格标签
<body>
<!-- table表示表格的整体
tr表示表格的每一行
td表示表格的单元格
table>tr>td
-->
<!-- 四行三列 -->
<table border="1" width="300" height="300">
<caption><h3>时代少年团</h3></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>马嘉祺</td>
<td>100</td>
<td>帅</td>
</tr>
<tr>
<td>丁程鑫</td>
<td>100</td>
<td>美</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>张真源</td>
<td>100</td>
<td>秀</td>
</tr>
</tfoot>
<!--boder边框宽度
width表格宽度
height表格高度
-->
<!-- 表格大标题 caption 默认居中 注意:写在table内部
表格单元格 th 表示一列小标题,通常用于表格第一行,默认加粗居中
th标签写在tr标签内部(用于替换td标签)
-->
<!--表格结构标签 注意点:内部用于包裹tr标签
thead:表格的头部
tbody:表格主体
tfoot:表格底部
-->
<!-- ctrl+d 可以选中下一个一样的内容,可以一起替换 -->
</table>
</body>
效果图:
合并单元格 左上原则
跨行合并(垂直合并成一个) rowspan
跨列合并(水平合并成一个)colspan
取值为所占格子数
<tbody>
<tr>
<td>马嘉祺</td>
<td rowspan="2">100</td>
<td rowspan="2">帅</td>
</tr>
<tr>
<td>丁程鑫</td>
<!-- <td>100</td> -->
<!-- <td>美</td> -->
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</tfoot>
效果图
注:只有同一个结构标签的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)