1.列表

定义：列表就是信息资源的一种展示形式，它可以是信息结构化和条理化，并以列表的样式显示出来，以便浏览者可以更快捷的获取相应的信息。

1.1无序列表

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <ul>
      <li>吴亦凡强奸少女</li>
      <li>汪峰要开演唱会</li>
      <li>萧敬腾要去非洲</li>
    </ul>
  </body>
</html>


1.2有序列表

<ol>
  <li>周一</li>
  <li>周二</li>
  <li>周三</li>
      
</ol>


1.3定义列表

<dl>
        <dt>水果</dt>
  <dd>蓝莓</dd>
  <dd>香蕉</dd>
  <dd>榴莲</dd>
      
</dl>


1.4三者区别

HTML进阶_结构化

2.表格

基本语法

<table >表格标签
      <tr style="text-align: center;" >行标签
        <td>1行1列</td>单元格标签
        <td>1行2列</td>
        <td>1行3列</td>
        
      </tr>
      <tr>
        <td>2行1列</td>
        <td>2行2列</td>
        <td>2行3列</td>
      </tr>
      <tr>
        <td>3行1列</td>
        <td>3行2列</td>
        <td>3行3列</td>
      </tr>
    </table>


2.1表格的跨列

<table border="1">
      <tr style="text-align: center;" >
        <td colspan="3">成绩</td>colspan跨行
        
      </tr>
      <tr>
        <td>2行1列</td>
        <td>2行2列</td>
        <td>2行3列</td>
      </tr>
      <tr>
        <td>3行1列</td>
        <td>3行2列</td>
        <td>3行3列</td>
      </tr>
    </table>


2.2表格的跨行

<table border="1px" >
      <tr>
        <td rowspan="2">赵四</td>
        <td>语文</td>
        <td>88</td>
        </tr>
      <tr>
        <td>数学</td>
        <td>99</td>
      </tr>
      <tr>
        <td rowspan="2">广坤</td>
        <td>语文</td>
        <td>66</td>
        
      </tr>
      <tr>
        <td>数学</td>
        <td>100</td>
      </tr>
    </table>


3.视频元素添加
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!-- contorls播放按钮  autoplay自动播放 -->
    <video  controls="controls" autoplay="autoplay" >
      <source src="../video.mp4" type="video/m4v"></source>
      <source src = "../video.webm" type = "video/webm"></source>
    </video>
  </body>
</html>


4.音频添加
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!-- controls 播放按钮 autoplay自动播放 -->
    <audio controls="controls" autoplay="autoplay">
      <source src = "../music.mp3" type="audio/mp3"></source>
      <source src ="../music.ogg" type ="audio/ogg"></source>
    </audio>
  </body>
</html>


5.页面结构元素
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!-- style 规格 border 边框大小 solid 边框颜色 background-color 底纹颜色 
    header 头部 section 主体 footer脚部-->
    <header style="width: 100%; height: 100px; border: 1px solid red; background-color: red;">
      欢迎光临大聪明洗脚城，请选择服务项目<br>
      <strong><a>搓澡</a></strong><strong><a>刮痧</a></strong>
    </header>
    <section style="width: 100%;height: 500px;border: 1px solid red ;background-color: greenyellow;">
      <p>本洗脚城开始于1988年，已有30余年历史，全国各地多家分店...</p>
    </section>
    <footer style="width: 100%;height: 100px; border: 5px solid black; background-color: aqua;">
      <p>加盟热线：8898888 地址：郑州市二七区海为科技园 &copy;大聪明出品必属精品</p>
    </footer>
  </body>
</html>


6.内联框架
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!-- 内联框架 浏览器上的一个区域 用于显示我们 想要的内容 -->
    <iframe src="index3.html" name="myFrame" width="200px" height="200px"></iframe>
    
    
    <a href="http://www.qq.com" target="myFrame">显示index2页面</a>
    
    
  </body>
</html>


7.总结

HTML进阶_结构化_02