HTML列表、表格与媒体元素

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量105 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenxingjies/article/details/111636781
版权

Day 3 HTML的基础

列表

1、无序列表

语法：

<ul>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
    <li>内容</li>
</ul>

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	    <h2>热搜</h2>
		<ul>
		      <li>范冰冰演藏族女孩</li>
		      <li>撞死两个人后自拍</li>
		      <li>诗隆甜蜜出游</li>
		      <li>一线城市楼市退烧</li>
		 </ul>

	</body>
</html>

网页效果图：
在这里插入图片描述

由图可见无序列表每个列表项前面默认黑点

2、有序列表
语法：

<ol>
   <li>内容</li>
   <li>内容</li>
   <li>内容</li>
   <li>内容</li>
</ol>

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>热搜</h2>
		<ol>
		      <li>范冰冰演藏族女孩</li>
		      <li>撞死两个人后自拍</li>
		      <li>诗隆甜蜜出游</li>
		      <li>一线城市楼市退烧</li>
		 </ol>

	</body>
</html>

网页效果图：
在这里插入图片描述
可见有序列表每个列表项前面默认有序数字

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>
		</dl>
	</body>
</html>

网页效果图：
在这里插入图片描述
可见前面没有东西，但是可以分为标题和列表项

表格（简单通用 结构稳定）

语法：

<table>
		<tr><!--第一行-->
			<td>第一个单元格的内容</td>
			<td>第二个单元格的内容</td>
		</tr><!--第二行-->
	    <tr>
			<td>第一个单元格的内容</td>
			<td>第二个单元格的内容</td>
		</tr>
</table>

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本表格</title>
	</head>
	<body>
		<table border=1><!--显示边框-->
			<tr>
				<th>1行1列的标题</th>
				<th>1行2列的标题</th>
				<th>1行3列的标题</th>
			</tr>
			<tr>
				<td>1行1列的单元格</td>
				<td>1行2列的单元格</td>
				<td>1行3列的单元格</td>
			</tr>
			<tr>
				<td>2行1列的单元格</td>
				<td>2行2列的单元格</td>
				<td>2行3列的单元格</td>
			</tr>
		</table>
	</body>
</html>

网页效果图：
在这里插入图片描述

表格的跨列

语法：

<table>
   <tr>
      <td colspan="n">单元格内容</td><!--n为跨列的数目-->
   </tr>
   <tr>
      <td>单元格内容</td>
   </tr>
</table>

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨多列的表格</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td colspan="2">学生成绩</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>98</td>
			</tr>
			    <td>数学</td>
				<td>95</td>
			</tr>
		</table>
	</body>
</html>

网页效果图：
在这里插入图片描述

表格的跨行

语法：

<table>
   <tr>
      <td rowspan="n">单元格内容</td><!--n为跨行的数目-->
   </tr>
   <tr>
      <td>单元格内容</td>
   </tr>
</table>

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨多行的表格</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td rowspan="2">张三</td>
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
		</table>
	</body>
</html>

网页效果图：
在这里插入图片描述

视频元素

语法：

<video src="视频路径" controls autoplay loop="loop"></viedo> <!-- controls为提供播放、暂停和音量的控件 autoplay为自动播放 loop为循环播放-->

或者

<video controls>
   <source src="视频路径" type="video/mp4"/><!--type为视频文件种类-->

音频元素

语法：

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

或者

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

内联框架

语法：

<iframe src="引用页面地址" name="框架标识名" frameborder="边框大小" width="宽度" height="高度"></iframe>

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<iframe src="https://www.baidu.com" name="点我进百度" frameborder="1" width="1000" height="500"></iframe>
	</body>
</html>

网页效果图：
在这里插入图片描述

