HTML5：列表、表格与媒体元素用法

小半 • 2023年2月10日下午5:56 • 技术随笔 • 阅读 202

一、列表

1、列表无序列表语法

<ul>
<li>内容XX</li>
<li>内容YY</li>
</ul>

无序列表去掉前面的小圆点：list-style：none

2、有序列表语法

<ol>
<li>内容XX</li>
<li>内容YY</li>
</ol>
<ol type = "">  ---改变有序列表的属性
<li>内容XX</li>
<li>内容YY</li>
</ol>

3、定义列表

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

<dl>
<dt>标题1</dt>
<dd>标题1的内容XX</dd>
<dd>标题1的内容YY</dd>
<dt>标题2</dt>
<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>

5、表格语法

表格标签

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格

<table>
        <tr>
                <td>第一行第一列</td>
                <td>第一行第二列</td>
                <td>第一行第三列</td>
        <tr/>
.....
        <tr>
            <td>第N行，第一列<td/>
            <td>第N行第二列</td>
            <td>第N行第M列</td>
        <tr/>
</table>

borde	定义表格框的宽度
widt	定义表格宽度
cellspacing	定义单元格之间的空白
align	定义表格行的内容对齐方式
rowspan	规定单元格可跨的行数
colspan	规定单元格可跨的列数

例如：

<table width = "50%" border="1" cellspacing="0">
</table>

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

跨行：rowspan

跨列：colspan

二、媒体元素

视频：

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

音频：

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

三、网页结构

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