笔记记录：02列表

0、回顾之前的知识

<!--<h1>北京是中国的<p>首都</h1></p>-->
 <h1>
     北京是中国的
     <p>
         首都
     </p>
 </h1>

HTML5 简介https://www.w3school.com.cn/html/html5_intro.asp

W3school一个学习网站，遇到需要查询的标签，可以在其中查询。

1、列表

 

如上图所示，将一些信息进行排列展示，一般情况下，列表默认是使用竖列进行展示，我们能后期可以进行结构的调整。

列表一般分为三种格式展示:

1、无序列表

2、有序列表

3、定义列表

1、1无序列表

无序列表的特性：

1、没有顺序，每个<li>标签独占一行，每个<li>标签属于一个块元素

2、具体实现如下：

 <!--
         使用
             style="list-style:url(/day02/img/蓝点.png);"
         可以使用图片替换序列位置(默认实心圆)
         type = "disc"
         disc    默认值，实心圆。
         circle  空心圆
         square  实心方块
 ​
     -->
     <ul type="circle" >
         <li><a href="http://www.com">乌克兰近期局势</a></li>
         <li>俩会</li>
         <li> 深圳疫情</li>
         <li>KB18第一节课</li>
         <li>HTML5基础基本使用方法</li>
         <li>自己写了第一个HTML页面</li>
     </ul>

1、2有序列表

 <!--
         ol标签是有序标签
         可以使用ol标签的tpye属性将序号从1 2 3 修改
         type
         1 阿拉伯数字（默认情况）
         a 小写的英文数字（abc）
         A 大写的英文数字（ABC）
         i 小写的罗马数字（i ii iii iv v）
         I 大写的罗马数字（I II III IV V）
         start属性 修改起点位置
         录入的数字为为其实位置
     -->
     <ol type="a" start="2">
         <li>
             170字/分钟
         </li>
         <li>
             160字/分钟
         </li>
         <li>
             150字/分钟
         </li>
     </ol>

1、3自定义列表

<!--
         没有顺序，每个<dt>标签，<dd>标签独占一行（块元素）
         默认没有标记
         一般用于一个标题下有一个或多个列表的情况
     -->
     <dl>
         <dt>
             推荐图书
         </dt>
         <dd>
             《java》
         </dd>
         <dd>
             《java从入门到放弃》
         </dd>
         <dd>
             《java从入门到放弃》
         </dd>
         <dd>
             非暴力沟通
         </dd>
         <dt>
             推荐游戏
         </dt>
         <dd>
             《古墓丽影》
         </dd>
         <dd>
             《原神》
         </dd>
         <dd>
             《LOL》
         </dd>
     </dl>

2、表格

 

<!--
                     座位表
             编号  1   2   3   4
             第一行 1   2   3   4
             第二行 1   2   3   4
         
         table标签中所使用的属性：
         <tr>标签 表格中每一行的标签
         <td>标签 表格中每个单元格的标签
         <th>标签 表头标签和<td>不同的是：加粗 居中
         border设置边框的大小（单位为px）
         cellspacing 设置单元格和边框之间的空隙
         （如果设置了边框大小-border但是不设置cellspacing会默认存在设置为0会没有空隙）
         <table>.align="center"更改表格的位置 center居中，left居左，right居右。
         <tr>.align="center"更改当前tr标签中的td，th元素内容位置。
         <td>|<th>.align="center"更改当前内容中的位置
         <table>|<tr>|<td>|<th>|.background="img/蓝点.png"修改背景图片，将选中图片平铺
             与对应范围内(table全表,tr全行,td,th单元格)
         <th>|<td>.colspan="2" 跨列属性，会将当前单元格多张俩列
          <th>|<td>.rowspan="2" 跨行属性，会将当前单元格多张俩行
     -->
     <h2>座位表</h2>
     <table border="1" cellspacing="1">
         <tr>
             <th>编号</th>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
         </tr>
         <tr>
             <td>第一行</td>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
         </tr>
         <tr>
             <td>第二行</td>
             <td>1</td>
             <td>2</td>
             <td>3</td>
             <td>4</td>
         </tr>
     </table>

3、HTML5结构元素

 

4、HTML5基础框架（iframe标签）

 <!--主页面代码-->
 <!--最上层欢迎页面-->
 <header>
     <h2>
         邮箱欢迎XXX
     </h2>
 </header>
 <!--section主体内容，主体内容，分左右俩侧 -->
 <section>
     <!--左侧栏，邮箱左栏.html-->
     <iframe src = "邮箱左栏.html" name="email" width="10%" height="800px">
 </iframe>
     <!--右侧栏，邮箱栏，根据左侧的结果进行跳转-->
     <iframe name="emailRight" width="88%" height="800px"></iframe>
 </section>
 ​
 <!-- 邮箱左栏.html代码-->
 <ul>
     <li>
         <a href="写邮件.html" target="emailRight">写邮箱</a>
     </li>
     <li>
         <a href="发件箱.html" target="emailRight">发件箱</a>
     </li>
     <li>
         <a href="收件箱.html" target="emailRight">收件箱</a>
     </li>
     <li>
         <a href="草稿箱.html" target="emailRight">草稿箱</a>
     </li>
     <li>
         <a href="回收站.html" target="emailRight">回收站</a>
     </li>
 </ul>

iframe标签会通过src指向的位置，将代码和当前页面进行一个拼接，所以以上示例中，我们在”邮箱左栏.html“的代码里，a标签的target属性，可以直接引用不在他这个页面的代码位置。

5、媒体元素

视频：

 <!--<from method="post" sction="test.html">
         <p>名字：<input name="name" type="text"></p>
         <p>  密码：<input name="pass" type="password" >  </p>
 ​
     </from>
     <p>
     <input type="submit" name="Button" value="登录">
     <input type="reset" name="reset" value="重写"></p>
     -->
     <!--
         可以使用video标签在我们的页面中新增一段视频资源。
         video标签的属性有
         src引用路径-相对路径、绝对路径
         type用来指出视频的格式内容
         video标签可以用source标签来标明资源来源
         一个video标签可以同时拥有多个source标签来表明来源
         controls属性标记这个视频有用自己的控制器，你可以使用以下方式来写
             1、controls="control"
             2、controls="true"
             3、controls
         autoply属性，会让页面加载后视频自动播放
         width="2000px" height="500px"设置宽度和高度
         在HTML5存在video标签之前，可以使用embed标签实现
     -->
     <!--<video src="/day03/video/meeting_01.mp4" controls></video>-->
     <video controls autoplay width="800" height="600">
         <source src="/day03/video/vedio.avi" type="video/avi"/>
         <source src="/day03/video/vedio.mp4" type="video/mp4"/>
         <source src="/day03/video/video.webm" type="video/webm"/>
     </video>

音频：

<!--
         可以使用audio标签在我们的页面中新增一段视频资源。
         audio标签的属性有
         src引用路径-相对路径、绝对路径
         type用来指出视频的格式内容
         audio标签可以用source标签来标明资源来源
         一个audio标签可以同时拥有多个source标签来表明来源
         controls属性标记这个视频有用自己的控制器，你可以使用以下方式来写
             1、controls="control"
             2、controls="true"
             3、controls
         autoply属性，会让页面加载后视频自动播放
         width="2000px" height="500px"设置宽度和高度
         在HTML5存在audio标签之前，可以使用embed标签实现
     -->
     <audio controls autoplay width="800" height="600">
         <source src="/day03/video/vedio.mp3" type="audio/mp3"/>
         <source src="/day03/video/video.ogg" type="audio/ogg"/>
     </audio>