第2章从0到1学H5C3____列表、表格与媒体元素

深碍√TFBOYSˉ_ 2023-06-23 09:52 15阅读 0赞

**目录**

一、列表

1.有序列表

2.无序列表（重要）

3.自定义列表

二、表格（主要用于数据显示）

三、媒体元素

四、html5的结构元素

五、本章小结

--------------------

# 一、列表 #

列表分为有序列表、无序列表和自定义列表

##      1.有序列表 ##

<ol>
        <li>范雪雪演藏族女孩</li>
        <li>撞死两个人后自拍</li>
        <li>诗隆甜蜜出游</li>
        <li>一线城市楼市退烧</li>
    </ol>

**有序列表特性**：

*  有顺序，每个<li>标签独占一行（块元素）
 *  默认<li>标签项前面有顺序标记
 *  一般用于排序类型的列表，如试卷、问卷选项等

有序列表标签，默认在网页中会以 1. 2. 3.往下排，但在 ol 后边加上 type= “1/a/A/i/I ”，他就会以指定的排序方式往下排（共五种排序方式，我写的/在笔记 中代表的是或者的意思，结束符不算哈），在 ol 后边加上 reversed=“reversed”，则 以倒序排列，在 ol 后边加上 start=“2”，则以第二个往下排，引号里可以只写数字， 写数字几，则从第几个开始往下排。ol 和 li 在实际开发中基本上不用。

##       2.无序列表（重要） ##

<ul>
      <li>范冰冰演藏族女孩</li>
      <li>撞死两个人后自拍</li>
      <li>诗隆甜蜜出游</li>
      <li>一线城市楼市退烧</li>
    </ul>

**无序列表特性：**

*  没有顺序，每个<li>标签独占一行（块元素）
 *  默认<li>标签项前面有个实心小圆点
 *  一般用于无序类型的列表，如**导航、侧边栏新闻**、有规律的图文组合模块

无序列表标签，默认前边为小黑点，即属性为 type=“disc”，小方块为 type= “square”，小圆圈为 type=“circle”   
ul 和 li 致力于做一些功能，有一些功能特别符合 ul 和 li 的父子结构，比如说有一个 功能，这个功能由许多的功能子项来组成，每一个功能子项的功能和样式基本上都是 相同的，只不过他们的内容有一些差异，很多的功能子项组成了一个大功能，这样的 东西我们就用 ul 和 li 来展示，因为 ul 和 li 更符合他天生的结构。

##       3.自定义列表 ##

**定义列表特性：**

*  没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
 *  默认没有标记
 *  一般用于一个标题下有一个或多个列表项的情况（使用较少）

# 二、表格（主要用于数据显示） #

**  效果图：**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70][]

# 三、媒体元素 #

视频 video     音频audio

<video controls autoplay>
        <source src="video/video.webm" type="video/webm"/>
        <source src="video/video.mp4" type="video/mp4"/>
        你的浏览器不支持video元素
    </video>
    
    
    <audio controls>
        <source src="music/music.mp3" type="audio/mpeg"/>
        <source src="music/music.ogg" type="audio/ogg"/>
        你的浏览器不支持audio元素
    </audio>

# 四、html5的结构元素 #

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:118pt;"> <p style="margin-left:0in;"><span style="color:#FFFFFF;"><strong>元素名</strong></span></p> </td> 
   <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:476pt;"> <p style="margin-left:0in;"><span style="color:#FFFFFF;"><strong>描&nbsp; 述</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:118pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>header</strong></span></p> </td> 
   <td style="border-color:#2163b4;vertical-align:middle;width:476pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>标题头部区域的内容（用于页面或页面中的一块区域）</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:118pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>footer</strong></span></p> </td> 
   <td style="border-color:#2163b4;vertical-align:middle;width:476pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>标记脚部区域的内容（用于整个页面或页面的一块区域）</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:118pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>section</strong></span></p> </td> 
   <td style="border-color:#2163b4;vertical-align:middle;width:476pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>Web</strong></span><span style="color:#000000;"><strong>页面中的一块独立区域</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:118pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>article</strong></span></p> </td> 
   <td style="border-color:#2163b4;vertical-align:middle;width:476pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>独立的文章内容</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:118pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>aside</strong></span></p> </td> 
   <td style="border-color:#2163b4;vertical-align:middle;width:476pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>相关内容或应用（常用于侧边栏）</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#2163b4;text-align:center;vertical-align:middle;width:118pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>nav</strong></span></p> </td> 
   <td style="border-color:#2163b4;vertical-align:middle;width:476pt;"> <p style="margin-left:0in;"><span style="color:#000000;"><strong>导航类辅助内容</strong></span></p> </td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>网易邮箱页面布局</title>
        
        <style>
            header,section,footer{
                height: 200px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <header>
            <h2>网页头部</h2>
        </header>
        <section>
            <h2>网页主体部分</h2>
        </section>
        <footer>
            <h2>网页底部</h2>
        </footer>
    </body>
    </html>

效果图：   ![20191218175843123.png][]

# 五、本章小结 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191218180442210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4=,size_16,color_FFFFFF,t_70
[20191218175843123.png]: https://img-blog.csdnimg.cn/20191218175843123.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191218180006354.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hemhhb2p1YW4=,size_16,color_FFFFFF,t_70