前端 HTML(2)-CSDN博客

本文链接：https://blog.csdn.net/a258139/article/details/128936724

本文介绍了HTML中常见的列表类型，包括无序列表、有序列表和定义列表的使用方法。接着讲解了表格的创建，包括基本表格、表头、跨行和跨列的操作。此外，还提到了HTML5的新特性，如使用<video>和<audio>标签处理视频和音频，以及<iframe>标签用于页面嵌入。

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

1.列表

网页中常用到的列表为无序列表，有序列表和定义列表。

无序列表（<ul>标签）；
有序列表（<ol>标签）；
定义列表（<dl>标签）；

1.2.无序列表

无序列表始于<ul>标签，每个列表项始于<li>标签，其语法结构如下。
没有顺序级别之分，使用粗体圆点并列。

<ul>
	<li>无序列表1</li>
	<li>无序列表2</li>
	<li>无序列表3</li>
</ul>

1.3.有序列表

有序列表始于<ol>标签，每个列表项始于<li>标签，其语法结构如下。
各列表按照数字从小到大的顺序排列。

<ol>
	<li>有序列表1</li>
	<li>有序列表2</li>
	<li>有序列表3</li>
</ol>

1.4.定义列表

以<dl>标签开始，每个定义列表项以<dt>开始，每个定义列表项的定义以<dd>开始，其语法结构如下。
是项目及注释的组合。

<dl>
	<dt>茶</dt>
	<dd>乌龙茶</dd>
	<dd>铁观音</dd>
	
	<dt>咖啡</dt>
	<dd>拿铁</dd>
	<dd>摩卡</dd>
</dl>

2.表格

表格的标签是由<table>标签定义的，每个表格的行由<tr>标签定义，每行的单元格由<td>标签定义。
通常会给<table>标签设置border属性，用来指定边框的宽度。

<table border="1">
	<tr>
		<td>第一行第一列单元格</td>
		<td>第一行第二列单元格</td>
		<td>第一行第三列单元格</td>
	</tr>
	<tr>
		<td>第二行第一列单元格</td>
		<td>第二行第二列单元格</td>
		<td>第二行第三列单元格</td>
	</tr>
	<tr>
		<td>第三行第一列单元格</td>
		<td>第三行第二列单元格</td>
		<td>第三行第三列单元格</td>
	</tr>

代码运行结果：

2.2.表格表头

使用<th>标签进行定义，会把表头显示为粗体居中的文字。

<table border="2">
	<tr>
		<th>第一行第一列的标题</th>
		<th>第一行第二列的标题</th>
		<th>第一行第三列的标题</th>
	</tr>
	<tr>
		<td>第一行第一列单元格</td>
		<td>第一行第二列单元格</td>
		<td>第一行第三列单元格</td>
	</tr>

代码运行结果：

2.3.表格的跨行

跨行指的是单元格在垂直方向上的合并，使用<td>标签的rowspan属性实现单元格的跨行操作，其语法结构如下。

<table border="1">
        <tr>
            <td rowspan="2">星期一</td>
            <td>跑步</td>
            <td>8人</td>
        </tr>
        <tr>
            <td>篮球</td>
            <td>10人</td>
        </tr>

        <tr>
            <td rowspan="2">星期五</td>
            <td>足球</td>
            <td>22人</td>
        </tr>
        <tr>
            <td>游泳</td>
            <td>8人</td>
        </tr>

    </table>

代码运行结果：
可以看到星期一和星期五都跨了两行。

2.4.表格的跨列

跨列指的是单元格的横向合并，使用<td>标签的colspan属性实现单元格的跨列操作，其语法结构如下：

<table border="1">
        <tr>
            <td colspan="2">体育项目</td>
        </tr>
        
        <tr>
            <td>跑步</td>
            <td>8人</td>
        </tr>

        <tr>
            <td>篮球</td>
            <td>10人</td>
        </tr>

        <tr>
            <td>足球</td>
            <td>22人</td>
        </tr>

        <tr>
            <td>游泳</td>
            <td>8人</td>
        </tr>

    </table>

代码运行结果：
可以看到体育项目那里合并了两列。

2.5.表格的跨行与跨列

把跨行和跨列运用到了一起，则形成了即跨行又跨列的表格。

<table border="1">
        <tr>
            <td colspan="3">体育项目</td>
        </tr>
        
        <tr>
            <td rowspan="2">星期一</td>
            <td>跑步</td>
            <td>8人</td>
        </tr>
        <tr>
            <td>篮球</td>
            <td>10人</td>
        </tr>

        <tr>
            <td rowspan="2">星期五</td>
            <td>足球</td>
            <td>22人</td>
        </tr>
        <tr>
            <td>游泳</td>
            <td>8人</td>
        </tr>

    </table>

代码运行结果：在这里插入图片描述

体育项目那里合并了三列，星期一和星期五着都跨了两行。

3.HTML5 媒体元素

HTML5规定了一种通过<video>标签播放视频的标准方法，其语法结构如下。

<video src=“视频路径” controls=“controls”></video>

<video>标签的常用属性

HTML5中，使用<audio>标签播放音频文件，支持的格式包括MP3，Ogg，WAV这三种格式，其语法结构如下。

<audio src=“音频路径” controls=“controls”></audio>

<audio>标签的常用属性

4.HTML5 结构标签

HTML5结构标签如下

5.<iframe>框架

用于在页面中任意的位置嵌入另一个网页。

<iframe>框架的基本结构语法如下。

<iframe src=“页面地址” width=“宽度” height=“高度” name=“名称”></iframe>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=i, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe src="https://cn.bing.com/" width="1000" height="500" name="bilibili"></iframe>
</body>
</html>