新手学习HTML笔记(二)表格与列表

导航

·新手学习HTML笔记(一)标签_简单网页的结构解析
·新手学习HTML笔记(二)表格与列表
·新手学习HTML笔记(三)区块布局与表单

文章目录

  • 导航
  • 1.表格
    • 表格框架标签
    • 单元格合并
    • 举个栗子:表格
  • 2.列表
    • 列表的单行定义
    • 有序列表标号的种类
    • 举个栗子:列表

整理自菜鸟教程,便于复习和查阅
->原教程传送门<-

1.表格

表格由主标签

定义,其属性只有一个:

属性 含义
border 边框
1 显示边框

表格框架标签

标签 含义
定义标题
定义页眉
(列名)
定义主体
(文本)
定义页脚

框架定义后,内含内容需要按行定义放入框架各部分

使用定义单行,可选子标签定义每一格

标签名 含义
文本
列名
一般仅出现一次

文本直接插入标签之间,无需引号
子标签从上到下排放代表单行从左到右

单元格合并

通过在子标签加属性的方法完成

横向合并n格 纵向合并n格

纵向合并可能会很奇怪

举个栗子:表格

<!doctype html>
<html>	
	<head>
	
		</head>
	
	<body>	
		<table border="1">
			<caption>
				Example
				</caption>
			
			<thead>
				<tr>
					<th>
						A
						</th>
					<th colspan="2">
						B
						</th>
					</tr>
				</thead>
			
			<tbody>
				<tr>
					<td rowspan="2"></td>
					<td></td>
					<td></td>
					</tr>
				<tr>
					<td colspan="2"></td>
					</tr>			
				</tbody>
			
			<tfoot>
				<tr>
					<td colspan="3">
						This is The Foot.
						</td>
					</tr>
				</tfoot>
			
			</table>
			
		</body>
	</html>

新手学习HTML笔记(二)表格与列表_第1张图片

2.列表

列表定义支持预设列表(有序列表、无序列表)和定义列表,它们的主标签有区别:

类型 主标签
有序
    无序
    HTML5已取消支持
      定义

      定义和预设的区别在于是否支持自定义标号
      无序和有序的区别在于不同项的标号是否统一

      列表的单行定义

      \ 定义
      预设列表
    • 自定义列表 标号:

      项目:

      列表可嵌套

      有序列表标号的种类

      通过主标签属性

        更改

        标号类型
        (default) 阿拉伯数字
        “A” 大写字母
        “a” 小写字母
        “Ⅰ” 大写罗马数字
        " i " 小写罗马数字

        举个栗子:列表

        <!doctype html>
        <html>
        	<head>
        
        		</head>
        
        	<body>
        		<dl>
        			<dt>
        				123
        				</dt>
        			<dd>
        				qwe
        				<dt>
        			</dl>
        		<dl>
        			<dt>
        				456
        				</dt>
        			<dd>
        				rty
        				<dt>
        			</dl>
        			
        		</body>
        	</html>
        

        新手学习HTML笔记(二)表格与列表_第2张图片

        欢迎在评论区留言
        感谢浏览

      你可能感兴趣的:(#,HTML)