表格、列表和媒体元素

最新推荐文章于 2024-10-08 09:12:18 发布

班班爱吃糖

最新推荐文章于 2024-10-08 09:12:18 发布

阅读量105

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_51346919/article/details/125499191

版权

本文详细介绍了HTML中的无序列表<ul>、有序列表<ol>及其类型属性，以及定义列表<dl>的用法。此外，还涵盖了表格<table>的结构与样式控制，以及媒体元素如视频<video>和音频<audio>的使用，包括跨行、跨列、自动播放等属性。同时，文章讨论了网页结构元素如<header>、<footer>、<section>等在网页布局中的作用和应用。

摘要由CSDN通过智能技术生成

按字母顺序排列，小写，排列为abcd列表:无序、有序和定义列表

无序列表

语法：

<ul>

<li>小了白了兔</li>

<li>白了又了白</li>

</ul>

有序列表

语法：

<ol>

<li>小了白了兔</li>

<li>白了又了白</li>

</ol>

<ol type="A">：将默认的数字序号转换成字母序号ABCD

值	描述
1	默认值，数字有序数列，排列为1 2 3 4
a	按字母顺序排列，小写，排列为a b c d
i	罗马字体，小写，排列为i ii iii iv
I	罗马字体，大写I II III IV

定义列表

一般用于一个标题下有一个或多个列表项的情况

语法：

<dl>

<dd>标题1的内容XX</dd>

<dd>标题1的内容YY</dd>

<dd>标题2的内容AA</dd>

<dd>标题2的内容BB</dd>

</dl>

类型	说明	项目符号
无序列表	以<ul>标签来实现以<li>标签表示列表项	无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表	以<ol>标签来实现以<li>标签表示列表项	有序列表ol-li一般用于显示带有顺序编号的特定场合
定义类表	以<dl>标签来实现以<dt>标签定义列表项以<dd>标签定义内容	定义列表一般适用于带有标题和标题解释性内容的场合

备注：

1、列表元素都是块元素，都是独占一行

2、定义元素中，dt与dd是同级标签，不是父子标签，以下写法是错误的

<dl>

<dt>

<dd></dd>

</dt>

</dl>

正确写法是：

<dl>

<dt> 水果</dt>

<dd>桃子</dd>

</dl>

表格

语法：

<table>

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

...

<td>第一行第M列</td>

<tr/>

...

<tr>

<td>第N行第一列</td>

<td>第N行第二列</td>

...

<td>第N行第M列</td>

<tr/>

</table>

跨行跨列：在<td>标签中添加属性

跨行：rowspan="所跨行数"

跨列：colspan="所跨列数"

居中：<tr align="center">表格行内容居中

显示边框：<table border="#"> #=1 2 3 4 表示边框的粗细，数字越大边框越粗

媒体元素：

视频元素：video

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

</video>

例如：<video src=" video/video.mp4" controls/>

类型：

Ogg

MPEG4

WebM

一般情况下，考虑到浏览器的兼容性，可多写几种格式：

autoplay：自动播放属性，放在<video>里边使用

音频元素：audio

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

</audio>

controls：提供播放、暂停和音量的控制键，放在<audio>里边使用

网页结构：

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