列表、表格与媒体元素

最新推荐文章于 2023-03-28 10:48:43 发布
最新推荐文章于 2023-03-28 10:48:43 发布
阅读量355 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27630677/article/details/111637065
版权

列表、表格与媒体元素

什么是列表

    列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

列表的分类

无序列表

无序列表结构

<ul>  //声明无序列表
	<li>...</li>    //声明列表项
	<li>...</li>
	<li>...</li>
</ul>

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>热门活动</title>
	</head>
	
	<body>
		<h3>热门活动<h3>
		<ul>
			<li><img src="image/img1.png" alt="未显示"><h6>推荐活动 | 原创音乐现金榜T榜</h6></li>
			<li><img src="image/img2.png" alt="未显示"><h6>推荐节目|《TAImusic》爆笑来袭</h6></li>
			<li><img src="image/img3.png" alt="未显示"><h6>推荐歌单 | 继续宠爱张国荣</h6></li>
			<li><img src="image/img4.png" alt="未显示"><h6>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</h6></li>
		</ul>
		
	</body>


</html>

在这里插入图片描述

无序列表的特性

    1.没有顺序,每个li标签独占一行（块元素）。
    2.默认li标签项前面有个实心小圆点。
    3.一般用于无序类型的列表，如导航，侧边栏新闻，有规律的图文组合模块等。

有序列表

有序列表结构

<ol>   //声明有序列表
	<li>...</li>    // 声明列表项
	<li>...</li>
	<li>...</li>
</ol>

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>音乐排行榜</title>
	</head>
	
	<body>
		<h2>音乐排行榜</h2>
		<ol>
			<li><a href="https://www.baidu.com" target="_blank">潇洒走一回</a></li>
			<li><a href="https://www.baidu.com" target="_blank">偏偏喜欢你</a></li>
			<li><a href="https://www.baidu.com" target="_blank">酒干倘卖无</a></li>
			<li><a href="https://www.baidu.com" target="_blank">不说再见</a></li>
			<li><a href="https://www.baidu.com" target="_blank">舍不得你</a></li>
			<li><a href="https://www.baidu.com" target="_blank">请跟我来</a></li>
		</ol>
		
	</body>


</html>

效果图
在这里插入图片描述

有序列表特性

    1.有顺序,每个li标签独占一行（块元素）。
    2.默认li标签项前面有顺序标记。
    3.一般用于排序类型的列表，如试卷，问卷选项等。

定义列表

<dl> ->声明定义列表
	<dt>...</dt> ->声明列表项
	<dd>...</dd> -> 定义列表项内容
	<dd>...</dd>
	<dd>...</dd>
</dl>

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>定义列表</title>
	</head>
	
	<body>
		<dl>
			<dt>水果</dt>
			<dd>香蕉</dd>
			<dd>苹果</dd>
			<dd>桃子</dd>
			<dd>西瓜</dd>
		</dl>
		
	</body>


</html>

效果图:
在这里插入图片描述

定义列表的特性

    1.没有顺序，每个dt，dd标签独占一行。（块元素）
    2.默认没有标记。
    3.一般用于 一个标题下有一个或多个列表项的情况。

列表对比

类型说明项目符号
无序列表以ul标签来实现
以li标签表示列表项		无序列表中没项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容。
有序列表以ol标签来实现
以li标签表示列表项		在这里插入图片描述
定义列表以dl标签来实现
以dt标签表示列表项
以dd标签定义内容		在这里插入图片描述

表格

语法

<table>   ->表格标签
	<tr>  ->行标签
		<th>第一个单元格的内容</th>   ->单元格标签 （head）
		<th>第二个单元格的内容</th>
	</tr>
	<tr>
		<td>第一个单元格的内容</td>   ->单元格标签（data）
		<td>第二个单元格的内容</td>
	</tr>
</table>

例子

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	
	<body>
		<table border="1">
			<tr>
				<th colspan="6">班级信息统计表</th>
			</tr>
			<tr>
				<th>班级</th>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th rowspan="4" colspan="2">备注</th>
			
			</tr>
				
			
			<tr>
				<td rowspan="3">kb99</td>
				<td>1</td>
				<td>王思聪</td>
				<td>18</td>
			
			</tr>
			
			<tr>
				<td>2</td>
				<td>PGone</td>
				<td>23</td>
			
			</tr>
			<tr>
				<td>3</td>
				<td>李小璐</td>
				<td>22</td>
			
			</tr>
		
		</table>
		
	</body>


</html>

效果图
在这里插入图片描述

表格的跨行和跨列

示例

<table>
	<tr>
		<td colspan="n">单元格内容</td>"colspan"表示跨列，n表示跨的列数
	</tr>
