奉天承运，博主诏曰：


HTML基础教程 二

  • 内容简介
  • 列表
  • 列表主要分为3类：
  • 标签详解：
  • 操作练习：
  • 表格
  • 标签详解：
  • 操作练习
  • 视频，音频
  • 标签详解：
  • 操作练习
  • 视频多源头播放代码：
  • 内联框架
  • 标签详解：
  • 操作练习


内容简介

如题，本章讲解如何在html中插入列表，表格，视频，音频，内联框架。

列表

列表主要分为3类：

①无序列表：每个列表项平级，默认前面有黑点
②有序列表：列表项前面标记有序数字
③定义列表：分为标题和列表项两部分

标签详解：

标签

说明

<ul> </ul>

无序列表的首尾标签

<ol> </ol>

有序列表的首尾标签

<li> </li>

有序或者无序列表的标签项

<dl> </dl>

定义列表的首尾标签

<dt> </dt>

定义列表的标题标签

<dd> </dd>

定义列表的标签项

操作练习：

我们分辨编写3段不同标签的代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>列表演示</title>
 </head>
 <body>
  <!--下面是无序列表-->
  <ul>
   <li>今天是星期一</li>
   <li>明天是星期二</li>
   <li>后天是星期三</li>
  </ul>
  <!--下面是有序列表-->
  <ol>
   <li>今天是星期一</li>
   <li>明天是星期二</li>
   <li>后天是星期三</li>
  </ol>
  <!--下面是定义列表-->
  <dl>
   <dt>日期梳理</dt>
   <dd>今天是星期一</dd>
   <dd>明天是星期二</dd>
   <dd>后天是星期三</dd>
  </dl>
 </body>
</html>

右击桌面新建一个"txt"文档，将文件后缀改成"html"，弹出对话框点击确定：

html 列表demo html做列表_html


html 列表demo html做列表_ide_02


右击文件用“记事本”或者“notepad++”打开，将代码写入其中：

html 列表demo html做列表_控件_03


保存后运行效果如下：

html 列表demo html做列表_html 列表demo_04

表格

表格都是按行从左到右，从上到下，来编写代码，遇到合并单元格，从第一次编写到该单元格代码时开始跨行或者跨列。

标签详解：

标签

说明

<table> </table>

表格的首尾标签

<tr> </tr>

每行表格的首尾标签

<th> </th>

表头单元格内容

<td> </td>

普通单元格内容

border=" "

单元格的边框厚度，加在表格不同级别的标签中

colspan=" "

单元格跨列的数量

rowspan=" "

单元格跨行的数量

操作练习

我们先随便在“excel”中编写一个表格：

html 列表demo html做列表_html 列表demo_05


然后按从左到右，从上到下的顺序把代码编写出来：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>表格演示</title>
 </head>
 <body>
  <table align="ceter" width="1000px" height="100" border="1">
   <tr>
    <th colspan="7">班级信息统计表</th>
   </tr>
   <tr>
    <th>班级</th>
    <th>学号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th rowspan="4" colspan="2">这是一个超大的空单元格</th>
    <th>备注</th>
   </tr>
   <tr>
    <td rowspan="3">kb11</td>
    <td>1</td>
    <td>小红</td>
    <td>18</td>
    <td>零零后</td>
   </tr>
   <tr>
    <td>2</td>
    <td>小蓝</td>
    <td>16</td>
    <td>零零后</td>
   </tr>
   <tr>
    <td>3</td>
    <td>小粉</td>
    <td>14</td>
    <td>零零后</td>
   </tr>
  </table>
 </body>
</html>

将文档保存为“html”文件，运行后效果如下：

html 列表demo html做列表_html 列表demo_06

视频，音频

标签详解：

标签

说明

<video> </video>

视频的首尾标签

<audio> </audio>

音频的首尾标签

src=" "

视频或音频的路径

controls

提供播放、暂停和音量的控件

autoplay

自动播放

loop="loop"

循环播放

type=" "

文件格式

操作练习

我们先准备一个视频文件：

html 列表demo html做列表_html_07


然后在同级目录中新建“txt”文档编写一段代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>视频演示</title>
 </head>
 <body>
  <video src="video.mp4" controls autoplay loop="loop"></video> </body>
</html>

将文档保存为“html”文件，运行后效果如下：

html 列表demo html做列表_html 列表demo_08


音频文件只需要替换"video"为"audio"即可，此处不多做演示。可以自己动手试一试。

视频多源头播放代码：

html 列表demo html做列表_html 列表demo_09


比如有3种格式，将他们链接到同一个视频，只要任意一个视频路径有效，网页端就可以正常播放。代码如下：

<video controls>
    <source src="video.webm" type="video/webm"/>
    <source src="video.mp4" type="video/mp4"/>
    <source src="video.avi" type="video/avi"/>

内联框架

标签详解：

标签

说明

<iframe> </iframe>

内联框架的首尾标签

<iframe> </iframe>

引用页面地址

<name> </name>

框架标识名

操作练习

我们一百度首页为例编写一段代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>内联框架</title>
 </head>
 <body>
  <iframe src="http://www.baidu.com" name="123" width="800px" height="400px">这里写什么都不会显示</iframe>
 </body>
</html>

将文档保存为“html”文件，运行后效果如下：

html 列表demo html做列表_html_10


以上几种框架哪些是块标签，哪些是行内标签呢？是否可以组合使用呢？赶紧动手试一试吧！

钦此。