chenxingjies
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
第二章 列表、表格与媒体元素
NoKris的博客
06-17 348
​ 主要内容：有序列表，无序列表，定义列表；表格的使用，表格的跨列跨行，表格属性；video和audio；HTML5的结构元素；iframe内联框架。
HTML中列表、表格与媒体元素
qq_44186793的博客
03-29 272
《列表、表格与媒体元素》 一、列表的使用 1.列表是信息资源的一种展现形式，它可以使信息更加结构化条理化，便于阅读 2.列表（List）的分类： a.有序列表 b.无序列表 c.定义列表 3.无序列表： a.使用ul标签包裹(unsorted list的简写) b.里面包含li表示列表项（list item) c.每一项独占一行 d.每一项前面默认使一个实心小圆点 举例： <!-- 无序列表...
HTML5中列表、表格与媒体元素重点总结
妖精小狗的博客
08-17 1054
什么是列表？ 列表就是信息资源的一种展示形式。 可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息 列表中ul、ol、dl不能嵌套其他标签，但是li中可以嵌套其他标签 列表的分类： 一、无序列表 无序列表的特性： 没有顺序，每个&lt;li&gt;标签独占一行（块元素） 默认&lt;li&gt;标签项前面有个实心小圆点 一般用于无序类型的列表，...
HTML-列表、表格和媒体元素（详）
南劲竹的博客
08-22 686
什么是列表？       列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息 列表的分类     无序列表的特性&lt;ul&gt;               ·没有顺序，每个&lt;li&gt;标签独占一行（块元素）               ·默认&lt;li&gt;标签项前面有个实心小圆点。            ...
HTML5列表、表格、媒体、结构元素、iframe
qq_37465004的博客
07-08 644
列表： 无序列表： 语法： ........ ........ ........ 特性： 无序，块元素（独占一行）、默认内容之前加上实心小圆点 应用场景： 导航、侧边栏新闻、有规律的图文组合模块等。 有序列表： 语法： ....... ....... ....... 特性： 有序、块元素、内容之前默认阿拉伯数字递增 应用场景
列表、表格与媒体元素
weixin_30912051的博客
08-28 77
1.无序列表及其应用 　　语法： 　　<ul> 　　<li>第一项</li> 　　<li>第二项</li> 　　<li>第三项</li> 　　</ul> 　　遵循W3c的标准<ul>标签里只能嵌套<li>标签,不能嵌套其他标签。 　　<li>标签里可以...
HTML表格和HTML列表
xh7531的博客
01-10 346
HTML 表格和 Excel 表格很相似，都包括行、列、单元格、表头等元素，但是 HTML 表格 功能没有 Excel 表格那么强大，HTML 表格不支持排序、求和、方差等数学计算，它一般用来展示数据。 HTML 表格中，我们常用<table>、<tr>、<td> 及 <th> 这四个标签 <table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。 <tr> 表示表格的行
HTML 列表、表格、媒体元素.pdf
08-11
在HTML中，列表、表格和媒体元素是构建交互式、信息丰富的网页的关键组成部分。以下将详细阐述这些概念。 一、列表 列表是将信息以有序或无序的形式呈现给用户的重要方式。HTML提供了三种列表类型： 1. 无序列表...
HTML5+CSS3网页设计-第二章 列表表格与媒体元素.pptx
12-21
在HTML5中，列表、表格和媒体元素是构建网页内容的重要组成部分。 **列表(Lists)** HTML5提供了三种类型的列表：无序列表（`<ul>`）、有序列表（`<ol>`）和定义列表（`<dl>`）。无序列表通常用圆点或项目符号表示，...
漂亮的表格css+html
04-20
首先，HTML表格的基本结构包括`<table>`标签，它定义了一个表格。表格由`<tr>`（行）标签组成，每一行中又包含`<th>`（表头）和`<td>`（数据单元格）标签。例如： ```html 表头1 表头2 数据1 数据2 `...
第二章 列表、表格与媒体元素
墨渐生微的博客
08-25 2112
一、制作音乐排行榜           需求说明：使用无序列表制作音乐排行榜热门活动 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;热门活动&lt;/title&gt; &lt;/head&gt; &lt;
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1097
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 1000
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 401
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 247
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。
uu0216的博客
07-09 771
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式； 内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式； 链接式：使用 link 标签引入外部 CSS 样式表文件。 导入式：使用 @import 命令导入外部 CSS 样式表文件。
html&css基础
antyuki的博客
07-09 737
/

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值