</table>

<table>
	<tr>
		<td rowspan="n">单元格内容</td>"colspan"表示跨行，n表示跨的行数
	</tr>
</table>

例子

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	
	<body>
		<table border="1">
			<tr>
				<th colspan="6">班级信息统计表</th>
			</tr>
			<tr>
				<th>班级</th>
				<th>学号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th rowspan="4" colspan="2">备注</th>
			
			</tr>
				
			
			<tr>
				<td rowspan="3">kb99</td>
				<td>1</td>
				<td>王思聪</td>
				<td>18</td>
			
			</tr>
			
			<tr>
				<td>2</td>
				<td>PGone</td>
				<td>23</td>
			
			</tr>
			<tr>
				<td>3</td>
				<td>李小璐</td>
				<td>22</td>
			
			</tr>
		
		</table>
		
	</body>


</html>

效果图
在这里插入图片描述

媒体元素

视频元素

语法

<video src="视频路径" controls></vedio>

<video controls>
	<source src="视频路径" type="视频类型"/>
</video>

音频元素

<audio src="音频路径" controls></audio>

<audio controls>
	<source src="音频路径" type="音频类型"/>
</audio>

例子

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>音视频</title>
	</head>
	
	<body>
		<video src="veido/vedio.mp4" controls></video>
		<audio src="music/Richard Clayderman.mp3" controls></audio>
		
	</body>

</html>

效果图
在这里插入图片描述

