一,列表
1,无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--无序列表 -->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
</body>
</html>列表常用的属性: type 定义无序列表的标记形状
type="disc" 实心圆
type="none"无标记 circle 标记为空心圆 square 标记为实心方块
2,有序列表: <ol> <li></li></ol>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>第一行</li>
<li>第二行</li>
</ol>
</body>
</html>可选属性:type ="decimal" 标记为数字
decimal-leading-zero 0开头的数字标记
lower-alpha 小写英文字母
upper-alpha 大写英文字母
3,自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!-- 自定义列表 -->
<dl>
<dt>
<img src="./t01a7a51a3b7bd140ec.jfif" alt="">
<dd>这是一个三星手机</dd>
<dd>2000万像素</dd>
<dd>莱卡双摄</dd>
</dt>
<dt>
下面是一些列表
<dd>自定义列表一</dd>
<dd>自定义列表2</dd>
<dd>自定义列表三</dd>
</dt>
</dl>
</body>
</html><dl>
<dt>图片
<dd>对图片内容进行解释</dd>
</dt>
<dl>
以上结构,常用于商品展示介绍
二,表格
1,表格基本标签
表格标签<table></table>
tr表示行
td表示表格元素
th表头标签
thead标签,body标签分别表示:表头和身体
caption表示表格的标题
2,常用属性
table的属性
border定义表格的边框 属性值 可为 1,2,3....
width 定义表格 的宽度 属性值 不需要加单位
align 定义表格的位置 属性值有 center left right
cellspacing 定义表格与表格之间的距离 属性值不用带单位
cellspadding 定义内的内容距离表格的距离 属性值不用带单位
tr 的属性
可以定义tr的的高度 height
3,表格的合并
通过 colspan="合并表格的列数"可以合并列
通过rowspan="合并表格的行数"可以合并表格的行
一下代码演示了表格常用的一些属性,合并方法等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!-- 这是一个普通的表格 -->
<table border="1" cellpadding="2" cellspacing="1">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<br>
<hr>
<br>
<!-- 这是一个带有表头的表格 -->
<table border="1" cellpadding="2" cellspacing="1">
<tr>
<th>11</th> <!--当加hd的时候表格内的字体会加粗,作为一个表头-->
<th>12</th>
<th>13</th>
</tr>
<tr>
<th>21</th>
<td>22</td>
<td>23</td>
</tr>
<tr>
<th>31</th>
<td>32</td>
<td>33</td>
</tr>
</table>
<br>
<hr>
<br>
<!-- 这是一个加了thead的表格,可以将表格分为头和尾两个部分 -->
<table border="1" cellpadding="2" cellspacing="1" width="200" height="20" align="center" >
<thead>
<th>11</th>
<th>12</th>
<th>13</th>
</thead>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<br>
<hr>
<br>
<!-- 跨行跨列的练习 -->
<table border="1" cellpadding="2" cellspacing="1" width="200" height="20" align="center" >
<caption>表格跨行,跨列的练习</caption>
<tr>
<td colspan="2">11</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td colspan="2" rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
