HTML列表、表格与媒体元素

IT技术2年前 (2022)更新 IT大王

0 24

1、列表

无序列表和定义列表在网页制作中应用非常广泛

什么是列表：

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

无序列表

<!--ul 声明无序列表-->
<ul>
<!--li 声明列表项-->
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>计算机</li>
</ul>

列表项中可以包含图片、文本，还可以嵌套列表、其他标签等

无序列表的特性

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

有序列表

<!--ol 声明有序列表-->
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>计算机</li>
</ol>

有序列表默认以数字序号显示

有序列表与无序列表一样，也可以嵌套列表、可以包含图片、文本、其他标签等

有序列表的特性

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

自定义列表

<!--dl 声明定义列表-->
<dl>
<!--dt 声明列表项-->
<dt>水果</dt>
<!--dd 定义列表项内容-->
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>

定义列表也可以嵌套列表、包含图片、文本、其他标签等

以后的网页制作中经常会用到定义列表，特别是图文混排的情况

定义列表的特性

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

小结：列表对比

列表之间可以互相嵌套，进行页面的局部布局

2、表格

基本结构

单元格
行
列

表格的基本语法

<!--table表格标签-->
<table border="1px">
<!--tr 行标签-->
<tr>
<!--td 单元格标签-->
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>

表格的跨列

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

表格的跨行

<table >
<tr>
<!--rowspan 所跨的行数-->
<td rowspan="n"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

表格的跨行和跨列

<table>
<tr>
<!--跨列-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!--跨行-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
</table>

3、音频、视频

如何实现在网页上播放视频和音频？

第三方自主开发的播放器
Flash
HTML5媒体元素

在HTML5问世之前，要在网页上展示视频、音频、动画等，除了使用第三方自主开发的播放器外，使用最多的工具应该算是Flash了，但是它需要在浏览器上安装各种插件才能使用，有时候速度也会非常慢。 HTML5的出现改变了这一状况，在网页中使用HTML5来播放音频、视频再也不需要安装插件，只需要一个支持HTML5的浏览器就可以了。

视频标签

src：指定要播放的视频文件的路径
controls：提供播放、暂停和音量的控件
autoplay：自动播放属性
loop：视频的循环播放
<video src="https://www.cnblogs.com/wyh518/p/%E8%A7%86%E9%A2%91%E8%B7%AF%E5%BE%84" controls autoplay></video>

音频标签

src：指定要播放的音频文件的路径
trols：提供播放、暂停和音量的控件
<audio src="https://www.cnblogs.com/wyh518/p/%E9%9F%B3%E9%A2%91%E8%B7%AF%E5%BE%84" controls autoplay></video>

4、页面结构分析

HTML5结构元素

5、内联框架

iframe 单页面内联

src：引用页面地址
name：框架标识名
<iframe src="https://www.cnblogs.com/wyh518/p/path" name="mainFrame" ></iframe>

iframe属性（实现页面间的相互跳转）

在被打开的框架上加name属性
<iframe name="mainFrame"></iframe>
在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href="https://www.baidu.com/" target="mainFrame">加载</a>

6、小结

# IT技术

文章版权归作者所有，未经允许请勿转载。

版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com