第二章列表、表格与媒体元素

最新推荐文章于 2024-07-22 15:19:55 发布

Tuerlechat，

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量37

点赞数

分类专栏： # HTML+CSS3 文章标签：媒体前端 html

本文链接：https://blog.csdn.net/weixin_55452293/article/details/126234485

版权

HTML+CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第二章列表、表格与媒体元素

列表分类

无序列表
有序列表
定义列表

无序列表

<ul> <!-- 声明无序列表 -->
    <li>xxxx</li> <!-- 声明列表项 -->
</ul>

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

有序列表

<ol> <!-- 声明有序列表 -->
    <li>xxxx</li> <!-- 声明列表项 -->
</ol>

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

定义列表

<dl> <!-- 声明定义列表 -->
    <dt>水果类目</dt> <!-- 声明列表项 -->
    <dd>桃子</dd>
    <dd>西瓜</dd>
    <dd>橘子</dd> <!-- 定义列表项内容 -->
</dl>

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

表格

简单通用
结构稳定

表格基本结构

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

HTML5表格结构

<!-- HTML5表格结构 -->
<table>
    <thead></thead>
    <tbody></tbody>
    <tfooter></tfooter>
</table>

表格内容的移动

内容水平移动：align

left：左

center：居中

right：右

内容垂直移动：valign

top：上

center：居中

bottom：下

表格的跨列和跨行

    <td colspan="n">单元格内容</td> <!-- colspan:所跨的列数 -->
	<td rowspan="n">单元格内容</td> <!-- rowspan:所跨的行数 -->

视频和音频

视频基本结构

<video src="视频路径" controls></video>
<!-- 
	src:指定要播放的视频文件的路径
	controls:提供播放、暂停和音量的控件 
-->

音频基本结构

<audio src="音频路径" controls></audio>
<!-- 
	src:指定要播放的音频文件的路径
	controls:提供播放、暂停和音量的控件 
-->

属性

<video autoplay loop controls>
    <source src="xxx" type="video/webm"/>
    <source src="xxx" type="video/mp4"/>
</video>

autoplay：自动播放

loop：循环播放

controls：底部控件

注意：不同的浏览器渲染不同效果不一定

解决兼容性问题

<!-- 在这种结构中，用source放入不同格式的视频或音频文件时，不同的浏览器可以选择其可以支持播放的格式 -->
<video>
    <source src="xxx" type="video/webm"/>
    <source src="xxx" type="video/mp4"/>
</video>

HTML5的结构元素

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

iframe内联框架

iframe内联框架基本结构

<iframe src="path" name="f1"></iframe>
<!-- 
	src:引用页面地址
	name:框架标识名
-->

iframe属性

<iframe src="xxx"
        frameborder="yes/no/0/1"
		scrolling="auto/yes/no">
</iframe>

frameborder：有无边框
scrolling：有无滚动条

实例：使用iframe嵌套网页

	<h2>使用iframe嵌套网页</h2>
	<!-- 设置一个跳至到iframe框架内的超链接 -->	
	<p><a href="https://www.baidu.com/" target="f1">点击打开百度</a></p>
	<p><a href="https://www.bdqn.cn" target="f1">点击打开北大青鸟</a></p>
	<p><a href="index05-1.html" target="f1">点击打开一个HTML页面</a></p>
	<!-- 设置一个iframe框架 -->
	<iframe name="f1" width="1500" height="1000"></iframe>