第七章：列表与表格
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>无序列表</title> 6 </head> 7 <body> 8 <!--样式相同的一组元素，可以称为列表--> 9 10 <!--无序列表：--> 11 <!--1.列表中各个元素在逻辑上没有先后顺序，没有级别之分--> 12 <!--2.无序列表中，列表项之间属于并列关系--> 13 <!--无序列表语法：--> 14 <!--<ul>无序列表开始--> 15 <!--<li></li>每一个列表项--> 16 <!--</ul>无序列表结束--> 17 <!--4.浏览器会要每个列表项前加上小圆点，不能修改其样式，并不实用--> 18 <!--5.通常会对无序列表进行样式重置。--> 19 <!--6.每个列表项独占一行--> 20 <!--7.无序列表是使用最广泛的列表--> 21 22 23 <ul> 24 <li>辽宁</li> 25 <li>吉林</li> 26 <li>辽黑龙江</li> 27 </ul> 28 29 </body> 30 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>有序列表</title> 6 </head> 7 <body> 8 9 10 <!--有序列表：--> 11 <!--1.列表中各个元素在逻辑上有先后顺序--> 12 <!--2.有序列表中，列表项之间属于并列关系--> 13 <!--有序列表语法：--> 14 <!--<ol>有序列表开始--> 15 <!--<li></li>每一个列表项--> 16 <!--</ol>有序列表结束--> 17 <!--4.有序列表中的列表项默认以数字开头，可以用"type"属性修改--> 18 <!--5.type属性：数字：1 小写英文：a 大写英文：A 小写罗马：i 大写罗马：I--> 19 <!--6.不赞成使用type属性修改，可以使用css代替--> 20 <!--7.有序列表基本用不上--> 21 22 23 <ol type="I"> 24 <li>辽宁</li> 25 <li>吉林</li> 26 <li>黑龙江</li> 27 </ol> 28 29 <ol style="list-style-type: upper-alpha;"> 30 <li>辽宁</li> 31 <li>吉林</li> 32 <li>黑龙江</li> 33 </ol> 34 35 </body> 36 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自定义列表</title> 6 </head> 7 <body> 8 <!--自定义列表：--> 9 <!--1.自定义列表是两个层次的列表，由三种标签构成--> 10 <!--基本语法：--> 11 <!--a.<dl></dl>标签表示自定义列表的开始和结束--> 12 <!--<dt></dt>标签表示列表标题的开始和结束--> 13 <!--<dd></dd>标签表示每个列表项--> 14 <!--3.<dd>标记定义的列表项会向右缩进--> 15 <!--4.自定义列表可以实现在一个列表中进行多个分组--> 16 <!--自定义列表用得不多--> 17 18 <dl> 19 <dt>东北三省</dt> 20 <dd>辽宁</dd> 21 <dd>吉林</dd> 22 <dd>黑龙江</dd> 23 <dt>西南三省</dt> 24 <dd>云南</dd> 25 <dd>贵州</dd> 26 <dd>四川</dd> 27 28 </dl> 29 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格</title> 6 </head> 7 <body> 8 <!--table标签用来定义表格--> 9 <!--tr标签表示表格中的一行--> 10 <!--th标签表示表头单元格--> 11 <!--th中的文本会加粗，文本会居中--> 12 13 <!--td标签表示一个单元格--> 14 <!--td中的文本是左对齐的普通文本--> 15 16 <table border="2"> 17 <tr> 18 <th>表头第1格</th> 19 <th>表头第2格</th> 20 <th>表头第3格</th> 21 <th>表头第4格</th> 22 <th>表头第5格</th> 23 </tr> 24 <tr> 25 <td>第2行第1格</td> 26 <td>第2行第2格</td> 27 <td>第2行第3格第2行第3格</td> 28 <td>第2行第4格</td> 29 <td>第2行第5格</td> 30 </tr> 31 <tr> 32 <td>第3行第1格</td> 33 <td>第3行第2格</td> 34 <td>第3行第3格</td> 35 <td>第3行第4格</td> 36 <td>第3行第5格</td> 37 </tr> 38 </table> 39 40 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格</title> 6 </head> 7 <body> 8 <!--table标签用来定义表格--> 9 <!--tr标签表示表格中的一行--> 10 <!--th标签表示表头单元格--> 11 <!--th中的文本会加粗，文本会居中--> 12 13 <!--td标签表示一个单元格--> 14 <!--td中的文本是左对齐的普通文本--> 15 16 <!--表格注意事项：--> 17 <!--1.table tr th td 标签之间不能有任何内容，所有的内容都要写到th或td中--> 18 <!--2.不要试图通过属性来改变表格的样式，应该使用css对表格样式进行设置--> 19 <!--3.表格的单元格中可以放入任何元素，不仅是文字--> 20 21 <table border="1" cellspacing="0"> 22 <tr> 23 <th>表头第1格</th> 24 <th>表头第2格</th> 25 <th>表头第3格</th> 26 <th>表头第4格</th> 27 <th>表头第5格</th> 28 </tr> 29 <tr> 30 <td><img src="logo.gif"/></td> 31 <td>第2行第2格</td> 32 <td>第2行第3格第2行第3格</td> 33 <td>第2行第4格</td> 34 <td>第2行第5格</td> 35 </tr> 36 <tr> 37 <td>第3行第1格</td> 38 <td>第3行第2格</td> 39 <td>第3行第3格</td> 40 <td>第3行第4格</td> 41 <td>第3行第5格</td> 42 </tr> 43 </table> 44 45 46 </body> 47 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格</title> 6 </head> 7 <body> 8 <!--合并单元格： 9 1.在代码中找到要合并的单元格 10 2.保留要合并的第一个单元格，删除其它的单元格 11 3.给保留的单元格指定横跨的行数或列数 12 a.合并左右单元格（合并列）用：colspan="横跨的列数"; 13 b.合并上下单元格（合并行）用：rowspan="横跨的行数";--> 14 15 <table border="1" cellspacing="0"> 16 <tr> 17 <th>表头第1格</th> 18 <th>表头第2格</th> 19 <th>表头第3格</th> 20 <th>表头第4格</th> 21 <th>表头第5格</th> 22 </tr> 23 <tr> 24 <td colspan="2">第2行第1格</td> 25 26 <td>第2行第3格</td> 27 <td rowspan="2">第2行第4格</td> 28 <td>第2行第5格</td> 29 </tr> 30 <tr> 31 <td>第3行第1格</td> 32 <td>第3行第2格</td> 33 <td>第3行第3格</td> 34 35 <td>第3行第5格</td> 36 </tr> 37 <tr> 38 <td>第4行第1格</td> 39 <td rowspan="2" colspan="2">第4行第2格</td> 40 41 <td>第4行第4格</td> 42 <td>第4行第5格</td> 43 </tr> 44 <tr> 45 <td>第5行第1格</td> 46 47 <td>第5行第4格</td> 48 <td>第5行第5格</td> 49 </tr> 50 </table> 51 52 53 </body> 54 </html>
浙公网安备 33010602011771号