HTML 基础三

HTML 基础三

目录

• HTML 基础三
  • 一.表格标签:<table>
    • • 1.基本表格
      • 2.跨行，跨列
  • 二.媒体元素
    • • 1.视频<video>
      • 2.音频<audio>
  • 三.页面结构
  • 四.内联框架<iframe>

在掌握了基本标签后，我们来继续学习几个更高级但是同样重要的元素：表格标签，媒体元素，页面结构以及内联框架

一.表格标签:<table>

1.基本表格

<!--table:定义表格
    tr:定义表格行
    td:定义标准单元格-->
<table>
  <tr>
   <td>数据</td>
   <td>数据</td>
  </tr>
  <tr>
   <td>数据</td>
   <td>数据</td>
  </tr>
</table>

2.跨行，跨列

<!--colspan 跨列
    rowspan 跨行>
<table>
  <tr>
   <td colspan="4">数据</td>
  </tr>
  <tr>
   <td rowspan="4">数据</td>
  </tr>
</table>

---

二.媒体元素

媒体元素包括视频video,音频audio

1.视频<video>

<!--src:资源路径
    controls:控制条
    autplay:自动播放-->
<video src="目标视频网址" controls autplay></video>

2.音频<audio>

<audio src="目标音频地址" controls autplay></audio>

三.页面结构

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

<header><h1>网页头部</h1></header>
<section><h2>网页主体</h2></section>
<footer><h1>网页脚部</h1></footer>

四.内联框架<iframe>

内联框架允许在当前文档中嵌套另一个文件

<!--src:地址(必填)
    name:框架标识名>
<iframe src="指定嵌入的文档的URL" name="mainname" ></iframe>
<!--frameborder:是否显示边框（0或1）
    w-h:宽度和高度-->
<iframe src="指定嵌入的文档的URL" frameborder="0" width="100px" height="100px"></iframe>

表格，媒体元素，页面结构和内联框架是构建现代网页的重要组件，通过合理使用就可以丰富网页内容啦。