神之子zp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用HTML开发商业网站-案例-制作音乐排行榜课件.pptx
07-10
使用HTML开发商业网站 案例-制作音乐排行榜 阶段案例——制作音乐排行榜 制作音乐排行榜 如果把个元素都看成盒子，则页面由多个盒子构成。整个模块由唱片背景和歌曲排名两部分构成。其中唱片背景由一个div进行整体控制，歌曲排名部分结构清晰，可由无序列表<ul>进行定义。 结构图如右所示。 div ul li li li li li li 分析效果图 控制效果图5-51的样式主要分为以下几个部分： （1）通过最外层的大盒子对页面的整体控制，需要对其设置宽度、高度、圆角、边框、渐变及内边距等样式，实现唱片背景效果。 （2）整体控制列表内容（ul），需要对其设置宽度、高度、圆角、阴影等样式。 （3）设置5个列表项（li）的宽高、背景样式属性。其中第一个li需要添加多重背景图像，最后一个li底部要圆角化，需要对它们单独进行控制。 分析效果图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>音乐排行榜</title> </head> <body> <div class="bg"> <ul> <li class="tp"></l
Java List 分割
热门推荐
suge_lean的博客
12-21 2万+
Java List 分割： 1、使用 Java ArrayList subList() 方法 2、使用 谷歌Lists.partition() 方法
Day01 HTML超文本标记语言
Libe2ty的博客
10-18 310
HTML HTML概述 HTML(HyperText Markup Language)超文本标记语言 超文本:是指页面内可以包含图片、链接、声音,视频等内容 标记:标签(通过标记符号来告诉浏览器网页内容该如何显示) <!DOCTYPE html> <!-- 注释 Ctrl+/ --> <html> <!-- 网页的头，设置网页的信息 --> <head> <!-- 设置网页字符集编码 --> <meta cha
拆分ArrayList为多个list
鸟哥哥的专栏
01-22 1328
public class CommonUtil { /** * List集合拆分 * * @param list 原始数据 * @param count 每个list的元素数量 * @param <T> * @return 拆分得到的list集合 */ public static <T> List<List<T>> splitListByCount(List<T&g
【面试宝典】ArrayList详解
youngpeople_的博客
01-05 488
由于本文篇幅过长，为了方便大家阅读和收藏，特意将本文转成了一份PDF版的文档。 点击下载Java学习手册，pdf教程。 1. 集合概述 Java中集合主要分为三大类： List：有顺序，可重复。 Set：无顺序，不可重复。 Map：无顺序，不可重复。 其中List类集合中，最常用的就是ArrayList。 2. ArrayList概述 ArrayList拆分成两个单词分别是Array+List，Array表示数组，List表示列表。所以也表示了ArrayList的底层使用数组实现的。 传..
HTML5+CSS3网页设计-第二章 列表表格与媒体元素.pptx
12-21
在HTML5中，列表、表格和媒体元素是构建网页内容的重要组成部分。 **列表(Lists)** HTML5提供了三种类型的列表：无序列表（`<ul>`）、有序列表（`<ol>`）和定义列表（`<dl>`）。无序列表通常用圆点或项目符号表示，...
HTML 列表、表格、媒体元素.pdf
08-11
在HTML中，列表、表格和媒体元素是构建交互式、信息丰富的网页的关键组成部分。以下将详细阐述这些概念。 一、列表 列表是将信息以有序或无序的形式呈现给用户的重要方式。HTML提供了三种列表类型： 1. 无序列表...
实验2列表、表格与多媒体标签（学生端资料）.zip
最新发布
03-14
在实际应用中，我们还会用到CSS来美化列表、表格和多媒体元素的外观。例如，可以通过设置边框、颜色、字体、对齐方式等属性来改变元素的样式。此外，使用CSS可以实现响应式设计，确保在不同设备和屏幕尺寸上内容的...
WEB前端技术-表格元素练习
12-27
可以使用媒体查询（Media Queries）和Flexbox或Grid布局来实现响应式表格，确保在小屏幕设备上也能良好展示。 8. ARIA角色和属性：对于无障碍访问，使用ARIA（Accessible Rich Internet Applications）属性可以增加...
ArrayList 分隔List集合,按指定大小,将集合分成多个
yangyangchu博客
06-25 8198
分页的原理 //初始化一个目标list List<String> arrayList = new ArrayList<>(); for (int i = 0; i <= 231; i++) { arrayList.add(i + ""); } //分割多少，计算一共会有多少页 in...
如何在Java中将一个列表拆分为多个较小的列表
yuguang的博客
03-28 4467
在Java中，有多种方法可以将一个列表拆分为多个较小的列表。在本文中，我们将介绍三种不同的方法来实现这一目标。
arraylist切割_Java ArrayList subList()方法
weixin_28835583的博客
12-23 3718
Java ArrayList subList()方法java.util.ArrayList.subList(int fromIndex, int toIndex) 方法用于截取位于给定范围内的所有元素。1 语法public List subList(int fromIndex, int toIndex)2 参数fromIndex：起始元素的索引。toIndex：结束元素的索引。3 返回值返回获取到...
Java将List按指定数量拆分成多个的两种实现方法
letterss的博客
06-08 1万+
有时候我们需要将大集合按指定的数量分割成若干个小集合。（比如：集合作为SQL中IN的参数，而SQL又有长度限制，所以需要分批分几次进行查询）
arraylist切割_Java：如何在多个小ArrayList中分割ArrayList？
weixin_39614011的博客
02-15 520
您可以使用subList(int fromIndex, int toIndex)获取原始列表的一部分的视图。从API：Returns a view of the portion of this list between the specified fromIndex, inclusive, and toIndex, exclusive. (If fromIndex and toIndex are ...
Java中如何将List拆分为多个小list集合
境里婆娑
01-18 2万+
文章目录一、如何将List拆分为多个小list 写在前面： 我是「境里婆娑」。我还是从前那个少年，没有一丝丝改变，时间只不过是考验，种在心中信念丝毫未减，眼前这个少年，还是最初那张脸，面前再多艰险不退却。 写博客的目的就是分享给大家一起学习交流，如果您对 Java感兴趣，可以关注我，我们一起学习 前言：在平常写代码时候可能会遇到需要将一个大list拆分多个小list，进行一些业务处理。 一、如何将List拆分为多个小list 如何将List拆分多个小list，首先我们需要list.sublist这个方法
把一个List拆分为几个大小一样的List
zhangliao613的专栏
05-10 4560
感谢有奉献精神的人 转自：http://blog.csdn.net/tengdazhang770960436/article/details/9145405 [java] view plain copy package com.dada.radom;      import java.util.ArrayList;   impor
数据库常用的四种方法
weixin_43457011的博客
09-08 1695
排序查询 select 列表属性，列表属性 from 列表名order by 列表属性，列表属性; 删除 delete from 列表名 where 列表属性=“值” 插入 insert into 列表名 values(值，值，值，值） insert into 列表名 （列1，列2，…）valves(值1，值2…) 修改 update 列表名 set 列表属性=新值 where 列表属性=某值 ...
将List数据分割成若干个小list
抬头仰望57的博客
08-09 1704
将List数据分割成若干个小list 有时候因为数据量过多而不好处理，所以我们希望将list分割成多个批次来进行处理，这怎么实现呢，话不多说，直接上代码 //获取所有数据列表 List<JSONObject> newstExecuteRateList = rateMapper.getRateList(); List<List<JSONObject>> dataList = new ArrayList<>(); int listSize =
HTML5与CSS3：列表、表格与媒体元素解析
"本资料详细介绍了HTML5和CSS3在网页设计中关于列表、表格和媒体元素的使用方法。" 在HTML5中，列表是组织和呈现信息的重要工具，包括三种类型：无序列表（`<ul>`）、有序列表（`<ol>`）和定义列表（`<dl>`）。无序...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值