Web前端基础-HTML-列表和表格

☞小雷同学

已于 2022-10-11 17:38:25 修改

阅读量400

点赞数 1

分类专栏： web前端文章标签：前端 html servlet

于 2022-09-01 20:30:19 首次发布

本文链接：https://blog.csdn.net/weixin_65688406/article/details/126648188

版权

web前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

• 🍋知识点一：无序列表

基本语法：

ul表示无序列表的整体，用于包裹li标签；

li表示列表的每一项，用于包裹任何内容；

<ul>
	<li>苹果</li>
	<li>香蕉</li>
	<li>葡萄</li>
</ul>

效果展示：

显示特点：列表每一项前默认显示圆点标识。（可在css中用list-style:none;去掉）

也可以用其type属性来消除：type=" none/disc/circle/square "

<h4>disc项目符号列表：</h4>
<ul type="none">
	<li>计算机科学与技术专业</li>
	<li type="none">软件工程专业</li>
	<li>信息管理与信息系统专业</li>
</ul>
<h4>circle项目符号列表</h4>
<ul>
	<li>计算机科学与技术专业</li>
	<li type="circle">软件工程专业</li>
    <li>信息管理与信息系统专业</li>
</ul> 
<h4>square项目符号列表</h4>
<ul>
	<li>计算机科学与技术专业</li>
	<li type="square">软件工程专业</li>
    <li>信息管理与信息系统专业</li>
</ul>

效果展示：

• 🍋知识点二：有序列表

基本语法：

ol表示整个有序列表，用于包裹li；

li表示有序列表的每一项，用于包裹任何内容；

<ol>
	<li>苹果</li>
	<li>香蕉</li>
	<li>葡萄</li>
</ol>

效果展示：

type属性："1"数字；"A"大写字母；"a"小写字母；"I"大写罗马数字；"i"小写罗马数字。

<h4>1数字编号：</h4>
<ol>
	<li>计算机科学与技术专业</li>
	<li>软件工程专业</li>
	<li>信息管理与信息系统专业</li>
</ol>
<h4>A字母表编号：</h4>
<ol type="A">
	<li>计算机科学与技术专业</li>
	<li>软件工程专业</li>
	<li>信息管理与信息系统专业</li>
</ol>
<h4>混合编号：</h4>
<ol>
	<li type="A">计算机科学与技术专业</li>
	<li type="1">软件工程专业</li>
	<li>信息管理与信息系统专业</li>
</ol>

效果展示：

• 🍋知识点三：自定义列表

基本语法：

dl表示自定义列表整体，用于包裹dt/dd标签；

dt表示自定义列表的主题；

dd表示自定义列表的每一项；

<dl>
	<dt>水果</dt><!--主题-->
	<dd>苹果</dd><!--内容-->
	<dd>香蕉</dd><!--内容-->
	<dd>葡萄</dd><!--内容-->
</dl>

效果展示：

• 🍋知识点四：表格

基本语法：

table表示表格的整体，可以包裹多个tr；

tr表示表格的每一行，可以包裹多个td；

td表示单元格，可用于包裹多个内容；（th为表头单元格，写在表头，替换td）

嵌套关系：table>tr>td(th)

caption为表格表头部分；

 <table border="" cellspacing="" cellpadding="">

 <caption>学生成绩表</caption>

 	<tr>
		<th>姓名</th><th>语文</th><th>数学</th>
	</tr>
 	<tr>
		<td>张三</td><td>99</td><td>88</td>
	</tr>
	<tr>
		<td>李四</td><td>96</td><td>98</td>
	</tr>
	<tr>
		<td>王五</td><td>100</td><td>100</td>
	</tr>
 </table>

效果展示：