<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>无序列表</title>

    <!--

    什么是列表

     列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，

     以便浏览者能更快捷地获得相应的信息！

     01.前面有默认的实心圆

     02.每个li独占一行

     03.适用于我们的新闻列表，导航栏

    -->

</head>

<body>

<ul>

    <li>好好学习</li>

    <li>好好学习</li>

    <li>好好学习</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>有序列表</title>

    <!--

      01.有顺序，前面默认是阿拉伯数字

      02.适用与试卷 和问卷调查！

    -->

</head>

<body>

   <ol>

       <li>好好学习</li>

       <li>好好学习</li>

       <li>好好学习</li>

   </ol>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>自定义列表</title>

    <!--

       01.每个dt  dd都独占一行

       02.默认前面没有任何标记

       03.适用于一个标题下，有多个列表项的场景

    -->

</head>

<body>

  <dl>

      <dt>C盘</dt>

      <dd>文件1</dd>

      <dd>文件2</dd>

      <dt>D盘</dt>

      <dd>文件1</dd>

      <dd>文件2</dd>

  </dl>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>表格</title>

    <!--

      01.简单易用，便于阅读

      02.结构简单

      table中的属性：

       01.border： 边框的像素

       02.cellpadding 设置内容和单元格之间的距离

       03.cellspacing 设置单元格和单元格之间的距离

       04.bgcolor  整个表格的背景色    #ffc0cb :代表的是16进制的颜色码

       05.width   表格在浏览器中的宽度比

 td节点中的

     align="left"     默认

     align="right"

     align="center"

    -->

</head>

<body>

    <table border="1px" cellpadding="5px" cellspacing="5px"

            bgcolor="pink" width="50%">

        <tr>

             <td>第1行的第1列</td>

             <td>第1行的第2列</td>

             <td>第1行的第3列</td>

        </tr>

        <tr>

             <td>第2行的第1列</td>

             <td>第2行的第2列</td>

             <td>第3行的第3列</td>

        </tr>

    </table>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>跨行跨列</title>

    <!--

    都必须写在td中

        rowspan :跨行

        colspan:跨列

    -->

</head>

<body>

  <table border="1px" cellpadding="5px">

        <tr>

            <td colspan="3"  align="center"> 学生成绩表</td>

        </tr>

        <tr>

             <td rowspan="2">张三</td>

             <td>math</td>

             <td>80</td>

        </tr>

        <tr>

             <td>java</td>

             <td>90</td>

        </tr>

        <tr>

             <td rowspan="2">李四</td>

             <td>math</td>

             <td>85</td>

        </tr>

        <tr>

             <td>java</td>

             <td>95</td>

        </tr>

  </table>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>高级表格</title>

</head>

<body>

<table border="1" cellspacing="0" width="70%">

   <caption>年终数据报表</caption>  <!--标题-->

      <thead bgcolor="red">   <!--页眉-->

          <tr>

               <th>月份</th>

               <th>收入</th>

          </tr>

      </thead>

        <tbody bgcolor="pink">  <!--主体-->

        <tr>

            <td>1月份</td>

            <td>5000</td>

        </tr>

        <tr>

            <td>2月份</td>

            <td>5000</td>

        </tr>

        <tr>

            <td>3月份</td>

            <td>6000</td>

        </tr>

        <tr>

            <td>4月份</td>

            <td>8000</td>

        </tr>

        </tbody>

        <tfoot bgcolor="green">  <!--页脚-->

           <tr>

               <td>平均月收入</td>

               <td>6000</td>

           </tr>

           <tr>

               <td>总收入</td>

               <td>24000</td>

           </tr>

        </tfoot>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>音频标签</title>

    <!--

    audio:音频标签

    controls：是否显示 控制条

    autoplay：是否自动播放

    -->

</head>

<body>

   <audio controls autoplay>

        <source src="../audio/music.mp3">

   </audio>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>视频标签</title>

    <!--

    video:视频标签

    controls：是否显示 控制条

    autoplay：是否自动播放

    -->

</head>

<body>

  <video controls  autoplay src="../video/video.mp4"> </video>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>结构元素</title>

    <!--

     用于网页的布局：

      header: 头部区域

      section：html页面中的一块独立的部分

      footer：脚部区域

      nav:导航菜单

      article:独立的文章内容

      aside：常用于侧边栏

    -->

    <style type="text/css">

        header{

             height: 20px;

            border: 1px solid red;

        }

        section{

            height: 1000px;

            border: 1px solid black;

        }

        footer{

            height: 50px;

            border: 1px solid blue;

        }

    </style>

</head>

<body>

  <header>

  </header>

 <section>

 </section>

 <footer>

 </footer>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>内联框架</title>

    <!--

    src ：指的是 我们需要引入的外部文件地址

   需求：

     用户点击不同的超链接，在iframe框架中 显示不同的页面！

    -->

</head>

<body>

  <a  href="http://www.jd.com" target="myIframe">京东</a>

  <a  href="http://www.taobao.com"  target="myIframe">淘宝</a>

  <a  href="http://www.baidu.com"  target="myIframe">百度</a>

    <iframe name="myIframe" src="http://www.baidu.com" scrolling="no"  width="500" height="500"></iframe>

</body>

</html>