HTML中列表、表格与媒体元素

最新推荐文章于 2023-03-06 17:15:50 发布

原创最新推荐文章于 2023-03-06 17:15:50 发布 · 329 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

本文详细介绍了HTML中的列表（有序列表、无序列表、定义列表）及其样式设置，表格的使用，包括表格的基本语法、属性及单元格操作。此外，还探讨了媒体元素，如视频和音频的播放特性，包括支持的格式、控制属性以及浏览器兼容性。最后，提到了HTML5的页面结构元素和iframe框架的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《列表、表格与媒体元素》
一、列表的使用
1.列表是信息资源的一种展现形式，它可以使信息更加结构化条理化，便于阅读
2.列表（List）的分类：
a.有序列表
b.无序列表
c.定义列表
3.无序列表：
a.使用ul标签包裹(unsorted list的简写)
b.里面包含li表示列表项（list item)
c.每一项独占一行
d.每一项前面默认使一个实心小圆点
举例：

<!-- 无序列表-->
<ul>
	<li>aaaaa</li>
	<li>bbbb</li>
	<li>ccccc</li>
</ul>

4.有序列表：
a.使用ol标签包裹（order list的简写)
b.里面包含li
c.每一项默认有阿拉伯数字编号
举例：

<!-- 有序列表-->	
<ol>
	<li>aaaaa</li>
	<li>bbbb</li>
	<li>ccccc</li>
</ol>

5.定义列表：
a.是一种标题和列表的结合
b.dl作为外层标签（define list)
c.dt表示一个标题（标题可以有多个，也可以没有）
d.dd表示一个列表项
举例：

<!--定义列表-->
<dl>
	<dt>aaaa</dt>
	<dd>bbbb</dd>
	<dd>ccccc</dd>
	<dd>dddd</dd>
	
	<dt>国内水果</dt>
	<dd>苹果</dd>
	<dd>香蕉</dd>
	<dd>葡萄</dd>
<dl>
<!--  定义列表-->
<dl>
	<dd>布林</dd>
	<dd>车厘子</dd>
	<dd>牛油果</dd>
</dl>

6.列表样式
a.list-style-type属性设置列表项标记的类型
常用属性值说明
none 无标记符号
disc 实心圆，默认类型
circle 空心圆
square 实心正方形
decimal 数字
b.list-style:表示在一个声明中设置所有列表的属性。
按照list-style-type——>list-style-position——>list-style-image的顺序设置属性值。
可是实际中会直接使用list-style来设置列表无标记符。
二、表格的使用
1.表格在现实生活中非常常用，行列整齐，格局方正，数据清晰，word文档中也有表格
2.表格由行列组成，数据使存放在每一个单元格里面的
3.表格的语法结构如下：

<table>
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>22</td>
	</tr>
</table>

4.table表示表格
5.tr表示行（row)
6.td表示列(column)，即单元格
7.th表示表头(table head)，或者叫列标题，会默认居中且粗体显示
8.table标签的border属性可以给表格设置边框：border=“1”（已经废弃不建议使用）
9.表格的跨列（合并列）:colspan=“跨的列数”
10.表格的跨行（合并行）：rowspan=“跨的行数”

11.table的常用属性：
width属性设置表格的宽度，
height设置表格的高度，
border设置表格的边框宽度(粗细)，像素值默认为0
align设置表格在网页中的水平对齐方式，如left,center,right
cellspacing设置单元格与单元格边框之间的空白间距宽度，像素值默认为2
cellpadding设置单元格内容与边框线之间的空白间距宽度，像素值默认为1
bgcolor设置表格的背景色
background设定表格的背景图
bordercolor设定表格边框线的颜色

标题标签<caption>:标题标记是成对出现的，用于表示一个表格的“标题文字”(看起来在表格线的外面)，写在table标签中
表头标签<th>:成对出现，有特殊效果：自动加粗并居中
表格行标签<tr>:成对出现，一组<tr>标记表示表格中的一行，要在<table>中使用。

