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

最新推荐文章于 2022-06-17 15:22:06 发布

马兆娟

最新推荐文章于 2022-06-17 15:22:06 发布

阅读量357

点赞数

分类专栏： # H5C3

本文链接：https://blog.csdn.net/mazhaojuan/article/details/103595861

版权

H5C3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、列表

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

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.自定义列表

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>

    <dt>蔬菜</dt>
    <dd>白菜</dd>
    <dd>黄瓜</dd>
    <dd>西红柿</dd>
</dl>

定义列表特性：

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

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

 <table  border="1" ><!--border="1" 边框为1-->
      <tr>
        <td colspan="3">学生成绩</td>   <!-- colspan="3"  跨3列-->
      </tr>
      <tr>
        <td rowspan="2">张三</td>  <!-- rowspan="2"  跨2行-->
        <td>语文</td>
        <td>98</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>95</td>
      </tr>
      <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>88</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>91</td>
      </tr>
    </table>

效果图：

三、媒体元素

视频 video 音频audio

<!--视频-->
<video controls autoplay><!--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的结构元素

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>网易邮箱页面布局</title>
    <!--此段代码只是让大家能更好的看到每块元素的位置，后面在CSS中会具体讲解-->
    <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>

效果图：