12.单元格标签:又称为列标记，一个标记中可以嵌套若干个标记。
width属性设置表格的宽度，
height设置表格的高度，
align设置表格在网页中的水平对齐方式，如left,center居中对齐,right右对齐
valign设置单元格中的内容的垂直对齐方式，如top顶部对齐,middle居中对齐,bottom底部对齐
rowspan设置要跨行（纵向）合并的单元格数
colspan设置要跨列（横向）合并的单元格数
bgckground设定表格的背景图
bordercolor设定表格边框线的颜色
三.媒体元素中的视频元素
1.video元素的基本语法：
<video src="视频路径"controls=“controls”>此处当浏览器不支持video元素时，进行内容提示
2.src是指视频的存放路径，可以是相对或绝对路径
2.controls属性：
a.controls属于boolean类型的属性，表示是否显示控制按钮（播放、全屏、进度）
b.只要出现这个属性就表示true，与属性值的内容没有关系
c.值可以是任意字符串，通常可以写成跟属性名词，或者写true，即便写false也表示true
d.还有一种规范写法是只写属性名
3.video标签一定要用容器标签的写法，即双标签写法，否则后续元素无法解析显示
4.可以通过width、height来控制video的宽度和高度
5.autoplay属性可以用于设置自动播放，boolean类型的属性
如：

	<video autoplay>
	<source src="video/video.webm"/>
	<source src="video/video.mp4"/>
	您的浏览器不支持video
       </video>

6.loop属性可以用于指定是否循环播放，boolean类型的属性
7.poster属性用于指定播放前的展示封面，指向一张图片的路径
8.HTML5支持的常见视频格式：
a.Ogg
b.MP4/MPEG4（用的最多）（MPEG4文件使用H264视频编解码器和AAC音频编解码器）
c.WebM
9.兼容各种浏览器的写法：
src属性只能链接一种格式的视频，很难让每种浏览器都支持这种格式，所以用source元素。
source元素嵌套在video元素里，并且可以出现多次，每个source元素对应于一种格式的视频。
两种写法：
第一种：
如：

		<video controls>
	<source src="视频路径.webm" type="video/webm"/>
	<source src="视频路径.mp4" type="video/mp4"/>
	你的浏览器不支持video标签
       </video>
上面两个视频路径指的同一视频的不同格式，type指的是类型
第二种：
如：<video controls>
	<source src="video/video.webm"/>
	<source src="video/video.mp4"/>
	你的浏览器不支持video标签
       </video>

10.也可以下载视频格式转换器来进行格式转换。
11.可以在标签之间放置文本内容，这样不支持此元素的浏览器就可以显示出该友好信息。

四.音频元素
1.网页中也可以播放音频
2.现在有HTML5的audio标签支持播放音频文件。
3.audio元素的基本语法
<audio src="音频路径"controls=“controls”>你的浏览器不支持audio标签
注意：让主流浏览器都支持视频和音频文件的方法如下：
通过source引入的视频文件的格式至少包括WebM和MPEG4或Ogg和MPEG4
通过source引入的音频文件的格式至少包括WAV和MP3或Ogg和MP3
4.歌曲播放失败原因：
a.文件路径写错了，或者文件本身就不存在
b.文件本身的格式不对，或者文件本身就被破坏了
c.文件名有中文，而又没有处理中文乱码
5.兼容写法：

<audio controls>
	<source src="video/video.webm"/>
	<source src="video/video.mp4"/>
	你的浏览器不支持video标签
</audio>

6.主流浏览器支持的音频格式
音频格式/浏览器 IE Firefox Opera Chrome Sfari
Ogg 不支持 3.5+ 10.5+ 3.0+ 不支持
MP3 9.0+ 不支持不支持 3.0+ 3.0+
WAV 不支持 4.0+ 10.6+ 不支持 3.0+

五.HTML5新增的页面结构元素
1.页面的大体布局分析
a.绘制网页的时候要先布局
b.页头
c.导航
d.主体
e.页脚（页尾）
2.页面布局的常用语义化标签
header:头部
footer:脚部，尾部
section:区域，独立的一部分
article:文章内容
aside:侧边栏
nav:导航
3.使用语义化标签，使得代码的语义更清晰，可读性更好，且便于搜索引擎读取分析

<body>
	<header>这里是头部</header>
	<nav>页面导航写在这里</nav>
	<section>这里是网页主体</section>
	<footer>这里是页脚</footer>
</body>

六.iframe框架
1.如果页面中的部分内容想要引用别的页面来呈现，可以使用内嵌框架iframe
2.iframe的语法:

<iframe src="嵌入页面的url"name="框架的名称"></iframe>

3.src是需要嵌入的页面url，可以是相对路径，绝对路径，包括外站路径
4.iframe相当于在页面中再次嵌入一个小的浏览器窗口
5.一个页面可以又多个内嵌框架
6.通过width和height调整宽高
7.frameborder="0"可以关闭边框
8.通过设置超链接的target指向iframe的name,可以让内嵌框架的页面内容发送跳转
<a herf="login.html"target=“frameName”>登录

七.通过W3Cscholl网页查看相关文档